@travelopia/web-components 0.9.4 → 0.9.6

package/dist/declarations.d.ts

@@ -1161,7 +1161,7 @@ export class TPSliderElement extends HTMLElement {
      * Update stuff when any attribute has changed.
      * Example: Update sub-components.
      */
-    update(): void;
+    update(): Promise<void>;
     /**
      * Update the height of the slider based on current slide.
      */

package/dist/form/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";var e={d:(t,s)=>{for(var r in s)e.o(s,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:s[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{errorMessage:()=>u,name:()=>a,validator:()=>l});var s={};e.r(s),e.d(s,{errorMessage:()=>v,name:()=>d,validator:()=>h});var r={};e.r(r),e.d(r,{errorMessage:()=>m,name:()=>c,validator:()=>b});var i={};e.r(i),e.d(i,{errorMessage:()=>g,name:()=>p,validator:()=>f});var n={};e.r(n),e.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>A});const o=(e="")=>{const{tpFormErrors:t}=window;return t&&""!==e&&e in t&&"string"==typeof t[e]?t[e]:""},a="required",u="This field is required",l={validate:e=>{var t,s;return null!==(s=""!==(null===(t=e.getField())||void 0===t?void 0:t.value))&&void 0!==s?s:""},getErrorMessage:()=>o(a)},d="email",v="Please enter a valid email address",h={validate:e=>{var t,s;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(s=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==s?s:"")},getErrorMessage:()=>o(d)},c="min-length",m="Must be at least %1 characters",b={validate:e=>{var t,s,r;const i=parseInt(null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"0"),n=null!==(r=null===(s=e.getField())||void 0===s?void 0:s.value)&&void 0!==r?r:"";return""===n||n.length>=i},getErrorMessage:e=>{var t;const s=o(c),r=null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"";return s.replace("%1",r)}},p="max-length",g="Must be less than %1 characters",f={validate:e=>{var t,s,r;const i=parseInt(null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"0"),n=null!==(r=null===(s=e.getField())||void 0===s?void 0:s.value)&&void 0!==r?r:"";return""===n||n.length<=i},getErrorMessage:e=>{var t;const s=o(p),r=null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"";return s.replace("%1",r)}},E="no-empty-spaces",y="This field should not contain only white-spaces",A={validate:e=>{const t=e.getField();return!!t&&(""===t.value||""!==t.value.trim())},getErrorMessage:()=>o(E)};var M=function(e,t,s,r){return new(s||(s=Promise))((function(i,n){function o(e){try{u(r.next(e))}catch(e){n(e)}}function a(e){try{u(r.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(o,a)}u((r=r.apply(e,t||[])).next())}))};class w extends HTMLElement{constructor(){var e;super(),this.form=this.querySelector("form"),null===(e=this.form)||void 0===e||e.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(e){var t;return M(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation();const s=this.querySelector("tp-form-submit");null==s||s.setAttribute("submitting","yes"),"yes"!==this.getAttribute("suspense")&&((yield this.validate())?(this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0})),"yes"!==this.getAttribute("prevent-submit")&&(null===(t=this.form)||void 0===t||t.submit())):null==s||s.removeAttribute("submitting"))}))}validate(){return M(this,void 0,void 0,(function*(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const e=this.querySelectorAll("tp-form-field");if(!e)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;this.setAttribute("suspense","yes");let t=!0;const s=Array.from(e).map((e=>M(this,void 0,void 0,(function*(){return yield e.validate()}))));return yield Promise.all(s).then((e=>{t=e.every((e=>e))})).catch((()=>{t=!1})).finally((()=>this.removeAttribute("suspense"))),t?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),t}))}validateField(e){return M(this,void 0,void 0,(function*(){this.setAttribute("suspense","yes");const t=yield e.validate();return this.removeAttribute("suspense"),t}))}resetValidation(){const e=this.querySelectorAll("tp-form-field");if(!e)return;e.forEach((e=>{e.removeAttribute("valid"),e.removeAttribute("error"),e.removeAttribute("suspense")})),this.removeAttribute("suspense");const t=this.querySelector("tp-form-submit");null==t||t.removeAttribute("submitting")}}class S extends HTMLElement{constructor(){super();const e=this.getField();null==e||e.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==e||e.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){if("no"!==this.getAttribute("revalidate-on-change")&&(this.getAttribute("valid")||this.getAttribute("error"))){const e=this.closest("tp-form");null==e||e.validateField(this)}}static get observedAttributes(){return["valid","error","suspense"]}attributeChangedCallback(e="",t="",s=""){"valid"!==e&&"error"!==e&&"suspense"!==e||t===s||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var e,t,s;const{tpFormValidators:r}=window;if(!r)return;const i=null!==(e=this.getAttribute("error"))&&void 0!==e?e:"";""!==i&&i in r&&"function"==typeof r[i].getErrorMessage?this.setErrorMessage(r[i].getErrorMessage(this)):this.removeErrorMessage();const n=null!==(t=this.getAttribute("suspense"))&&void 0!==t?t:"";""!==n&&n in r&&"function"==typeof r[n].getSuspenseMessage?this.setSuspenseMessage(null===(s=r[n])||void 0===s?void 0:s.getSuspenseMessage(this)):this.removeSuspenseMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){return e=this,t=void 0,r=function*(){const{tpFormValidators:e}=window;if(!e)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let t=!0,s=null,r="";return this.getAttributeNames().every((i=>{if(i in e&&"function"==typeof e[i].validate){const n=e[i].validate(this);if(r=i,n instanceof Promise)return t=!1,this.dispatchEvent(new CustomEvent("validation-suspense-start")),s=new Promise(((e,t)=>{n.then((t=>{!0===t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),e(!0)):(this.removeAttribute("valid"),this.setAttribute("error",r),e(!1)),this.dispatchEvent(new CustomEvent("validation-suspense-success"))})).catch((()=>{this.removeAttribute("valid"),this.setAttribute("error",r),this.dispatchEvent(new CustomEvent("validation-suspense-error")),t(!1)})).finally((()=>{this.removeAttribute("suspense")}))})),!1;if(!1===n)return t=!1,!1}return!0})),t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),this.removeAttribute("suspense")):(this.removeAttribute("valid"),s?(this.setAttribute("suspense",r),this.removeAttribute("error")):(this.removeAttribute("suspense"),this.setAttribute("error",r))),s||t},new((s=void 0)||(s=Promise))((function(i,n){function o(e){try{u(r.next(e))}catch(e){n(e)}}function a(e){try{u(r.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(o,a)}u((r=r.apply(e,t||[])).next())}));var e,t,s,r}setErrorMessage(e=""){const t=this.querySelector("tp-form-error");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-error");t.innerHTML=e,this.appendChild(t)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var e;null===(e=this.querySelector("tp-form-error"))||void 0===e||e.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}setSuspenseMessage(e=""){const t=this.querySelector("tp-form-suspense");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-suspense");t.innerHTML=e,this.appendChild(t)}}removeSuspenseMessage(){var e;null===(e=this.querySelector("tp-form-suspense"))||void 0===e||e.remove()}}class F extends HTMLElement{}class C extends HTMLElement{}class x extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(e="",t="",s=""){t!==s&&this.update()}update(){var e,t;const s=this.querySelector('button[type="submit"]');if(!s)return;const r=null!==(e=this.getAttribute("submitting-text"))&&void 0!==e?e:"",i=null!==(t=this.getAttribute("original-text"))&&void 0!==t?t:s.innerHTML;"yes"===this.getAttribute("submitting")?(s.setAttribute("disabled","disabled"),this.setAttribute("original-text",i),s.innerHTML=r):(s.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),s.innerHTML=i)}}const T=[t,s,r,i,n];window.tpFormValidators={},window.tpFormErrors={},window.tpFormSuspenseMessages={},T.forEach((({name:e,validator:t,errorMessage:s})=>{window.tpFormValidators[e]=t,window.tpFormErrors[e]=s})),customElements.define("tp-form",w),customElements.define("tp-form-field",S),customElements.define("tp-form-error",F),customElements.define("tp-form-suspense",C),customElements.define("tp-form-submit",x)})();
+(()=>{"use strict";var e={d:(t,r)=>{for(var s in r)e.o(r,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:r[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{errorMessage:()=>l,name:()=>u,validator:()=>d});var r={};e.r(r),e.d(r,{errorMessage:()=>h,name:()=>v,validator:()=>c});var s={};e.r(s),e.d(s,{errorMessage:()=>b,name:()=>m,validator:()=>p});var i={};e.r(i),e.d(i,{errorMessage:()=>f,name:()=>g,validator:()=>A});var n={};e.r(n),e.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>M});var o={};e.r(o),e.d(o,{errorMessage:()=>S,name:()=>w,validator:()=>F});const a=(e="")=>{const{tpFormErrors:t}=window;return t&&""!==e&&e in t&&"string"==typeof t[e]?t[e]:""},u="required",l="This field is required",d={validate:e=>{var t,r;return null!==(r=""!==(null===(t=e.getField())||void 0===t?void 0:t.value))&&void 0!==r?r:""},getErrorMessage:()=>a(u)},v="email",h="Please enter a valid email address",c={validate:e=>{var t,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"")},getErrorMessage:()=>a(v)},m="min-length",b="Must be at least %1 characters",p={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length>=i},getErrorMessage:e=>{var t;const r=a(m),s=null!==(t=e.getAttribute("min-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},g="max-length",f="Must be less than %1 characters",A={validate:e=>{var t,r,s;const i=parseInt(null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"0"),n=null!==(s=null===(r=e.getField())||void 0===r?void 0:r.value)&&void 0!==s?s:"";return""===n||n.length<=i},getErrorMessage:e=>{var t;const r=a(g),s=null!==(t=e.getAttribute("max-length"))&&void 0!==t?t:"";return r.replace("%1",s)}},E="no-empty-spaces",y="This field should not contain only white-spaces",M={validate:e=>{const t=e.getField();return!!t&&(""===t.value||""!==t.value.trim())},getErrorMessage:()=>a(E)},w="zip",S="Please enter a valid zip code",F={validate:e=>{var t,r;const s=null!==(r=null===(t=e.getField())||void 0===t?void 0:t.value)&&void 0!==r?r:"",i=e.getAttribute("regex");return new RegExp(null!=i?i:"^[A-Za-z0-9][A-Za-z0-9\\- ]{1,8}[A-Za-z0-9]$").test(s.trim())},getErrorMessage:()=>a(w)};var x=function(e,t,r,s){return new(r||(r=Promise))((function(i,n){function o(e){try{u(s.next(e))}catch(e){n(e)}}function a(e){try{u(s.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}u((s=s.apply(e,t||[])).next())}))};class C extends HTMLElement{constructor(){var e;super(),this.form=this.querySelector("form"),null===(e=this.form)||void 0===e||e.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(e){var t;return x(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation();const r=this.querySelector("tp-form-submit");null==r||r.setAttribute("submitting","yes"),"yes"!==this.getAttribute("suspense")&&((yield this.validate())?(this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0})),"yes"!==this.getAttribute("prevent-submit")&&(null===(t=this.form)||void 0===t||t.submit())):null==r||r.removeAttribute("submitting"))}))}validate(){return x(this,void 0,void 0,(function*(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const e=this.querySelectorAll("tp-form-field");if(!e)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;this.setAttribute("suspense","yes");let t=!0;const r=Array.from(e).map((e=>x(this,void 0,void 0,(function*(){return yield e.validate()}))));return yield Promise.all(r).then((e=>{t=e.every((e=>e))})).catch((()=>{t=!1})).finally((()=>this.removeAttribute("suspense"))),t?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),t}))}validateField(e){return x(this,void 0,void 0,(function*(){this.setAttribute("suspense","yes");const t=yield e.validate();return this.removeAttribute("suspense"),t}))}resetValidation(){const e=this.querySelectorAll("tp-form-field");if(!e)return;e.forEach((e=>{e.removeAttribute("valid"),e.removeAttribute("error"),e.removeAttribute("suspense")})),this.removeAttribute("suspense");const t=this.querySelector("tp-form-submit");null==t||t.removeAttribute("submitting")}}class T extends HTMLElement{constructor(){super();const e=this.getField();null==e||e.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==e||e.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){if("no"!==this.getAttribute("revalidate-on-change")&&(this.getAttribute("valid")||this.getAttribute("error"))){const e=this.closest("tp-form");null==e||e.validateField(this)}}static get observedAttributes(){return["valid","error","suspense"]}attributeChangedCallback(e="",t="",r=""){"valid"!==e&&"error"!==e&&"suspense"!==e||t===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var e,t,r;const{tpFormValidators:s}=window;if(!s)return;const i=null!==(e=this.getAttribute("error"))&&void 0!==e?e:"";""!==i&&i in s&&"function"==typeof s[i].getErrorMessage?this.setErrorMessage(s[i].getErrorMessage(this)):this.removeErrorMessage();const n=null!==(t=this.getAttribute("suspense"))&&void 0!==t?t:"";""!==n&&n in s&&"function"==typeof s[n].getSuspenseMessage?this.setSuspenseMessage(null===(r=s[n])||void 0===r?void 0:r.getSuspenseMessage(this)):this.removeSuspenseMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){return e=this,t=void 0,s=function*(){const{tpFormValidators:e}=window;if(!e)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let t=!0,r=null,s="";return this.getAttributeNames().every((i=>{if(i in e&&"function"==typeof e[i].validate){const n=e[i].validate(this);if(s=i,n instanceof Promise)return t=!1,this.dispatchEvent(new CustomEvent("validation-suspense-start")),r=new Promise(((e,t)=>{n.then((t=>{!0===t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),e(!0)):(this.removeAttribute("valid"),this.setAttribute("error",s),e(!1)),this.dispatchEvent(new CustomEvent("validation-suspense-success"))})).catch((()=>{this.removeAttribute("valid"),this.setAttribute("error",s),this.dispatchEvent(new CustomEvent("validation-suspense-error")),t(!1)})).finally((()=>{this.removeAttribute("suspense")}))})),!1;if(!1===n)return t=!1,!1}return!0})),t?(this.setAttribute("valid","yes"),this.removeAttribute("error"),this.removeAttribute("suspense")):(this.removeAttribute("valid"),r?(this.setAttribute("suspense",s),this.removeAttribute("error")):(this.removeAttribute("suspense"),this.setAttribute("error",s))),r||t},new((r=void 0)||(r=Promise))((function(i,n){function o(e){try{u(s.next(e))}catch(e){n(e)}}function a(e){try{u(s.throw(e))}catch(e){n(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}u((s=s.apply(e,t||[])).next())}));var e,t,r,s}setErrorMessage(e=""){const t=this.querySelector("tp-form-error");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-error");t.innerHTML=e,this.appendChild(t)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var e;null===(e=this.querySelector("tp-form-error"))||void 0===e||e.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}setSuspenseMessage(e=""){const t=this.querySelector("tp-form-suspense");if(t)t.innerHTML=e;else{const t=document.createElement("tp-form-suspense");t.innerHTML=e,this.appendChild(t)}}removeSuspenseMessage(){var e;null===(e=this.querySelector("tp-form-suspense"))||void 0===e||e.remove()}}class L extends HTMLElement{}class q extends HTMLElement{}class H extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(e="",t="",r=""){t!==r&&this.update()}update(){var e,t;const r=this.querySelector('button[type="submit"]');if(!r)return;const s=null!==(e=this.getAttribute("submitting-text"))&&void 0!==e?e:"",i=null!==(t=this.getAttribute("original-text"))&&void 0!==t?t:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",i),r.innerHTML=s):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=i)}}const P=[t,r,s,i,n,o];window.tpFormValidators={},window.tpFormErrors={},window.tpFormSuspenseMessages={},P.forEach((({name:e,validator:t,errorMessage:r})=>{window.tpFormValidators[e]=t,window.tpFormErrors[e]=r})),customElements.define("tp-form",C),customElements.define("tp-form-field",T),customElements.define("tp-form-error",L),customElements.define("tp-form-suspense",q),customElements.define("tp-form-submit",H)})();
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -1 +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-suspense.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\t// Check if tpFormErrors exist in the window object.\n\tconst { tpFormErrors } = window;\n\n\t// If tpFormErrors does not exist.\n\tif ( ! tpFormErrors ) {\n\t\t// Return an empty string.\n\t\treturn '';\n\t}\n\n\t// Check if the error exists and has a corresponding error message.\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\t// Return the error message.\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\t// Return an empty string.\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\t// Validate.\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\n\t// Get error message.\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\t// Boolean value to determine if the field is valid or not.\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\t// Get min length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\t// Return error message.\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\t// Get max length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\t// Return error message.\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 white-spaces';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\tconst inputField = field.getField();\n\n\t\t// If no field is found return false.\n\t\tif ( ! inputField ) {\n\t\t\t// Return false.\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\t// Return true.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Return true if field is not empty.\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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get form.\n\t\tthis.form = this.querySelector( 'form' );\n\n\t\t// Add event listeners.\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 async handleFormSubmit( e: SubmitEvent ): Promise<void> {\n\t\t// Stop normal form submission.\n\t\te.preventDefault();\n\t\te.stopImmediatePropagation();\n\n\t\t// Get submit button.\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.setAttribute( 'submitting', 'yes' );\n\n\t\t// Ignore a form that currently has suspense.\n\t\tif ( 'yes' === this.getAttribute( 'suspense' ) ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Validate the form.\n\t\tconst formValid: boolean = await this.validate();\n\n\t\t// If form is valid then dispatch a custom 'submit-validation-success' event.\n\t\tif ( formValid ) {\n\t\t\t// Trigger event.\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\n\t\t\t// Submit form.\n\t\t\tif ( 'yes' !== this.getAttribute( 'prevent-submit' ) ) {\n\t\t\t\tthis.form?.submit();\n\t\t\t}\n\t\t} else {\n\t\t\t// Form is not valid, remove submitting attribute.\n\t\t\tsubmit?.removeAttribute( 'submitting' );\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\tasync validate(): Promise<boolean> {\n\t\t// Dispatch a custom 'validate' event.\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found, return true indicating validation passed.\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\n\t\t\t// Return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Start by setting the form as suspense.\n\t\tthis.setAttribute( 'suspense', 'yes' );\n\n\t\t// Check if all fields are valid.\n\t\tlet formValid: boolean = true;\n\t\tconst validationPromises: Promise<boolean>[] = Array\n\t\t\t.from( fields )\n\t\t\t.map( async ( field: TPFormFieldElement ): Promise<boolean> => await field.validate() );\n\n\t\t// Wait for promises to resolve.\n\t\tawait Promise.all( validationPromises )\n\t\t\t.then( ( results: boolean[] ): void => {\n\t\t\t\t// Check if all fields are valid.\n\t\t\t\tformValid = results.every( ( isValid: boolean ) => isValid );\n\t\t\t} )\n\t\t\t.catch( () => {\n\t\t\t\t// There was an error with one or more fields.\n\t\t\t\tformValid = false;\n\t\t\t} )\n\t\t\t.finally( () => this.removeAttribute( 'suspense' ) );\n\n\t\t// If form is valid then dispatch a custom 'validation-success' event else send a custom 'validation-error' event.\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\t// Return whether the form is valid or not.\n\t\treturn formValid;\n\t}\n\n\t/**\n\t * Validate one field.\n\t *\n\t * @param {HTMLElement} field Field node.\n\t */\n\tasync validateField( field: TPFormFieldElement ): Promise<boolean> {\n\t\t// Set form as suspense, validate and undo suspense.\n\t\tthis.setAttribute( 'suspense', 'yes' );\n\t\tconst fieldValid: boolean = await field.validate();\n\t\tthis.removeAttribute( 'suspense' );\n\n\t\t// Return result.\n\t\treturn fieldValid;\n\t}\n\n\t/**\n\t * Reset form validation.\n\t */\n\tresetValidation(): void {\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found.\n\t\tif ( ! fields ) {\n\t\t\t// Exit the function.\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove 'valid' and 'error' attributes from all fields.\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\t// Remove 'valid' and 'error' and 'suspense' attributes.\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t\tfield.removeAttribute( 'suspense' );\n\t\t} );\n\n\t\t// Remove 'suspense' attribute from form.\n\t\tthis.removeAttribute( 'suspense' );\n\n\t\t// Remove 'submitting' attribute from submit button.\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 { TPFormElement } from './tp-form';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSuspenseElement } from './tp-form-suspense';\n\n/**\n * TP Form Field.\n */\nexport class TPFormFieldElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get field.\n\t\tconst field = this.getField();\n\n\t\t// Add event listeners.\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\t// Check if we want to ignore field revalidations.\n\t\tif ( 'no' === this.getAttribute( 'revalidate-on-change' ) ) {\n\t\t\t// Yes we do, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Validate the field again if 'valid' or 'error' attribute is present.\n\t\tif ( this.getAttribute( 'valid' ) || this.getAttribute( 'error' ) ) {\n\t\t\tconst form: TPFormElement | null = this.closest( 'tp-form' );\n\t\t\tform?.validateField( this );\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\t// Attributes observed in the TPFormFieldElement web-component.\n\t\treturn [ 'valid', 'error', 'suspense' ];\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\t// Check if the observed attributes 'valid' or 'error' have changed.\n\n\t\t// Dispatch a custom 'validate' event.\n\t\tif ( ( 'valid' === name || 'error' === name || 'suspense' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\n\t\t// Update the component after the attribute change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Check if tpFormValidators exist in the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the 'error' attribute value.\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\n\t\t// Check if the error exists and has a corresponding error message function.\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\n\t\t// Get the 'suspense' attribute value.\n\t\tconst suspense: string = this.getAttribute( 'suspense' ) ?? '';\n\n\t\t// Check if the suspense exists and has a corresponding suspense message function.\n\t\tif ( '' !== suspense && suspense in tpFormValidators && 'function' === typeof tpFormValidators[ suspense ].getSuspenseMessage ) {\n\t\t\t// @ts-ignore\n\t\t\tthis.setSuspenseMessage( tpFormValidators[ suspense ]?.getSuspenseMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeSuspenseMessage();\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\t// Return the associated field by querying input, select, or textarea elements.\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\tasync validate(): Promise<boolean> {\n\t\t// Retrieve tpFormValidators from the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t// If no validators are found, return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is visible.\n\t\tif ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {\n\t\t\t// If the field is not visible, return true indicating validation passed.\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 suspense: Promise<boolean> | null = null;\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\t// Check if the attribute is a validator.\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 | Promise<boolean> = tpFormValidators[ attributeName ].validate( this );\n\t\t\t\terror = attributeName;\n\n\t\t\t\t// First check for a Promise.\n\t\t\t\tif ( isValid instanceof Promise ) {\n\t\t\t\t\t// Yes it is an async validation.\n\t\t\t\t\tvalid = false;\n\n\t\t\t\t\t// Dispatch a custom 'validation-suspense-start' event.\n\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-start' ) );\n\n\t\t\t\t\t// Create the promise.\n\t\t\t\t\tsuspense = new Promise( ( resolve, reject ): void => {\n\t\t\t\t\t\t// Validate it.\n\t\t\t\t\t\tisValid\n\t\t\t\t\t\t\t.then( ( suspenseIsValid: boolean ) => {\n\t\t\t\t\t\t\t\t// Validation is complete.\n\t\t\t\t\t\t\t\tif ( true === suspenseIsValid ) {\n\t\t\t\t\t\t\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\t\t\t\t\t\t\tthis.removeAttribute( 'error' );\n\n\t\t\t\t\t\t\t\t\t// Resolve the promise.\n\t\t\t\t\t\t\t\t\tresolve( true );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.removeAttribute( 'valid' );\n\t\t\t\t\t\t\t\t\tthis.setAttribute( 'error', error );\n\n\t\t\t\t\t\t\t\t\t// Resolve the promise.\n\t\t\t\t\t\t\t\t\tresolve( false );\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// Dispatch a custom 'validation-suspense-success' event.\n\t\t\t\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-success' ) );\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t.catch( (): void => {\n\t\t\t\t\t\t\t\t// There was an error.\n\t\t\t\t\t\t\t\tthis.removeAttribute( 'valid' );\n\t\t\t\t\t\t\t\tthis.setAttribute( 'error', error );\n\n\t\t\t\t\t\t\t\t// Dispatch a custom 'validation-suspense-error' event.\n\t\t\t\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-error' ) );\n\n\t\t\t\t\t\t\t\t// Reject the promise.\n\t\t\t\t\t\t\t\treject( false );\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t.finally( (): void => {\n\t\t\t\t\t\t\t\t// Clean up.\n\t\t\t\t\t\t\t\tthis.removeAttribute( 'suspense' );\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t} );\n\n\t\t\t\t\t// Return.\n\t\t\t\t\treturn false;\n\t\t\t\t} else if ( false === isValid ) {\n\t\t\t\t\t// Not a Promise, but looks like we found an error!\n\t\t\t\t\tvalid = false;\n\n\t\t\t\t\t// Return.\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\tthis.removeAttribute( 'suspense' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\n\t\t\t// Check for suspense.\n\t\t\tif ( suspense ) {\n\t\t\t\tthis.setAttribute( 'suspense', error );\n\t\t\t\tthis.removeAttribute( 'error' );\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute( 'suspense' );\n\t\t\t\tthis.setAttribute( 'error', error );\n\t\t\t}\n\t\t}\n\n\t\t// Do we have a suspense?\n\t\tif ( suspense ) {\n\t\t\t// Yes we do, return the promise.\n\t\t\treturn suspense;\n\t\t}\n\n\t\t// No we don't, return a resolved promise.\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\t// Look for an existing tp-form-error element.\n\t\tconst error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );\n\n\t\t// If found, update its innerHTML with the error message. Otherwise, create a new tp-form-error element and append it to the component.\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\t// Dispatch a custom 'validation-error' event.\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\t// Find and remove the tp-form-error element.\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\n\t\t// Dispatch a custom 'validation-success' event.\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n\n\t/**\n\t * Set the suspense message.\n\t *\n\t * @param {string} message Suspense message.\n\t */\n\tsetSuspenseMessage( message: string = '' ): void {\n\t\t// Look for an existing tp-form-error element.\n\t\tconst suspense: TPFormSuspenseElement | null = this.querySelector( 'tp-form-suspense' );\n\n\t\t// If found, update its innerHTML with the suspense message. Otherwise, create a new tp-form-suspense element and append it to the component.\n\t\tif ( suspense ) {\n\t\t\tsuspense.innerHTML = message;\n\t\t} else {\n\t\t\tconst suspenseElement: TPFormSuspenseElement = document.createElement( 'tp-form-suspense' );\n\t\t\tsuspenseElement.innerHTML = message;\n\t\t\tthis.appendChild( suspenseElement );\n\t\t}\n\t}\n\n\t/**\n\t * Remove the suspense message.\n\t */\n\tremoveSuspenseMessage(): void {\n\t\t// Find and remove the tp-form-suspense element.\n\t\tthis.querySelector( 'tp-form-suspense' )?.remove();\n\t}\n}\n","/**\n * TP Form Error.\n */\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/**\n * TP Form Suspense.\n */\nexport class TPFormSuspenseElement 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\t// Attributes observed in the TPFormSubmitElement web-component.\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\t// Update component if attribute has changed.\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\n\t\t// Check if we have a submit button.\n\t\tif ( ! submitButton ) {\n\t\t\t// No, we don't. Exit.\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 */\n\n// Import validators.\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\n// Prepare validators.\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 = {};\nwindow.tpFormSuspenseMessages = {};\n\n// Register validators.\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\t// Assigning validators and error messages to various fields.\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 { TPFormSuspenseElement } from './tp-form-suspense';\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-suspense', TPFormSuspenseElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\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","addEventListener","handleFormSubmit","bind","e","preventDefault","stopImmediatePropagation","submit","setAttribute","dispatchEvent","CustomEvent","bubbles","removeAttribute","fields","querySelectorAll","formValid","validationPromises","Array","from","map","Promise","all","then","results","every","isValid","catch","finally","validateField","fieldValid","resetValidation","forEach","TPFormFieldElement","handleFieldChanged","closest","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","suspense","getSuspenseMessage","setSuspenseMessage","removeSuspenseMessage","offsetWidth","offsetHeight","valid","getAttributeNames","attributeName","resolve","reject","suspenseIsValid","message","innerHTML","errorElement","document","createElement","appendChild","remove","suspenseElement","TPFormErrorElement","TPFormSuspenseElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","tpFormSuspenseMessages","customElements","define"],"sourceRoot":""}
+{"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/validators/zip.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-suspense.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\t// Check if tpFormErrors exist in the window object.\n\tconst { tpFormErrors } = window;\n\n\t// If tpFormErrors does not exist.\n\tif ( ! tpFormErrors ) {\n\t\t// Return an empty string.\n\t\treturn '';\n\t}\n\n\t// Check if the error exists and has a corresponding error message.\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\t// Return the error message.\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\t// Return an empty string.\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\t// Validate.\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\n\t// Get error message.\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\t// Boolean value to determine if the field is valid or not.\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\t// Get min length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\t// Return error message.\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\t// Get max length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\t// Return error message.\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 white-spaces';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\tconst inputField = field.getField();\n\n\t\t// If no field is found return false.\n\t\tif ( ! inputField ) {\n\t\t\t// Return false.\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\t// Return true.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Return true if field is not empty.\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 { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'zip';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Please enter a valid zip code';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Get the field value or default to empty string.\n\t\tconst value = field.getField()?.value ?? '';\n\n\t\t// Get custom regex pattern from regex attribute or use default.\n\t\tconst customPattern: string | null = field.getAttribute( 'regex' );\n\t\tconst defaultPattern: string = '^[A-Za-z0-9][A-Za-z0-9\\\\- ]{1,8}[A-Za-z0-9]$';\n\t\tconst pattern: string = customPattern ?? defaultPattern;\n\n\t\t// Create regex object from pattern.\n\t\tconst zipCodeRegex: RegExp = new RegExp( pattern );\n\n\t\t// Test the trimmed value against the regex pattern.\n\t\treturn zipCodeRegex.test( 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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get form.\n\t\tthis.form = this.querySelector( 'form' );\n\n\t\t// Add event listeners.\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 async handleFormSubmit( e: SubmitEvent ): Promise<void> {\n\t\t// Stop normal form submission.\n\t\te.preventDefault();\n\t\te.stopImmediatePropagation();\n\n\t\t// Get submit button.\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.setAttribute( 'submitting', 'yes' );\n\n\t\t// Ignore a form that currently has suspense.\n\t\tif ( 'yes' === this.getAttribute( 'suspense' ) ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Validate the form.\n\t\tconst formValid: boolean = await this.validate();\n\n\t\t// If form is valid then dispatch a custom 'submit-validation-success' event.\n\t\tif ( formValid ) {\n\t\t\t// Trigger event.\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\n\t\t\t// Submit form.\n\t\t\tif ( 'yes' !== this.getAttribute( 'prevent-submit' ) ) {\n\t\t\t\tthis.form?.submit();\n\t\t\t}\n\t\t} else {\n\t\t\t// Form is not valid, remove submitting attribute.\n\t\t\tsubmit?.removeAttribute( 'submitting' );\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\tasync validate(): Promise<boolean> {\n\t\t// Dispatch a custom 'validate' event.\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found, return true indicating validation passed.\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\n\t\t\t// Return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Start by setting the form as suspense.\n\t\tthis.setAttribute( 'suspense', 'yes' );\n\n\t\t// Check if all fields are valid.\n\t\tlet formValid: boolean = true;\n\t\tconst validationPromises: Promise<boolean>[] = Array\n\t\t\t.from( fields )\n\t\t\t.map( async ( field: TPFormFieldElement ): Promise<boolean> => await field.validate() );\n\n\t\t// Wait for promises to resolve.\n\t\tawait Promise.all( validationPromises )\n\t\t\t.then( ( results: boolean[] ): void => {\n\t\t\t\t// Check if all fields are valid.\n\t\t\t\tformValid = results.every( ( isValid: boolean ) => isValid );\n\t\t\t} )\n\t\t\t.catch( () => {\n\t\t\t\t// There was an error with one or more fields.\n\t\t\t\tformValid = false;\n\t\t\t} )\n\t\t\t.finally( () => this.removeAttribute( 'suspense' ) );\n\n\t\t// If form is valid then dispatch a custom 'validation-success' event else send a custom 'validation-error' event.\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\t// Return whether the form is valid or not.\n\t\treturn formValid;\n\t}\n\n\t/**\n\t * Validate one field.\n\t *\n\t * @param {HTMLElement} field Field node.\n\t */\n\tasync validateField( field: TPFormFieldElement ): Promise<boolean> {\n\t\t// Set form as suspense, validate and undo suspense.\n\t\tthis.setAttribute( 'suspense', 'yes' );\n\t\tconst fieldValid: boolean = await field.validate();\n\t\tthis.removeAttribute( 'suspense' );\n\n\t\t// Return result.\n\t\treturn fieldValid;\n\t}\n\n\t/**\n\t * Reset form validation.\n\t */\n\tresetValidation(): void {\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found.\n\t\tif ( ! fields ) {\n\t\t\t// Exit the function.\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove 'valid' and 'error' attributes from all fields.\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\t// Remove 'valid' and 'error' and 'suspense' attributes.\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t\tfield.removeAttribute( 'suspense' );\n\t\t} );\n\n\t\t// Remove 'suspense' attribute from form.\n\t\tthis.removeAttribute( 'suspense' );\n\n\t\t// Remove 'submitting' attribute from submit button.\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 { TPFormElement } from './tp-form';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSuspenseElement } from './tp-form-suspense';\n\n/**\n * TP Form Field.\n */\nexport class TPFormFieldElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get field.\n\t\tconst field = this.getField();\n\n\t\t// Add event listeners.\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\t// Check if we want to ignore field revalidations.\n\t\tif ( 'no' === this.getAttribute( 'revalidate-on-change' ) ) {\n\t\t\t// Yes we do, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Validate the field again if 'valid' or 'error' attribute is present.\n\t\tif ( this.getAttribute( 'valid' ) || this.getAttribute( 'error' ) ) {\n\t\t\tconst form: TPFormElement | null = this.closest( 'tp-form' );\n\t\t\tform?.validateField( this );\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\t// Attributes observed in the TPFormFieldElement web-component.\n\t\treturn [ 'valid', 'error', 'suspense' ];\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\t// Check if the observed attributes 'valid' or 'error' have changed.\n\n\t\t// Dispatch a custom 'validate' event.\n\t\tif ( ( 'valid' === name || 'error' === name || 'suspense' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\n\t\t// Update the component after the attribute change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Check if tpFormValidators exist in the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the 'error' attribute value.\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\n\t\t// Check if the error exists and has a corresponding error message function.\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\n\t\t// Get the 'suspense' attribute value.\n\t\tconst suspense: string = this.getAttribute( 'suspense' ) ?? '';\n\n\t\t// Check if the suspense exists and has a corresponding suspense message function.\n\t\tif ( '' !== suspense && suspense in tpFormValidators && 'function' === typeof tpFormValidators[ suspense ].getSuspenseMessage ) {\n\t\t\t// @ts-ignore\n\t\t\tthis.setSuspenseMessage( tpFormValidators[ suspense ]?.getSuspenseMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeSuspenseMessage();\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\t// Return the associated field by querying input, select, or textarea elements.\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\tasync validate(): Promise<boolean> {\n\t\t// Retrieve tpFormValidators from the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t// If no validators are found, return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is visible.\n\t\tif ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {\n\t\t\t// If the field is not visible, return true indicating validation passed.\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 suspense: Promise<boolean> | null = null;\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\t// Check if the attribute is a validator.\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 | Promise<boolean> = tpFormValidators[ attributeName ].validate( this );\n\t\t\t\terror = attributeName;\n\n\t\t\t\t// First check for a Promise.\n\t\t\t\tif ( isValid instanceof Promise ) {\n\t\t\t\t\t// Yes it is an async validation.\n\t\t\t\t\tvalid = false;\n\n\t\t\t\t\t// Dispatch a custom 'validation-suspense-start' event.\n\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-start' ) );\n\n\t\t\t\t\t// Create the promise.\n\t\t\t\t\tsuspense = new Promise( ( resolve, reject ): void => {\n\t\t\t\t\t\t// Validate it.\n\t\t\t\t\t\tisValid\n\t\t\t\t\t\t\t.then( ( suspenseIsValid: boolean ) => {\n\t\t\t\t\t\t\t\t// Validation is complete.\n\t\t\t\t\t\t\t\tif ( true === suspenseIsValid ) {\n\t\t\t\t\t\t\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\t\t\t\t\t\t\tthis.removeAttribute( 'error' );\n\n\t\t\t\t\t\t\t\t\t// Resolve the promise.\n\t\t\t\t\t\t\t\t\tresolve( true );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.removeAttribute( 'valid' );\n\t\t\t\t\t\t\t\t\tthis.setAttribute( 'error', error );\n\n\t\t\t\t\t\t\t\t\t// Resolve the promise.\n\t\t\t\t\t\t\t\t\tresolve( false );\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// Dispatch a custom 'validation-suspense-success' event.\n\t\t\t\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-success' ) );\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t.catch( (): void => {\n\t\t\t\t\t\t\t\t// There was an error.\n\t\t\t\t\t\t\t\tthis.removeAttribute( 'valid' );\n\t\t\t\t\t\t\t\tthis.setAttribute( 'error', error );\n\n\t\t\t\t\t\t\t\t// Dispatch a custom 'validation-suspense-error' event.\n\t\t\t\t\t\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-suspense-error' ) );\n\n\t\t\t\t\t\t\t\t// Reject the promise.\n\t\t\t\t\t\t\t\treject( false );\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t.finally( (): void => {\n\t\t\t\t\t\t\t\t// Clean up.\n\t\t\t\t\t\t\t\tthis.removeAttribute( 'suspense' );\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t} );\n\n\t\t\t\t\t// Return.\n\t\t\t\t\treturn false;\n\t\t\t\t} else if ( false === isValid ) {\n\t\t\t\t\t// Not a Promise, but looks like we found an error!\n\t\t\t\t\tvalid = false;\n\n\t\t\t\t\t// Return.\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\tthis.removeAttribute( 'suspense' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\n\t\t\t// Check for suspense.\n\t\t\tif ( suspense ) {\n\t\t\t\tthis.setAttribute( 'suspense', error );\n\t\t\t\tthis.removeAttribute( 'error' );\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute( 'suspense' );\n\t\t\t\tthis.setAttribute( 'error', error );\n\t\t\t}\n\t\t}\n\n\t\t// Do we have a suspense?\n\t\tif ( suspense ) {\n\t\t\t// Yes we do, return the promise.\n\t\t\treturn suspense;\n\t\t}\n\n\t\t// No we don't, return a resolved promise.\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\t// Look for an existing tp-form-error element.\n\t\tconst error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );\n\n\t\t// If found, update its innerHTML with the error message. Otherwise, create a new tp-form-error element and append it to the component.\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\t// Dispatch a custom 'validation-error' event.\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\t// Find and remove the tp-form-error element.\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\n\t\t// Dispatch a custom 'validation-success' event.\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n\n\t/**\n\t * Set the suspense message.\n\t *\n\t * @param {string} message Suspense message.\n\t */\n\tsetSuspenseMessage( message: string = '' ): void {\n\t\t// Look for an existing tp-form-error element.\n\t\tconst suspense: TPFormSuspenseElement | null = this.querySelector( 'tp-form-suspense' );\n\n\t\t// If found, update its innerHTML with the suspense message. Otherwise, create a new tp-form-suspense element and append it to the component.\n\t\tif ( suspense ) {\n\t\t\tsuspense.innerHTML = message;\n\t\t} else {\n\t\t\tconst suspenseElement: TPFormSuspenseElement = document.createElement( 'tp-form-suspense' );\n\t\t\tsuspenseElement.innerHTML = message;\n\t\t\tthis.appendChild( suspenseElement );\n\t\t}\n\t}\n\n\t/**\n\t * Remove the suspense message.\n\t */\n\tremoveSuspenseMessage(): void {\n\t\t// Find and remove the tp-form-suspense element.\n\t\tthis.querySelector( 'tp-form-suspense' )?.remove();\n\t}\n}\n","/**\n * TP Form Error.\n */\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/**\n * TP Form Suspense.\n */\nexport class TPFormSuspenseElement 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\t// Attributes observed in the TPFormSubmitElement web-component.\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\t// Update component if attribute has changed.\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\n\t\t// Check if we have a submit button.\n\t\tif ( ! submitButton ) {\n\t\t\t// No, we don't. Exit.\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 */\n\n// Import validators.\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';\nimport * as zip from './validators/zip';\n\n// Prepare validators.\nconst validators = [\n\trequired,\n\temail,\n\tminLength,\n\tmaxLength,\n\tnoEmptySpaces,\n\tzip,\n];\n\n/**\n * Register Validators and Errors.\n */\nwindow.tpFormValidators = {};\nwindow.tpFormErrors = {};\nwindow.tpFormSuspenseMessages = {};\n\n// Register validators.\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\t// Assigning validators and error messages to various fields.\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 { TPFormSuspenseElement } from './tp-form-suspense';\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-suspense', TPFormSuspenseElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\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","customPattern","RegExp","TPFormElement","HTMLElement","constructor","super","this","form","querySelector","addEventListener","handleFormSubmit","bind","e","preventDefault","stopImmediatePropagation","submit","setAttribute","dispatchEvent","CustomEvent","bubbles","removeAttribute","fields","querySelectorAll","formValid","validationPromises","Array","from","map","Promise","all","then","results","every","isValid","catch","finally","validateField","fieldValid","resetValidation","forEach","TPFormFieldElement","handleFieldChanged","closest","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","suspense","getSuspenseMessage","setSuspenseMessage","removeSuspenseMessage","offsetWidth","offsetHeight","valid","getAttributeNames","attributeName","resolve","reject","suspenseIsValid","message","innerHTML","errorElement","document","createElement","appendChild","remove","suspenseElement","TPFormErrorElement","TPFormSuspenseElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","tpFormSuspenseMessages","customElements","define"],"sourceRoot":""}

package/dist/phone-input/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.hiddenInput=null,this.update()}static get observedAttributes(){return["name","open","country-code"]}attributeChangedCallback(t="",e="",n=""){e!==n&&this.update()}get value(){var t,e;return null!==(e=null===(t=this.hiddenInput)||void 0===t?void 0:t.value)&&void 0!==e?e:""}set value(t){this.hiddenInput&&(this.hiddenInput.value=t.toString())}update(){var t,e,n,i;this.hiddenInput||(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.appendChild(this.hiddenInput)),this.hiddenInput.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:"");const o=this.querySelector("tp-phone-input-countries"),u=this.querySelector("tp-phone-input-selected-flag"),s=this.querySelector("tp-phone-input-phone-code"),r=this.querySelector("tp-phone-input-field"),l=this.querySelector("tp-phone-input-search input");o&&("yes"===this.getAttribute("open")?o.setAttribute("open","yes"):o.removeAttribute("open")),null==u||u.setAttribute("flag",null!==(e=this.getAttribute("country-code"))&&void 0!==e?e:""),null==s||s.setAttribute("phone-code",null!==(n=this.getAttribute("phone-code"))&&void 0!==n?n:""),null==r||r.setAttribute("country-code",null!==(i=this.getAttribute("country-code"))&&void 0!==i?i:""),l&&"yes"===this.getAttribute("open")&&l.focus()}}class e extends HTMLElement{constructor(){var t,e,n,i;super(),this.input=this.querySelector("input"),this.phoneInput=this.closest("tp-phone-input"),this.countryList=null!==(e=null===(t=this.phoneInput)||void 0===t?void 0:t.querySelector("tp-phone-input-country-list"))&&void 0!==e?e:null,null===(n=this.input)||void 0===n||n.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),null===(i=this.input)||void 0===i||i.addEventListener("input",this.handleSearchChange.bind(this))}handleKeyboardInputs(t){var e,n,i;switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":null===(e=this.countryList)||void 0===e||e.handleDownArrow();break;case"ArrowUp":null===(n=this.countryList)||void 0===n||n.handleUpArrow();break;case"Escape":null===(i=this.phoneInput)||void 0===i||i.removeAttribute("open")}}handleSearchChange(){var t;const e=this.closest("tp-phone-input"),n=this.querySelector("input"),i=null===(t=this.closest("tp-phone-input"))||void 0===t?void 0:t.querySelectorAll("tp-phone-input-country");if(!e||!n||!i)return;let o=0;i.forEach((t=>{const e=t.getAttribute("country")||"",i=t.getAttribute("value")||"",u=n.value.toLowerCase();e.toLowerCase().includes(u)||i.toLowerCase().includes(u)?(t.removeAttribute("hidden"),o++):t.setAttribute("hidden","yes")})),e.setAttribute("visible-countries",o.toString()),""!==n.value&&e.setAttribute("open","yes")}}class n extends HTMLElement{static get observedAttributes(){return["phone-code","format"]}attributeChangedCallback(t="",e="",n=""){var i,o;if(e!==n){const t=null!==(i=this.getAttribute("format"))&&void 0!==i?i:"";this.innerText=`${t.replace("$code",null!==(o=this.getAttribute("phone-code"))&&void 0!==o?o:"")}`}}}class i extends HTMLElement{constructor(){var t;super(),this.button=this.querySelector(":scope > button"),null===(t=this.button)||void 0===t||t.addEventListener("click",this.toggle.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this))}toggle(){const t=this.closest("tp-phone-input");"yes"===this.getAttribute("open")?null==t||t.removeAttribute("open"):null==t||t.setAttribute("open","yes")}handleDocumentClick(t){if(this!==t.target&&!this.contains(t.target)){const t=this.closest("tp-phone-input");null==t||t.removeAttribute("open")}}}class o extends HTMLElement{static get observedAttributes(){return["flag"]}attributeChangedCallback(t="",e="",n=""){e!==n&&this.update()}update(){const t=this.getAttribute("flag");if(!t||""===t)return void(this.innerHTML="");const e=this.closest("tp-phone-input"),n=null==e?void 0:e.querySelector(`tp-phone-input-country[country-code="${t}"]`),i=null==n?void 0:n.querySelector("tp-phone-input-flag");this.innerHTML=i?i.innerHTML:""}}class u extends HTMLElement{handleUpArrow(){const t=this.querySelectorAll('tp-phone-input-country[focus="yes"]:not([hidden])');for(let e=0;e<t.length;e++)if("yes"===t[e].getAttribute("focus")&&0!==e){t[e-1].removeAttribute("focus"),this.setAttribute("focus","yes");break}}handleDownArrow(){const t=this.querySelectorAll("tp-phone-input-country");let e=0;for(let n=0;n<t.length;n++){const i=t[n];if(n-1===e){i.setAttribute("focus","yes");break}"yes"===i.getAttribute("focus")&&(e=n),i.removeAttribute("focus")}}}class s extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.select.bind(this))}select(){const t=this.closest("tp-phone-input");this.getAttribute("country-code")&&this.getAttribute("phone-code")&&this.getAttribute("country")&&(null==t||t.setAttribute("country-code",this.getAttribute("country-code")),null==t||t.setAttribute("phone-code",this.getAttribute("phone-code")),null==t||t.setAttribute("country",this.getAttribute("country"))),null==t||t.removeAttribute("open")}}class r extends HTMLElement{constructor(){var t,e;super(),this.originalPlaceholder="",this.input=this.querySelector(':scope > input[type="tel"]'),this.phoneInput=this.closest("tp-phone-input"),this.input&&(this.originalPlaceholder=null!==(t=this.input.placeholder)&&void 0!==t?t:""),null===(e=this.input)||void 0===e||e.addEventListener("input",this.handleInput.bind(this))}static get observedAttributes(){return["country-code"]}attributeChangedCallback(t="",e="",n=""){e!==n&&this.update()}update(){if(!this.input)return;const t=this.getFormat();this.input.placeholder=""!==t?t.replace(/#/g,"0"):this.originalPlaceholder}handleInput(){if(!this.input||!this.phoneInput)return;const t=this.input.value.replace(/\D/g,"");this.input.value=this.formatPhoneNumber(t,this.getFormat()),this.phoneInput.value=t}getFormat(){var t,e,n;const i=null===(t=this.phoneInput)||void 0===t?void 0:t.querySelector(`tp-phone-input-country[country-code="${null!==(e=this.getAttribute("country-code"))&&void 0!==e?e:""}"]`);return null!==(n=null==i?void 0:i.getAttribute("format"))&&void 0!==n?n:""}formatPhoneNumber(t="",e=""){let n="",i=0;for(let o=0;o<e.length;o++){const u=e[o];if("#"===u){if(!(i<t.length))break;n+=t[i],i++}else t.length>0&&(n+=u)}return n}}customElements.define("tp-phone-input-selected-flag",o),customElements.define("tp-phone-input-country-list",u),customElements.define("tp-phone-input-country",s),customElements.define("tp-phone-input-field",r),customElements.define("tp-phone-input",t),customElements.define("tp-phone-input-search",e),customElements.define("tp-phone-input-phone-code",n),customElements.define("tp-phone-input-countries",i)})();
+//# sourceMappingURL=index.js.map

package/dist/phone-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dist/phone-input/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/phone-input/tp-phone-input.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-search.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-phone-code.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-countries.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-selected-flag.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-country-list.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-country.ts","webpack://@travelopia/web-components/./src/phone-input/tp-phone-input-field.ts","webpack://@travelopia/web-components/./src/phone-input/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPPhoneInputCountriesElement } from './tp-phone-input-countries';\nimport { TpPhoneInputSelectedFlagElement } from './tp-phone-input-selected-flag';\nimport { TPPhoneInputPhoneCodeElement } from './tp-phone-input-phone-code';\nimport { TPPhoneInputFieldElement } from './tp-phone-input-field';\n\n/**\n * TP Phone Input.\n */\nexport class TPPhoneInputElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected hiddenInput: HTMLInputElement | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Initialize component.\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'name', 'open', 'country-code' ];\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\t// If no changes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update display when attributes change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get value.\n\t */\n\tget value(): string {\n\t\t// Get value.\n\t\treturn this.hiddenInput?.value ?? '';\n\t}\n\n\t/**\n\t * Set value.\n\t *\n\t * @param {string} value The value.\n\t */\n\tset value( value: string ) {\n\t\t// Check if we have the hidden input.\n\t\tif ( this.hiddenInput ) {\n\t\t\tthis.hiddenInput.value = value.toString();\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tprotected update(): void {\n\t\t// First, let's create the hidden input.\n\t\tif ( ! this.hiddenInput ) {\n\t\t\tthis.hiddenInput = document.createElement( 'input' );\n\t\t\tthis.hiddenInput.setAttribute( 'type', 'hidden' );\n\t\t\tthis.appendChild( this.hiddenInput );\n\t\t}\n\n\t\t// Update input.\n\t\tthis.hiddenInput.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t// Get elements.\n\t\tconst countries: TPPhoneInputCountriesElement | null = this.querySelector( 'tp-phone-input-countries' );\n\t\tconst selectedFlag: TpPhoneInputSelectedFlagElement | null = this.querySelector( 'tp-phone-input-selected-flag' );\n\t\tconst phoneCode: TPPhoneInputPhoneCodeElement | null = this.querySelector( 'tp-phone-input-phone-code' );\n\t\tconst input: TPPhoneInputFieldElement | null = this.querySelector( 'tp-phone-input-field' );\n\t\tconst searchField: HTMLInputElement | null = this.querySelector( 'tp-phone-input-search input' );\n\n\t\t// Toggle attribute.\n\t\tif ( countries ) {\n\t\t\t// Update its attribute.\n\t\t\tif ( 'yes' === this.getAttribute( 'open' ) ) {\n\t\t\t\tcountries.setAttribute( 'open', 'yes' );\n\t\t\t} else {\n\t\t\t\tcountries.removeAttribute( 'open' );\n\t\t\t}\n\t\t}\n\n\t\t// Update children.\n\t\tselectedFlag?.setAttribute( 'flag', this.getAttribute( 'country-code' ) ?? '' );\n\t\tphoneCode?.setAttribute( 'phone-code', this.getAttribute( 'phone-code' ) ?? '' );\n\t\tinput?.setAttribute( 'country-code', this.getAttribute( 'country-code' ) ?? '' );\n\n\t\t// Focus on search field.\n\t\tif ( searchField && 'yes' === this.getAttribute( 'open' ) ) {\n\t\t\tsearchField.focus();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\nimport { TPPhoneInputCountryListElement } from './tp-phone-input-country-list';\n\n/**\n * TP Phone Input Search.\n */\nexport class TPPhoneInputSearchElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected input: HTMLInputElement | null;\n\tprotected phoneInput: TPPhoneInputElement | null;\n\tprotected countryList: TPPhoneInputCountryListElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Elements.\n\t\tthis.input = this.querySelector( 'input' );\n\t\tthis.phoneInput = this.closest( 'tp-phone-input' );\n\t\tthis.countryList = this.phoneInput?.querySelector( 'tp-phone-input-country-list' ) ?? null;\n\n\t\t// Events.\n\t\tthis.input?.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tthis.input?.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\t// Handle keyboard inputs.\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tthis.countryList?.handleDownArrow();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tthis.countryList?.handleUpArrow();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.phoneInput?.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handle search field value changed.\n\t */\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and countries.\n\t\tconst phoneInput: TPPhoneInputElement | null = this.closest( 'tp-phone-input' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tconst countries: NodeListOf<HTMLElement> | undefined = this.closest( 'tp-phone-input' )?.querySelectorAll( 'tp-phone-input-country' );\n\n\t\t// Check if phone input, search, and countries exist.\n\t\tif ( ! phoneInput || ! search || ! countries ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize matched country count.\n\t\tlet matchedCountryCount = 0;\n\t\tcountries.forEach( ( country: HTMLElement ): void => {\n\t\t\t// Get country name and value for search.\n\t\t\tconst countryName: string = country.getAttribute( 'country' ) || '';\n\t\t\tconst countryValue: string = country.getAttribute( 'value' ) || '';\n\t\t\tconst searchTerm: string = search.value.toLowerCase();\n\n\t\t\t// Hide and show countries based on search.\n\t\t\tif ( countryName.toLowerCase().includes( searchTerm ) || countryValue.toLowerCase().includes( searchTerm ) ) {\n\t\t\t\tcountry.removeAttribute( 'hidden' );\n\t\t\t\tmatchedCountryCount++;\n\t\t\t} else {\n\t\t\t\tcountry.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Show matched country count.\n\t\tphoneInput.setAttribute( 'visible-countries', matchedCountryCount.toString() );\n\n\t\t// Keep dropdown open when searching.\n\t\tif ( '' !== search.value ) {\n\t\t\tphoneInput.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/**\n * TP Phone Input Phone Code.\n */\nexport class TPPhoneInputPhoneCodeElement 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\t// Observed attributes.\n\t\treturn [ 'phone-code', 'format' ];\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\t// Update code.\n\t\tif ( oldValue !== newValue ) {\n\t\t\tconst format: string = this.getAttribute( 'format' ) ?? '';\n\t\t\tthis.innerText = `${ format.replace( '$code', this.getAttribute( 'phone-code' ) ?? '' ) }`;\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\n\n/**\n * TP Phone Input Countries.\n */\nexport class TPPhoneInputCountriesElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected readonly button: HTMLButtonElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Elements.\n\t\tthis.button = this.querySelector( ':scope > button' );\n\n\t\t// Events.\n\t\tthis.button?.addEventListener( 'click', this.toggle.bind( this ) );\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle component.\n\t */\n\ttoggle(): void {\n\t\t// Get parent input.\n\t\tconst input: TPPhoneInputElement | null = this.closest( 'tp-phone-input' );\n\n\t\t// Update its attribute.\n\t\tif ( 'yes' === this.getAttribute( 'open' ) ) {\n\t\t\tinput?.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tinput?.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n\n\t/**\n\t * Handle document click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\tprotected handleDocumentClick( e: Event ): void {\n\t\t// Close on click outside.\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tconst input: TPPhoneInputElement | null = this.closest( 'tp-phone-input' );\n\t\t\tinput?.removeAttribute( 'open' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\nimport { TPPhoneInputCountryElement } from './tp-phone-input-country';\n\n/**\n * TP Phone Input Selected Flag.\n */\nexport class TpPhoneInputSelectedFlagElement 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\t// Observed attributes.\n\t\treturn [ 'flag' ];\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\t// Update flag.\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get flag.\n\t\tconst flag = this.getAttribute( 'flag' );\n\n\t\t// Check if we have a valid value.\n\t\tif ( ! flag || '' === flag ) {\n\t\t\t// We don't mark as empty.\n\t\t\tthis.innerHTML = '';\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get parent input.\n\t\tconst input: TPPhoneInputElement | null = this.closest( 'tp-phone-input' );\n\n\t\t// Find the flag for this country.\n\t\tconst countryElement: TPPhoneInputCountryElement | null | undefined = input?.querySelector( `tp-phone-input-country[country-code=\"${ flag }\"]` );\n\t\tconst flagElement = countryElement?.querySelector( 'tp-phone-input-flag' );\n\n\t\t// Check if we found a flag.\n\t\tif ( flagElement ) {\n\t\t\t// We did.\n\t\t\tthis.innerHTML = flagElement.innerHTML;\n\t\t} else {\n\t\t\t// We didn't.\n\t\t\tthis.innerHTML = '';\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputCountryElement } from './tp-phone-input-country';\n\n/**\n * TP Phone Input Country.\n */\nexport class TPPhoneInputCountryListElement extends HTMLElement {\n\thandleUpArrow(): void {\n\t\tconst countries: NodeListOf<TPPhoneInputCountryElement> | null = this.querySelectorAll( 'tp-phone-input-country[focus=\"yes\"]:not([hidden])' );\n\n\t\tfor ( let index: number = 0; index < countries.length; index++ ) {\n\t\t\tconst country: TPPhoneInputCountryElement = countries[ index ];\n\t\t\tif ( 'yes' === country.getAttribute( 'focus' ) && 0 !== index ) {\n\t\t\t\tcountries[ index - 1 ].removeAttribute( 'focus' );\n\t\t\t\tthis.setAttribute( 'focus', 'yes' );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\thandleDownArrow(): void {\n\t\tconst countries: NodeListOf<TPPhoneInputCountryElement> | null = this.querySelectorAll( 'tp-phone-input-country' );\n\t\tlet currentFocusIndex: number = 0;\n\n\t\tfor ( let index: number = 0; index < countries.length; index++ ) {\n\t\t\tconst country: TPPhoneInputCountryElement = countries[ index ];\n\n\t\t\tif ( index - 1 === currentFocusIndex ) {\n\t\t\t\tcountry.setAttribute( 'focus', 'yes' );\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif ( 'yes' === country.getAttribute( 'focus' ) ) {\n\t\t\t\tcurrentFocusIndex = index;\n\t\t\t}\n\n\t\t\tcountry.removeAttribute( 'focus' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\n\n/**\n * TP Phone Input Country.\n */\nexport class TPPhoneInputCountryElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.select.bind( this ) );\n\t}\n\n\t/**\n\t * Select this country.\n\t */\n\tselect(): void {\n\t\t// Get parent instance.\n\t\tconst phoneInput: TPPhoneInputElement | null = this.closest( 'tp-phone-input' );\n\n\t\t// Validate if all attributes exist.\n\t\tif ( this.getAttribute( 'country-code' ) && this.getAttribute( 'phone-code' ) && this.getAttribute( 'country' ) ) {\n\t\t\t// Update parent's value.\n\t\t\tphoneInput?.setAttribute( 'country-code', <string> this.getAttribute( 'country-code' ) );\n\t\t\tphoneInput?.setAttribute( 'phone-code', <string> this.getAttribute( 'phone-code' ) );\n\t\t\tphoneInput?.setAttribute( 'country', <string> this.getAttribute( 'country' ) );\n\t\t}\n\n\t\t// Close dropdown.\n\t\tphoneInput?.removeAttribute( 'open' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\nimport { TPPhoneInputCountryElement } from './tp-phone-input-country';\n\n/**\n * TP Phone Input Field.\n */\nexport class TPPhoneInputFieldElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected readonly input: HTMLInputElement | null;\n\tprotected readonly phoneInput: TPPhoneInputElement | null;\n\tprotected originalPlaceholder: string = '';\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Elements.\n\t\tthis.input = this.querySelector( ':scope > input[type=\"tel\"]' );\n\t\tthis.phoneInput = this.closest( 'tp-phone-input' );\n\n\t\t// Save original placeholder.\n\t\tif ( this.input ) {\n\t\t\tthis.originalPlaceholder = this.input.placeholder ?? '';\n\t\t}\n\n\t\t// Events.\n\t\tthis.input?.addEventListener( 'input', this.handleInput.bind( this ) );\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\t// Observed attributes.\n\t\treturn [ 'country-code' ];\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\t// If no changes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update display when attributes change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Check if we have our field.\n\t\tif ( ! this.input ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get format.\n\t\tconst format: string = this.getFormat();\n\n\t\t// Check if we found a format.\n\t\tif ( '' !== format ) {\n\t\t\tthis.input.placeholder = format.replace( /#/g, '0' );\n\t\t} else {\n\t\t\tthis.input.placeholder = this.originalPlaceholder;\n\t\t}\n\t}\n\n\t/**\n\t * Handle input change.\n\t */\n\thandleInput(): void {\n\t\t// Check for both inputs.\n\t\tif ( ! this.input || ! this.phoneInput ) {\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update values.\n\t\tconst numbersOnly: string = this.input.value.replace( /\\D/g, '' );\n\t\tthis.input.value = this.formatPhoneNumber( numbersOnly, this.getFormat() );\n\t\tthis.phoneInput.value = numbersOnly;\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} The format from the current country.\n\t */\n\tgetFormat(): string {\n\t\t// Get country.\n\t\tconst country: TPPhoneInputCountryElement | null | undefined =\n\t\t\tthis.phoneInput\n\t\t\t\t?.querySelector( `tp-phone-input-country[country-code=\"${ this.getAttribute( 'country-code' ) ?? '' }\"]` );\n\n\t\t// Return country's format.\n\t\treturn country?.getAttribute( 'format' ) ?? '';\n\t}\n\n\t/**\n\t * Format phone number based on format pattern.\n\t *\n\t * @param {string} value  Phone number value.\n\t * @param {string} format Format pattern.\n\t *\n\t * @return {string} Formatted phone number.\n\t */\n\tprotected formatPhoneNumber( value: string = '', format: string = '' ): string {\n\t\t// Prepare variables.\n\t\tlet result: string = '';\n\t\tlet valueIndex: number = 0;\n\n\t\t// Go through the entire format string.\n\t\tfor ( let i = 0; i < format.length; i++ ) {\n\t\t\tconst maskCharacter = format[ i ];\n\n\t\t\t// Is this a mask character?\n\t\t\tif ( '#' === maskCharacter ) {\n\t\t\t\t// If we have a digit available, insert it; otherwise stop formatting.\n\t\t\t\tif ( valueIndex < value.length ) {\n\t\t\t\t\tresult += value[ valueIndex ];\n\t\t\t\t\tvalueIndex++;\n\t\t\t\t} else {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if ( value.length > 0 ) {\n\t\t\t\t// Only append literals if at least one digit is present or the user has started typing.\n\t\t\t\tresult += maskCharacter;\n\t\t\t}\n\t\t}\n\n\t\t// Return formatted phone number.\n\t\treturn result;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPPhoneInputElement } from './tp-phone-input';\nimport { TPPhoneInputSearchElement } from './tp-phone-input-search';\nimport { TPPhoneInputPhoneCodeElement } from './tp-phone-input-phone-code';\nimport { TPPhoneInputCountriesElement } from './tp-phone-input-countries';\nimport { TpPhoneInputSelectedFlagElement } from './tp-phone-input-selected-flag';\nimport { TPPhoneInputCountryListElement } from './tp-phone-input-country-list';\nimport { TPPhoneInputCountryElement } from './tp-phone-input-country';\nimport { TPPhoneInputFieldElement } from './tp-phone-input-field';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-phone-input-selected-flag', TpPhoneInputSelectedFlagElement );\ncustomElements.define( 'tp-phone-input-country-list', TPPhoneInputCountryListElement );\ncustomElements.define( 'tp-phone-input-country', TPPhoneInputCountryElement );\ncustomElements.define( 'tp-phone-input-field', TPPhoneInputFieldElement );\ncustomElements.define( 'tp-phone-input', TPPhoneInputElement );\ncustomElements.define( 'tp-phone-input-search', TPPhoneInputSearchElement );\ncustomElements.define( 'tp-phone-input-phone-code', TPPhoneInputPhoneCodeElement );\ncustomElements.define( 'tp-phone-input-countries', TPPhoneInputCountriesElement );\n"],"names":["TPPhoneInputElement","HTMLElement","constructor","super","hiddenInput","this","update","observedAttributes","attributeChangedCallback","_name","oldValue","newValue","value","toString","document","createElement","setAttribute","appendChild","getAttribute","countries","querySelector","selectedFlag","phoneCode","input","searchField","removeAttribute","focus","TPPhoneInputSearchElement","phoneInput","closest","countryList","addEventListener","handleKeyboardInputs","bind","handleSearchChange","e","key","preventDefault","handleDownArrow","handleUpArrow","search","querySelectorAll","matchedCountryCount","forEach","country","countryName","countryValue","searchTerm","toLowerCase","includes","TPPhoneInputPhoneCodeElement","format","innerText","replace","TPPhoneInputCountriesElement","button","toggle","handleDocumentClick","target","contains","TpPhoneInputSelectedFlagElement","flag","innerHTML","countryElement","flagElement","TPPhoneInputCountryListElement","index","length","currentFocusIndex","TPPhoneInputCountryElement","select","TPPhoneInputFieldElement","originalPlaceholder","placeholder","handleInput","getFormat","numbersOnly","formatPhoneNumber","result","valueIndex","i","maskCharacter","customElements","define"],"sourceRoot":""}

package/dist/phone-input/style.css

@@ -0,0 +1 @@
+tp-phone-input{display:block;position:relative}tp-phone-input-countries{display:block;position:relative}tp-phone-input-country-list{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;z-index:1000;max-height:200px;overflow-y:auto;box-shadow:0 2px 8px rgba(0,0,0,.1)}tp-phone-input[open=yes] tp-phone-input-country-list{display:block}tp-phone-input-search{display:block}tp-phone-input-country{display:block}tp-phone-input-country[hidden=yes]{display:none}tp-phone-input-flag{display:inline-block}tp-phone-input-input{display:block}tp-phone-input-phone-code{display:inline-block}

package/dist/slider/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}attributeChangedCallback(t="",e="",i=""){"current-slide"===t&&e!==i&&(this.slide(),this.dispatchEvent(new CustomEvent("slide-complete",{bubbles:!0}))),this.update()}get currentSlideIndex(){var t;return parseInt(null!==(t=this.getAttribute("current-slide"))&&void 0!==t?t:"1")}set currentSlideIndex(t){this.setCurrentSlide(t)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}getTotalSlides(){const t=this.getSlideElements();return t?t.length:0}getSlideElements(){const t=this.querySelector("tp-slider-slides");return null==t?void 0:t.querySelectorAll(":scope > tp-slider-slide")}next(){const t=this.getTotalSlides();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=Math.min(this.currentSlideIndex+this.step,t-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.getTotalSlides(),e=Math.ceil(t/this.step);let i=0;if(t/this.step!==Math.round(t/this.step)){let s;s=this.currentSlideIndex+this.step-1>=t?e:Math.ceil(this.currentSlideIndex/this.step),i=s===e?this.currentSlideIndex-this.step+1:this.currentSlideIndex-this.step}else i=this.currentSlideIndex-this.step;i>1?this.setCurrentSlide(i):this.setCurrentSlide(1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0,detail:{slideIndex:t}})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.getSlideElements();t&&e&&(setTimeout((()=>this.updateHeight()),0),"fade"!==(this.getAttribute("behaviour")||"")&&e[this.currentSlideIndex-1]&&(t.style.left=`-${e[this.currentSlideIndex-1].offsetLeft}px`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){const t=this.querySelector("tp-slider-nav"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getTotalSlides(),l=Math.ceil(r/this.step),n=this.getSlideElements();n&&n.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),null==t||t.updateNavItems();const d=this.querySelectorAll("tp-slider-nav-item");d&&d.forEach(((t,e,i)=>{var s;t.removeAttribute("current"),Math.round((this.currentSlideIndex-1)/this.step)===e?t.setAttribute("current","yes"):e===l-1&&this.currentSlideIndex+this.step-1>=r&&(t.setAttribute("current","yes"),null===(s=i[e-1])||void 0===s||s.removeAttribute("current"))})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?null==s||s.setAttribute("disabled","yes"):null==s||s.removeAttribute("disabled"),1===this.getCurrentSlide()?null==i||i.setAttribute("disabled","yes"):null==i||i.removeAttribute("disabled")):(null==s||s.removeAttribute("disabled"),null==i||i.removeAttribute("disabled"))}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class s extends HTMLElement{}class r extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-slider");t&&("previous"===this.getAttribute("direction")?t.previous():"next"===this.getAttribute("direction")&&t.next())}}class l extends HTMLElement{constructor(){super(),this.template=null,this.slider=null,this.template=this.querySelector("template"),this.slider=this.closest("tp-slider")}updateNavItems(){var t,e,i;if(!this.template||!this.slider)return;const s=null===(t=this.slider)||void 0===t?void 0:t.getTotalSlides(),r=Math.ceil((s-(null===(e=this.slider)||void 0===e?void 0:e.perView))/(null===(i=this.slider)||void 0===i?void 0:i.step))+1;this.innerHTML="";for(let t=1;t<=r;t++){const e=this.template.content.cloneNode(!0),i=document.createElement("div");i.appendChild(e),this.innerHTML+=i.innerHTML.replace("$index",t.toString())}}}class n extends HTMLElement{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i,s,r,l,n,d;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const h=this.closest("tp-slider-nav"),u=null!==(i=null===(e=this.slider)||void 0===e?void 0:e.step)&&void 0!==i?i:1,o=null!==(r=null===(s=this.slider)||void 0===s?void 0:s.perView)&&void 0!==r?r:1,a=(null!==(n=null===(l=this.slider)||void 0===l?void 0:l.getTotalSlides())&&void 0!==n?n:1)-o+1,c=Array.from(null!==(d=null==h?void 0:h.children)&&void 0!==d?d:[]).indexOf(this)*u+1;return Math.min(a,c)}}class d extends HTMLElement{static get observedAttributes(){return["format"]}get format(){var t;return null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$current / $total"}set format(t){this.setAttribute("format",t)}attributeChangedCallback(){this.update()}update(){var t;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.perView,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider-nav",l),customElements.define("tp-slider",t),customElements.define("tp-slider-count",d),customElements.define("tp-slider-track",e),customElements.define("tp-slider-slides",i),customElements.define("tp-slider-slide",s),customElements.define("tp-slider-arrow",r),customElements.define("tp-slider-nav-item",n)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.touchStartX=0,this.touchStartY=0,this.swipeThreshold=200,this.allowedResponsiveKeys=["flexible-height","infinite","swipe","behaviour","auto-slide-interval","per-view","step","responsive"],this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.swipeThreshold=Number(null!==(t=null==this?void 0:this.getAttribute("swipe-threshold"))&&void 0!==t?t:"200"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes");const e=this.getAttribute("responsive")||"";this.responsiveSettings=e?JSON.parse(e):[],"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe","per-view","step"]}attributeChangedCallback(t="",e="",i=""){"current-slide"===t&&e!==i&&(this.slide(),this.dispatchEvent(new CustomEvent("slide-complete",{bubbles:!0}))),this.update()}get currentSlideIndex(){var t;return parseInt(null!==(t=this.getAttribute("current-slide"))&&void 0!==t?t:"1")}set currentSlideIndex(t){this.setCurrentSlide(t)}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get perView(){var t;return parseInt(null!==(t=this.getAttribute("per-view"))&&void 0!==t?t:"1")}set perView(t){this.setAttribute("per-view",t.toString())}getTotalSlides(){const t=this.getSlideElements();return t?t.length:0}getSlideElements(){const t=this.querySelector("tp-slider-slides");return null==t?void 0:t.querySelectorAll(":scope > tp-slider-slide")}next(){const t=this.getTotalSlides();if(this.currentSlideIndex>=t-this.perView+1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1));const e=Math.min(this.currentSlideIndex+this.step,t-this.perView+1);e>t-this.perView+1||this.setCurrentSlide(e)}previous(){if(this.currentSlideIndex<=1)return void("yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()-this.perView+1));const t=this.getTotalSlides(),e=Math.ceil(t/this.step);let i=0;if(t/this.step!==Math.round(t/this.step)){let s;s=this.currentSlideIndex+this.step-1>=t?e:Math.ceil(this.currentSlideIndex/this.step),i=s===e?this.currentSlideIndex-this.step+1:this.currentSlideIndex-this.step}else i=this.currentSlideIndex-this.step;i>1?this.setCurrentSlide(i):this.setCurrentSlide(1)}getCurrentSlide(){return this.currentSlideIndex}setCurrentSlide(t){t>this.getTotalSlides()||t<=0||(this.dispatchEvent(new CustomEvent("slide-set",{bubbles:!0,detail:{slideIndex:t}})),this.setAttribute("current-slide",t.toString()))}slide(){if("yes"===this.getAttribute("disabled"))return;const t=this.querySelector("tp-slider-slides"),e=this.getSlideElements();t&&e&&(setTimeout((()=>this.updateHeight()),0),"fade"!==(this.getAttribute("behaviour")||"")&&e[this.currentSlideIndex-1]&&(t.style.left=`-${e[this.currentSlideIndex-1].offsetLeft}px`))}getArrow(t){const e=this.querySelectorAll(t),i=this;let s=this.querySelector(t);return e.forEach((t=>{i===t.closest("tp-slider")&&(s=t)})),s}update(){return t=this,e=void 0,s=function*(){const t=this.querySelector("tp-slider-nav"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]');yield customElements.whenDefined("tp-slider-nav"),yield customElements.whenDefined("tp-slider-nav-item"),yield customElements.whenDefined("tp-slider-count"),yield customElements.whenDefined("tp-slider-arrow");const r=this.getTotalSlides(),n=Math.ceil(r/this.step),l=this.getSlideElements();l&&l.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),null==t||t.updateNavItems();const d=this.querySelectorAll("tp-slider-nav-item");d&&d.forEach(((t,e,i)=>{var s;t.removeAttribute("current"),Math.round((this.currentSlideIndex-1)/this.step)===e?t.setAttribute("current","yes"):e===n-1&&this.currentSlideIndex+this.step-1>=r&&(t.setAttribute("current","yes"),null===(s=i[e-1])||void 0===s||s.removeAttribute("current"))})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{"function"==typeof t.update&&t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()-this.perView+1?null==s||s.setAttribute("disabled","yes"):null==s||s.removeAttribute("disabled"),1===this.getCurrentSlide()?null==i||i.setAttribute("disabled","yes"):null==i||i.removeAttribute("disabled")):(null==s||s.removeAttribute("disabled"),null==i||i.removeAttribute("disabled"))},new((i=void 0)||(i=Promise))((function(r,n){function l(t){try{h(s.next(t))}catch(t){n(t)}}function d(t){try{h(s.throw(t))}catch(t){n(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(l,d)}h((s=s.apply(t,e||[])).next())}));var t,e,i,s}updateHeight(){const t=this.querySelector("tp-slider-slides");if(!t)return;if("yes"!==this.getAttribute("flexible-height")&&"fade"!==this.getAttribute("behaviour"))return void t.style.removeProperty("height");const e=this.getSlideElements();if(e)if("yes"===this.getAttribute("flexible-height"))if(this.perView>1){const i=this.currentSlideIndex-1,s=i+this.perView;let r=0;for(let t=i;t<s;t++)e[t].scrollHeight>r&&(r=e[t].scrollHeight);t.style.height=`${r}px`}else{const i=e[this.currentSlideIndex-1].scrollHeight;t.style.height=`${i}px`}else{let i=0;e.forEach((t=>{t.scrollHeight>i&&(i=t.scrollHeight)})),t.style.height=`${i}px`}}handleResize(){setTimeout((()=>{this.updateAttributesResponsively()}),0),this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}updateAttributesResponsively(){this.responsiveSettings.length&&(this.allowedResponsiveKeys.forEach((t=>{this.removeAttribute(t)})),this.responsiveSettings.every((t=>{if(window.matchMedia(t.media).matches){for(const e in t)"media"!==e&&this.allowedResponsiveKeys.includes(e)&&this.setAttribute(e,t[e]);return!1}return!0})))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,s=e-this.touchStartX,r=i-this.touchStartY;Math.abs(s)>Math.abs(r)&&(s>0?s<this.swipeThreshold&&this.previous():s<0&&s>-this.swipeThreshold&&this.next())}autoSlide(){const t=this.getAttribute("auto-slide-interval");if(!t)return;const e=parseInt(t);e<=0||setTimeout((()=>{this.next(),this.autoSlide(),this.dispatchEvent(new CustomEvent("auto-slide-complete"))}),e)}}class e extends HTMLElement{}class i extends HTMLElement{constructor(){super(),"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");t&&setTimeout((()=>{t.handleResize()}),0)}}class s extends HTMLElement{}class r extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-slider");t&&("previous"===this.getAttribute("direction")?t.previous():"next"===this.getAttribute("direction")&&t.next())}}class n extends HTMLElement{constructor(){super(),this.template=null,this.slider=null,this.template=this.querySelector("template"),this.slider=this.closest("tp-slider")}updateNavItems(){var t,e,i;if(!this.template||!this.slider)return;const s=null===(t=this.slider)||void 0===t?void 0:t.getTotalSlides(),r=Math.ceil((s-(null===(e=this.slider)||void 0===e?void 0:e.perView))/(null===(i=this.slider)||void 0===i?void 0:i.step))+1;this.innerHTML="";for(let t=1;t<=r;t++){const e=this.template.content.cloneNode(!0),i=document.createElement("div");i.appendChild(e),this.innerHTML+=i.innerHTML.replace("$index",t.toString())}}}class l extends HTMLElement{constructor(){var t;super(),this.slider=this.closest("tp-slider"),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){this.slider&&this.slider.setCurrentSlide(this.getIndex())}getIndex(){var t,e,i,s,r,n,l,d;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const h=this.closest("tp-slider-nav"),u=null!==(i=null===(e=this.slider)||void 0===e?void 0:e.step)&&void 0!==i?i:1,o=null!==(r=null===(s=this.slider)||void 0===s?void 0:s.perView)&&void 0!==r?r:1,c=(null!==(l=null===(n=this.slider)||void 0===n?void 0:n.getTotalSlides())&&void 0!==l?l:1)-o+1,a=Array.from(null!==(d=null==h?void 0:h.children)&&void 0!==d?d:[]).indexOf(this)*u+1;return Math.min(c,a)}}class d extends HTMLElement{static get observedAttributes(){return["format"]}get format(){var t;return null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$current / $total"}set format(t){this.setAttribute("format",t)}attributeChangedCallback(){this.update()}update(){var t;const e=this.closest("tp-slider");if(!e)return;const i=Math.min(e.currentSlideIndex-1+e.perView,e.getTotalSlides()),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",i.toString()).replace("$total",s||""),this.setAttribute("current",i.toString()),this.setAttribute("total",s||"")}}customElements.define("tp-slider-nav",n),customElements.define("tp-slider",t),customElements.define("tp-slider-count",d),customElements.define("tp-slider-track",e),customElements.define("tp-slider-slides",i),customElements.define("tp-slider-slide",s),customElements.define("tp-slider-arrow",r),customElements.define("tp-slider-nav-item",l)})();
 //# sourceMappingURL=index.js.map

package/dist/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/slider/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/slider/tp-slider.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-track.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slides.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slide.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-arrow.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav-item.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-count.ts","webpack://@travelopia/web-components/./src/slider/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderCountElement } from './tp-slider-count';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\n\n/**\n * TP Slider.\n */\nexport class TPSliderElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected touchStartX: number = 0;\n\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Set current slide.\n\t\tif ( ! this.getAttribute( 'current-slide' ) ) {\n\t\t\tthis.setAttribute( 'current-slide', '1' );\n\t\t}\n\n\t\t// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slides`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\n\t\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\t// Update the component after the attribute change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\t// To get the current slide index.\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\n\t}\n\n\t/**\n\t * Get total number of slides.\n\t *\n\t * @return {number} Total slides.\n\t */\n\tgetTotalSlides(): number {\n\t\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\n\t\tconst slidesElement: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = slidesElement?.querySelectorAll( ':scope > tp-slider-slide' );\n\n\t\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = Math.min( this.currentSlideIndex + this.step, totalSlides - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Total Posible groups.\n\t\tconst totalPosibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Initialize previous slide number.\n\t\tlet previousSlideNumber: number = 0;\n\n\t\t// Checking if total slides are not divisible by step.\n\t\tif ( totalSlides / this.step !== Math.round( totalSlides / this.step ) ) {\n\t\t\t// Initialize current group.\n\t\t\tlet currentGroup: number;\n\n\t\t\t// Check if we are in the last group or in any other.\n\t\t\tif ( this.currentSlideIndex + this.step - 1 >= totalSlides ) {\n\t\t\t\tcurrentGroup = totalPosibleGroups;\n\t\t\t} else {\n\t\t\t\tcurrentGroup = Math.ceil( this.currentSlideIndex / this.step );\n\t\t\t}\n\n\t\t\t// Update previous slide number based on which group we are in.\n\t\t\tif ( currentGroup === totalPosibleGroups ) {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step + 1;\n\t\t\t} else {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t\t}\n\t\t} else {\n\t\t\t// Check if we are in the last group.\n\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t}\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tgetCurrentSlide(): number {\n\t\t// Get current slide index.\n\t\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\n\t\t// Set current slide index.\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes, it is. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\n\t\t// Yield to main thread to fix a bug in Safari 16.\n\t\tsetTimeout( () => this.updateHeight(), 0 );\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tupdate(): void {\n\t\t// Get sub-components.\n\t\tconst sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );\n\t\tconst sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Total slides variable and Total posible group.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\t\tconst totalPosibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// First, set the template for the slider nav.\n\t\tsliderNav?.updateNavItems();\n\n\t\t// Once the template has been set, query the slider nav items.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\t// Add current attribute.\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number, allItems: NodeListOf<TPSliderNavItemElement> ): void => {\n\t\t\t\t// Remove current attribute.\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Get Round of Index.\n\t\t\t\tconst groupIndex = Math.round( ( this.currentSlideIndex - 1 ) / this.step );\n\n\t\t\t\t// Check if index and groups are equal to update active dot.\n\t\t\t\tif ( groupIndex === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else if ( ( index === totalPosibleGroups - 1 && this.currentSlideIndex + this.step - 1 >= totalSlides ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t\t// Remove current index from last 2nd item.\n\t\t\t\t\tallItems[ index - 1 ]?.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCounts ) {\n\t\t\t// Set total attribute.\n\t\t\tthis.setAttribute( 'total', this.getTotalSlides().toString() );\n\n\t\t\t// Update slider counts.\n\t\t\tsliderCounts.forEach( ( slideCount: TPSliderCountElement ) => {\n\t\t\t\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\t// For the first slide.\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, lets flag this component as resizing.\n\t\tthis.setAttribute( 'resizing', 'yes' );\n\n\t\t// Run the slide (so height can be resized).\n\t\tthis.slide();\n\n\t\t// Done, let's remove the flag.\n\t\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\n\t}\n\n\t/**\n\t * Detect touch start event, and store the starting location.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchStart( e: TouchEvent ): void {\n\t\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\n\t\t}\n\t}\n\n\t/**\n\t * Detect touch end event, and check if it was a left or right swipe.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchEnd( e: TouchEvent ): void {\n\t\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\n\t}\n}\n","/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Arrow.\n */\nexport class TPSliderArrowElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected slider: TPSliderElement | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get elements.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.slider = this.closest( 'tp-slider' );\n\t}\n\n\t/**\n\t * Update nav items based on template.\n\t */\n\tpublic updateNavItems(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template || ! this.slider ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides: number = this.slider?.getTotalSlides();\n\n\t\t// Initialise the total number of navigation items.\n\t\tconst totalNavItems: number = Math.ceil( ( totalSlides - this.slider?.perView ) / this.slider?.step ) + 1;\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 1; i <= totalNavItems; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem: Node = this.template.content.cloneNode( true );\n\t\t\tconst div: HTMLDivElement = document.createElement( 'div' );\n\t\t\tdiv.appendChild( navItem );\n\n\t\t\t// Append the navigation item.\n\t\t\tthis.innerHTML += div.innerHTML.replace( '$index', i.toString() );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// Initialize variables.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step ?? 1;\n\t\tconst perView = this.slider?.perView ?? 1;\n\t\tconst totalSlides = this.slider?.getTotalSlides() ?? 1;\n\t\tconst index = Array.from( slideNav?.children ?? [] ).indexOf( this );\n\n\t\t// Find posible position of the slide.\n\t\tconst lastItem = ( totalSlides - perView ) + 1;\n\t\tconst targetSlide = ( index * step ) + 1;\n\n\t\t// Get the new slide number.\n\t\tconst currentSlideIndex = Math.min( lastItem, targetSlide );\n\n\t\t// return the index.\n\t\treturn currentSlideIndex;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Count.\n */\nexport class TPSliderCountElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} Observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\t// Attributes observed by this component.\n\t\treturn [ 'format' ];\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} Format.\n\t */\n\tget format(): string {\n\t\t// Get the 'format' attribute value.\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including per view. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.perView, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\n\t\tthis.setAttribute( 'total', total || '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderCountElement } from './tp-slider-count';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-slider-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","nextSlideIndex","Math","min","previous","totalPosibleGroups","ceil","previousSlideNumber","round","currentGroup","getCurrentSlide","detail","slideIndex","slidesContainer","setTimeout","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNav","sliderCounts","leftArrow","rightArrow","removeAttribute","updateNavItems","sliderNavItems","navItem","allItems","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderSlideElement","TPSliderArrowElement","handleClick","TPSliderNavElement","template","totalNavItems","innerHTML","content","cloneNode","div","createElement","appendChild","replace","TPSliderNavItemElement","getIndex","slideNav","lastItem","targetSlide","Array","from","children","indexOf","TPSliderCountElement","format","current","total","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/slider/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/slider/tp-slider.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-track.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slides.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-slide.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-arrow.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-nav-item.ts","webpack://@travelopia/web-components/./src/slider/tp-slider-count.ts","webpack://@travelopia/web-components/./src/slider/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderCountElement } from './tp-slider-count';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\n\n/**\n * TP Slider.\n */\nexport class TPSliderElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected touchStartX: number = 0;\n\tprotected touchStartY: number = 0;\n\tprotected swipeThreshold: number = 200;\n\tprotected responsiveSettings: { [ key: string ]: any };\n\tprotected allowedResponsiveKeys: string[] = [\n\t\t'flexible-height',\n\t\t'infinite',\n\t\t'swipe',\n\t\t'behaviour',\n\t\t'auto-slide-interval',\n\t\t'per-view',\n\t\t'step',\n\t\t'responsive',\n\t];\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Set current slide.\n\t\tif ( ! this.getAttribute( 'current-slide' ) ) {\n\t\t\tthis.setAttribute( 'current-slide', '1' );\n\t\t}\n\n\t\t// Threshold Setting.\n\t\tthis.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );\n\n\t\t// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Responsive Settings.\n\t\tconst responsiveSettingsJSON: string = this.getAttribute( 'responsive' ) || '';\n\t\tthis.responsiveSettings = responsiveSettingsJSON ? JSON.parse( responsiveSettingsJSON ) : [];\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t/**\n\t\t\t * We set the resize observer in `tp-slider-slides`\n\t\t\t * because These are just fallbacks for browsers that don't support ResizeObserver.\n\t\t\t */\n\n\t\t\t// @ts-ignore\n\t\t\twindow.addEventListener( 'resize', this.handleResize.bind( this ) );\n\t\t\tdocument.fonts.ready.then( () => this.handleResize() );\n\t\t}\n\n\t\t// Touch listeners.\n\t\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );\n\t\tthis.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback() {\n\t\t/**\n\t\t * Update on initial render.\n\t\t *\n\t\t * This is so that the disabled values of the navigation arrows\n\t\t * can be set because attributeChangedCallback does not get fired when\n\t\t * no attributes are passed to the slider.\n\t\t */\n\t\tthis.update();\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\t// Observed attributes.\n\t\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];\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\t// Keep an eye on current slide.\n\t\tif ( 'current-slide' === name && oldValue !== newValue ) {\n\t\t\tthis.slide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'slide-complete', { bubbles: true } ) );\n\t\t}\n\n\t\t// Update the component after the attribute change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tget currentSlideIndex(): number {\n\t\t// To get the current slide index.\n\t\treturn parseInt( this.getAttribute( 'current-slide' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tset currentSlideIndex( index: number ) {\n\t\t// Set the current slide index.\n\t\tthis.setCurrentSlide( index );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// To get the current step.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Step.\n\t */\n\tset step( step: number ) {\n\t\t// Set the current step.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get per view.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget perView(): number {\n\t\t// To get number of slides per view.\n\t\treturn parseInt( this.getAttribute( 'per-view' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set per view.\n\t *\n\t * @param {number} perView Per view.\n\t */\n\tset perView( perView: number ) {\n\t\t// Set the number of slides per view.\n\t\tthis.setAttribute( 'per-view', perView.toString() );\n\t}\n\n\t/**\n\t * Get total number of slides.\n\t *\n\t * @return {number} Total slides.\n\t */\n\tgetTotalSlides(): number {\n\t\t// To get the total number of slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\t// Tell the total number of slides.\n\t\t\treturn slides.length;\n\t\t}\n\n\t\t// Else return 0.\n\t\treturn 0;\n\t}\n\n\t/**\n\t * Get Slide Elements.\n\t */\n\tgetSlideElements() {\n\t\t// Get slides.\n\t\tconst slidesElement: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = slidesElement?.querySelectorAll( ':scope > tp-slider-slide' );\n\n\t\t// Return array of slides.\n\t\treturn slides;\n\t}\n\n\t/**\n\t * Navigate to the next slide.\n\t */\n\tnext(): void {\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Check if we are at the last slide considering per view attribute.\n\t\tif ( this.currentSlideIndex >= totalSlides - this.perView + 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\t// Yes, we are, and go back to first slide.\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get next slide index by adding minimum of step or remaining number of slides.\n\t\tconst nextSlideIndex: number = Math.min( this.currentSlideIndex + this.step, totalSlides - this.perView + 1 );\n\n\t\t// Check if the next slide step is not taking it beyond the last slide.\n\t\tif ( nextSlideIndex > ( totalSlides - this.perView + 1 ) ) {\n\t\t\t// Yes, it is.\n\t\t\treturn;\n\t\t}\n\n\t\t// Everything is good, go to next slide.\n\t\tthis.setCurrentSlide( nextSlideIndex );\n\t}\n\n\t/**\n\t * Navigate to the previous slide.\n\t */\n\tprevious(): void {\n\t\t// Check if we are at the first slide.\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\t// Check if we are in infinite mode.\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() - this.perView + 1 );\n\t\t\t}\n\n\t\t\t// Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize total slides variable.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\t// Total Possible groups.\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Initialize previous slide number.\n\t\tlet previousSlideNumber: number = 0;\n\n\t\t// Checking if total slides are not divisible by step.\n\t\tif ( totalSlides / this.step !== Math.round( totalSlides / this.step ) ) {\n\t\t\t// Initialize current group.\n\t\t\tlet currentGroup: number;\n\n\t\t\t// Check if we are in the last group or in any other.\n\t\t\tif ( this.currentSlideIndex + this.step - 1 >= totalSlides ) {\n\t\t\t\tcurrentGroup = totalPossibleGroups;\n\t\t\t} else {\n\t\t\t\tcurrentGroup = Math.ceil( this.currentSlideIndex / this.step );\n\t\t\t}\n\n\t\t\t// Update previous slide number based on which group we are in.\n\t\t\tif ( currentGroup === totalPossibleGroups ) {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step + 1;\n\t\t\t} else {\n\t\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t\t}\n\t\t} else {\n\t\t\t// Check if we are in the last group.\n\t\t\tpreviousSlideNumber = this.currentSlideIndex - this.step;\n\t\t}\n\n\t\t// Check if the previous slide step is not taking it beyond the first slide.\n\t\tif ( previousSlideNumber > 1 ) {\n\t\t\tthis.setCurrentSlide( previousSlideNumber );\n\t\t} else {\n\t\t\tthis.setCurrentSlide( 1 );\n\t\t}\n\t}\n\n\t/**\n\t * Get current slide index.\n\t *\n\t * @return {number} Current slide index.\n\t */\n\tgetCurrentSlide(): number {\n\t\t// Get current slide index.\n\t\treturn this.currentSlideIndex;\n\t}\n\n\t/**\n\t * Set the current slide index.\n\t *\n\t * @param {number} index Slide index.\n\t */\n\tsetCurrentSlide( index: number ): void {\n\t\t// Check if slide index is valid.\n\t\tif ( index > this.getTotalSlides() || index <= 0 ) {\n\t\t\t// Stop! It's not valid.\n\t\t\treturn;\n\t\t}\n\n\t\t// dispatch slide-set event.\n\t\tthis.dispatchEvent( new CustomEvent( 'slide-set', {\n\t\t\tbubbles: true,\n\t\t\tdetail: {\n\t\t\t\tslideIndex: index,\n\t\t\t},\n\t\t} ) );\n\n\t\t// Set current slide index.\n\t\tthis.setAttribute( 'current-slide', index.toString() );\n\t}\n\n\t/**\n\t * Slide to the current slide.\n\t *\n\t * @protected\n\t */\n\tprotected slide(): void {\n\t\t// Check if slider is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes, it is. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if we have slide container and slides.\n\t\tif ( ! slidesContainer || ! slides ) {\n\t\t\t// No, we don't. Either one of them or both are missing. So stop.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\n\t\t// Yield to main thread to fix a bug in Safari 16.\n\t\tsetTimeout( () => this.updateHeight(), 0 );\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) || '';\n\n\t\t// Check if behaviour is set to fade and slide on the current slide index is present in the slides array.\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\n\t\t\t// Yes, it is. So slide to the current slide.\n\t\t\tslidesContainer.style.left = `-${ slides[ this.currentSlideIndex - 1 ].offsetLeft }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Get the arrow element by selector.\n\t *\n\t * In case of nested sliders, it difficult to find the correct arrow\n\t * because arrows can be placed anywhere.\n\t * This function checks if the parent tp-slider belongs to this component,\n\t * then return that arrow element, using 'this'.\n\t *\n\t * @param {string} selector Selector.\n\t */\n\tgetArrow( selector: string ) {\n\t\t// Get all arrows.\n\t\tconst arrows: NodeListOf<TPSliderArrowElement> | null = this.querySelectorAll( selector );\n\t\tconst parentSliderElement: TPSliderElement = this;\n\t\tlet theArrow: TPSliderArrowElement | null = this.querySelector( selector );\n\n\t\t// Loop through all the arrows including the one's inside nested slider.\n\t\tarrows.forEach( ( arrow ) => {\n\t\t\t/**\n\t\t\t * If the closest tp-slider is the same as the parentSliderElement, that means we have found\n\t\t\t * the correct arrow.\n\t\t\t */\n\t\t\tif ( parentSliderElement === arrow.closest( 'tp-slider' ) ) {\n\t\t\t\ttheArrow = arrow;\n\t\t\t}\n\t\t} );\n\n\t\t// Return arrow.\n\t\treturn theArrow;\n\t}\n\n\t/**\n\t * Update stuff when any attribute has changed.\n\t * Example: Update sub-components.\n\t */\n\tasync update(): Promise<void> {\n\t\t// Get sub-components.\n\t\tconst sliderNav: TPSliderNavElement | null = this.querySelector( 'tp-slider-nav' );\n\t\tconst sliderCounts: NodeListOf<TPSliderCountElement> | null = this.querySelectorAll( 'tp-slider-count' );\n\t\tconst leftArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"previous\"]' );\n\t\tconst rightArrow: TPSliderArrowElement | null = this.getArrow( 'tp-slider-arrow[direction=\"next\"]' );\n\n\t\t// Wait for initialization - done to avoid updateNavItems undefined error.\n\t\tawait customElements.whenDefined( 'tp-slider-nav' );\n\t\tawait customElements.whenDefined( 'tp-slider-nav-item' );\n\t\tawait customElements.whenDefined( 'tp-slider-count' );\n\t\tawait customElements.whenDefined( 'tp-slider-arrow' );\n\n\t\t// Total slides variable and Total possible group.\n\t\tconst totalSlides: number = this.getTotalSlides();\n\t\tconst totalPossibleGroups: number = Math.ceil( totalSlides / this.step );\n\n\t\t// Set active slide.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( slides ) {\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement, index: number ): void => {\n\t\t\t\t// Update active attribute.\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tslide.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tslide.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// First, set the template for the slider nav.\n\t\tsliderNav?.updateNavItems();\n\n\t\t// Once the template has been set, query the slider nav items.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> | null = this.querySelectorAll( 'tp-slider-nav-item' );\n\n\t\t// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\t// Add current attribute.\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number, allItems: NodeListOf<TPSliderNavItemElement> ): void => {\n\t\t\t\t// Remove current attribute.\n\t\t\t\tnavItem.removeAttribute( 'current' );\n\n\t\t\t\t// Get Round of Index.\n\t\t\t\tconst groupIndex = Math.round( ( this.currentSlideIndex - 1 ) / this.step );\n\n\t\t\t\t// Check if index and groups are equal to update active dot.\n\t\t\t\tif ( groupIndex === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else if ( ( index === totalPossibleGroups - 1 && this.currentSlideIndex + this.step - 1 >= totalSlides ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\n\t\t\t\t\t// Remove current index from last 2nd item.\n\t\t\t\t\tallItems[ index - 1 ]?.removeAttribute( 'current' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update slider count.\n\t\tif ( sliderCounts ) {\n\t\t\t// Set total attribute.\n\t\t\tthis.setAttribute( 'total', this.getTotalSlides().toString() );\n\n\t\t\t// Update slider counts.\n\t\t\tsliderCounts.forEach( ( slideCount: TPSliderCountElement ) => {\n\t\t\t\t// Check if the slideCount.update is a function.\n\t\t\t\tif ( 'function' === typeof slideCount.update ) {\n\t\t\t\t\t// Update slide count.\n\t\t\t\t\tslideCount.update();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\t// For the last slide.\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() - this.perView + 1 ) {\n\t\t\t\trightArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\n\t\t\t// For the first slide.\n\t\t\tif ( 1 === this.getCurrentSlide() ) {\n\t\t\t\tleftArrow?.setAttribute( 'disabled', 'yes' );\n\t\t\t} else {\n\t\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t\t}\n\t\t} else {\n\t\t\trightArrow?.removeAttribute( 'disabled' );\n\t\t\tleftArrow?.removeAttribute( 'disabled' );\n\t\t}\n\t}\n\n\t/**\n\t * Update the height of the slider based on current slide.\n\t */\n\tupdateHeight(): void {\n\t\t// Get slides container to resize.\n\t\tconst slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );\n\n\t\t// Check if slides container is available.\n\t\tif ( ! slidesContainer ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail early if we don't want it to be flexible height - as long as it doesn't fade.\n\t\tif ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {\n\t\t\t// Remove height property for good measure!\n\t\t\tslidesContainer.style.removeProperty( 'height' );\n\n\t\t\t// Bail early.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> | null | undefined = this.getSlideElements();\n\n\t\t// Check if slides are available.\n\t\tif ( ! slides ) {\n\t\t\t// No slides to resize.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a flexible height.\n\t\tif ( 'yes' === this.getAttribute( 'flexible-height' ) ) {\n\t\t\t// Check if per-view is greater than 1.\n\t\t\tif ( this.perView > 1 ) {\n\t\t\t\tconst currentIndex: number = this.currentSlideIndex - 1;\n\t\t\t\tconst slidesOnCurrentView: number = currentIndex + this.perView;\n\t\t\t\tlet maxHeight: number = 0;\n\n\t\t\t\t// Traverse all slides in the current view and add their height to the array.\n\t\t\t\tfor ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) {\n\t\t\t\t\t// Check if the slide exists.\n\t\t\t\t\tif ( slides[ i ].scrollHeight > maxHeight ) {\n\t\t\t\t\t\tmaxHeight = slides[ i ].scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Set the height of the container to be the max height of the slides in the current view.\n\t\t\t\tslidesContainer.style.height = `${ maxHeight }px`;\n\t\t\t} else {\n\t\t\t\t// Set the height of the container to be the height of the current slide.\n\t\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t\t}\n\t\t} else {\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tlet height: number = 0;\n\n\t\t\t// Traverse all slides and add their height to the array.\n\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\n\t\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\t\tif ( slide.scrollHeight > height ) {\n\t\t\t\t\theight = slide.scrollHeight;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Set the height of the container to be the height of the tallest slide.\n\t\t\tslidesContainer.style.height = `${ height }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Resize the slider when the window is resized.\n\t *\n\t * @protected\n\t */\n\thandleResize(): void {\n\t\t// Update responsive settings. We are using setTimeout for INP( Interaction for Next Paint ).\n\t\tsetTimeout( () => {\n\t\t\t// Update attributes responsive settings.\n\t\t\tthis.updateAttributesResponsively();\n\t\t}, 0 );\n\n\t\t// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\n\t\t\t// Yes we are, early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// First, lets flag this component as resizing.\n\t\tthis.setAttribute( 'resizing', 'yes' );\n\n\t\t// Run the slide (so height can be resized).\n\t\tthis.slide();\n\n\t\t// Done, let's remove the flag.\n\t\tthis.removeAttribute( 'resizing' );\n\t}\n\n\t/**\n\t * Update attributes responsive settings.\n\t */\n\tupdateAttributesResponsively(): void {\n\t\t// Check if responsiveSettings exist.\n\t\tif ( ! this.responsiveSettings.length ) {\n\t\t\t// Early Return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Step 2: First remove all the allowed responsive keys.\n\t\tthis.allowedResponsiveKeys.forEach( ( key: string ) => {\n\t\t\t// Remove.\n\t\t\tthis.removeAttribute( key );\n\t\t} );\n\n\t\t// Step 3: Loop through responsiveSettings and check if the media query is matched.\n\t\tthis.responsiveSettings.every( ( settings: { [ key: string ]: any } ) => {\n\t\t\t// Check if media query is matched.\n\t\t\tif ( window.matchMedia( settings.media ).matches ) {\n\t\t\t\t// If yes, loop through the settings at this media breakpoint.\n\t\t\t\tfor ( const settingKey in settings ) {\n\t\t\t\t\t// Check if the setting key is not media.\n\t\t\t\t\tif ( 'media' !== settingKey && this.allowedResponsiveKeys.includes( settingKey ) ) {\n\t\t\t\t\t\t// Set those keys as attributes.\n\t\t\t\t\t\tthis.setAttribute( settingKey, settings[ settingKey ] );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Return false to break out of the loop.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Return true so that the loop continues, if it does not break above.\n\t\t\treturn true;\n\t\t} );\n\t}\n\n\t/**\n\t * Detect touch start event, and store the starting location.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchStart( e: TouchEvent ): void {\n\t\t// initialize touch start coordinates\n\t\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\n\t\t\tthis.touchStartY = e.touches[ 0 ].clientY;\n\t\t}\n\t}\n\n\t/**\n\t * Detect touch end event, and check if it was a left or right swipe.\n\t *\n\t * @param {Event} e Touch event.\n\t *\n\t * @protected\n\t */\n\tprotected handleTouchEnd( e: TouchEvent ): void {\n\t\t// Early return if swipe is not enabled.\n\t\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate the horizontal and vertical distance moved.\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst touchEndY: number = e.changedTouches[ 0 ].clientY;\n\t\tconst swipeDistanceX: number = touchEndX - this.touchStartX;\n\t\tconst swipeDistanceY: number = touchEndY - this.touchStartY;\n\n\t\t// Determine if the swipe is predominantly horizontal or vertical.\n\t\tconst isHorizontalSwipe: boolean = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );\n\n\t\t// If it's not horizontal swipe, return\n\t\tif ( ! isHorizontalSwipe ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if it's a right or left swipe.\n\t\tif ( swipeDistanceX > 0 ) {\n\t\t\t// Right-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX < this.swipeThreshold ) {\n\t\t\t\tthis.previous();\n\t\t\t}\n\t\t} else if ( swipeDistanceX < 0 ) {\n\t\t\t// Left-Swipe: Check if horizontal swipe distance is less than the threshold.\n\t\t\tif ( swipeDistanceX > -this.swipeThreshold ) {\n\t\t\t\tthis.next();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Auto slide.\n\t */\n\tprotected autoSlide(): void {\n\t\t// Auto Slide.\n\t\tconst autoSlideInterval: string | null = this.getAttribute( 'auto-slide-interval' );\n\n\t\t// Check if we have an auto slider interval.\n\t\tif ( ! autoSlideInterval ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\n\t\t// Check if interval is valid.\n\t\tif ( interval <= 0 ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Run this on a timeout, rather than interval, so the interval can be controlled after the component is initialized.\n\t\tsetTimeout( (): void => {\n\t\t\t// Run the next slide.\n\t\t\tthis.next();\n\t\t\tthis.autoSlide();\n\t\t\tthis.dispatchEvent( new CustomEvent( 'auto-slide-complete' ) );\n\t\t}, interval );\n\t}\n}\n","/**\n * TP Slider Track.\n */\nexport class TPSliderTrackElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Slides.\n */\nexport class TPSliderSlidesElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Resize observer.\n\t\tif ( 'ResizeObserver' in window ) {\n\t\t\tnew ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );\n\t\t}\n\t}\n\n\t/**\n\t * Handle slide height change.\n\t */\n\tprotected handleHeightChange(): void {\n\t\t// Get the parent tp-slider element.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Bail if not found.\n\t\tif ( ! slider ) {\n\t\t\t// Bail early if not found.\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Yield to main thread to avoid observation errors.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors\n\t\t */\n\t\tsetTimeout( (): void => {\n\t\t\t// Handle resize.\n\t\t\tslider.handleResize();\n\t\t}, 0 );\n\t}\n}\n","/**\n * TP Slider Slide.\n */\nexport class TPSliderSlideElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Arrow.\n */\nexport class TPSliderArrowElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get the button and add event listener.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\t// If disabled, do nothing.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// If no slider, early return.\n\t\tif ( ! slider ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initiate slider according to the direction of the button clicked.\n\t\tif ( 'previous' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.previous();\n\t\t} else if ( 'next' === this.getAttribute( 'direction' ) ) {\n\t\t\tslider.next();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Nav.\n */\nexport class TPSliderNavElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected template: HTMLTemplateElement | null = null;\n\tprotected slider: TPSliderElement | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get elements.\n\t\tthis.template = this.querySelector( 'template' );\n\t\tthis.slider = this.closest( 'tp-slider' );\n\t}\n\n\t/**\n\t * Update nav items based on template.\n\t */\n\tpublic updateNavItems(): void {\n\t\t// Bail if no template.\n\t\tif ( ! this.template || ! this.slider ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Total slides.\n\t\tconst totalSlides: number = this.slider?.getTotalSlides();\n\n\t\t// Initialise the total number of navigation items.\n\t\tconst totalNavItems: number = Math.ceil( ( totalSlides - this.slider?.perView ) / this.slider?.step ) + 1;\n\n\t\t// Clear the navigation.\n\t\tthis.innerHTML = '';\n\n\t\t// Append the navigation items.\n\t\tfor ( let i = 1; i <= totalNavItems; i++ ) {\n\t\t\t// Clone the template.\n\t\t\tconst navItem: Node = this.template.content.cloneNode( true );\n\t\t\tconst div: HTMLDivElement = document.createElement( 'div' );\n\t\t\tdiv.appendChild( navItem );\n\n\t\t\t// Append the navigation item.\n\t\t\tthis.innerHTML += div.innerHTML.replace( '$index', i.toString() );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderNavElement } from './tp-slider-nav';\n\n/**\n * TP Slider Nav Item.\n */\nexport class TPSliderNavItemElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected slider : TPSliderElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.slider = this.closest( 'tp-slider' );\n\n\t\t// Get the nav-item button.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle when the button is clicked.\n\t */\n\thandleClick(): void {\n\t\t// Check if slider exists.\n\t\tif ( ! this.slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current slide.\n\t\tthis.slider.setCurrentSlide( this.getIndex() );\n\t}\n\n\t/**\n\t * Get index of this item inside the navigation.\n\t *\n\t * @return {number} Index.\n\t */\n\tgetIndex(): number {\n\t\t// Check if we have an index.\n\t\tif ( this.getAttribute( 'index' ) ) {\n\t\t\t// Yes, return it.\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\t// Initialize variables.\n\t\tconst slideNav: TPSliderNavElement | null = this.closest( 'tp-slider-nav' );\n\t\tconst step = this.slider?.step ?? 1;\n\t\tconst perView = this.slider?.perView ?? 1;\n\t\tconst totalSlides = this.slider?.getTotalSlides() ?? 1;\n\t\tconst index = Array.from( slideNav?.children ?? [] ).indexOf( this );\n\n\t\t// Find posible position of the slide.\n\t\tconst lastItem = ( totalSlides - perView ) + 1;\n\t\tconst targetSlide = ( index * step ) + 1;\n\n\t\t// Get the new slide number.\n\t\tconst currentSlideIndex = Math.min( lastItem, targetSlide );\n\n\t\t// return the index.\n\t\treturn currentSlideIndex;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPSliderElement } from './tp-slider';\n\n/**\n * TP Slider Count.\n */\nexport class TPSliderCountElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} Observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\t// Attributes observed by this component.\n\t\treturn [ 'format' ];\n\t}\n\n\t/**\n\t * Get format.\n\t *\n\t * @return {string} Format.\n\t */\n\tget format(): string {\n\t\t// Get the 'format' attribute value.\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/**\n\t * Set format.\n\t *\n\t * @param {string} format Format.\n\t */\n\tset format( format: string ) {\n\t\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get slider.\n\t\tconst slider: TPSliderElement | null = this.closest( 'tp-slider' );\n\n\t\t// Check if slider exists.\n\t\tif ( ! slider ) {\n\t\t\t// No its not! Terminate.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initializing current variable including per view. Along with initializing total variable.\n\t\tconst current: number = Math.min( slider.currentSlideIndex - 1 + slider.perView, slider.getTotalSlides() );\n\t\tconst total: string = slider.getAttribute( 'total' ) ?? '';\n\n\t\t// Updating variables in format attribute.\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current.toString() )\n\t\t\t\t.replace( '$total', total || '' );\n\n\t\t// Updating current and total attributes.\n\t\tthis.setAttribute( 'current', current.toString() );\n\t\tthis.setAttribute( 'total', total || '' );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPSliderElement } from './tp-slider';\nimport { TPSliderTrackElement } from './tp-slider-track';\nimport { TPSliderSlidesElement } from './tp-slider-slides';\nimport { TPSliderSlideElement } from './tp-slider-slide';\nimport { TPSliderArrowElement } from './tp-slider-arrow';\nimport { TPSliderNavElement } from './tp-slider-nav';\nimport { TPSliderNavItemElement } from './tp-slider-nav-item';\nimport { TPSliderCountElement } from './tp-slider-count';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-slider-nav', TPSliderNavElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\ncustomElements.define( 'tp-slider-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider-track', TPSliderTrackElement );\ncustomElements.define( 'tp-slider-slides', TPSliderSlidesElement );\ncustomElements.define( 'tp-slider-slide', TPSliderSlideElement );\ncustomElements.define( 'tp-slider-arrow', TPSliderArrowElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","touchStartY","swipeThreshold","allowedResponsiveKeys","this","getAttribute","setAttribute","Number","slide","autoSlide","responsiveSettingsJSON","responsiveSettings","JSON","parse","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","passive","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","step","toString","perView","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","nextSlideIndex","Math","min","previous","totalPossibleGroups","ceil","previousSlideNumber","round","currentGroup","getCurrentSlide","detail","slideIndex","slidesContainer","setTimeout","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNav","sliderCounts","leftArrow","rightArrow","customElements","whenDefined","removeAttribute","updateNavItems","sliderNavItems","navItem","allItems","slideCount","removeProperty","currentIndex","slidesOnCurrentView","maxHeight","i","scrollHeight","height","updateAttributesResponsively","key","every","settings","matchMedia","media","matches","settingKey","includes","e","touches","clientX","clientY","touchEndX","changedTouches","touchEndY","swipeDistanceX","swipeDistanceY","abs","autoSlideInterval","interval","TPSliderTrackElement","TPSliderSlidesElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderSlideElement","TPSliderArrowElement","handleClick","TPSliderNavElement","template","totalNavItems","innerHTML","content","cloneNode","div","createElement","appendChild","replace","TPSliderNavItemElement","getIndex","slideNav","lastItem","targetSlide","Array","from","children","indexOf","TPSliderCountElement","format","current","total","define"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"