jb-checkbox
Version:
checkbox web component
2 lines • 11.4 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 m,u,p,f,v,g,k,x,w,j,y,z,E,V,M,q,A,L,T=class extends HTMLElement{static get formAssociated(){return!0}get value(){return null!==h(this,p,"f")?h(this,p,"f"):h(this,u,"f")}set value(e){h(this,u,"f")!==e&&b(this,u,e,"f"),h(this,m,"m",q).call(this),h(this,v,"f")&&(h(this,v,"f").ariaChecked=e?"true":"false",e?h(this,v,"f").states?.add("checked"):h(this,v,"f").states?.delete("checked"),"function"==typeof h(this,v,"f").setFormValue&&h(this,v,"f").setFormValue(`${e}`))}get checked(){return!0===this.value}get validation(){return h(this,g,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return h(this,u,"f")!==this.initialValue}set required(e){b(this,k,e,"f"),h(this,g,"f").checkValiditySync({showError:!1})}get required(){return h(this,k,"f")}get disabled(){return h(this,f,"f")}set disabled(e){b(this,f,e,"f"),e?(h(this,v,"f")?.states?.add("disabled"),h(this,v,"f").ariaDisabled="true"):(h(this,v,"f")?.states?.delete("disabled"),h(this,v,"f").ariaDisabled="false"),h(this,m,"m",M).call(this)}constructor(){super(),m.add(this),u.set(this,!1),p.set(this,null),f.set(this,!1),v.set(this,void 0),g.set(this,new c.ValidationHelper({getValue:()=>this.value,getValidations:h(this,m,"m",L).bind(this),getValueString:()=>this.value?"true":"false",setValidationResult:h(this,m,"m",A).bind(this),showValidationError:this.showValidationError.bind(this),clearValidationError:this.clearValidationError.bind(this)})),this.initialValue=!1,k.set(this,!1),this.isAutoValidationDisabled=!1,"function"==typeof this.attachInternals&&(b(this,v,this.attachInternals(),"f"),h(this,v,"f").role="checkbox"),h(this,m,"m",x).call(this)}get form(){return h(this,v,"f")?.form??null}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!1});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!1});this.dispatchEvent(e)}registerEventListener(){this.elements.componentWrapper.addEventListener("click",()=>h(this,m,"m",w).call(this)),this.elements.componentWrapper.addEventListener("keydown",e=>h(this,m,"m",j).call(this,e)),this.elements.componentWrapper.addEventListener("keyup",e=>h(this,m,"m",y).call(this,e))}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,v,"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;break;case"error":this.reportValidity()}}focus(e){h(this,f,"f")||this.elements.componentWrapper.focus(e)}showValidationError(e){this.elements.message.innerHTML=e.message,h(this,v,"f")?.states?.add("invalid"),h(this,v,"f").ariaInvalid="true"}clearValidationError(){const e=this.getAttribute("message")||"";this.elements.message.innerHTML=e,h(this,v,"f").states?.delete("invalid"),h(this,v,"f").ariaInvalid="false"}get validationMessage(){return h(this,v,"f").validationMessage}checkValidity(){return h(this,g,"f").checkValiditySync({showError:!1}).isAllValid}reportValidity(){return h(this,g,"f").checkValiditySync({showError:!0}).isAllValid}};u=new WeakMap,p=new WeakMap,f=new WeakMap,v=new WeakMap,g=new WeakMap,k=new WeakMap,m=new WeakSet,x=function(){this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0,serializable:!0,clonable:!0}),(0,n.registerDefaultVariables)();const e=document.createElement("template");e.innerHTML='<style>:host{cursor:pointer}:host(:state(disabled)){cursor:not-allowed}.jb-checkbox-web-component{grid-template-columns:var(--size) max-content;grid-template-rows:max-content max-content;grid-template-areas:"check label""check message";justify-content:start;align-items:center;gap:0 .5rem;display:grid}.jb-checkbox-web-component:focus{outline:none}.jb-checkbox-web-component:focus-visible{outline:none}.jb-checkbox-web-component:focus-visible .svg-wrapper{outline:2px solid var(--jb-checkbox-focus-ring-color,Highlight);outline-offset:2px;border-radius:5px}.jb-checkbox-web-component .label-wrapper{color:var(--label-color);text-box-trim:trim-both;text-box-edge:ex alphabetic;font-weight:400;font-size:var(--label-font-size);grid-area:label;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(--message-font-size);color:var(--message-color);display:var(--jb-checkbox-message-box-display,block);text-box-trim:trim-both;text-box-edge:cap alphabetic;grid-area:message}.jb-checkbox-web-component .message-box:empty{padding:0;display:none}.jb-checkbox-web-component .svg-wrapper{width:var(--size);height:var(--size);grid-area:check;display:block}.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{--size:var(--jb-check-box-size,2rem);--label-font-size:1rem;--message-font-size:var(--jb-checkbox-message-font-size,.7rem);--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))}:host([size=xs]){--size:var(--jb-check-box-size-xs,1rem);--label-font-size:.5rem;--message-font-size:var(--jb-checkbox-message-font-size-xs,.525rem)}:host([size=sm]){--size:var(--jb-check-box-size-sm,1.5rem);--label-font-size:.75rem;--message-font-size:var(--jb-checkbox-message-font-size-sm,.6125rem)}:host([size=lg]){--size:var(--jb-check-box-size-lg,2.5rem);--label-font-size:1.25rem;--message-font-size:var(--jb-checkbox-message-font-size-lg,.7875rem)}:host([size=xl]){--size:var(--jb-check-box-size-xl,3rem);--label-font-size:1.5rem;--message-font-size:var(--jb-checkbox-message-font-size-xl,.875rem)}</style>\n\n <div class="jb-checkbox-web-component" tabindex="0">\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 ',this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.elements={componentWrapper:this.shadowRoot.querySelector(".jb-checkbox-web-component"),label:this.shadowRoot.querySelector(".label-wrapper slot"),svgWrapper:this.shadowRoot.querySelector(".svg-wrapper"),svg:this.shadowRoot.querySelector(".check-box-svg"),message:this.shadowRoot.querySelector(".message-box")},this.registerEventListener()},w=function(){if(h(this,f,"f"))return;b(this,p,!h(this,u,"f"),"f");const e=h(this,m,"m",E).call(this);if(b(this,p,null,"f"),!e){this.value=!h(this,u,"f"),h(this,g,"f").checkValidity({showError:!0});h(this,m,"m",V).call(this).defaultPrevented&&(this.value=!h(this,u,"f"))}},j=function(e){h(this,m,"m",z).call(this,e)&&e.preventDefault()},y=function(e){h(this,f,"f")||h(this,m,"m",z).call(this,e)&&(e.preventDefault(),h(this,m,"m",w).call(this))},z=function(e){return" "===e.key||"Spacebar"===e.key},E=function(){const e=new CustomEvent("before-change",{cancelable:!0});this.dispatchEvent(e);return e.defaultPrevented},V=function(){const e=new Event("change",{bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(e),e},M=function(){this.elements.componentWrapper.tabIndex=h(this,f,"f")?-1:0},q=function(){this.value?this.elements.svg.classList.add("--active"):this.elements.svg.classList.remove("--active")},A=function(e){if(e.isAllValid)h(this,v,"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,v,"f")?.setValidity(t,s)}},L=function(){const e=[];if(h(this,k,"f")){const t=this.getAttribute("required")?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",T),exports.JBCheckboxWebComponent=T;
//# sourceMappingURL=jb-checkbox.cjs.js.map