jb-form/dist/jb-form.js

form web component with extended feature like validation and dirty check

import{ValidationHelper as t}from"jb-validation";function i(t,i,e,s){if("a"===e&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof i?t!==i||!s:!i.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?s:"a"===e?s.call(t):s?s.value:i.get(t)}function e(t,i,e,s,a){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof i?t!==i||!a:!i.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?a.call(t,e):a?a.value=e:i.set(t,e),e}var s,a,n,l,o=class{constructor(t){s.set(this,void 0),this.dispatchOnChange=()=>{i(this,s,"f").onChange()},this.name=t.name,this.validation=t.validation,this.dom=t.dom,this.getDirtyStatus=t.getDirtyStatus,this.getValue=t.getValue,this.setInitialValue=t.setInitialValue,this.setValue=t.setValue}attachCallbacks(t){e(this,s,t,"f")}};s=new WeakMap;var r,c,h=class{constructor(t){a.set(this,[]),n.set(this,{}),l.set(this,void 0),this.add=t=>{const e=new o(t);return e.attachCallbacks({onChange:()=>i(this,l,"f").handleStateChanges(e)}),i(this,a,"f").push(e),i(this,n,"f")[e.name]=e,e},e(this,l,t,"f")}get list(){return[...i(this,a,"f")]}get dictionary(){return i(this,n,"f")}setValues(t){for(const e of i(this,a,"f"))e.name&&void 0!==t[e.name]&&"function"==typeof e.setValue&&e.setValue(t[e.name])}setInitialValues(t){for(const e of i(this,a,"f"))e.name&&void 0!==t[e.name]&&"function"==typeof e.setInitialValue&&e.setInitialValue(t[e.name])}traverse(t){const e={};for(const s of i(this,a,"f"))s.name&&(e[s.name]=t(s));return e}};a=new WeakMap,n=new WeakMap,l=new WeakMap;var u,d,f,m,V,v,y,p,g,w,b,k,E,S,M,C,F,W,A,D,I,j,T=class{constructor(){r.set(this,[]),c.set(this,{})}get list(){return[...i(this,r,"f")]}get dictionary(){return Object.freeze({...i(this,c,"f")})}setValues(t){for(const e of i(this,r,"f"))e.name&&void 0!==t[e.name]&&e.setFormValues(t[e.name],!1)}setInitialValues(t){for(const e of i(this,r,"f"))e.name&&void 0!==t[e.name]&&e.setFormInitialValues(t[e.name],!1)}traverse(t){const e={};for(const s of i(this,r,"f"))s.name&&(e[s.name]=t(s));return e}add(t){i(this,r,"f").includes(t)||(i(this,r,"f").push(t),t.name&&(i(this,c,"f")[t.name]=t))}};function L(t){const i=[];for(let e of t.elements.entries())e[1].isAllValid||i.push(e[0]);for(let e of t.virtualElements.entries())e[1].isAllValid||e[0].dom&&i.push(e[0].dom);for(let e of t.subForms.entries())e[1].isAllValid||i.push(...L(e[1]));return i}r=new WeakMap,c=new WeakMap;var O=class extends HTMLFormElement{get validation(){return i(this,y,"f")}get isDirty(){const t=this.getFormDirtyStatus();return Object.values(t).includes(!0)}get value(){return this.getFormValues()}get virtualElements(){return{list:i(this,V,"f").list,dictionary:i(this,V,"f").dictionary,add:i(this,V,"f").add}}get subForms(){return{list:i(this,v,"f").list,dictionary:i(this,v,"f").dictionary}}constructor(){super(),u.add(this),f.set(this,this.checkValidity),m.set(this,this.reportValidity),V.set(this,new h({handleStateChanges:i(this,u,"m",W).bind(this)})),v.set(this,new T),this.callbacks={showValidationError:t=>{},cleanValidationError:()=>{},setValidationResult:()=>{}},y.set(this,new t({showValidationError:this.callbacks.showValidationError.bind(this),clearValidationError:this.callbacks.cleanValidationError.bind(this),getValue:this.getFormValues.bind(this),getValidations:i(this,u,"m",w).bind(this),getValueString:t=>JSON.stringify(t),setValidationResult:this.callbacks.setValidationResult})),C.set(this,!1),F.set(this,this.checkValidity()),this.initWebComponent()}initWebComponent(){i(this,u,"m",p).call(this),this.checkValidity=i(this,u,"m",b),this.reportValidity=i(this,u,"m",k),i(this,u,"m",A).call(this)}connectedCallback(){i(this,u,"m",D).call(this)}static get observedAttributes(){return[]}attributeChangedCallback(t,e,s){i(this,u,"m",j).call(this,t,s)}async jbCheckValidity(t){const e={isAllValid:!0,elements:new Map,virtualElements:new Map,subForms:new Map};for(const i of this.elements){const s=i;if("function"==typeof s.validation?.checkValidity){const i=await s.validation.checkValidity({showError:t.showError});e.isAllValid=i.isAllValid&&e.isAllValid,e.elements.set(s,i)}}for(const s of i(this,V,"f").list)if("function"==typeof s.validation?.checkValidity){const i=await s.validation.checkValidity({showError:t.showError});e.isAllValid=i.isAllValid&&e.isAllValid,e.virtualElements.set(s,i)}for(const s of i(this,v,"f").list){const i=await s.jbCheckValidity(t);e.isAllValid=i.isAllValid&&e.isAllValid,e.subForms.set(s,i)}return e}getValidationMessages(){return i(this,u,"m",M).call(this,(t=>t.validationMessage??null),(t=>t.validation?.resultSummary?.message??null),(t=>t.validation.resultSummary.message??null))}getValidationSummary(){return i(this,u,"m",M).call(this,(t=>t.validation?.resultSummary??null),(t=>t.validation?.resultSummary??null),(t=>t.validation.resultSummary))}getValidationResult(){return i(this,u,"m",M).call(this,(t=>t.validation?.result??null),(t=>t.validation?.result??null),(t=>t.validation.result))}getFormValues(){return i(this,u,"m",M).call(this,(t=>t.value),(t=>"function"==typeof t.getValue?t.getValue():null),(t=>t.getFormValues()))}getFormDirtyStatus(){return i(this,u,"m",M).call(this,(t=>t.isDirty),(t=>"function"==typeof t.getDirtyStatus?t.getDirtyStatus():null),(t=>t.isDirty))}setFormValues(t,e=!0){for(const i of this.elements){const e=i;e.name&&void 0!==t[e.name]&&(e.value=t[e.name])}i(this,V,"f").setValues(t),i(this,v,"f").setValues(t),e&&this.setFormInitialValues(t,!1)}setFormInitialValues(t,e=!0){for(const i of this.elements){const e=i;e.name&&void 0!==t[e.name]&&(e.initialValue=t[e.name])}i(this,V,"f").setInitialValues(t),i(this,v,"f").setInitialValues(t),e&&this.setFormValues(t,!1)}};d=O,f=new WeakMap,m=new WeakMap,V=new WeakMap,v=new WeakMap,y=new WeakMap,C=new WeakMap,F=new WeakMap,u=new WeakSet,p=function(){this.addEventListener("submit",(t=>i(this,u,"m",g).call(this,t)),{passive:!1}),this.addEventListener("change",(t=>{const e=t.target;i(this,u,"m",W).call(this,e)}),{passive:!0})},g=function(t){if(!t.isTrusted)return;t.stopPropagation(),t.preventDefault();this.reportValidity()&&i(this,u,"m",E).call(this,t)},w=function(){return[{validator:()=>{for(const t of this.elements){const i=t;if("function"==typeof i.checkValidity){if(0==i.checkValidity())return""!=i.validationMessage&&i.validationMessage}}return!0},message:"form element is invalid"},{validator:()=>{const t=i(this,V,"f").list.find((t=>"function"==typeof t.validation?.checkValidity&&!t.validation.checkValidity({showError:!1})));if(null==t)return!0;t.validation.resultSummary.message},message:"virtual element is invalid"},{validator:()=>{const t=i(this,v,"f").list.find((t=>!t.checkValidity()));if(null==t)return!0;t.validation.resultSummary.message},message:"form element is invalid"}]},b=function(){return i(this,y,"f").checkValiditySync({showError:!1}).isAllValid},k=function(){let t=!0;for(const i of this.elements){const e=i;"function"==typeof e.reportValidity&&(t=e.reportValidity()&&t)}const e=i(this,V,"f").list.reduce(((t,i)=>("function"!=typeof i.validation?.checkValidity||i.validation.checkValiditySync({showError:!0}))&&t),!0),s=i(this,v,"f").list.reduce(((t,i)=>i.reportValidity()&&t),!0);return t&&e&&s},E=function(t){const i=new SubmitEvent("submit",{...t});this.dispatchEvent(i)},S=function(t){const i={};for(const e of this.elements)e.name&&(i[e.name]=t(e));return i},M=function(t,e,s){return{...i(this,u,"m",S).call(this,t),...i(this,V,"f").traverse(e),...i(this,v,"f").traverse(s)}},W=function(t){const s=()=>{const t=this.isDirty;if(t!==i(this,C,"f")){const i=new CustomEvent("dirty-change",{bubbles:!1,cancelable:!1,composed:!0,detail:{isDirty:t}});this.dispatchEvent(i),e(this,C,t,"f")}},a=()=>{const t=this.checkValidity();if(t!==i(this,F,"f")){const i=new CustomEvent("validity-change",{bubbles:!1,cancelable:!1,composed:!0,detail:{isValid:t}});this.dispatchEvent(i),e(this,F,t,"f")}};if(t instanceof o)return i(this,u,"m",I).call(this),s(),void a();void 0!==t.isDirty&&s(),"function"==typeof t.checkValidity&&a()},A=function(){this.addEventListener("init",(t=>{t.target instanceof d&&t.target!==this&&i(this,v,"f").add(t.target)}))},D=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0,cancelable:!1});this.dispatchEvent(t)},I=function(){const t=new Event("change",{bubbles:!0,cancelable:!1,composed:!0});this.dispatchEvent(t)},j=function(t,i){};!customElements.get("jb-form")&&window.customElements.define("jb-form",O,{extends:"form"});export{O as JBFormWebComponent,o as VirtualElement,L as getInvalidElements};
//# sourceMappingURL=jb-form.js.map