Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
2 lines
4.4 KiB
JavaScript
2 lines
4.4 KiB
JavaScript
import{r as e,c as r,h as o,g as i}from"./p-5308bbce.js";const t=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.checkbox__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const c=class{constructor(o){e(this,o);this.ifxChange=r(this,"ifxChange",7);this.disabled=false;this.value=false;this.error=false;this.name="";this.size="m";this.internalValue=undefined;this.indeterminate=false;this.internalIndeterminate=undefined}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalValue=true;this.internalIndeterminate=false}else{this.internalValue=!this.internalValue}this.ifxChange.emit(this.internalValue)}}valueChanged(e,r){if(e!==r){this.internalValue=e;this.inputElement.checked=this.internalValue}}indeterminateChanged(e,r){if(e!==r){this.internalIndeterminate=e;this.inputElement.indeterminate=this.internalIndeterminate}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalValue=this.value;this.internalIndeterminate=this.indeterminate}componentDidRender(){this.inputElement.indeterminate=this.internalIndeterminate}getCheckedClassName(){if(this.error){if(this.internalValue){return"checked error"}else{return"error"}}else if(this.internalValue){return"checked"}else return""}render(){const e=this.el.innerHTML;let r=false;if(e){r=true}return o("div",{class:"checkbox__container"},o("input",{type:"checkbox",hidden:true,ref:e=>this.inputElement=e,name:this.name,checked:this.internalValue,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.internalValue}`}),o("div",{tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-value":this.internalValue,"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size==="m"?"checkbox-m":""}\n ${this.indeterminate?"indeterminate":""}\n ${this.disabled?"disabled":""}`},this.internalValue&&o("ifx-icon",{icon:"check-12"})),r&&o("div",{id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},o("slot",null)))}get el(){return i(this)}static get watchers(){return{value:["valueChanged"],indeterminate:["indeterminateChanged"]}}};c.style=t;export{c as ifx_checkbox};
|
|
//# sourceMappingURL=p-98cc12fa.entry.js.map
|