jb-form/dist/jb-form.umd.js

form web component with extended feature like validation and dirty check

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