jb-checkbox
Version:
checkbox web component
3 lines (2 loc) • 7.16 kB
JavaScript
"use strict";var e=require("jb-validation");function t(e,t,n,s){if("a"===n&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?s:"a"===n?s.call(e):s?s.value:t.get(e)}function n(e,t,n,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 t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?a.call(e,n):a?a.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var s,a,i,r,c,o,l,h,d,b,p,u,k;class f extends HTMLElement{static get formAssociated(){return!0}get value(){return null!==t(this,i,"f")?t(this,i,"f"):t(this,a,"f")}set value(e){t(this,a,"f")!==e&&n(this,a,e,"f"),t(this,s,"m",p).call(this),t(this,c,"f")&&(e?t(this,c,"f").states?.add("checked"):t(this,c,"f").states?.delete("checked"),"function"==typeof t(this,c,"f").setFormValue&&t(this,c,"f").setFormValue(`${e}`))}get validation(){return t(this,o,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return t(this,a,"f")!==this.initialValue}set required(e){n(this,l,e,"f"),t(this,o,"f").checkValiditySync({showError:!1})}get required(){return t(this,l,"f")}get disabled(){return t(this,r,"f")}set disabled(e){n(this,r,e,"f"),e?t(this,c,"f").states?.add("disabled"):t(this,c,"f").states?.delete("disabled")}constructor(){super(),s.add(this),a.set(this,!1),i.set(this,null),r.set(this,!1),c.set(this,void 0),o.set(this,new e.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),getValue:()=>this.value,getValidations:t(this,s,"m",k).bind(this),getValueString:()=>this.value?"true":"false",setValidationResult:t(this,s,"m",u).bind(this),showValidationError:this.showValidationError.bind(this)})),this.initialValue=!1,l.set(this,!1),this.isAutoValidationDisabled=!1,"function"==typeof this.attachInternals&&n(this,c,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=document.createElement("template");t.innerHTML='<style>:host {\n --label-color:var(--jb-checkbox-label-color, #535353);\n --check-bg-color:var(--jb-checkbox-check-bg-color, #fff);\n --check-mark-color:var(--jb-checkbox-check-mark-color, #fff);\n}\n\n:host(:state(checked)) {\n --label-color:var(--jb-checkbox-label-color, #2a2d30);\n --check-bg-color:var(--jb-checkbox-check-bg-color-checked, #00dc55);\n --check-mark-color:var(--jb-checkbox-check-mark-color-checked, #fff);\n}\n\n:host(:state(disabled)) {\n --check-bg-color:var(--jb-checkbox-check-bg-color-disabled, #d3d3d3);\n}\n\n.jb-checkbox-web-component {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n justify-content: start;\n cursor: pointer;\n}\n.jb-checkbox-web-component .label-wrapper {\n display: inline-block;\n font-weight: 400;\n color: var(--label-color);\n}\n.jb-checkbox-web-component .svg-wrapper {\n width: 30px;\n height: 30px;\n margin-left: 8px;\n}\n.jb-checkbox-web-component .svg-wrapper .check-box-svg {\n width: 30px;\n height: 30px;\n cursor: pointer;\n}\n.jb-checkbox-web-component .svg-wrapper .check-box-svg.--active .checkmark__cube {\n transition: all 0.3s ease-in-out;\n rx: 58;\n ry: 58;\n stroke: transparent;\n}\n.jb-checkbox-web-component .svg-wrapper .check-box-svg.--active .checkmark__check {\n animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;\n}\n.jb-checkbox-web-component .svg-wrapper .check-box-svg .checkmark__cube {\n fill: var(--check-bg-color);\n transition: all 0.3s ease-in-out;\n stroke: #808080;\n stroke-width: 1px;\n}\n.jb-checkbox-web-component .svg-wrapper .check-box-svg .checkmark__check {\n stroke-width: 5;\n stroke: var(--check-mark-color);\n transform-origin: 50% 50%;\n stroke-dasharray: 48;\n stroke-dashoffset: 48;\n}\n@keyframes stroke {\n 100% {\n stroke-dashoffset: 0;\n }\n}</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>\n ',e.appendChild(t.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")},this.registerEventListener()}registerEventListener(){this.elements.componentWrapper.addEventListener("click",(()=>t(this,s,"m",h).call(this)))}initProp(){this.value="true"===this.getAttribute("value")||!1}static get observedAttributes(){return["label","value","name","disabled"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(e,t){switch(e){case"value":this.value=Boolean(t);break;case"label":this.elements.label.innerText=t;break;case"disabled":""==t||"true"===t?this.disabled=!0:"false"!=t&&null!=t&&null!=t||(this.disabled=!1)}}focus(){}showValidationError(e){}clearValidationError(){}get validationMessage(){return t(this,c,"f").validationMessage}checkValidity(){return t(this,o,"f").checkValiditySync({showError:!1}).isAllValid}reportValidity(){return t(this,o,"f").checkValiditySync({showError:!0}).isAllValid}}a=new WeakMap,i=new WeakMap,r=new WeakMap,c=new WeakMap,o=new WeakMap,l=new WeakMap,s=new WeakSet,h=function(){if(t(this,r,"f"))return;n(this,i,!t(this,a,"f"),"f");const e=t(this,s,"m",d).call(this);if(n(this,i,null,"f"),!e){this.value=!t(this,a,"f");t(this,s,"m",b).call(this).defaultPrevented&&(this.value=!t(this,a,"f"))}},d=function(){const e=new CustomEvent("before-change",{cancelable:!0});this.dispatchEvent(e);return e.defaultPrevented},b=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")},u=function(e){if(e.isAllValid)t(this,c,"f").setValidity({},"");else{const n={};let s="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType&&(n[e.validation.stateType]=!0),""==s&&(s=e.message))})),t(this,c,"f").setValidity(n,s)}},k=function(){return t(this,l,"f")?[{validator:e=>!1!==e,message:"چک میبایست فعال شود"}]:[]};!customElements.get("jb-checkbox")&&window.customElements.define("jb-checkbox",f),exports.JBCheckboxWebComponent=f;
//# sourceMappingURL=jb-checkbox.cjs.js.map