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