ca-web-components/lib/components/ca-radio.js

web components for Clínica Alemana

import{r as a,i as r,x as s}from"../assets/unsafe-html-DS3AO1W7.js";class n extends a{static get styles(){return r`
      .radio-container {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .radio-input {
        opacity: 0;
        position: absolute;
      }

      .radio-custom {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #5f6368;
        display: inline-block;
        position: relative;
      }

      .radio-custom::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #4285f4;
        transform: scale(0);
        transition: transform 0.2s ease-in-out;
      }

      :host([checked]) .radio-custom::after {
        transform: scale(1);
      }

      label {
        margin-left: 8px;
        user-select: none;
      }
    `}static get properties(){return{name:{type:String,reflect:!0},checked:{type:Boolean,reflect:!0},value:{type:String,reflect:!0}}}constructor(){super(),this.checked=!1,this.addEventListener("click",this._onClick)}_onClick(){this.checked=!0,this.dispatchEvent(new CustomEvent("change",{detail:this.value,bubbles:!0,composed:!0}))}updated(t){t.has("checked")&&this.setAttribute("aria-checked",this.checked?"true":"false")}render(){return s`
      <label class="radio-container">
        <input
          type="radio"
          class="radio-input"
          ?checked=${this.checked}
          name=${this.name}
          value=${this.value}
        />
        <span class="radio-custom"></span>
        <slot></slot>
      </label>
    `}}customElements.define("ca-radio-button",n);class o extends a{static get properties(){return{name:{type:String},value:{type:String}}}constructor(){super(),this.name="",this.value=""}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._handleRadioChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("change",this._handleRadioChange)}_handleRadioChange(t){const e=t.detail;e!==this.value&&(this.value=e,this._updateRadioButtons())}_updateRadioButtons(){Array.from(this.querySelectorAll("ca-radio-button")).forEach(e=>{e.checked=e.value===this.value})}render(){return s`<slot></slot>`}}customElements.define("ca-radio-group",o);