{"version":3,"names":["scFormControlCss","ScFormControlStyle0","wp","i18n","__","h","key","part","class","this","help","id","helpId","name","scInputCss","ScInputStyle0","ScInput","inputId","labelId","reportValidity","input","triggerFocus","options","focus","setCustomValidity","message","invalid","checkValidity","triggerBlur","blur","handleWheel","type","_a","select","handleBlur","hasFocus","scBlur","emit","handleFocus","scFocus","handleChange","value","scChange","handleInput","scInput","handleClearClick","event","scClear","stopPropagation","handlePasswordToggle","isPasswordVisible","handleFocusChange","setTimeout","handleValueChange","componentDidLoad","formController","FormSubmitController","el","addFormData","disconnectedCallback","removeFormData","render","Host","hidden","exportparts","size","required","label","showLabel","slot","disabled","squared","squaredBottom","squaredTop","squaredLeft","squaredRight","ref","readonly","placeholder","minlength","maxlength","min","max","step","autocomplete","autocorrect","autofocus","spellcheck","pattern","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","e","includes","clearable","length","onClick","tabindex","xmlns","width","height","viewBox","fill","stroke","x1","y1","x2","y2"],"sources":["src/components/ui/form-control/sc-form-control.scss?tag=sc-form-control&encapsulation=shadow","src/components/ui/form-control/sc-form-control.tsx","src/components/ui/input/sc-input.scss?tag=sc-input&encapsulation=shadow","src/components/ui/input/sc-input.tsx"],"sourcesContent":[".form-control {\n  font-family: var(--sc-font-sans);\n  font-size: var(--sc-font-size-medium);\n  font-weight: var(--sc-font-weight-normal);\n  display: flex;\n  flex-direction: column;\n  gap: var(--sc-input-label-margin);\n\n  .form-control__label {\n    display: none;\n  }\n\n  .form-control__help-text {\n    display: none;\n  }\n}\n\n// Label\n.form-control--has-label {\n  .form-control__label {\n    display: inline-block;\n    color: var(--sc-input-label-color);\n    font-weight: var(--sc-input-label-font-weight);\n    text-transform: var(--sc-input-label-text-transform, none);\n    letter-spacing: var(--sc-input-label-letter-spacing, 0);\n  }\n\n  &.form-control--small .form-control__label {\n    font-size: var(--sc-input-label-font-size-small);\n  }\n\n  &.form-control--medium .form-control__label {\n    font-size: var(--sc-input-label-font-size-medium);\n  }\n\n  &.form-control--large .form-control_label {\n    font-size: var(--sc-input-label-font-size-large);\n  }\n}\n\n::slotted(.control--errors) {\n  margin-top: var(--sc-spacing-small);\n  color: var(--sc-color-danger-500);\n}\n::slotted([slot='label-end']) {\n  float: right;\n}\n\n.form-control--is-required .required {\n  color: var(--sc-color-danger-500);\n}\n\n// Help text\n.form-control--has-help-text {\n  .form-control__help-text {\n    display: block;\n    color: var(--sc-input-help-text-color);\n  }\n\n  &.form-control--small .form-control__help-text {\n    font-size: var(--sc-input-help-text-font-size-small);\n  }\n\n  &.form-control--medium .form-control__help-text {\n    font-size: var(--sc-input-help-text-font-size-medium);\n  }\n\n  &.form-control--large .form-control__help-text {\n    font-size: var(--sc-input-help-text-font-size-large);\n  }\n}\n\n// Error messages\n.form-control--has-error {\n  .form-control__error-text {\n    display: block;\n    color: var(--sc-input-error-text-color);\n  }\n\n  &.form-control--small .form-control__error-text {\n    font-size: var(--sc-input-error-text-font-size-small);\n  }\n\n  &.form-control--medium .form-control__error-text {\n    font-size: var(--sc-input-error-text-font-size-medium);\n  }\n\n  &.form-control--large .form-control__error-text {\n    font-size: var(--sc-input-error-text-font-size-large);\n  }\n\n  ::part(base) {\n    border-color: rgb(var(--sl-color-danger-500));\n  }\n}\n\n.form-control--is-rtl {\n  &.form-control--has-label {\n    .form-control__label {\n      text-align: right;\n    }\n  }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @part form-control - The elements base wrapper.\n * @part label - The label.\n * @part input - The input wrapper.\n * @part help-text - Help text.\n * @part tooltip - Tooltip\n * @part tooltip-text - Tooltip text.\n */\n@Component({\n  tag: 'sc-form-control',\n  styleUrl: 'sc-form-control.scss',\n  shadow: true,\n})\nexport class ScFormControl {\n  @Element() el: HTMLScFormControlElement;\n\n  /** Size of the label */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Name for the input. Used for validation errors. */\n  @Prop() name: string;\n\n  /** Show the label. */\n  @Prop() showLabel: boolean = true;\n\n  /** Input label. */\n  @Prop() label: string;\n\n  /** Input label id. */\n  @Prop() labelId: string;\n\n  /** Input id. */\n  @Prop() inputId: string;\n\n  /** Whether the input is required. */\n  @Prop() required: boolean = false;\n\n  /** Help text */\n  @Prop() help: string;\n\n  /** Help id */\n  @Prop() helpId: string;\n\n  render() {\n    return (\n      <div\n        part=\"form-control\"\n        class={{\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': !!this.label && this.showLabel,\n          'form-control--has-help-text': !!this.help,\n          'form-control--is-required': !!this.required,\n          'form-control--is-rtl': isRtl(),\n        }}\n      >\n        <label part=\"label\" id={this.labelId} class=\"form-control__label\" htmlFor={this.inputId} aria-hidden={!!this.label ? 'false' : 'true'}>\n          <slot name=\"label\">{this.label}</slot>\n          <slot name=\"label-end\"></slot>\n          {!!this.required && (\n            <span aria-hidden=\"true\" class=\"required\">\n              {' '}\n              *\n            </span>\n          )}\n          <sc-visually-hidden>{!!this.required ? __('required', 'surecart') : ''}</sc-visually-hidden>\n        </label>\n        <div part=\"input\" class=\"form-control__input\">\n          <slot />\n        </div>\n        {this.help && (\n          <div part=\"help-text\" id={this.helpId} class=\"form-control__help-text\">\n            <slot name=\"help-text\">{this.help}</slot>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n","/**\n * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.\n */\n:host {\n  --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n  display: block;\n  position: relative;\n}\n\n.input__control[type='number'] {\n  -moz-appearance: textfield;\n}\n\n.input__control::-webkit-outer-spin-button,\n.input__control::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n}\n\n.input {\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--sc-input-font-family);\n  font-weight: var(--sc-input-font-weight);\n  letter-spacing: var(--sc-input-letter-spacing);\n  background-color: var(--sc-input-background-color);\n  border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n  vertical-align: middle;\n  box-shadow: var(--sc-input-box-shadow);\n  transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border,\n    var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n  cursor: text;\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--sc-input-background-color-hover);\n    border-color: var(--sc-input-border-color-hover);\n    z-index: 7;\n\n    .input__control {\n      color: var(--sc-input-color-hover);\n    }\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--sc-input-background-color-focus);\n    border-color: var(--sc-input-border-color-focus);\n    box-shadow: var(--focus-ring);\n    z-index: 8;\n\n    .input__control {\n      color: var(--sc-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--sc-input-background-color-disabled);\n    border-color: var(--sc-input-border-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--sc-input-color-disabled);\n\n      &::placeholder {\n        color: var(--sc-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  height: 100%;\n  color: var(--sc-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  width: 100%;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--sc-input-color);\n  }\n\n  &::placeholder {\n    color: var(--sc-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--sc-input-color);\n  cursor: default;\n\n  ::slotted(sc-icon) {\n    color: var(--sc-input-icon-color);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.input--small {\n  border-radius: var(--sc-input-border-radius-small);\n  font-size: var(--sc-input-font-size-small);\n  height: var(--sc-input-height-small);\n\n  .input__control {\n    height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);\n    padding: 0 var(--sc-input-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--sc-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--sc-input-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--sc-input-spacing-small);\n  }\n\n  .input__suffix ::slotted(sc-dropdown) {\n    margin: 0;\n  }\n}\n\n.input--medium {\n  border-radius: var(--sc-input-border-radius-medium);\n  font-size: var(--sc-input-font-size-medium);\n  height: var(--sc-input-height-medium);\n\n  .input__control {\n    height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);\n    padding: 0 var(--sc-input-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--sc-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--sc-input-spacing-medium) !important;\n  }\n\n  .input__suffix ::slotted(:not(sc-button[size='medium']):not(sc-button[size='small'])) {\n    margin-right: var(--sc-input-spacing-medium) !important;\n  }\n\n  .input__suffix ::slotted(sc-tag),\n  .input__suffix ::slotted(sc-button[size='small']) {\n    line-height: 1;\n    margin-right: var(--sc-input-spacing-small) !important;\n  }\n\n  .input__suffix ::slotted(sc-dropdown) {\n    margin: 3px;\n  }\n}\n\n.input--large {\n  border-radius: var(--sc-input-border-radius-large);\n  font-size: var(--sc-input-font-size-large);\n  height: var(--sc-input-height-large);\n\n  .input__control {\n    height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);\n    padding: 0 var(--sc-input-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--sc-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--sc-input-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--sc-input-spacing-large);\n  }\n\n  .input__suffix ::slotted(sc-dropdown) {\n    margin: 3px;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--sc-input-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--sc-input-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--sc-input-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--sc-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--sc-input-transition, var(--sc-transition-medium)) color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--sc-input-icon-color-hover);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\n}\n\n.input {\n  &--squared {\n    border-radius: 0;\n  }\n  &--squared-top {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  &--squared-bottom {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  &--squared-left {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  &--squared-right {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n","import { Component, Prop, State, Watch, h, Event, EventEmitter, Method, Element, Host, Listen } from '@stencil/core';\nimport { FormSubmitController } from '../../../functions/form-data';\n\nlet id = 0;\n\n/**\n * @part base - The elements base wrapper.\n * @part input - The html input element.\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 * @part prefix - Used to prepend an icon or element to the input.\n * @part suffix - Used to prepend an icon or element to the input.\n */\n@Component({\n  tag: 'sc-input',\n  styleUrl: 'sc-input.scss',\n  shadow: true,\n})\nexport class ScInput {\n  private input: HTMLInputElement;\n  private inputId: string = `input-${++id}`;\n  private helpId = `input-help-text-${id}`;\n  private labelId = `input-label-${id}`;\n\n  /** Element */\n  @Element() el: HTMLScInputElement;\n\n  private formController: any;\n\n  @Prop() squared: boolean;\n  @Prop() squaredBottom: boolean;\n  @Prop() squaredTop: boolean;\n  @Prop() squaredLeft: boolean;\n  @Prop() squaredRight: boolean;\n\n  /** Hidden */\n  @Prop() hidden: boolean = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'hidden' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name: string;\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Draws a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's label. */\n  @Prop() label: string;\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  /** Adds a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Adds a password toggle button to password inputs. */\n  @Prop() togglePassword: boolean = false;\n\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Disables the input. */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n  /** Makes the input readonly. */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop() minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop() maxlength: number;\n\n  /** The input's minimum value. */\n  @Prop() min: number | string;\n\n  /** The input's maximum value. */\n  @Prop() max: number | string;\n\n  /** The input's step attribute. */\n  @Prop() step: number;\n\n  /** A pattern to validate input against. */\n  @Prop() pattern: string;\n\n  /** Makes the input a required field. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck: boolean;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Inputs focus */\n  @Prop({ mutable: true, reflect: true }) hasFocus: boolean;\n\n  /** Is the password visible */\n  @State() isPasswordVisible = false;\n\n  /** Emitted when the control's value changes. */\n  @Event({ composed: true })\n  scChange: EventEmitter<void>;\n\n  /** Emitted when the clear button is activated. */\n  @Event() scClear: EventEmitter<void>;\n\n  /** Emitted when the control receives input. */\n  @Event({ cancelable: true }) scInput: EventEmitter<void>;\n\n  /** Emitted when the control gains focus. */\n  @Event() scFocus: EventEmitter<void>;\n\n  /** Emitted when the control loses focus. */\n  @Event() scBlur: EventEmitter<void>;\n\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async triggerFocus(options?: FocusOptions) {\n    return this.input.focus(options);\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  /** Removes focus from the input. */\n  @Method()\n  async triggerBlur() {\n    return this.input.blur();\n  }\n\n  /** Prevent mouse scroll wheel from modifying input value */\n  @Listen('wheel')\n  handleWheel() {\n    if (this.type === 'number') {\n      this.input?.blur();\n    }\n  }\n\n  /** Selects all the text in the input. */\n  select() {\n    return this.input.select();\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  handleChange() {\n    this.value = this.input.value;\n    this.scChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.input.value;\n    this.scInput.emit();\n  }\n\n  handleClearClick(event: MouseEvent) {\n    this.value = '';\n    this.scClear.emit();\n    this.scInput.emit();\n    this.scChange.emit();\n    this.input.focus();\n\n    event.stopPropagation();\n  }\n\n  handlePasswordToggle() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  @Watch('hasFocus')\n  handleFocusChange() {\n    setTimeout(() => {\n      this.hasFocus && this.input ? this.input.focus() : this.input.blur();\n    }, 0);\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.input) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  componentDidLoad() {\n    this.formController = new FormSubmitController(this.el).addFormData();\n    this.handleFocusChange();\n  }\n\n  disconnectedCallback() {\n    this.formController?.removeFormData();\n  }\n\n  render() {\n    return (\n      <Host hidden={this.hidden}>\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          name={this.name}\n        >\n          <slot name=\"label-end\" slot=\"label-end\"></slot>\n          <div\n            part=\"base\"\n            class={{\n              'input': true,\n\n              // Sizes\n              'input--small': this.size === 'small',\n              'input--medium': this.size === 'medium',\n              'input--large': this.size === 'large',\n\n              // States\n              'input--focused': this.hasFocus,\n              'input--invalid': this.invalid,\n              'input--disabled': this.disabled,\n\n              'input--squared': this.squared,\n              'input--squared-bottom': this.squaredBottom,\n              'input--squared-top': this.squaredTop,\n              'input--squared-left': this.squaredLeft,\n              'input--squared-right': this.squaredRight,\n            }}\n          >\n            <span part=\"prefix\" class=\"input__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n\n            <slot>\n              <input\n                part=\"input\"\n                id={this.inputId}\n                class=\"input__control\"\n                ref={el => (this.input = el as HTMLInputElement)}\n                type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n                name={this.name}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                required={this.required}\n                placeholder={this.placeholder}\n                minlength={this.minlength}\n                maxlength={this.maxlength}\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                // TODO: Test These below\n                autocomplete={this.autocomplete}\n                autocorrect={this.autocorrect}\n                autofocus={this.autofocus}\n                spellcheck={this.spellcheck}\n                pattern={this.pattern}\n                inputmode={this.inputmode}\n                aria-label={this.label}\n                aria-labelledby={this.labelId}\n                aria-invalid={this.invalid ? true : false}\n                value={this.value}\n                onChange={() => this.handleChange()}\n                onInput={() => this.handleInput()}\n                // onInvalid={this.handleInvalid}\n                onFocus={() => this.handleFocus()}\n                onBlur={() => this.handleBlur()}\n                onKeyDown={e => {\n                  // Only stop propagation on keys that are not handled by the browser\n                  if (!['Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Tab'].includes(e.key)) {\n                    e.stopPropagation();\n                  }\n                }}\n              />\n            </slot>\n\n            <span part=\"suffix\" class=\"input__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n\n            {this.clearable && this.value?.length > 0 && (\n              <button part=\"clear-button\" class=\"input__clear\" type=\"button\" onClick={e => this.handleClearClick(e)} tabindex=\"-1\">\n                <slot name=\"clear-icon\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    class=\"feather feather-x\"\n                  >\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                </slot>\n              </button>\n            )}\n          </div>\n        </sc-form-control>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}