{"version":3,"sources":["node_modules/@sydle/sydle-ui/dist/collection/components/input/scss/index.css?tag=sy-input&encapsulation=shadow","node_modules/@sydle/sydle-ui/dist/collection/components/input/input.js"],"names":["indexCss","Input","[object Object]","hostRef","this","inheritedAttributes","didBlurAfterEdit","isFocused","type","readonly","disabled","clearButton","textSecurity","reveal","useGrouping","onInput","ev","input","target","value","syDidInput","emit","onBlur","focusChanged","onFocus","onKeydown","shouldClearOnEdit","hasValue","key","clearTextInput","syDidKeydown","onChange","syDidChange","toString","updateLabelHasValueClass","clearTextOnEnter","preventDefault","stopPropagation","nativeElement","focus","textSecurityNumberInput","syDidFocus","updateElementValue","syDidBlur","Promise","resolve","icon","el","querySelector","iconPosition","locale","console","warn","inheritAttributes","iconWatcher","error","getValue","length","formatNumber","useLocale","toNumber","isNaN","toLocaleString","minimumFractionDigits","maximumFractionDigits","parseFloat","sampleNumber","sampleString","fractionSeparator","stringValue","replace","RegExp","labelElement","classList","add","remove","e","test","ctrlKey","inputEl","shadowRoot","getElementById","addEventListener","handleTextSecurityNumberInputKeydown","removeEventListener","iconAttributes","name","class","h","Host","Object","assign","ref","id","getType","inputMode","getInputMode","placeholder","onKeyDown","hasTextSecurity","aria-label","small","content","onClick","toggleTextSecurity","onTouchStart","onMouseDown","htmlFor","label","delegatesFocus"],"mappings":"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","sourcesContent":["/** Do not edit directly **/\n/**\n* This function require the following tokens:\n*\n*   // DISABLED STATE\n*   sy-{$component}-background-color-disabled-{$color}\n*   sy-{$component}-color-disabled-{$color}\n*   sy-{$component}-border-color-disabled-{$color}\n*\n*   // HOVER and FOCUS STATE\n*   sy-{$component}-background-color-hover-{$color}\n*   sy-{$component}-border-color-hover-{$color}\n*\n*   // ACTIVE STATE\n*   sy-{$component}-background-color-active-{$color}\n*   sy-{$component}-border-color-active-{$color}\n*\n*   // FOCUS VISIBLE STATE\n*   sy-{$component}-border-color-focus-visible\n*/\n/**\n* DEPRECATED\n*/\n/**\n* DEPRECATED\n*/\n/**\n* DEPRECATED\n*/\n/** Do not edit directly **/\n/**\n * @prop --sy-input-color: Input color.\n * @prop --sy-input-color-disabled: Input color disabled.\n * @prop --sy-input-color-error: Input color error.\n * @prop --sy-input-color-label-focus: Input color label focus.\n * @prop --sy-input-color-focus: Input color focus.\n * @prop --sy-input-border-radius: Input border radius.\n * @prop --sy-input-border-color: Input border color.\n * @prop --sy-input-border-color-focus: Input border color focus.\n * @prop --sy-input-border-color-error: Input border color error.\n * @prop --sy-input-border-color-hover: Input border color hover.\n * @prop --sy-input-icon-size: Input icon size.\n * @prop --sy-input-icon-color: Input icon color.\n * @prop --sy-input-clear-icon-size: Input clear icon size.\n * @prop --sy-input-clear-icon-stroke-width: Input clear icon stroke width.\n * @prop --sy-input-clear-icon-margin-left: Input clear icon margin left.\n * @prop --sy-input-error-margin-top: Form error margin top.\n * @prop --sy-input-error-font-size: Input error font size.\n * @prop --sy-input-error-text-decoration: Input error text decoration.\n * @prop --sy-input-error-font-family: Input error font family.\n * @prop --sy-input-error-font-weight: Input error font weight.\n * @prop --sy-input-error-font-style: Input error font style.\n * @prop --sy-input-error-font-stretch: Input error font stretch.\n * @prop --sy-input-error-letter-spacing: Input error letter spacing.\n * @prop --sy-input-error-line-height: Input error line height.\n * @prop --sy-input-font-size: Input font size.\n * @prop --sy-input-text-decoration: Input text decoration.\n * @prop --sy-input-font-family: Input font family.\n * @prop --sy-input-font-weight: Input font weight.\n * @prop --sy-input-font-style: Input font style.\n * @prop --sy-input-font-stretch: Input font stretch.\n * @prop --sy-input-letter-spacing: Input letter spacing.\n * @prop --sy-input-line-height: Input line height.\n * @prop --sy-input-floating-label-font-size: Input floating label font size.\n * @prop --sy-input-floating-label-text-decoration: Input floating label text decoration.\n * @prop --sy-input-floating-label-font-family: Input floating label font family.\n * @prop --sy-input-floating-label-font-weight: Input floating label font weight.\n * @prop --sy-input-floating-label-font-style: Input floating label font style.\n * @prop --sy-input-floating-label-font-stretch: Input floating label font stretch.\n * @prop --sy-input-floating-label-letter-spacing: Input floating label letter spacing.\n * @prop --sy-input-floating-label-line-height: Input floating label line height.\n */\n*,\n:host,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\ninput,\nselect,\noptgroup,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\ntextarea {\n  resize: vertical;\n}\n\n:host {\n  display: block;\n  width: 100%;\n  --sy-icon-size: var(--sy-input-icon-size, 16px);\n  outline: 0;\n}\n\n:host([disabled]) .sy-form-field {\n  border-bottom-color: var(--sy-input-color-disabled, var(--sy-disabled));\n  box-shadow: none;\n}\n:host([disabled]) .sy-form-label {\n  color: var(--sy-input-color-disabled, var(--sy-disabled)) !important;\n}\n:host([disabled]) sy-icon {\n  --sy-icon-color: var(--sy-input-color-disabled, var(--sy-disabled));\n}\n:host([disabled]) .sy-form-control {\n  color: var(--sy-input-color-disabled, var(--sy-disabled));\n  pointer-events: none;\n}\n\n:host([readonly]:not([disabled])) .sy-form-field {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n:host([readonly]:not([disabled])) .sy-form-label {\n  color: var(--sy-input-color, var(--sy-foreground-medium-emphasis));\n}\n:host([readonly]:not([disabled])) .sy-form-label.sy-has-value {\n  color: var(--sy-input-color-focus, var(--sy-foreground-high-emphasis));\n}\n:host([readonly]:not([disabled])) .sy-form-control {\n  pointer-events: none;\n}\n\n:host([error]:not([disabled], [readonly])) .sy-form-field {\n  border-bottom-color: var(--sy-input-border-color-error, var(--sy-error));\n  box-shadow: none;\n}\n:host([error]:not([disabled], [readonly])) .sy-form-label {\n  color: var(--sy-input-color-error, var(--sy-error));\n}\n:host([error]:not([disabled], [readonly])) .sy-form-control {\n  caret-color: var(--sy-input-color-error, var(--sy-error));\n}\n:host([error]:not([disabled], [readonly])) sy-icon {\n  --sy-icon-color: var(--sy-input-color-error, var(--sy-error));\n}\n\n:host(:focus[error]:not([disabled], [readonly])) .sy-form-field,\n:host(:hover[error]:not([disabled], [readonly])) .sy-form-field {\n  box-shadow: inset 0 -1px 0 var(--sy-input-border-color-error, var(--sy-error));\n}\n\n:host(:not([disabled], [readonly], [error])) .sy-form-field {\n  border-bottom: 1px solid var(--sy-input-border-color, var(--sy-border));\n}\n:host(:not([disabled], [readonly], [error])) .sy-form-label {\n  color: var(--sy-input-color, var(--sy-foreground-medium-emphasis));\n}\n:host(:not([disabled], [readonly], [error])) .sy-form-label.sy-has-value {\n  color: var(--sy-input-color-focus, var(--sy-foreground-high-emphasis));\n}\n:host(:not([disabled], [readonly], [error])) sy-icon {\n  --sy-icon-color: var(--sy-input-icon-color, var(--sy-foreground-medium-emphasis));\n}\n\n:host(:focus:not([disabled], [readonly], [error])) .sy-form-field {\n  border-bottom-color: var(--sy-input-border-color-focus, var(--sy-accent));\n  box-shadow: inset 0 -1px 0 var(--sy-input-border-color-focus, var(--sy-accent));\n}\n:host(:focus:not([disabled], [readonly], [error])) .sy-form-label {\n  color: var(--sy-input-color-label-focus, var(--sy-accent));\n}\n:host(:focus:not([disabled], [readonly], [error])) .sy-form-control {\n  caret-color: var(--sy-input-color-label-focus, var(--sy-accent));\n}\n:host(:focus:not([disabled], [readonly], [error])) sy-icon {\n  --sy-icon-color: var(--sy-input-color-label-focus, var(--sy-accent));\n}\n\n:host(:hover:not([disabled], [readonly], [error], :focus)) .sy-form-field {\n  border-color: var(--sy-input-border-color-hover, var(--sy-foreground-medium-emphasis));\n}\n\n.sy-form-field {\n  position: relative;\n  display: block;\n  align-items: center;\n  border-bottom: 1px solid var(--sy-input-border-color, var(--sy-border));\n}\n:host([label]) .sy-form-field {\n  padding-top: 1.25em;\n}\n\n.sy-form-label {\n  position: absolute;\n  top: 1.75em;\n  left: 0;\n  width: 100%;\n  overflow: hidden;\n  line-height: 1.5;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  transition: all 0.2s;\n}\n.sy-form-control ~ .sy-input-icon-left ~ .sy-form-label {\n  left: calc(var(--sy-input-icon-size, 16px) + .5rem);\n}\n\n.sy-form-control {\n  font-size: var(--sy-input-font-size, var(--sy-content-regular-body-font-size));\n  text-decoration: var(--sy-input-text-decoration, var(--sy-content-regular-body-text-decoration));\n  font-family: var(--sy-input-font-family, var(--sy-content-regular-body-font-family));\n  font-weight: var(--sy-input-font-weight, var(--sy-content-regular-body-font-weight));\n  font-style: var(--sy-input-font-style, var(--sy-content-regular-body-font-style));\n  font-stretch: var(--sy-input-font-stretch, var(--sy-content-regular-body-font-stretch));\n  letter-spacing: var(--sy-input-letter-spacing, var(--sy-content-regular-body-letter-spacing));\n  line-height: var(--sy-input-line-height, var(--sy-content-regular-body-line-height));\n  display: block;\n  width: 100%;\n  min-height: 1.5em;\n  padding: 0;\n  margin: 8px 0;\n  color: var(--sy-input-color, var(--sy-foreground-medium-emphasis));\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  transition: all 0.2s;\n  appearance: none;\n}\n.sy-form-control::placeholder {\n  color: var(--sy-input-color-disabled, var(--sy-disabled));\n}\n:host([label]) .sy-form-control::placeholder {\n  opacity: 0;\n  transition: all 0.2s;\n}\n:host(:focus:not([readonly])) .sy-form-control ~ .sy-form-label, .sy-form-control[type=file] ~ .sy-form-label,\n.sy-form-control ~ .sy-form-label.sy-has-value {\n  top: 0;\n  left: 0;\n  font-size: var(--sy-input-floating-label-font-size, var(--sy-content-regular-small-font-size));\n  text-decoration: var(--sy-input-floating-label-text-decoration, var(--sy-content-regular-small-text-decoration));\n  font-family: var(--sy-input-floating-label-font-family, var(--sy-content-regular-small-font-family));\n  font-weight: var(--sy-input-floating-label-font-weight, var(--sy-content-regular-small-font-weight));\n  font-style: var(--sy-input-floating-label-font-style, var(--sy-content-regular-small-font-style));\n  font-stretch: var(--sy-input-floating-label-font-stretch, var(--sy-content-regular-small-font-stretch));\n  letter-spacing: var(--sy-input-floating-label-letter-spacing, var(--sy-content-regular-small-letter-spacing));\n  line-height: var(--sy-input-floating-label-line-height, var(--sy-content-regular-small-line-height));\n}\n:host(:focus:not([readonly])) .sy-form-control {\n  color: var(--sy-input-color-focus, var(--sy-foreground-high-emphasis));\n}\n:host(:focus:not([readonly])) .sy-form-control::placeholder {\n  opacity: 1 !important;\n}\n\n.sy-form-error {\n  margin-top: var(--sy-input-error-margin-top, var(--sy-spacer-2));\n  font-size: var(--sy-input-error-font-size, var(--sy-content-regular-small-font-size));\n  text-decoration: var(--sy-input-error-text-decoration, var(--sy-content-regular-small-text-decoration));\n  font-family: var(--sy-input-error-font-family, var(--sy-content-regular-small-font-family));\n  font-weight: var(--sy-input-error-font-weight, var(--sy-content-regular-small-font-weight));\n  font-style: var(--sy-input-error-font-style, var(--sy-content-regular-small-font-style));\n  font-stretch: var(--sy-input-error-font-stretch, var(--sy-content-regular-small-font-stretch));\n  letter-spacing: var(--sy-input-error-letter-spacing, var(--sy-content-regular-small-letter-spacing));\n  line-height: var(--sy-input-error-line-height, var(--sy-content-regular-small-line-height));\n  color: var(--sy-input-color-error, var(--sy-error));\n}\n\n.sy-form-field {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.sy-form-control {\n  order: 1;\n}\n.sy-form-control[type=file] {\n  padding: 0.5rem 0;\n  margin: 0;\n  overflow: hidden;\n  color: var(--sy-input-color, var(--sy-foreground-medium-emphasis));\n}\n.sy-form-control[type=file]:disabled {\n  color: var(--sy-input-color-disabled, var(--sy-disabled));\n}\n.sy-form-control[type=file]:disabled::file-selector-button {\n  background-color: var(--sy-input-color-disabled, var(--sy-disabled));\n  border-color: var(--sy-input-color-disabled, var(--sy-disabled));\n}\n.sy-form-control[type=file]:not(:disabled) {\n  pointer-events: all;\n  cursor: pointer;\n}\n.sy-form-control::file-selector-button {\n  padding: 0.25rem 0.5rem;\n  margin: -0.5rem 0.5rem -0.5rem 0;\n  font-size: var(--sy-input-font-size, var(--sy-content-regular-body-font-size));\n  pointer-events: none;\n  background-color: transparent;\n  border: 1px solid var(--sy-input-border-color, var(--sy-border));\n  border-radius: var(--sy-input-border-radius, var(--sy-border-radius));\n}\n\n.sy-form-field-container {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.sy-input-icon-left {\n  order: 0;\n  margin-right: 0.5rem;\n}\n\n.sy-input-view-icon {\n  order: 2;\n}\n\n.sy-input-clear-icon {\n  order: 3;\n  --sy-dismiss-icon-size: var(--sy-input-clear-icon-size, 10px);\n  --sy-dismiss-icon-stroke-width: var(--sy-input-clear-icon-stroke-width, 1.5px);\n  margin-left: var(--sy-input-clear-icon-margin-left, var(--sy-spacer-2));\n}\n\n.sy-input-icon-right {\n  order: 4;\n  margin-left: 0.5rem;\n}","import { Component, Element, Event, Host, Prop, h, Listen, Method, Watch } from '@stencil/core';\nimport { inheritAttributes } from '../../utils/utils';\nexport class Input {\n  constructor() {\n    this.inheritedAttributes = {};\n    this.didBlurAfterEdit = false;\n    this.isFocused = false;\n    /**\n     * Field type\n     */\n    this.type = 'text';\n    /**\n     * Defines if the field is read-only\n     */\n    this.readonly = false;\n    /**\n     * Defines if the field is disabled\n     */\n    this.disabled = false;\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    this.clearButton = false;\n    /**\n     * If `true`, a eye icon will appear in the input when there is a value. Clicking it changes the reveal value.\n     * This prop only affects the inputs with type `number`, `text`, `email` and `password`.\n     */\n    this.textSecurity = false;\n    /**\n     * If `true`, the input content will show normally, if `false`, the input will show in the password format.\n     * This prop only affects the inputs with type `number`, `text`, `email` and `password`.\n     */\n    this.reveal = false;\n    /**\n     * If `true`, will show the number with thousand separators. The locale information is required to use this feature.\n     */\n    this.useGrouping = false;\n    this.onInput = (ev) => {\n      const input = ev.target;\n      if (input) {\n        this.value = input.value || '';\n      }\n      this.syDidInput.emit(ev);\n    };\n    this.onBlur = () => {\n      this.focusChanged();\n    };\n    this.onFocus = () => {\n      this.focusChanged();\n    };\n    this.onKeydown = (ev) => {\n      if (this.shouldClearOnEdit()) {\n        // Did the input value change after it was blurred and edited?\n        // Do not clear if user is hitting Enter to submit form\n        if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n          // Clear the input\n          this.clearTextInput();\n        }\n        // Reset the flag\n        this.didBlurAfterEdit = false;\n      }\n      this.syDidKeydown.emit(ev);\n    };\n    this.onChange = () => {\n      this.syDidChange.emit({ value: !this.value ? null : this.value.toString() });\n      this.updateLabelHasValueClass();\n    };\n    this.clearTextOnEnter = (ev) => {\n      if (ev.key === 'Enter') {\n        this.clearTextInput(ev);\n      }\n    };\n    this.clearTextInput = (ev) => {\n      if (this.clearButton && !this.readonly && !this.disabled && ev) {\n        ev.preventDefault();\n        ev.stopPropagation();\n        // Attempt to focus input again after pressing clear button\n        this.nativeElement.focus();\n      }\n      this.value = '';\n      /**\n       * This is needed for clearOnEdit\n       * Otherwise the value will not be cleared\n       * if user is inside the input\n       */\n      if (this.nativeElement) {\n        this.nativeElement.value = '';\n      }\n    };\n  }\n  typeWatcher() {\n    this.textSecurityNumberInput();\n  }\n  textSecurityWatcher() {\n    this.textSecurityNumberInput();\n  }\n  onFocusIn() {\n    this.isFocused = true;\n    this.syDidFocus.emit();\n    this.updateElementValue();\n  }\n  onFocusOut() {\n    this.isFocused = false;\n    this.syDidBlur.emit();\n    this.updateElementValue();\n  }\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  async getInputElement() {\n    return Promise.resolve(this.nativeElement);\n  }\n  iconWatcher() {\n    if ((this.icon || this.el.querySelector('[slot=\"icon\"]')) && !this.iconPosition)\n      this.iconPosition = 'left';\n  }\n  missingLocaleWatcher() {\n    if (!this.locale) {\n      console.warn(`To use the props useGrouping, maximumFractionDigits or maximumFractionDigits you must to inform a locale.`);\n    }\n  }\n  componentWillRender() {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      'aria-label',\n      'tabindex',\n      'title',\n      'accept',\n      'autoCapitalize',\n      'autoComplete',\n      'autoCorrect',\n      'autoFocus',\n      'enterKeyHint',\n      'inputMode',\n      'min',\n      'max',\n      'minLength',\n      'maxLength',\n      'multiple',\n      'name',\n      'pattern',\n      'required',\n      'spellcheck',\n      'step',\n      'size',\n    ]);\n    this.iconWatcher();\n    if (this.disabled && this.error) {\n      this.error = '';\n    }\n  }\n  componentDidRender() {\n    this.updateLabelHasValueClass();\n  }\n  shouldClearOnEdit() {\n    return this.type === 'password';\n  }\n  getValue() {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n  focusChanged() {\n    // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n    if (!this.isFocused && this.shouldClearOnEdit() && this.hasValue()) {\n      this.didBlurAfterEdit = true;\n    }\n  }\n  hasValue() {\n    return this.getValue().length > 0;\n  }\n  hasTextSecurity() {\n    return (this.type === 'text' || this.type === 'email' || this.type === 'number' || this.type === 'password') && this.textSecurity;\n  }\n  toggleTextSecurity() {\n    this.reveal = !this.reveal;\n  }\n  getType() {\n    if (this.type === 'password' && this.reveal) {\n      return 'text';\n    }\n    if (this.type === 'number' && this.locale && !this.isFocused) {\n      return 'text';\n    }\n    if ((this.type === 'text' || this.type === 'email' || this.type === 'number') && this.textSecurity && !this.reveal) {\n      return 'password';\n    }\n    return this.type;\n  }\n  updateElementValue() {\n    if (this.locale && this.type === 'number') {\n      this.value = this.formatNumber(this.value, !this.isFocused);\n    }\n  }\n  formatNumber(value, useLocale = true) {\n    if (value == null) {\n      return null;\n    }\n    if (typeof value !== 'number') {\n      value = this.toNumber(value);\n      if (isNaN(value)) {\n        return null;\n      }\n    }\n    if (!useLocale) {\n      return value;\n    }\n    return value.toLocaleString(this.locale, {\n      minimumFractionDigits: this.minimumFractionDigits,\n      maximumFractionDigits: this.maximumFractionDigits,\n      useGrouping: this.useGrouping,\n    });\n  }\n  toNumber(value) {\n    if (value == parseFloat(value).toString()) {\n      return parseFloat(value);\n    }\n    const sampleNumber = 1.11;\n    const sampleString = sampleNumber.toLocaleString(this.locale, { minimumFractionDigits: 2, useGrouping: true });\n    const fractionSeparator = sampleString[1] === '.' ? '.' : sampleString[1];\n    let stringValue = value.replace(new RegExp('[^\\\\d|' + fractionSeparator + ']', 'g'), '');\n    if (fractionSeparator !== '.') {\n      stringValue = stringValue.replace(fractionSeparator, '.');\n    }\n    return parseFloat(stringValue);\n  }\n  updateLabelHasValueClass() {\n    if (this.value) {\n      this.labelElement.classList.add('sy-has-value');\n    }\n    else {\n      this.labelElement.classList.remove('sy-has-value');\n    }\n  }\n  getInputMode() {\n    if (this.type === 'number') {\n      return 'numeric';\n    }\n    return 'text';\n  }\n  handleTextSecurityNumberInputKeydown(e) {\n    if (!/^\\d+$/.test(e.target['value'] + e.key) && e.key.length === 1 && !e.ctrlKey) {\n      e.preventDefault();\n    }\n  }\n  textSecurityNumberInput() {\n    const inputEl = this.el.shadowRoot.getElementById('inputName');\n    if (inputEl && this.type === 'number' && this.textSecurity) {\n      inputEl['value'] = '';\n      inputEl.addEventListener('keydown', this.handleTextSecurityNumberInputKeydown);\n    }\n    else {\n      inputEl.removeEventListener('keydown', this.handleTextSecurityNumberInputKeydown);\n    }\n  }\n  componentDidLoad() {\n    this.textSecurityNumberInput();\n  }\n  render() {\n    const iconAttributes = {\n      name: this.icon,\n      class: `sy-input-icon sy-input-icon-${this.iconPosition}`,\n    };\n    return (h(Host, null,\n      h(\"div\", { class: \"sy-form-field\" },\n        h(\"input\", Object.assign({ ref: el => (this.nativeElement = el), class: \"sy-form-control\", id: \"inputName\", type: this.getType(), inputMode: this.getInputMode(), value: this.value, placeholder: this.placeholder, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onChange: this.onChange }, (this.disabled ? { disabled: true } : null), (this.readonly ? { readonly: true } : null), this.inheritedAttributes)),\n        this.iconPosition ? (this.icon ? (h(\"sy-icon\", Object.assign({}, iconAttributes))) : (h(\"span\", { class: iconAttributes.class },\n          h(\"slot\", { name: \"icon\" })))) : null,\n        this.hasTextSecurity() && (h(\"sy-button\", { \"aria-label\": \"view\", small: true, type: \"basic\", content: \"icon-only\", icon: this.reveal ? 'view-1' : 'view-off', class: \"sy-input-view-icon\", onClick: () => this.toggleTextSecurity() })),\n        this.clearButton && !this.readonly && !this.disabled && (h(\"sy-dismiss\", { \"aria-label\": \"reset\", class: \"sy-input-clear-icon\", onTouchStart: this.clearTextInput, onMouseDown: this.clearTextInput, onKeyDown: this.clearTextOnEnter })),\n        h(\"label\", { class: \"sy-form-label\", htmlFor: \"inputName\", ref: el => (this.labelElement = el) }, this.label)),\n      this.error ? h(\"div\", { class: \"sy-form-error\" }, this.error) : null));\n  }\n  static get is() { return \"sy-input\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get delegatesFocus() { return true; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"scss/index.scss\", \"scss/tokens.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"./scss/index.css\", \"./scss/tokens.css\"]\n  }; }\n  static get properties() { return {\n    \"type\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"'text' | 'password' | 'email' | 'number' | 'file'\",\n        \"resolved\": \"\\\"email\\\" | \\\"file\\\" | \\\"number\\\" | \\\"password\\\" | \\\"text\\\"\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Field type\"\n      },\n      \"attribute\": \"type\",\n      \"reflect\": true,\n      \"defaultValue\": \"'text'\"\n    },\n    \"label\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Field label\"\n      },\n      \"attribute\": \"label\",\n      \"reflect\": true\n    },\n    \"value\": {\n      \"type\": \"any\",\n      \"mutable\": true,\n      \"complexType\": {\n        \"original\": \"string | number | null\",\n        \"resolved\": \"number | string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Field value\"\n      },\n      \"attribute\": \"value\",\n      \"reflect\": false\n    },\n    \"placeholder\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Field placeholder\"\n      },\n      \"attribute\": \"placeholder\",\n      \"reflect\": true\n    },\n    \"error\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Error text\"\n      },\n      \"attribute\": \"error\",\n      \"reflect\": true\n    },\n    \"icon\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Icon name (use stardard lib)\"\n      },\n      \"attribute\": \"icon\",\n      \"reflect\": false\n    },\n    \"iconPosition\": {\n      \"type\": \"string\",\n      \"mutable\": true,\n      \"complexType\": {\n        \"original\": \"'left' | 'right'\",\n        \"resolved\": \"\\\"left\\\" | \\\"right\\\"\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Icon position\"\n      },\n      \"attribute\": \"icon-position\",\n      \"reflect\": true\n    },\n    \"readonly\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Defines if the field is read-only\"\n      },\n      \"attribute\": \"readonly\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"disabled\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Defines if the field is disabled\"\n      },\n      \"attribute\": \"disabled\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"clearButton\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\"\n      },\n      \"attribute\": \"clear-button\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"textSecurity\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"If `true`, a eye icon will appear in the input when there is a value. Clicking it changes the reveal value.\\nThis prop only affects the inputs with type `number`, `text`, `email` and `password`.\"\n      },\n      \"attribute\": \"text-security\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"reveal\": {\n      \"type\": \"boolean\",\n      \"mutable\": true,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"If `true`, the input content will show normally, if `false`, the input will show in the password format.\\nThis prop only affects the inputs with type `number`, `text`, `email` and `password`.\"\n      },\n      \"attribute\": \"reveal\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"useGrouping\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"If `true`, will show the number with thousand separators. The locale information is required to use this feature.\"\n      },\n      \"attribute\": \"use-grouping\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"maximumFractionDigits\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Maximum number of fraction digits, if the input exceeds the limit the number will be rounded. The locale information is required to use this feature.\"\n      },\n      \"attribute\": \"maximum-fraction-digits\",\n      \"reflect\": false\n    },\n    \"minimumFractionDigits\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Minimum number of fraction digits, if the input doesn't contain the minimum number of digits,\\nzeros will be added to complete the minimum. The locale information is required to use this feature.\"\n      },\n      \"attribute\": \"minimum-fraction-digits\",\n      \"reflect\": false\n    },\n    \"locale\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"The locale used to edit the numbers correctly.\"\n      },\n      \"attribute\": \"locale\",\n      \"reflect\": true\n    }\n  }; }\n  static get events() { return [{\n      \"method\": \"syDidInput\",\n      \"name\": \"syInputDidInput\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Emitted when a keyboard input occurred.\"\n      },\n      \"complexType\": {\n        \"original\": \"KeyboardEvent\",\n        \"resolved\": \"KeyboardEvent\",\n        \"references\": {\n          \"KeyboardEvent\": {\n            \"location\": \"global\"\n          }\n        }\n      }\n    }, {\n      \"method\": \"syDidChange\",\n      \"name\": \"syInputDidChange\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Emitted when the value has changed.\"\n      },\n      \"complexType\": {\n        \"original\": \"{\\n    value: string | undefined | null;\\n  }\",\n        \"resolved\": \"{ value: string; }\",\n        \"references\": {}\n      }\n    }, {\n      \"method\": \"syDidBlur\",\n      \"name\": \"syInputDidBlur\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Emitted when the de component loses focus.\"\n      },\n      \"complexType\": {\n        \"original\": \"void\",\n        \"resolved\": \"void\",\n        \"references\": {}\n      }\n    }, {\n      \"method\": \"syDidFocus\",\n      \"name\": \"syInputDidFocus\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Emitted when the de component gets focus.\"\n      },\n      \"complexType\": {\n        \"original\": \"void\",\n        \"resolved\": \"void\",\n        \"references\": {}\n      }\n    }, {\n      \"method\": \"syDidKeydown\",\n      \"name\": \"syInputDidKeydown\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Emitted when a keyboard key is pressed down.\"\n      },\n      \"complexType\": {\n        \"original\": \"KeyboardEvent\",\n        \"resolved\": \"KeyboardEvent\",\n        \"references\": {\n          \"KeyboardEvent\": {\n            \"location\": \"global\"\n          }\n        }\n      }\n    }]; }\n  static get methods() { return {\n    \"getInputElement\": {\n      \"complexType\": {\n        \"signature\": \"() => Promise<HTMLInputElement>\",\n        \"parameters\": [],\n        \"references\": {\n          \"Promise\": {\n            \"location\": \"global\"\n          },\n          \"HTMLInputElement\": {\n            \"location\": \"global\"\n          }\n        },\n        \"return\": \"Promise<HTMLInputElement>\"\n      },\n      \"docs\": {\n        \"text\": \"Returns the native `<input>` element used under the hood.\",\n        \"tags\": []\n      }\n    }\n  }; }\n  static get elementRef() { return \"el\"; }\n  static get watchers() { return [{\n      \"propName\": \"type\",\n      \"methodName\": \"typeWatcher\"\n    }, {\n      \"propName\": \"textSecurity\",\n      \"methodName\": \"textSecurityWatcher\"\n    }, {\n      \"propName\": \"icon\",\n      \"methodName\": \"iconWatcher\"\n    }, {\n      \"propName\": \"useGrouping\",\n      \"methodName\": \"missingLocaleWatcher\"\n    }, {\n      \"propName\": \"maximumFractionDigits\",\n      \"methodName\": \"missingLocaleWatcher\"\n    }, {\n      \"propName\": \"minimumFractionDigits\",\n      \"methodName\": \"missingLocaleWatcher\"\n    }]; }\n  static get listeners() { return [{\n      \"name\": \"focusin\",\n      \"method\": \"onFocusIn\",\n      \"target\": undefined,\n      \"capture\": false,\n      \"passive\": true\n    }, {\n      \"name\": \"focusout\",\n      \"method\": \"onFocusOut\",\n      \"target\": undefined,\n      \"capture\": false,\n      \"passive\": true\n    }]; }\n}\n"]}