{"version":3,"names":["scChoicesCss","ScChoicesStyle0","id","ScChoices","this","inputId","helpId","labelId","triggerFocus","el","focus","componentDidLoad","handleRequiredChange","handleResize","choices","querySelectorAll","length","forEach","choice","required","window","ro","ResizeObserver","entries","entry","width","contentRect","observe","render","h","key","part","class","hideLabel","autoWidth","role","exportparts","size","label","showLabel","help"],"sources":["src/components/ui/choices/sc-choices.scss?tag=sc-choices&encapsulation=shadow","src/components/ui/choices/sc-choices.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.choices {\n  container-type: inline-size;\n  ::slotted(div) {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sc-choices-gap, 10px);\n  }\n}\n.choices:not(.choices--auto-width) {\n  ::slotted(div) {\n    margin: 0;\n    display: grid;\n    gap: var(--sc-choices-gap, 10px);\n  }\n}\n\n.breakpoint-lg,\n.breakpoint-xl {\n  ::slotted(div) {\n    grid-template-columns: repeat(var(--columns, 1), 1fr);\n  }\n}\n.choices {\n  .choices__items {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sc-choices-gap, 10px);\n  }\n}\n\n.choices:not(.choices--auto-width) {\n  .choices__items {\n    display: grid;\n    gap: var(--sc-choices-gap, 10px);\n  }\n}\n\n.choices {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  margin: 0;\n\n  .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\n.choices__items {\n  display: grid;\n  gap: var(--sc-choices-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: 419px) {\n  .choices__items {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}\n","import { Component, Prop, h, State, Element, Watch, Method } from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @part base - The elements base wrapper.\n * @part choices - The choices wrapper.\n * @part form-control - The form control wrapper.\n * @part label - The input label.\n * @part help-text - Help text that describes how to use the input.\n */\n@Component({\n  tag: 'sc-choices',\n  styleUrl: 'sc-choices.scss',\n  shadow: true,\n})\nexport class ScChoices {\n  @Element() el: HTMLScChoicesElement;\n\n  private inputId: string = `choices-${++id}`;\n  private helpId = `choices-help-text-${id}`;\n  private labelId = `choices-label-${id}`;\n\n  /** The group label. Required for proper accessibility. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** Input size */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @Prop() autoWidth: boolean;\n\n  /** Required */\n  @Prop() required: boolean = false;\n\n  /** Should we show the label */\n  @Prop() showLabel: boolean = true;\n\n  /** The input's help text. */\n  @Prop() help: string = '';\n\n  /** Hides the fieldset and legend that surrounds the group. The label will still be read by screen readers. */\n  @Prop({ attribute: 'hide-label' }) hideLabel: boolean = false;\n\n  /** Number of columns on desktop */\n  @Prop() columns: number = 1;\n\n  /** Validation error message. */\n  @Prop() errorMessage: string = '';\n\n  @State() width: number;\n\n  @Method()\n  async triggerFocus() {\n    this.el.focus();\n  }\n\n  componentDidLoad() {\n    this.handleRequiredChange();\n    this.handleResize();\n  }\n\n  @Watch('required')\n  handleRequiredChange() {\n    const choices = [...this.el.querySelectorAll('sc-choice, sc-choice-container')] as Array<HTMLScChoiceElement | HTMLScChoiceContainerElement>;\n    if (choices.length) {\n      choices.forEach(choice => {\n        choice.required = this.required;\n      });\n    }\n  }\n\n  handleResize() {\n    // Only run if ResizeObserver is supported.\n    if ('ResizeObserver' in window) {\n      var ro = new window.ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.width = entry.contentRect.width;\n        });\n      });\n      ro.observe(this.el);\n    }\n  }\n\n  render() {\n    return (\n      <fieldset\n        part=\"base\"\n        class={{\n          'choices': true,\n          'choices--hide-label': this.hideLabel,\n          'choices--auto-width': this.autoWidth,\n          'breakpoint-sm': this.width < 384,\n          'breakpoint-md': this.width >= 384 && this.width < 576,\n          'breakpoint-lg': this.width >= 576 && this.width < 768,\n          'breakpoint-xl': this.width >= 768,\n        }}\n        role=\"radiogroup\"\n      >\n        <sc-form-control\n          exportparts=\"label, help-text, form-control\"\n          size={this.size}\n          required={this.required}\n          label={this.label}\n          showLabel={this.showLabel}\n          help={this.help}\n          inputId={this.inputId}\n          helpId={this.helpId}\n          labelId={this.labelId}\n        >\n          <div part=\"choices\" class=\"choices__items\">\n            <slot />\n          </div>\n        </sc-form-control>\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,0yCACrB,MAAAC,EAAeD,ECCf,IAAIE,EAAK,E,MAcIC,EAAS,M,yBAGZC,KAAAC,QAAkB,aAAaH,IAC/BE,KAAAE,OAAS,qBAAqBJ,IAC9BE,KAAAG,QAAU,iBAAiBL,I,WAGnB,G,UAG8C,S,uCAKlC,M,eAGC,K,UAGN,G,eAGiC,M,aAG9B,E,kBAGK,G,qBAK/B,kBAAMM,GACJJ,KAAKK,GAAGC,O,CAGV,gBAAAC,GACEP,KAAKQ,uBACLR,KAAKS,c,CAIP,oBAAAD,GACE,MAAME,EAAU,IAAIV,KAAKK,GAAGM,iBAAiB,mCAC7C,GAAID,EAAQE,OAAQ,CAClBF,EAAQG,SAAQC,IACdA,EAAOC,SAAWf,KAAKe,QAAQ,G,EAKrC,YAAAN,GAEE,GAAI,mBAAoBO,OAAQ,CAC9B,IAAIC,EAAK,IAAID,OAAOE,gBAAeC,IACjCA,EAAQN,SAAQO,IACdpB,KAAKqB,MAAQD,EAAME,YAAYD,KAAK,GACpC,IAEJJ,EAAGM,QAAQvB,KAAKK,G,EAIpB,MAAAmB,GACE,OACEC,EAAA,YAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACLlB,QAAW,KACX,sBAAuBV,KAAK6B,UAC5B,sBAAuB7B,KAAK8B,UAC5B,gBAAiB9B,KAAKqB,MAAQ,IAC9B,gBAAiBrB,KAAKqB,OAAS,KAAOrB,KAAKqB,MAAQ,IACnD,gBAAiBrB,KAAKqB,OAAS,KAAOrB,KAAKqB,MAAQ,IACnD,gBAAiBrB,KAAKqB,OAAS,KAEjCU,KAAK,cAELN,EAAA,mBAAAC,IAAA,2CACEM,YAAY,iCACZC,KAAMjC,KAAKiC,KACXlB,SAAUf,KAAKe,SACfmB,MAAOlC,KAAKkC,MACZC,UAAWnC,KAAKmC,UAChBC,KAAMpC,KAAKoC,KACXnC,QAASD,KAAKC,QACdC,OAAQF,KAAKE,OACbC,QAASH,KAAKG,SAEdsB,EAAA,OAAAC,IAAA,2CAAKC,KAAK,UAAUC,MAAM,kBACxBH,EAAA,QAAAC,IAAA,+C","ignoreList":[]}