npm - @travelopia/web-components - Versions diffs - 0.5.21 → 0.5.23 - Mend

@travelopia/web-components 0.5.21 → 0.5.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/form/index.js CHANGED Viewed

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

package/dist/form/index.js.map CHANGED Viewed

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

package/dist/slider/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.touchStartX=0,this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes"),"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe"]}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)}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();this.currentSlideIndex>=t?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1):this.setCurrentSlide(this.currentSlideIndex+1)}previous(){this.currentSlideIndex<=1?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()):this.setCurrentSlide(this.currentSlideIndex-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&&(this.updateHeight(),"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.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("current","yes"):t.removeAttribute("current")})),e&&(this.setAttribute("total",this.getTotalSlides().toString()),e.forEach((t=>{t.update()}))),"yes"!==this.getAttribute("infinite")?(this.getCurrentSlide()===this.getTotalSlides()?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")){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(){this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX-this.touchStartX;e>0?this.previous():e<0&&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{}class s extends HTMLElement{connectedCallback(){"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");null==t||t.handleResize()}}class r extends HTMLElement{connectedCallback(){var t;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{}class n extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){const t=this.closest("tp-slider");t&&t.setCurrentSlide(this.getIndex())}getIndex(){var t,e;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const i=this.closest("tp-slider-nav");return Array.from(null!==(e=null==i?void 0:i.children)&&void 0!==e?e:[]).indexOf(this)+1}}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(){const t=this.closest("tp-slider");if(!t)return;const e=t.getAttribute("current-slide"),i=t.getAttribute("total");this.innerHTML=this.format.replace("$current",e||"").replace("$total",i||""),this.setAttribute("current",e||""),this.setAttribute("total",i||"")}}customElements.define("tp-slider-count",d),customElements.define("tp-slider",t),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",l),customElements.define("tp-slider-nav-item",n)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.touchStartX=0,this.getAttribute("current-slide")||this.setAttribute("current-slide","1"),this.slide(),this.autoSlide(),this.setAttribute("initialized","yes"),"ResizeObserver"in window||(window.addEventListener("resize",this.handleResize.bind(this)),document.fonts.ready.then((()=>this.handleResize()))),this.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.addEventListener("touchend",this.handleTouchEnd.bind(this))}connectedCallback(){this.update()}static get observedAttributes(){return["current-slide","flexible-height","infinite","swipe"]}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)}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();this.currentSlideIndex>=t?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(1):this.setCurrentSlide(this.currentSlideIndex+1)}previous(){this.currentSlideIndex<=1?"yes"===this.getAttribute("infinite")&&this.setCurrentSlide(this.getTotalSlides()):this.setCurrentSlide(this.currentSlideIndex-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&&(this.updateHeight(),"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.querySelectorAll("tp-slider-nav-item"),e=this.querySelectorAll("tp-slider-count"),i=this.getArrow('tp-slider-arrow[direction="previous"]'),s=this.getArrow('tp-slider-arrow[direction="next"]'),r=this.getSlideElements();r&&r.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("active","yes"):t.removeAttribute("active")})),t&&t.forEach(((t,e)=>{this.currentSlideIndex-1===e?t.setAttribute("current","yes"):t.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()?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")){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(){this.getAttribute("resizing")||(this.setAttribute("resizing","yes"),this.slide(),this.removeAttribute("resizing"))}handleTouchStart(t){"yes"===this.getAttribute("swipe")&&(this.touchStartX=t.touches[0].clientX)}handleTouchEnd(t){if("yes"!==this.getAttribute("swipe"))return;const e=t.changedTouches[0].clientX-this.touchStartX;e>0?this.previous():e<0&&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{}class s extends HTMLElement{connectedCallback(){"ResizeObserver"in window&&new ResizeObserver(this.handleHeightChange.bind(this)).observe(this)}handleHeightChange(){const t=this.closest("tp-slider");null==t||t.handleResize()}}class r extends HTMLElement{connectedCallback(){var t;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{}class l extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleClick.bind(this))}handleClick(){const t=this.closest("tp-slider");t&&t.setCurrentSlide(this.getIndex())}getIndex(){var t,e;if(this.getAttribute("index"))return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"0");const i=this.closest("tp-slider-nav");return Array.from(null!==(e=null==i?void 0:i.children)&&void 0!==e?e:[]).indexOf(this)+1}}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(){const t=this.closest("tp-slider");if(!t)return;const e=t.getAttribute("current-slide"),i=t.getAttribute("total");this.innerHTML=this.format.replace("$current",e||"").replace("$total",i||""),this.setAttribute("current",e||""),this.setAttribute("total",i||"")}}customElements.define("tp-slider-count",d),customElements.define("tp-slider",t),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",n),customElements.define("tp-slider-nav-item",l)})();
 //# sourceMappingURL=index.js.map

package/dist/slider/index.js.map CHANGED Viewed

	@@ -1 +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 { 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\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\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// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t// We set the resize observer in `tp-slider-slide`\n\t\t\t// These are just fallbacks for browsers that don't support ResizeObserver.\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\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\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\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( '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\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\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\tthis.setCurrentSlide( index );\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\tconst slides: NodeListOf<TPSliderSlideElement> \| null \| undefined = this.getSlideElements();\n\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/\n\t Get Slide Elements.\n\t /\n\tgetSlideElements() {\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\treturn slides;\n\t}\n\n\t/\n\t Navigate to the next slide.\n\t /\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex + 1 );\n\t}\n\n\t/\n\t Navigate to the previous slide.\n\t /\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex - 1 );\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\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\tif ( index > this.getTotalSlides() \|\| index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\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\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\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\t\tif ( ! slidesContainer \|\| ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) \|\| '';\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\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 subcomponents.\n\t /\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> \| null = this.querySelectorAll( 'tp-slider-nav-item' );\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// 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\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// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.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\tslideCount.update();\n\t\t\t} );\n\t\t}\n\n\t\t// Enable / disable arrows.\n\t\tif ( 'yes' !== this.getAttribute( 'infinite' ) ) {\n\t\t\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\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\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\t\tif ( ! slidesContainer ) {\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\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> \| null \| undefined = this.getSlideElements();\n\t\tif ( ! slides ) {\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// Set the height of the container to be the height of the current slide.\n\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\tslidesContainer.style.height = `${ height }px`;\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\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\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\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// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\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 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\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\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\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst swipeDistance: number = touchEndX - this.touchStartX;\n\n\t\tif ( swipeDistance > 0 ) {\n\t\t\tthis.previous();\n\t\t} else if ( swipeDistance < 0 ) {\n\t\t\tthis.next();\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\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\t\tif ( interval <= 0 ) {\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\n\t\t// the component is initialised.\n\t\tsetTimeout( (): void => {\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 TP Slider Slides.\n /\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPSliderElement } from './tp-slider';\n\n/\n TP Slider Slide.\n /\nexport class TPSliderSlideElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tslider?.handleResize();\n\t}\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 Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\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 TP Slider Nav.\n /\nexport class TPSliderNavElement extends HTMLElement {\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 Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.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\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement \| null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\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\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\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\tthis.setAttribute( 'format', format );\n\t}\n\n\t/\n\t Attribute changed callback.\n\t /\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/\n\t Update component.\n\t /\n\tupdate(): void {\n\t\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst current = slider.getAttribute( 'current-slide' );\n\t\tconst total = slider.getAttribute( 'total' );\n\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current \|\| '' )\n\t\t\t\t.replace( '$total', total \|\| '' );\n\n\t\tthis.setAttribute( 'current', current \|\| '' );\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-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\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', TPSliderNavElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","this","getAttribute","setAttribute","slide","autoSlide","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","previous","getCurrentSlide","detail","slideIndex","toString","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","slideCount","removeProperty","height","scrollHeight","e","touches","clientX","swipeDistance","changedTouches","autoSlideInterval","interval","setTimeout","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","define"],"sourceRoot":""}
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 { 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\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\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// Initialize slider.\n\t\tthis.slide();\n\t\tthis.autoSlide();\n\t\tthis.setAttribute( 'initialized', 'yes' );\n\n\t\t// Event listeners.\n\t\tif ( ! ( 'ResizeObserver' in window ) ) {\n\t\t\t// We set the resize observer in `tp-slider-slide`\n\t\t\t// These are just fallbacks for browsers that don't support ResizeObserver.\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\tthis.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );\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\treturn [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( '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\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\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\tthis.setCurrentSlide( index );\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\tconst slides: NodeListOf<TPSliderSlideElement> \| null \| undefined = this.getSlideElements();\n\n\t\tif ( slides ) {\n\t\t\treturn slides.length;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t/\n\t Get Slide Elements.\n\t /\n\tgetSlideElements() {\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\treturn slides;\n\t}\n\n\t/\n\t Navigate to the next slide.\n\t /\n\tnext(): void {\n\t\tconst totalSlides: number = this.getTotalSlides();\n\n\t\tif ( this.currentSlideIndex >= totalSlides ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( 1 );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex + 1 );\n\t}\n\n\t/\n\t Navigate to the previous slide.\n\t /\n\tprevious(): void {\n\t\tif ( this.currentSlideIndex <= 1 ) {\n\t\t\tif ( 'yes' === this.getAttribute( 'infinite' ) ) {\n\t\t\t\tthis.setCurrentSlide( this.getTotalSlides() );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setCurrentSlide( this.currentSlideIndex - 1 );\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\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\tif ( index > this.getTotalSlides() \|\| index <= 0 ) {\n\t\t\treturn;\n\t\t}\n\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\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\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\t\tif ( ! slidesContainer \|\| ! slides ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, update the height.\n\t\tthis.updateHeight();\n\n\t\t// Now lets slide!\n\t\tconst behaviour: string = this.getAttribute( 'behaviour' ) \|\| '';\n\t\tif ( 'fade' !== behaviour && slides[ this.currentSlideIndex - 1 ] ) {\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 subcomponents.\n\t /\n\tupdate(): void {\n\t\t// Get subcomponents.\n\t\tconst sliderNavItems: NodeListOf<TPSliderNavItemElement> \| null = this.querySelectorAll( 'tp-slider-nav-item' );\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// 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\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// Set current slider nav item.\n\t\tif ( sliderNavItems ) {\n\t\t\tsliderNavItems.forEach( ( navItem: TPSliderNavItemElement, index: number ): void => {\n\t\t\t\tif ( this.currentSlideIndex - 1 === index ) {\n\t\t\t\t\tnavItem.setAttribute( 'current', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.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\tif ( this.getCurrentSlide() === this.getTotalSlides() ) {\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\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\t\tif ( ! slidesContainer ) {\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\t\t\treturn;\n\t\t}\n\n\t\t// Get slides.\n\t\tconst slides: NodeListOf<TPSliderSlideElement> \| null \| undefined = this.getSlideElements();\n\t\tif ( ! slides ) {\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// Set the height of the container to be the height of the current slide.\n\t\t\tconst height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;\n\t\t\tslidesContainer.style.height = `${ height }px`;\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\t\t\tslides.forEach( ( slide: TPSliderSlideElement ): void => {\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\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// Check if we're already resizing.\n\t\tif ( this.getAttribute( 'resizing' ) ) {\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 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\tif ( 'yes' === this.getAttribute( 'swipe' ) ) {\n\t\t\tthis.touchStartX = e.touches[ 0 ].clientX;\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\tif ( 'yes' !== this.getAttribute( 'swipe' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst touchEndX: number = e.changedTouches[ 0 ].clientX;\n\t\tconst swipeDistance: number = touchEndX - this.touchStartX;\n\n\t\tif ( swipeDistance > 0 ) {\n\t\t\tthis.previous();\n\t\t} else if ( swipeDistance < 0 ) {\n\t\t\tthis.next();\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\treturn;\n\t\t}\n\n\t\t// Check for a valid interval.\n\t\tconst interval: number = parseInt( autoSlideInterval );\n\t\tif ( interval <= 0 ) {\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\n\t\t// the component is initialised.\n\t\tsetTimeout( (): void => {\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 TP Slider Slides.\n /\nexport class TPSliderSlidesElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPSliderElement } from './tp-slider';\n\n/\n TP Slider Slide.\n /\nexport class TPSliderSlideElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tslider?.handleResize();\n\t}\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 Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\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 TP Slider Nav.\n /\nexport class TPSliderNavElement extends HTMLElement {\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 Connected callback.\n\t /\n\tconnectedCallback(): void {\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\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tslider.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\tif ( this.getAttribute( 'index' ) ) {\n\t\t\treturn parseInt( this.getAttribute( 'index' ) ?? '0' );\n\t\t}\n\n\t\tconst slideNav: TPSliderNavElement \| null = this.closest( 'tp-slider-nav' );\n\t\treturn Array.from( slideNav?.children ?? [] ).indexOf( this ) + 1;\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\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\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\tthis.setAttribute( 'format', format );\n\t}\n\n\t/\n\t Attribute changed callback.\n\t /\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/\n\t Update component.\n\t /\n\tupdate(): void {\n\t\tconst slider: TPSliderElement \| null = this.closest( 'tp-slider' );\n\t\tif ( ! slider ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst current = slider.getAttribute( 'current-slide' );\n\t\tconst total = slider.getAttribute( 'total' );\n\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current \|\| '' )\n\t\t\t\t.replace( '$total', total \|\| '' );\n\n\t\tthis.setAttribute( 'current', current \|\| '' );\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-count', TPSliderCountElement );\ncustomElements.define( 'tp-slider', TPSliderElement );\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', TPSliderNavElement );\ncustomElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );\n"],"names":["TPSliderElement","HTMLElement","constructor","super","touchStartX","this","getAttribute","setAttribute","slide","autoSlide","window","addEventListener","handleResize","bind","document","fonts","ready","then","handleTouchStart","handleTouchEnd","connectedCallback","update","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","currentSlideIndex","parseInt","index","setCurrentSlide","getTotalSlides","slides","getSlideElements","length","slidesElement","querySelector","querySelectorAll","next","totalSlides","previous","getCurrentSlide","detail","slideIndex","toString","slidesContainer","updateHeight","style","left","offsetLeft","getArrow","selector","arrows","parentSliderElement","theArrow","forEach","arrow","closest","sliderNavItems","sliderCounts","leftArrow","rightArrow","removeAttribute","navItem","slideCount","removeProperty","height","scrollHeight","e","touches","clientX","swipeDistance","changedTouches","autoSlideInterval","interval","setTimeout","TPSliderTrackElement","TPSliderSlidesElement","TPSliderSlideElement","ResizeObserver","handleHeightChange","observe","slider","TPSliderArrowElement","handleClick","TPSliderNavElement","TPSliderNavItemElement","getIndex","slideNav","Array","from","children","indexOf","TPSliderCountElement","format","current","total","innerHTML","replace","customElements","define"],"sourceRoot":""}

package/package.json CHANGED Viewed

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