import{radio_group_styles_default as t}from"./chunk.BVEHX6NS.js";import{FormControlController as e,customErrorValidityState as o,validValidityState as i,valueMissingValidityState as s}from"./chunk.GZKNJ77J.js";import{SlButtonGroup as l}from"./chunk.RYPV34FN.js";import{HasSlotController as a}from"./chunk.NYIIDP5N.js";import{watch as r}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as n}from"./chunk.Z7XDKKOD.js";import{__decorateClass as d}from"./chunk.6M63UXML.js";import{classMap as h}from"../../../../lit/directives/class-map.js";import{html as u}from"../../../../lit/index.js";import{property as c,query as p,state as m}from"../../../../lit/decorators.js";var f=class extends n{constructor(){super(...arguments),this.formControlController=new e(this),this.hasSlotController=new a(this,"help-text","label"),this.customValidityMessage="",this.hasButtonGroup=!1,this.errorMessage="",this.defaultValue="",this.label="",this.helpText="",this.name="option",this.value="",this.size="medium",this.form="",this.required=!1}get validity(){const t=this.required&&!this.value;return""!==this.customValidityMessage?o:t?s:i}get validationMessage(){const t=this.required&&!this.value;return""!==this.customValidityMessage?this.customValidityMessage:t?this.validationInput.validationMessage:""}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value}firstUpdated(){this.formControlController.updateValidity()}getAllRadios(){return[...this.querySelectorAll("sl-radio, sl-radio-button")]}handleRadioClick(t){const e=t.target.closest("sl-radio, sl-radio-button"),o=this.getAllRadios(),i=this.value;e.disabled||(this.value=e.value,o.forEach((t=>t.checked=t===e)),this.value!==i&&(this.emit("sl-change"),this.emit("sl-input")))}handleKeyDown(t){var e;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;const o=this.getAllRadios().filter((t=>!t.disabled)),i=null!=(e=o.find((t=>t.checked)))?e:o[0],s=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,l=this.value;let a=o.indexOf(i)+s;a<0&&(a=o.length-1),a>o.length-1&&(a=0),this.getAllRadios().forEach((t=>{t.checked=!1,this.hasButtonGroup||(t.tabIndex=-1)})),this.value=o[a].value,o[a].checked=!0,this.hasButtonGroup?o[a].shadowRoot.querySelector("button").focus():(o[a].tabIndex=0,o[a].focus()),this.value!==l&&(this.emit("sl-change"),this.emit("sl-input")),t.preventDefault()}handleLabelClick(){const t=this.getAllRadios(),e=t.find((t=>t.checked))||t[0];e&&e.focus()}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}async syncRadioElements(){var t,e;const o=this.getAllRadios();if(await Promise.all(o.map((async t=>{await t.updateComplete,t.checked=t.value===this.value,t.size=this.size}))),this.hasButtonGroup=o.some((t=>"sl-radio-button"===t.tagName.toLowerCase())),!o.some((t=>t.checked)))if(this.hasButtonGroup){const e=null==(t=o[0].shadowRoot)?void 0:t.querySelector("button");e&&(e.tabIndex=0)}else o[0].tabIndex=0;if(this.hasButtonGroup){const t=null==(e=this.shadowRoot)?void 0:e.querySelector("sl-button-group");t&&(t.disableRole=!0)}}syncRadios(){customElements.get("sl-radio")&&customElements.get("sl-radio-button")?this.syncRadioElements():(customElements.get("sl-radio")?this.syncRadioElements():customElements.whenDefined("sl-radio").then((()=>this.syncRadios())),customElements.get("sl-radio-button")?this.syncRadioElements():customElements.whenDefined("sl-radio-button").then((()=>this.syncRadios())))}updateCheckedRadio(){this.getAllRadios().forEach((t=>t.checked=t.value===this.value)),this.formControlController.setValidity(this.validity.valid)}handleSizeChange(){this.syncRadios()}handleValueChange(){this.hasUpdated&&this.updateCheckedRadio()}checkValidity(){const t=this.required&&!this.value,e=""!==this.customValidityMessage;return!t&&!e||(this.formControlController.emitInvalidEvent(),!1)}getForm(){return this.formControlController.getForm()}reportValidity(){const t=this.validity.valid;return this.errorMessage=this.customValidityMessage||t?"":this.validationInput.validationMessage,this.formControlController.setValidity(t),this.validationInput.hidden=!0,clearTimeout(this.validationTimeout),t||(this.validationInput.hidden=!1,this.validationInput.reportValidity(),this.validationTimeout=setTimeout((()=>this.validationInput.hidden=!0),1e4)),t}setCustomValidity(t=""){this.customValidityMessage=t,this.errorMessage=t,this.validationInput.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),o=!!this.label||!!t,i=!!this.helpText||!!e,s=u`
      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
    `;return u`
      <fieldset
        part="form-control"
        class=${h({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--radio-group":!0,"form-control--has-label":o,"form-control--has-help-text":i})}
        role="radiogroup"
        aria-labelledby="label"
        aria-describedby="help-text"
        aria-errormessage="error-message"
      >
        <label
          part="form-control-label"
          id="label"
          class="form-control__label"
          aria-hidden=${o?"false":"true"}
          @click=${this.handleLabelClick}
        >
          <slot name="label">${this.label}</slot>
        </label>

        <div part="form-control-input" class="form-control-input">
          <div class="visually-hidden">
            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
            <label class="radio-group__validation">
              <input
                type="text"
                class="radio-group__validation-input"
                ?required=${this.required}
                tabindex="-1"
                hidden
                @invalid=${this.handleInvalid}
              />
            </label>
          </div>

          ${this.hasButtonGroup?u`
                <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
                  ${s}
                </sl-button-group>
              `:s}
        </div>

        <div
          part="form-control-help-text"
          id="help-text"
          class="form-control__help-text"
          aria-hidden=${i?"false":"true"}
        >
          <slot name="help-text">${this.helpText}</slot>
        </div>
      </fieldset>
    `}};f.styles=t,f.dependencies={"sl-button-group":l},d([p("slot:not([name])")],f.prototype,"defaultSlot",2),d([p(".radio-group__validation-input")],f.prototype,"validationInput",2),d([m()],f.prototype,"hasButtonGroup",2),d([m()],f.prototype,"errorMessage",2),d([m()],f.prototype,"defaultValue",2),d([c()],f.prototype,"label",2),d([c({attribute:"help-text"})],f.prototype,"helpText",2),d([c()],f.prototype,"name",2),d([c({reflect:!0})],f.prototype,"value",2),d([c({reflect:!0})],f.prototype,"size",2),d([c({reflect:!0})],f.prototype,"form",2),d([c({type:Boolean,reflect:!0})],f.prototype,"required",2),d([r("size",{waitUntilFirstUpdate:!0})],f.prototype,"handleSizeChange",1),d([r("value")],f.prototype,"handleValueChange",1);export{f as SlRadioGroup};