import{r as i,h as n,g as e}from"./p-dfbe004d.js";let s=0;const t=class{constructor(n){i(this,n),this.inputId="choices-"+ ++s,this.helpId=`choices-help-text-${s}`,this.labelId=`choices-label-${s}`,this.label="",this.size="medium",this.required=!1,this.showLabel=!0,this.help="",this.hideLabel=!1,this.columns=1,this.errorMessage=""}async triggerFocus(){this.el.focus()}componentDidLoad(){this.handleRequiredChange(),this.handleResize()}handleRequiredChange(){const i=this.el.querySelectorAll("sc-choice");i.length&&i.forEach((i=>{i.required=this.required}))}handleResize(){"ResizeObserver"in window&&new window.ResizeObserver((i=>{i.forEach((i=>{this.width=i.contentRect.width}))})).observe(this.el)}render(){return n("fieldset",{part:"base",class:{choices:!0,"choices--hide-label":this.hideLabel,"choices--auto-width":this.autoWidth,"breakpoint-sm":this.width<384,"breakpoint-md":this.width>=384&&this.width<576,"breakpoint-lg":this.width>=576&&this.width<768,"breakpoint-xl":this.width>=768},role:"radiogroup"},n("sc-form-control",{exportparts:"label, help-text, form-control",size:this.size,required:this.required,label:this.label,showLabel:this.showLabel,help:this.help,inputId:this.inputId,helpId:this.helpId,labelId:this.labelId},n("div",{part:"choices",class:"choices__items"},n("slot",null))))}get el(){return e(this)}static get watchers(){return{required:["handleRequiredChange"]}}};t.style=":host {\n  display: block;\n}\n\n.choices {\n  container-type: inline-size;\n}\n.choices ::slotted(div) {\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.choices:not(.choices--auto-width) ::slotted(div) {\n  margin: 0;\n  display: grid;\n  gap: 10px;\n}\n\n.breakpoint-lg ::slotted(div),\n.breakpoint-xl ::slotted(div) {\n  grid-template-columns: repeat(var(--columns, 1), 1fr);\n}\n\n.choices .choices__items {\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.choices:not(.choices--auto-width) .choices__items {\n  display: grid;\n  gap: 10px;\n}\n\n.choices {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  margin: 0;\n}\n.choices .choices__label {\n  font-family: var(--sc-input-font-family);\n  font-size: var(--sc-input-font-size-medium);\n  font-weight: var(--sc-input-font-weight);\n  color: var(--sc-input-color);\n  padding: 0 var(--sc-spacing-xx-small);\n}\n\n.choices__items {\n  display: grid;\n  gap: 10px;\n  grid-auto-rows: 1fr;\n}\n\n.choices__items {\n  grid-template-columns: repeat(var(--columns, 1), 1fr);\n}\n\n@container (max-width: 420px) {\n  .choices__items {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}";export{t as sc_choices}