FileMaster

Edit File: sc-radio.js

import{h}from"@stencil/core";import{FormSubmitController}from"../../../functions/form-data";let id=0;export class ScRadio{constructor(){this.inputId="radio-"+ ++id,this.labelId=`radio-label-${id}`,this.hasFocus=!1,this.name=void 0,this.value=void 0,this.disabled=!1,this.checked=!1,this.required=!1,this.invalid=!1,this.edit=void 0}async ceClick(){this.input.click()}async reportValidity(){return this.invalid=!this.input.checkValidity(),this.input.reportValidity()}handleCheckedChange(){this.input&&(this.checked&&this.getSiblingRadios().map((e=>e.checked=!1)),this.input.checked=this.checked,this.scChange.emit())}handleClick(){this.checked=!0}handleBlur(){this.hasFocus=!1,this.scBlur.emit()}handleFocus(){this.hasFocus=!0,this.scFocus.emit()}setCustomValidity(e){this.input.setCustomValidity(e),this.invalid=!this.input.checkValidity()}getAllRadios(){const e=this.el.closest("sc-radio-group");return e?[...e.querySelectorAll("sc-radio")]:[]}getSiblingRadios(){return this.getAllRadios().filter((e=>e!==this.el))}handleKeyDown(e){if(this.edit)return!0;if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)){const t=this.getAllRadios().filter((e=>!e.disabled)),i=["ArrowUp","ArrowLeft"].includes(e.key)?-1:1;let s=t.indexOf(this.el)+i;s<0&&(s=t.length-1),s>t.length-1&&(s=0),this.getAllRadios().map((e=>e.checked=!1)),t[s].focus(),t[s].checked=!0,e.preventDefault()}}handleMouseDown(e){if(this.edit)return!0;e.preventDefault(),this.input.focus()}componentDidLoad(){this.formController=new FormSubmitController(this.el,{value:e=>e.checked?e.value:void 0}).addFormData()}disconnectedCallback(){var e;null===(e=this.formController)||void 0===e||e.removeFormData()}render(){const e=this.edit?"div":"label";return h(e,{key:"d99bbea0a965962572df3f72bd783e6fe0ae3e2f",part:"base",class:{radio:!0,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus,"radio--editing":this.edit},htmlFor:this.inputId,onKeyDown:e=>this.handleKeyDown(e),onMouseDown:e=>this.handleMouseDown(e)},h("span",{key:"01c4d4dac0b9d1c04e3eddc546d69ddf9245d845",part:"control",class:"radio__control"},h("span",{key:"86e92e5cc4fdccecd5f6677c4659ebf6efb5ee9d",part:"checked-icon",class:"radio__icon"},h("svg",{key:"6063d8e59d360660b88587079dd962de7e612232",viewBox:"0 0 16 16"},h("g",{key:"e47429ae4a6140074403e28ea891621912587309",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},h("g",{key:"d9ed1fce11d289332663388cf6dbae5f2a0caad8",fill:"currentColor"},h("circle",{key:"92c39b8c34a6f1e5bf9017ed3cd2b330d0fe9ea3",cx:"8",cy:"8",r:"3.42857143"}))))),h("input",{key:"e3c0c09cc673f501c4d758f76578409683d5865f",id:this.inputId,ref:e=>this.input=e,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,"aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-labelledby":this.labelId,onClick:()=>this.handleClick(),onBlur:()=>this.handleBlur(),onFocus:()=>this.handleFocus()})),h("span",{key:"1ef51bb9dd1c0046af819df6b85959e04376435c",part:"label",id:this.labelId,class:"radio__label"},h("slot",{key:"6aebf60d8972c83128fb5fe189c7cadb8dddf373"}),h("slot",{key:"b8b415dc73873e4f1d41b0fbb8f1071abe8479ae",name:"description"})))}static get is(){return"sc-radio"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-radio.scss"]}}static get styleUrls(){return{$:["sc-radio.css"]}}static get properties(){return{name:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The radios name attribute"},attribute:"name",reflect:!1},value:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The radios value"},attribute:"value",reflect:!1},disabled:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Is the radio disabled"},attribute:"disabled",reflect:!0,defaultValue:"false"},checked:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Draws the radio in a checked state."},attribute:"checked",reflect:!0,defaultValue:"false"},required:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Is this required"},attribute:"required",reflect:!0,defaultValue:"false"},invalid:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"This will be true when the control is in an invalid state. Validity is determined by the `required` prop."},attribute:"invalid",reflect:!0,defaultValue:"false"},edit:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"This will be true as a workaround in the block editor to focus on the content."},attribute:"edit",reflect:!1}}}static get states(){return{hasFocus:{}}}static get events(){return[{method:"scBlur",name:"scBlur",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control loses focus."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scChange",name:"scChange",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control's checked state changes."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scFocus",name:"scFocus",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control gains focus."},complexType:{original:"void",resolved:"void",references:{}}}]}static get methods(){return{ceClick:{complexType:{signature:"() => Promise<void>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<void>"},docs:{text:"Simulates a click on the radio.",tags:[]}},reportValidity:{complexType:{signature:"() => Promise<boolean>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<boolean>"},docs:{text:"Checks for validity and shows the browser's validation message if the control is invalid.",tags:[]}}}}static get elementRef(){return"el"}static get watchers(){return[{propName:"checked",methodName:"handleCheckedChange"}]}}

Back