jb-checkbox
Version:
checkbox web component
2 lines • 8.91 kB
JavaScript
import{ValidationHelper as e}from"jb-validation";import{registerDefaultVariables as t}from"jb-core/theme";import{JBDictionary as s,i18n as a}from"jb-core/i18n";function r(e,t,s,a){if("a"===s&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?a:"a"===s?a.call(e):a?a.value:t.get(e)}function i(e,t,s,a,r){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?r.call(e,s):r?r.value=s:t.set(e,s),s}const o=new s({fa:{requiredMessage:"چک میبایست فعال شود"},en:{requiredMessage:"must be checked"}});var c,n,l,h,b,d,m,u,v,k,p,g,f,w=class extends HTMLElement{static get formAssociated(){return!0}get value(){return null!==r(this,l,"f")?r(this,l,"f"):r(this,n,"f")}set value(e){r(this,n,"f")!==e&&i(this,n,e,"f"),r(this,c,"m",p).call(this),r(this,b,"f")&&(r(this,b,"f").ariaSelected=e?"true":"false",e?r(this,b,"f").states?.add("checked"):r(this,b,"f").states?.delete("checked"),"function"==typeof r(this,b,"f").setFormValue&&r(this,b,"f").setFormValue(`${e}`))}get validation(){return r(this,d,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return r(this,n,"f")!==this.initialValue}set required(e){i(this,m,e,"f"),r(this,d,"f").checkValiditySync({showError:!1})}get required(){return r(this,m,"f")}get disabled(){return r(this,h,"f")}set disabled(e){i(this,h,e,"f"),e?(r(this,b,"f").states?.add("disabled"),r(this,b,"f").ariaDisabled="true"):(r(this,b,"f").states?.delete("disabled"),r(this,b,"f").ariaDisabled="false")}constructor(){super(),c.add(this),n.set(this,!1),l.set(this,null),h.set(this,!1),b.set(this,void 0),d.set(this,new e({getValue:()=>this.value,getValidations:r(this,c,"m",f).bind(this),getValueString:()=>this.value?"true":"false",setValidationResult:r(this,c,"m",g).bind(this),showValidationError:this.showValidationError.bind(this),clearValidationError:this.clearValidationError.bind(this)})),this.initialValue=!1,m.set(this,!1),this.isAutoValidationDisabled=!1,"function"==typeof this.attachInternals&&i(this,b,this.attachInternals(),"f"),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open",delegatesFocus:!0});t();const s=document.createElement("template");s.innerHTML='<style>:host{cursor:pointer}:host(:state(disabled)){cursor:not-allowed}.jb-checkbox-web-component{grid-template:"check label"max-content"check message"max-content/2rem max-content;justify-content:start;align-items:center;gap:0 .5rem;display:grid}.jb-checkbox-web-component .label-wrapper{color:var(--label-color);grid-area:label;font-weight:400;display:inline-block}.jb-checkbox-web-component:has(.message-box:empty){grid-template-areas:"check label""check label"}.jb-checkbox-web-component .message-box{font-size:var(--jb-checkbox-message-font-size,.7rem);color:var(--message-color);display:var(--jb-checkbox-message-box-display,block);grid-area:message}.jb-checkbox-web-component .message-box:empty{padding:0;display:none}.jb-checkbox-web-component .svg-wrapper{grid-area:check;width:2rem;height:2rem}.jb-checkbox-web-component .svg-wrapper .check-box-svg{width:100%;height:100%}.jb-checkbox-web-component .svg-wrapper .check-box-svg.--active .checkmark__cube{rx:58px;ry:58px;stroke:#0000;transition:all .3s ease-in-out}.jb-checkbox-web-component .svg-wrapper .check-box-svg.--active .checkmark__check{animation:.3s cubic-bezier(.65,0,.45,1) .1s forwards stroke}.jb-checkbox-web-component .svg-wrapper .check-box-svg .checkmark__cube{fill:var(--check-bg-color);stroke:var(--check-border-color);stroke-width:1px;transition:all .3s ease-in-out}.jb-checkbox-web-component .svg-wrapper .check-box-svg .checkmark__check{stroke-width:5px;stroke:var(--check-mark-color);transform-origin:50%;stroke-dasharray:48;stroke-dashoffset:48px}@keyframes stroke{to{stroke-dashoffset:0}} :host{--label-color:var(--jb-checkbox-label-color,var(--jb-neutral-5));--message-color:var(--jb-checkbox-message-color,var(--jb-text-secondary));--check-bg-color:var(--jb-checkbox-check-bg-color,var(--jb-white));--check-border-color:var(--jb-checkbox-check-border-color,var(--jb-neutral-7));--check-mark-color:var(--jb-checkbox-check-mark-color,var(--jb-text-contrast))}:host(:state(invalid)){--message-color:var(--jb-checkbox-message-error-color,var(--jb-red))}:host(:state(checked)){--label-color:var(--jb-checkbox-label-color,var(--jb-text-primary));--check-bg-color:var(--jb-checkbox-check-bg-color-checked,var(--jb-green));--check-mark-color:var(--jb-checkbox-check-mark-color-checked,var(--jb-white))}:host(:state(disabled)){--check-bg-color:var(--jb-checkbox-check-bg-color-disabled,var(--jb-neutral-9))}</style>\n\n <div class="jb-checkbox-web-component">\n <div class="svg-wrapper">\n <svg class="check-box-svg" viewBox="0 0 52 52" part="checkbox">\n <rect class="checkmark__cube" x="0" y="0" width="52" height="52" rx="5" ry="5" part="check-bg"/>\n <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" part="check-mark"/>\n </svg>\n </div>\n <div class="label-wrapper" >\n <slot name="label" part="label"></slot>\n </div>\n <div class="message-box" part="message"></div>\n </div>\n ',e.appendChild(s.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-checkbox-web-component"),label:e.querySelector(".label-wrapper slot"),svgWrapper:e.querySelector(".svg-wrapper"),svg:e.querySelector(".check-box-svg"),message:e.querySelector(".message-box")},this.registerEventListener()}registerEventListener(){this.elements.componentWrapper.addEventListener("click",(()=>r(this,c,"m",u).call(this)))}initProp(){this.value="true"===this.getAttribute("value")||!1}static get observedAttributes(){return["label","message","value","name","disabled","required","error"]}attributeChangedCallback(e,t,s){this.onAttributeChange(e,s)}onAttributeChange(e,t){switch(e){case"value":this.value=Boolean(t);break;case"label":this.elements.label.innerText=t,r(this,b,"f").ariaLabel=t;break;case"disabled":""==t||"true"===t?this.disabled=!0:"false"!=t&&null!=t&&null!=t||(this.disabled=!1);break;case"required":this.required=(t||""===t)&&"false"!==t;break;case"message":this.elements.message.innerHTML=t;case"error":this.reportValidity()}}focus(){}showValidationError(e){this.elements.message.innerHTML=e.message,r(this,b,"f").states?.add("invalid"),r(this,b,"f").ariaInvalid="true"}clearValidationError(){const e=this.getAttribute("message")||"";this.elements.message.innerHTML=e,r(this,b,"f").states?.delete("invalid"),r(this,b,"f").ariaInvalid="false"}get validationMessage(){return r(this,b,"f").validationMessage}checkValidity(){return r(this,d,"f").checkValiditySync({showError:!1}).isAllValid}reportValidity(){return r(this,d,"f").checkValiditySync({showError:!0}).isAllValid}};n=new WeakMap,l=new WeakMap,h=new WeakMap,b=new WeakMap,d=new WeakMap,m=new WeakMap,c=new WeakSet,u=function(){if(r(this,h,"f"))return;i(this,l,!r(this,n,"f"),"f");const e=r(this,c,"m",v).call(this);if(i(this,l,null,"f"),!e){this.value=!r(this,n,"f"),r(this,d,"f").checkValidity({showError:!0});r(this,c,"m",k).call(this).defaultPrevented&&(this.value=!r(this,n,"f"))}},v=function(){const e=new CustomEvent("before-change",{cancelable:!0});this.dispatchEvent(e);return e.defaultPrevented},k=function(){const e=new Event("change",{bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(e),e},p=function(){this.value?this.elements.svg.classList.add("--active"):this.elements.svg.classList.remove("--active")},g=function(e){if(e.isAllValid)r(this,b,"f").setValidity({},"");else{const t={};let s="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType&&(t[e.validation.stateType]=!0),""==s&&(s=e.message))})),r(this,b,"f").setValidity(t,s)}},f=function(){const e=[];if(r(this,m,"f")){const t=this.getAttribute("required").length>0?this.getAttribute("required"):o.get(a,"requiredMessage");e.push({validator:e=>!1!==e,message:t,stateType:"valueMissing"})}return null!==this.getAttribute("error")&&this.getAttribute("error").trim().length>0&&e.push({validator:void 0,message:this.getAttribute("error"),stateType:"customError"}),e};!customElements.get("jb-checkbox")&&window.customElements.define("jb-checkbox",w);export{w as JBCheckboxWebComponent};
//# sourceMappingURL=jb-checkbox.js.map