FileMaster

Edit File: sc-radio2.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{F as FormSubmitController}from"./form-data.js";const scRadioCss=":host{display:inline-block}::slotted([slot=description]){display:block;color:var(--sc-radio-description-color, var(--sc-input-help-text-color, var(--sc-color-gray-500)));line-height:var(--sc-line-height-dense);margin:0.5em 0 0;font-size:var(--sc-font-size-small)}.radio{display:inline-flex;align-items:flex-start;font-family:var(--sc-input-font-family);font-size:var(--sc-input-font-size-medium);font-weight:var(--sc-input-font-weight);color:var(--sc-input-color);vertical-align:middle;gap:var(--sc-spacing-xx-small)}.radio:not(.radio--editing){cursor:pointer}.radio__icon{display:inline-flex;width:var(--sc-radio-size);height:var(--sc-radio-size)}.radio__icon svg{width:100%;height:100%}.radio__control{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sc-radio-size);height:var(--sc-radio-size);border:solid var(--sc-input-border-width) var(--sc-input-border-color);border-radius:50%;background-color:var(--sc-input-background-color);color:transparent;transition:var(--sc-input-transition, var(--sc-transition-medium)) border-color, var(--sc-input-transition, var(--sc-transition-medium)) opacity, var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--sc-input-border-color-hover);background-color:var(--sc-input-background-color-hover)}.radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control{border-color:var(--sc-input-border-color-focus);background-color:var(--sc-input-background-color-focus);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary)}.radio--checked .radio__control{color:var(--var-sc-checked-radio-background-color, var(--sc-input-background-color));border-color:var(--sc-color-primary-500);background-color:var(--sc-color-primary-500)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{opacity:0.8}.radio.radio--checked:not(.radio--disabled).radio--focused .radio__control{border-color:var(--var-sc-checked-radio-border-color, var(--sc-input-background-color));background-color:var(--sc-color-primary-500);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary)}.radio--disabled{opacity:0.5;cursor:not-allowed}.radio:not(.radio--checked) svg circle{opacity:0}.radio__label{line-height:var(--sc-radio-size);margin-left:0.5em;user-select:none}",ScRadioStyle0=scRadioCss;let id=0;const ScRadio=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scBlur=createEvent(this,"scBlur",7),this.scChange=createEvent(this,"scChange",7),this.scFocus=createEvent(this,"scFocus",7),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 i=this.getAllRadios().filter((e=>!e.disabled)),o=["ArrowUp","ArrowLeft"].includes(e.key)?-1:1;let r=i.indexOf(this.el)+o;r<0&&(r=i.length-1),r>i.length-1&&(r=0),this.getAllRadios().map((e=>e.checked=!1)),i[r].focus(),i[r].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"})))}get el(){return this}static get watchers(){return{checked:["handleCheckedChange"]}}static get style(){return ScRadioStyle0}},[1,"sc-radio",{name:[1],value:[1],disabled:[1540],checked:[1540],required:[516],invalid:[1540],edit:[4],hasFocus:[32],ceClick:[64],reportValidity:[64]},void 0,{checked:["handleCheckedChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-radio"].forEach((e=>{"sc-radio"===e&&(customElements.get(e)||customElements.define(e,ScRadio))}))}export{ScRadio as S,defineCustomElement as d};

Back