@scania/tegel/dist/components/tds-radio-button.js

Tegel Design System

import{t,p as o,H as d,c as r,h as s}from"./index.js";import{g as a}from"./p-Cn4f8w1e.js";const i=o(class extends d{constructor(t){super(),!1!==t&&this.__registerHost(),this.tdsChange=r(this,"tdsChange",6),this.radioId=a(),this.checked=!1,this.required=!1,this.disabled=!1,this.handleChange=()=>{this.tdsChange.emit({radioId:this.radioId,value:this.value})}}async focusElement(){this.inputElement&&this.inputElement.focus()}render(){return s("div",{key:"f0a5a86e2ba270ab7c9f6bd4028765fcbd6b178f",class:"tds-radio-button"},s("input",{key:"70a293a321ad72ba290a1274bfad25954895ec69",ref:t=>{t&&(this.inputElement=t)},"aria-label":this.tdsAriaLabel,class:"tds-form-input",type:"radio",role:"radio",name:this.name,id:this.radioId,value:this.value,checked:this.checked,"aria-checked":this.checked,required:this.required,disabled:this.disabled,onChange:()=>this.handleChange(),tabIndex:this.tdsTabIndex}),s("label",{key:"aa5928d97053deb16341661ba8bb218e2f12eb73",htmlFor:this.radioId},s("slot",{key:"631da0a3930529351185f3b287ba9269caa0159b",name:"label"})))}get host(){return this}static get style(){return'.tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:20px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:"";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:20px;height:20px;top:2px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:50%;top:50%;transform:translate(-50%, -50%)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::before{background-color:var(--tds-radio-button-background-focus);box-shadow:0 0 0 1px var(--tds-radio-button-background-focus);animation:rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::after{outline:1px solid var(--tds-radio-button-interaction-outline)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;background-color:transparent;width:16px;height:16px;left:2px;top:4px;box-shadow:inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);clip-path:inset(1px 1px round 50%)}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1)}}'}},[262,"tds-radio-button",{name:[1],value:[1],radioId:[1,"radio-id"],checked:[516],required:[4],disabled:[4],tdsAriaLabel:[1,"tds-aria-label"],tdsTabIndex:[2,"tds-tab-index"],focusElement:[64]}]);function e(){"undefined"!=typeof customElements&&["tds-radio-button"].forEach((o=>{"tds-radio-button"===o&&(customElements.get(t(o))||customElements.define(t(o),i))}))}e();const n=i,b=e;export{n as TdsRadioButton,b as defineCustomElement}