radh-ui/dist/radh-ui/p-274ec3af.entry.js

Stencil Component Starter

import{r as e,c as t,h as i,g as s}from"./p-1a9f3501.js";class o{constructor(i){e(this,i),this.nameRadios="options",this.labelRadios="Select An Option",this.optionsRadios=["Banana","Strawberry"],this.selectedOption=t(this,"selectedOption",7)}async getSelectedRadio(){return this.selectRadio}handleKeyDown(e){"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),0===this.selected?this.selected=this.radios.length-1:this.selected--),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.selected===this.radios.length-1?this.selected=0:this.selected++)}componentDidLoad(){this.radios=Array.from(this.elem.shadowRoot.querySelectorAll('input[type="radio"]'))}get selected(){return this.selectRadio}set selected(e){if(console.log("selected: "+e),isFinite(this.selected)){let e=this.radios[this.selected];e.tabIndex=-1,e.setAttribute("aria-checked","false")}let t=this.radios[e];t.tabIndex=0,t.focus(),t.setAttribute("aria-checked","true"),this.elem.setAttribute("selected",""+e),this.selectRadio=e}onChangeRadio(e){this.selected=this.radios.indexOf(e.target),this.selectedOption.emit(this.selected)}render(){return i("div",{class:"swappy-radios",role:"radiogroup","aria-labelledby":"swappy-radios-label"},i("h3",{id:"swappy-radios-label"},this.labelRadios),this.optionsRadios.map(e=>(console.log(e),i("label",null,i("input",{type:"radio",name:this.nameRadios,"on-click":e=>this.onChangeRadio(e)}),i("span",{class:"radio"}),i("span",null,e)))))}get elem(){return s(this)}}o.style=":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;color:#0f273d;font-family:'Lato', sans-serif}h3{font-size:2.5rem;font-weight:bold}.swappy-radios label{display:block;position:relative;padding-left:4rem;margin-bottom:1.5rem;cursor:pointer;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#555}.swappy-radios label:hover input~.radio{opacity:0.8}.swappy-radios input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.swappy-radios input:checked~span{color:#ff4646;-webkit-transition:color .5s;transition:color .5s}.swappy-radios input:checked~.radio{background-color:#ff4646;opacity:1 !important}.swappy-radios input:checked~.radio::after{opacity:1}.swappy-radios .radio{position:absolute;top:0;left:0;height:2.5rem;width:2.5rem;background:#c9ded6}.swappy-radios .radio::after{display:block;content:'';position:absolute;opacity:0;top:0.75rem;left:0.75rem;width:1rem;height:1rem;background:#fff}";export{o as radh_swappy_radios}