jb-checkbox
Version:
checkbox web component
2 lines • 9.38 kB
JavaScript
var e=Object.create,t=Object.defineProperty,s=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,r=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty,o=(o,c,n)=>(n=null!=o?e(r(o)):{},((e,r,o,c)=>{if(r&&"object"==typeof r||"function"==typeof r)for(var n,l=a(r),h=0,b=l.length;h<b;h++)n=l[h],i.call(e,n)||n===o||t(e,n,{get:(e=>r[e]).bind(null,n),enumerable:!(c=s(r,n))||c.enumerable});return e})(!c&&o&&o.__esModule?n:t(n,"default",{value:o,enumerable:!0}),o));const c=o(require("jb-validation")),n=o(require("jb-core/theme")),l=o(require("jb-core/i18n"));function h(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 b(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 d=new l.JBDictionary({fa:{requiredMessage:"چک میبایست فعال شود"},en:{requiredMessage:"must be checked"}});var u,m,p,v,g,k,f,w,x,y,j,E,V,M=class extends HTMLElement{static get formAssociated(){return!0}get value(){return null!==h(this,p,"f")?h(this,p,"f"):h(this,m,"f")}set value(e){h(this,m,"f")!==e&&b(this,m,e,"f"),h(this,u,"m",j).call(this),h(this,g,"f")&&(h(this,g,"f").ariaSelected=e?"true":"false",e?h(this,g,"f").states?.add("checked"):h(this,g,"f").states?.delete("checked"),"function"==typeof h(this,g,"f").setFormValue&&h(this,g,"f").setFormValue(`${e}`))}get validation(){return h(this,k,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return h(this,m,"f")!==this.initialValue}set required(e){b(this,f,e,"f"),h(this,k,"f").checkValiditySync({showError:!1})}get required(){return h(this,f,"f")}get disabled(){return h(this,v,"f")}set disabled(e){b(this,v,e,"f"),e?(h(this,g,"f").states?.add("disabled"),h(this,g,"f").ariaDisabled="true"):(h(this,g,"f").states?.delete("disabled"),h(this,g,"f").ariaDisabled="false")}constructor(){super(),u.add(this),m.set(this,!1),p.set(this,null),v.set(this,!1),g.set(this,void 0),k.set(this,new c.ValidationHelper({getValue:()=>this.value,getValidations:h(this,u,"m",V).bind(this),getValueString:()=>this.value?"true":"false",setValidationResult:h(this,u,"m",E).bind(this),showValidationError:this.showValidationError.bind(this),clearValidationError:this.clearValidationError.bind(this)})),this.initialValue=!1,f.set(this,!1),this.isAutoValidationDisabled=!1,"function"==typeof this.attachInternals&&b(this,g,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});(0,n.registerDefaultVariables)();const t=document.createElement("template");t.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(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"),message:e.querySelector(".message-box")},this.registerEventListener()}registerEventListener(){this.elements.componentWrapper.addEventListener("click",(()=>h(this,u,"m",w).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,h(this,g,"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,h(this,g,"f").states?.add("invalid"),h(this,g,"f").ariaInvalid="true"}clearValidationError(){const e=this.getAttribute("message")||"";this.elements.message.innerHTML=e,h(this,g,"f").states?.delete("invalid"),h(this,g,"f").ariaInvalid="false"}get validationMessage(){return h(this,g,"f").validationMessage}checkValidity(){return h(this,k,"f").checkValiditySync({showError:!1}).isAllValid}reportValidity(){return h(this,k,"f").checkValiditySync({showError:!0}).isAllValid}};m=new WeakMap,p=new WeakMap,v=new WeakMap,g=new WeakMap,k=new WeakMap,f=new WeakMap,u=new WeakSet,w=function(){if(h(this,v,"f"))return;b(this,p,!h(this,m,"f"),"f");const e=h(this,u,"m",x).call(this);if(b(this,p,null,"f"),!e){this.value=!h(this,m,"f"),h(this,k,"f").checkValidity({showError:!0});h(this,u,"m",y).call(this).defaultPrevented&&(this.value=!h(this,m,"f"))}},x=function(){const e=new CustomEvent("before-change",{cancelable:!0});this.dispatchEvent(e);return e.defaultPrevented},y=function(){const e=new Event("change",{bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(e),e},j=function(){this.value?this.elements.svg.classList.add("--active"):this.elements.svg.classList.remove("--active")},E=function(e){if(e.isAllValid)h(this,g,"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))})),h(this,g,"f").setValidity(t,s)}},V=function(){const e=[];if(h(this,f,"f")){const t=this.getAttribute("required").length>0?this.getAttribute("required"):d.get(l.i18n,"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",M),exports.JBCheckboxWebComponent=M;
//# sourceMappingURL=jb-checkbox.cjs.js.map