jb-form/dist/jb-form.cjs.js

form web component with extended feature like validation and dirty check

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