{"version":3,"names":["scChoiceCss","ScChoiceStyle0","id","wp","i18n","__"],"sources":["src/components/ui/choice/sc-choice.scss?tag=sc-choice&encapsulation=shadow","src/components/ui/choice/sc-choice.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n  min-width: 0;\n  align-self: stretch;\n  --mobile-size: 100px;\n}\n\n[hidden] {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n}\n\n.choice {\n  background: var(--sc-choice-background-color);\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  user-select: none;\n  border: var(--sc-choice-border);\n  border-radius: var(--sc-choice-border-radius, var(--sc-input-border-radius-large));\n  box-shadow: var(--sc-choice-box-shadow);\n  cursor: pointer;\n  padding: var(--sc-choice-padding, 1.3em 1.1em);\n  position: relative;\n  text-decoration: none;\n  color: var(--sc-input-color);\n  height: 100%; // TODO: test this.\n  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;\n\n  &--is-rtl {\n    text-align: right;\n  }\n\n  &__content {\n    cursor: pointer;\n    display: flex;\n    gap: 0.75em;\n    align-items: center;\n  }\n\n  &--checked {\n    border-color: var(--sc-color-primary-500);\n    box-shadow: 0 0 0 1px var(--sc-color-primary-500);\n    z-index: 1;\n  }\n\n  &__title {\n    display: inline-block;\n    font-weight: var(--sc-input-label-font-weight);\n    font-size: var(--sc-input-label-font-size-medium);\n  }\n\n  &--size-small {\n    padding: 0.75em 0.9em;\n  }\n  &--size-large {\n    padding: 1.3em 1.1em;\n  }\n}\n\n.choice__icon {\n  display: inline-flex;\n  width: var(--sc-radio-size);\n  height: var(--sc-radio-size);\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.choice__control {\n  flex: 0 0 auto;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: solid var(--sc-input-border-width) var(--sc-input-border-color);\n  background-color: var(--sc-input-background-color);\n  color: transparent;\n  transition: var(--sc-input-transition, var(--sc-transition-medium)) border-color, var(--sc-input-transition, var(--sc-transition-medium)) background-color,\n    var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n\n  &.choice__radio {\n    width: var(--sc-radio-size);\n    height: var(--sc-radio-size);\n    border-radius: 50%;\n  }\n\n  &.choice__checkbox {\n    width: var(--sc-toggle-size);\n    height: var(--sc-toggle-size);\n    border-radius: 4px;\n  }\n\n  input[type='radio'],\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.choice:not(.choice--checked):not(.choice--disabled) .choice__control:hover {\n  border-color: var(--sc-input-border-color-hover);\n  background-color: var(--sc-input-background-color-hover);\n}\n\n// Focus\n.choice.choice--focused:not(.choice--checked):not(.choice--disabled) .choice__control {\n  border-color: var(--var-sc-checked-focus-border-color, var(--sc-input-background-color));\n  background-color: var(--sc-input-background-color-focus);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-primary-500);\n}\n\n.choice.choice--focused:not(.choice--checked):not(.choice--disabled) {\n  outline-style: solid;\n  outline-color: var(--sc-color-primary-500);\n  outline-width: var(--sc-focus-ring-width);\n  outline-offset: 2px;\n}\n\n// Checked\n.choice--checked .choice__control {\n  color: var(--var-sc-checked-color, var(--sc-input-background-color));\n  border-color: var(--sc-color-primary-500);\n  background-color: var(--sc-color-primary-500);\n}\n\n// Checked + hover\n.choice.choice--checked:not(.choice--disabled) .choice__control:hover {\n  border-color: var(--var-sc-checked-hover-radio-border-color, var(--sc-input-background-color));\n  background-color: var(--sc-color-primary-500);\n}\n\n// Checked + focus\n.choice.choice--checked:not(.choice--disabled).choice--focused .choice__control {\n  border-color: var(--var-sc-checked-focus-radio-border-color, var(--sc-input-background-color));\n  background-color: var(--sc-color-primary-500);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n}\n\n// Disabled\n.choice--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n// When the control isn't checked, hide the circle for Windows High Contrast mode a11y\n.choice:not(.choice--checked) svg circle {\n  opacity: 0;\n}\n\n.choice__label {\n  width: 100%;\n  line-height: 1;\n  user-select: none;\n}\n\n.choice--layout-columns {\n  .choice__label {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 0.5em;\n  }\n  .choice__price {\n    text-align: right;\n    margin: 0;\n    display: flex;\n    gap: var(--sc-spacing-xx-small);\n  }\n}\n\n.choice__description {\n  display: inline-block;\n  color: var(--sc-color-gray-500);\n  font-size: var(--sc-font-size-medium);\n}\n\n.choice__label-text {\n  display: block;\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  flex: 1;\n}\n\n.choice__price {\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\nimport { FormSubmitController } from '../../../functions/form-data';\nimport { isRtl } from '../../../functions/page-align';\n\nlet id = 0;\n\n@Component({\n  tag: 'sc-choice',\n  styleUrl: 'sc-choice.scss',\n  shadow: true,\n})\nexport class ScChoice {\n  @Element() el: HTMLScChoiceElement;\n\n  private formController: any;\n\n  private input: HTMLInputElement;\n  private inputId: string = `choice-${++id}`;\n  private labelId: string = `choice-label-${id}`;\n\n  /** Does the choice have focus */\n  @State() hasFocus: boolean = false;\n\n  /** Does the choice have focus */\n  @State() isStacked: boolean = false;\n\n  /** The choice name attribute */\n  @Prop() name: string;\n\n  /** The size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The choice value */\n  @Prop({ reflect: true }) value: string;\n\n  /** The choice name attribute */\n  @Prop() type: 'radio' | 'checkbox' = 'radio';\n\n  /** Is the choice disabled */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n  /** Draws the choice in a checked state. */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /** Is this required */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ reflect: true, mutable: true }) invalid: boolean = false;\n\n  /** Show the label */\n  @Prop() showLabel: boolean = true;\n\n  /** Show the price */\n  @Prop() showPrice: boolean = true;\n\n  /** Show the radio/checkbox control */\n  @Prop() showControl: boolean = true;\n\n  @State() hasDefaultSlot: boolean;\n  @State() hasPrice: boolean;\n  @State() hasPer: boolean;\n  @State() hasDescription: boolean;\n\n  /** Emitted when the control loses focus. */\n  @Event() scBlur: EventEmitter<void>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event() scChange: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event() scFocus: EventEmitter<void>;\n\n  /** Simulates a click on the choice. */\n  @Method()\n  async triggerClick() {\n    this.input.click();\n  }\n\n  @Method()\n  async triggerFocus() {\n    this.input.focus();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    this.invalid = !this.input.checkValidity();\n\n    if (this.required) {\n      const choices = this.getAllChoices();\n      if (!choices.some(c => c.checked)) {\n        this.input.setCustomValidity(this.type === 'radio' ? __('Please choose one.', 'surecart') : __('Please choose at least one.', 'surecart'));\n        this.invalid = !this.input.checkValidity();\n      } else {\n        this.input.setCustomValidity('');\n        this.invalid = !this.input.checkValidity();\n      }\n    }\n\n    return this.input.reportValidity();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    this.input.setCustomValidity('');\n    if (this.type === 'radio' && this.checked) {\n      this.getSiblingChoices().map(choice => (choice.checked = false));\n    }\n    this.input.checked = this.checked;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.scBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.scFocus.emit();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  getAllChoices() {\n    const choiceGroup = this.el.closest('sc-choices') || this.el.parentElement;\n    // Radios must be part of a radio group\n    if (!choiceGroup) {\n      return [];\n    }\n    return [...choiceGroup.querySelectorAll('sc-choice')] as HTMLScChoiceElement[];\n  }\n\n  getSiblingChoices() {\n    return this.getAllChoices().filter(choice => choice !== this.el) as HTMLScChoiceElement[];\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // On arrow key press\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const choices = this.getAllChoices().filter(choice => !choice.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n      let index = choices.indexOf(this.el) + incr;\n      if (index < 0) index = choices.length - 1;\n      if (index > choices.length - 1) index = 0;\n\n      choices[index].triggerFocus();\n      choices[index].checked = true;\n\n      event.preventDefault();\n    }\n    if ('Enter' === event.key || ' ' === event.key) {\n      this.handleClickEvent();\n    }\n  }\n\n  // Prevent clicks on the label from briefly blurring the input\n  handleMouseDown(event: MouseEvent) {\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n    this.formController = new FormSubmitController(this.el, {\n      value: (control: HTMLScChoiceElement) => (control.checked ? control.value : undefined),\n    }).addFormData();\n  }\n\n  disconnectedCallback() {\n    this.formController?.removeFormData();\n  }\n\n  handleResize() {\n    if (!window?.ResizeObserver) {\n      return;\n    }\n    const resizeObserver = new window.ResizeObserver(entries => {\n      for (let entry of entries) {\n        if (entry.contentBoxSize) {\n          const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;\n          setTimeout(() => (this.isStacked = contentBoxSize?.inlineSize < 350), 0);\n        }\n      }\n    });\n    resizeObserver.observe(this.el);\n  }\n\n  handleSlotChange() {\n    this.hasPrice = !!this.el.querySelector('[slot=\"price\"]');\n    this.hasPer = !!this.el.querySelector('[slot=\"per\"]');\n    this.hasDescription = !!this.el.querySelector('[slot=\"description\"]');\n    this.hasDefaultSlot = !!this.el.querySelector('[slot=\"default\"]');\n  }\n\n  @Listen('click')\n  handleClickEvent() {\n    if (this.type === 'checkbox') {\n      this.checked = !this.checked;\n      this.scChange.emit(this.input.checked);\n    } else if (!this.checked) {\n      this.checked = true;\n      this.scChange.emit(this.input.checked);\n    }\n  }\n\n  render() {\n    return (\n      <Host tabindex=\"0\" onFocus={() => this.input.focus()}>\n        <div\n          part=\"base\"\n          class={{\n            'choice': true,\n            'choice--checked': this.checked,\n            'choice--disabled': this.disabled,\n            'choice--focused': this.hasFocus,\n            'choice--layout-columns': !this.isStacked,\n            'choice--is-rtl': isRtl(),\n            [`choice--size-${this.size}`]: true,\n          }}\n          onKeyDown={e => this.handleKeyDown(e)}\n          onMouseDown={e => this.handleMouseDown(e)}\n        >\n          <slot name=\"header\" />\n          <label class=\"choice__content\" part=\"content\" htmlFor={this.inputId}>\n            <span\n              part=\"control\"\n              class={{\n                choice__control: true,\n                choice__checkbox: this.type === 'checkbox',\n                choice__radio: this.type === 'radio',\n              }}\n              hidden={!this.showControl}\n            >\n              <span part=\"checked-icon\" class=\"choice__icon\">\n                {this.type === 'checkbox' ? (\n                  <svg viewBox=\"0 0 16 16\">\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                      <g stroke=\"currentColor\" stroke-width=\"2\">\n                        <g transform=\"translate(3.428571, 3.428571)\">\n                          <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                          <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                        </g>\n                      </g>\n                    </g>\n                  </svg>\n                ) : (\n                  <svg viewBox=\"0 0 16 16\">\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                      <g fill=\"currentColor\">\n                        <circle cx=\"8\" cy=\"8\" r=\"3.42857143\"></circle>\n                      </g>\n                    </g>\n                  </svg>\n                )}\n              </span>\n              <input\n                id={this.inputId}\n                ref={el => (this.input = el as HTMLInputElement)}\n                type={this.type}\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-checked={this.checked ? 'true' : 'false'}\n                aria-disabled={this.disabled ? 'true' : 'false'}\n                aria-labelledby={this.labelId}\n                tabindex=\"0\"\n                // required={this.required}\n                onBlur={() => this.handleBlur()}\n                onFocus={() => this.handleFocus()}\n                onChange={() => this.handleClickEvent()}\n              />\n            </span>\n            <span part=\"label\" id={this.labelId} class=\"choice__label\">\n              <span class=\"choice__label-text\" hidden={!this.showLabel}>\n                <span class=\"choice__title\" part=\"title\">\n                  <slot onSlotchange={() => this.handleSlotChange()}></slot>\n                </span>\n                <span class=\"choice__description description\" part=\"description\" hidden={!this.hasDescription}>\n                  <slot name=\"description\" onSlotchange={() => this.handleSlotChange()}></slot>\n                </span>\n              </span>\n\n              <span class=\"choice__price\" hidden={!this.showPrice || (!this.hasPrice && !this.hasPer)}>\n                <span class=\"choice__title\">\n                  <slot name=\"price\" onSlotchange={() => this.handleSlotChange()}></slot>\n                </span>{' '}\n                <span class=\"choice__description\">\n                  <slot name=\"per\" onSlotchange={() => this.handleSlotChange()}></slot>\n                </span>\n              </span>\n            </span>\n          </label>\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAc,gwIACpB,MAAAC,EAAeD,ECKf,IAAAE,EAAA,E,i0BAwF6DC,GAAAC,KAAAC,GAAE,iCAAqCF,GAAAC,KAAAC,GAAE,2C","ignoreList":[]}