jb-checkbox
Version:
checkbox web component
2 lines • 11.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 i=Object.create,r=Object.defineProperty,o=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,n=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,h=(e,t,s)=>(s=null!=e?i(n(e)):{},((e,t,s,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var i,n=c(t),h=0,b=n.length;h<b;h++)i=n[h],l.call(e,i)||i===s||r(e,i,{get:(e=>t[e]).bind(null,i),enumerable:!(a=o(t,i))||a.enumerable});return e})(!t&&e&&e.__esModule?s:r(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,i){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?i.call(e,s):i?i.value=s:t.set(e,s),s}t=h(t),s=h(s),a=h(a);const m=new a.JBDictionary({fa:{requiredMessage:"چک میبایست فعال شود"},en:{requiredMessage:"must be checked"}});var u,f,p,v,g,k,x,w,j,y,z,E,V,M,q,T,C,A,L=class extends HTMLElement{static get formAssociated(){return!0}get value(){return null!==b(this,p,"f")?b(this,p,"f"):b(this,f,"f")}set value(e){b(this,f,"f")!==e&&d(this,f,e,"f"),b(this,u,"m",T).call(this),b(this,g,"f")&&(b(this,g,"f").ariaChecked=e?"true":"false",e?b(this,g,"f").states?.add("checked"):b(this,g,"f").states?.delete("checked"),"function"==typeof b(this,g,"f").setFormValue&&b(this,g,"f").setFormValue(`${e}`))}get checked(){return!0===this.value}get validation(){return b(this,k,"f")}get name(){return this.getAttribute("name")||""}get isDirty(){return b(this,f,"f")!==this.initialValue}set required(e){d(this,x,e,"f"),b(this,k,"f").checkValiditySync({showError:!1})}get required(){return b(this,x,"f")}get disabled(){return b(this,v,"f")}set disabled(e){d(this,v,e,"f"),e?(b(this,g,"f")?.states?.add("disabled"),b(this,g,"f").ariaDisabled="true"):(b(this,g,"f")?.states?.delete("disabled"),b(this,g,"f").ariaDisabled="false"),b(this,u,"m",q).call(this)}constructor(){super(),u.add(this),f.set(this,!1),p.set(this,null),v.set(this,!1),g.set(this,void 0),k.set(this,new t.ValidationHelper({getValue:()=>this.value,getValidations:b(this,u,"m",A).bind(this),getValueString:()=>this.value?"true":"false",setValidationResult:b(this,u,"m",C).bind(this),showValidationError:this.showValidationError.bind(this),clearValidationError:this.clearValidationError.bind(this)})),this.initialValue=!1,x.set(this,!1),this.isAutoValidationDisabled=!1,"function"==typeof this.attachInternals&&(d(this,g,this.attachInternals(),"f"),b(this,g,"f").role="checkbox"),b(this,u,"m",w).call(this)}get form(){return b(this,g,"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",()=>b(this,u,"m",j).call(this)),this.elements.componentWrapper.addEventListener("keydown",e=>b(this,u,"m",y).call(this,e)),this.elements.componentWrapper.addEventListener("keyup",e=>b(this,u,"m",z).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,b(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;break;case"error":this.reportValidity()}}focus(e){b(this,v,"f")||this.elements.componentWrapper.focus(e)}showValidationError(e){this.elements.message.innerHTML=e.message,b(this,g,"f")?.states?.add("invalid"),b(this,g,"f").ariaInvalid="true"}clearValidationError(){const e=this.getAttribute("message")||"";this.elements.message.innerHTML=e,b(this,g,"f").states?.delete("invalid"),b(this,g,"f").ariaInvalid="false"}get validationMessage(){return b(this,g,"f").validationMessage}checkValidity(){return b(this,k,"f").checkValiditySync({showError:!1}).isAllValid}reportValidity(){return b(this,k,"f").checkValiditySync({showError:!0}).isAllValid}};f=new WeakMap,p=new WeakMap,v=new WeakMap,g=new WeakMap,k=new WeakMap,x=new WeakMap,u=new WeakSet,w=function(){this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0,serializable:!0,clonable:!0}),(0,s.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()},j=function(){if(b(this,v,"f"))return;d(this,p,!b(this,f,"f"),"f");const e=b(this,u,"m",V).call(this);if(d(this,p,null,"f"),!e){this.value=!b(this,f,"f"),b(this,k,"f").checkValidity({showError:!0});b(this,u,"m",M).call(this).defaultPrevented&&(this.value=!b(this,f,"f"))}},y=function(e){b(this,u,"m",E).call(this,e)&&e.preventDefault()},z=function(e){b(this,v,"f")||b(this,u,"m",E).call(this,e)&&(e.preventDefault(),b(this,u,"m",j).call(this))},E=function(e){return" "===e.key||"Spacebar"===e.key},V=function(){const e=new CustomEvent("before-change",{cancelable:!0});this.dispatchEvent(e);return e.defaultPrevented},M=function(){const e=new Event("change",{bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(e),e},q=function(){this.elements.componentWrapper.tabIndex=b(this,v,"f")?-1:0},T=function(){this.value?this.elements.svg.classList.add("--active"):this.elements.svg.classList.remove("--active")},C=function(e){if(e.isAllValid)b(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??""))}),b(this,g,"f")?.setValidity(t,s)}},A=function(){const e=[];if(b(this,x,"f")){const t=this.getAttribute("required")?this.getAttribute("required"):m.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",L),e.JBCheckboxWebComponent=L});
//# sourceMappingURL=jb-checkbox.umd.js.map