{"version":3,"names":["scToggleCss","ScToggleStyle0","wp","i18n","__","setDefaultAnimation"],"sources":["src/components/ui/sc-toggle/sc-toggle.scss?tag=sc-toggle&encapsulation=shadow","src/components/ui/sc-toggle/sc-toggle.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--sc-font-sans);\n  --sc-toggle-padding: var(--sc-spacing-medium);\n}\n\n::slotted([slot='summary']) {\n  display: flex;\n  align-items: center;\n  flex-direction: flex-start;\n  gap: var(--sc-spacing-x-small);\n}\n\n.details {\n  border-radius: var(--sc-border-radius-medium);\n  background-color: var(--sc-toggle-background-color, var(--sc-color-white));\n  overflow-anchor: none;\n\n  &__radio {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--sc-input-background-color);\n    color: transparent;\n    border-radius: 50%;\n    border: solid var(--sc-toggle-border-width, var(--sc-input-border-width)) var(--sc-toggle-border-color, var(--sc-input-border-color));\n    background-color: var(--sc-input-background-color);\n    display: inline-flex;\n    color: transparent;\n    width: var(--sc-toggle-radio-size, var(--sc-radio-size));\n    height: var(--sc-toggle-radio-size, var(--sc-radio-size));\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    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n.details--open .details__radio {\n  color: var(--sc-color-white);\n  border-color: var(--sc-color-primary-500);\n  background-color: var(--sc-color-primary-500);\n}\n\n.details:not(.details--borderless) {\n  border: solid 1px var(--sc-toggle-border-color, var(--sc-color-gray-200));\n}\n.details--disabled {\n  opacity: 0.5;\n}\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--sc-toggle-header-padding, var(--sc-toggle-padding));\n  user-select: none;\n  cursor: pointer;\n  color: var(--sc-toggle-header-color, var(--sc-input-label-color));\n  gap: 0.75em;\n}\n.details__header:focus {\n  box-shadow: var(--sc-focus-ring);\n}\n.details__header:focus-visible {\n  box-shadow: var(--sc-focus-ring);\n}\n.details--disabled .details__header {\n  cursor: not-allowed;\n}\n.details--disabled .details__header:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  transition: var(--sc-transition-medium) transform ease;\n}\n.details--open {\n  .details__summary-icon {\n    transform: rotate(90deg);\n  }\n}\n.details__content {\n  padding: var(--sc-toggle-content-padding, var(--sc-toggle-padding));\n  padding-top: calc(var(--sc-toggle-content-padding, var(--sc-toggle-padding)) / 4);\n}\n.details--shady {\n  .details__body {\n    border-top: solid var(--sc-input-border-width) var(--sc-input-border-color);\n    background: var(--sc-toggle-shady-color, var(--sc-color-gray-50));\n  }\n  .details__content {\n    padding-top: var(--sc-toggle-content-padding, var(--sc-toggle-padding));\n  }\n}\n","import { Component, Prop, h, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { getAnimation, setDefaultAnimation } from '../../../functions/animation-registry';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../../functions/animate';\nimport { isRtl } from '../../../functions/page-align';\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\n@Component({\n  tag: 'sc-toggle',\n  styleUrl: 'sc-toggle.scss',\n  shadow: true,\n})\nexport class ScToggle {\n  @Element() el: HTMLScToggleElement;\n  private header: HTMLElement;\n  private body: HTMLElement;\n\n  /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary: string;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Is this a borderless toggle? */\n  @Prop({ reflect: true }) borderless: boolean = false;\n\n  /** Is this a shady */\n  @Prop({ reflect: true }) shady: boolean = false;\n\n  /** Should we show a radio control?  */\n  @Prop() showControl: boolean = false;\n\n  /** Should we show the arrow icon? */\n  @Prop() showIcon: boolean = true;\n\n  /** Are these collapsible? */\n  @Prop() collapsible: boolean = true;\n\n  /** Show the toggle */\n  @Event() scShow: EventEmitter<void>;\n\n  /** Show the toggle */\n  @Event() scHide: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.body.hidden = !this.open;\n    this.body.style.height = this.open ? 'auto' : '0';\n  }\n\n  /** Shows the details. */\n  async show() {\n    if (this.open || this.disabled) {\n      return undefined;\n    }\n    this.open = true;\n    speak(__('Summary Shown', 'surecart'));\n  }\n\n  /** Hides the details */\n  async hide() {\n    if (!this.open || this.disabled || !this.collapsible) {\n      return undefined;\n    }\n    this.open = false;\n    speak(__('Summary Hidden', 'surecart'));\n  }\n\n  handleSummaryClick() {\n    if (!this.disabled) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n\n      this.header.focus();\n    }\n  }\n\n  handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      this.scShow.emit();\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.body.style.overflow = 'hidden';\n      const { keyframes, options } = getAnimation(this.el, 'details.show');\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.scHide.emit();\n      await stopAnimations(this.body);\n      this.body.style.overflow = 'hidden';\n      const { keyframes, options } = getAnimation(this.el, 'details.hide');\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'details': true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          'details--borderless': this.borderless,\n          'details--shady': this.shady,\n          'details--is-rtl': isRtl(),\n        }}\n      >\n        <header\n          ref={el => (this.header = el as HTMLElement)}\n          part=\"header\"\n          id=\"header\"\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"content\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? '-1' : '0'}\n          onClick={() => this.handleSummaryClick()}\n          onKeyDown={e => this.handleSummaryKeyDown(e)}\n        >\n          {this.showControl && (\n            <span part=\"radio\" class=\"details__radio\">\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            </span>\n          )}\n\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          {this.showIcon && (\n            <span part=\"summary-icon\" class=\"details__summary-icon\">\n              <slot name=\"icon\">\n                <sc-icon name=\"chevron-right\"></sc-icon>\n              </slot>\n            </span>\n          )}\n        </header>\n\n        <div class=\"details__body\" ref={el => (this.body = el as HTMLElement)} part=\"body\">\n          <div part=\"content\" id=\"content\" class=\"details__content\" role=\"region\" aria-labelledby=\"header\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nsetDefaultAnimation('details.show', {\n  keyframes: [\n    { height: '0', opacity: '0' },\n    { height: 'auto', opacity: '1' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('details.hide', {\n  keyframes: [\n    { height: 'auto', opacity: '1' },\n    { height: '0', opacity: '0' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n"],"mappings":"4LAAA,MAAMA,EAAc,qoFACpB,MAAAC,EAAeD,E,8aCwDLE,GAAAC,KAAAC,GAAE,4B,kGASFF,GAAAC,KAAAC,GAAE,6B,y2FAyHZC,EAAA,gB,wGAQAA,EAAA,gB","ignoreList":[]}