@beeq/core 1.12.2-beta.0 → 1.12.3-beta.0

package/dist/components/bq-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["bqInputCss","BqInput","__stencil_proxyCustomElement","HTMLElement","helperTextElem","inputElem","labelElem","prefixElem","suffixElem","debounceBqInput","fallbackInputId","internals","hasHelperText","hasLabel","hasPrefix","hasSuffix","hasValue","autocapitalize","autocomplete","autofocus","clearButtonLabel","debounceTime","disabled","disableClear","form","formValidationMessage","inputmode","max","maxlength","min","minlength","name","pattern","placeholder","readonly","required","step","type","validationStatus","value","handleValueChange","this","Array","isArray","some","val","length","setFormValue","join","isDefined","isNil","undefined","bqBlur","bqChange","bqClear","bqFocus","bqInput","componentWillLoad","componentDidLoad","handleSlotChange","formAssociatedCallback","toString","updateFormValidity","formResetCallback","handleClear","handleBlur","emit","el","handleFocus","handleInput","ev","cancel","isHTMLElement","target","Number","debounce","handleChange","handleClearClick","stopPropagation","focus","states","clear","trim","add","setValidity","valueMissing","hasSlotContent","render","_jsxs","class","part","children","_jsx","htmlFor","ref","onSlotchange","spanElem","id","inputMode","maxLength","minLength","onBlur","onChange","onFocus","onInput","readOnly","appearance","border","exportparts","label","onBqClick","onlyIcon","size","divElem"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Input styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n  @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Input group control                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n  // Padding\n  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n  // Text\n  @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-input--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-input--border-color-focus);\n\n    @apply focus border-[color:--bq-input--border-color-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-input--control__clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-input--control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-input--control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-input--control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n  @apply flex-auto cursor-inherit appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n  @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n  @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Hide webkit clear button                          */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n  @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n  @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n  @apply p-b-0 p-i-0;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Prop, State, Watch } from '@stencil/core';\n\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, type TDebounce } from '../../shared/utils';\nimport type { TInputType, TInputValidation, TInputValue } from './bq-input.types';\n\n/**\n * The Input component is a fundamental user interface element that allows users to input data by typing it into a text field.\n * It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.\n *\n * @example How to use it\n * ```html\n * <bq-input name=\"username\" label=\"Username\" placeholder=\"Enter your username\"></bq-input>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/980362-input\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.\n * @attr {boolean} autofocus - If true, the input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disabled - Indicates whether the input is disabled or not.\n * @attr {boolean} disable-clear - If true, the clear button won't be displayed.\n * @attr {string} form - The ID of the form that the input field belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {string} inputmode - The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n * @attr {number | string} max - The maximum value that the input field can accept.\n * @attr {number} maxlength - The maximum number of characters that the input field can accept.\n * @attr {number | string} min - The minimum value that the input field can accept.\n * @attr {number} minlength - The minimum number of characters that the input field can accept.\n * @attr {string} name - The input field name.\n * @attr {string} pattern - Specifies a regular expression the form control's value should match.\n * @attr {string} placeholder - The input placeholder text value.\n * @attr {boolean} readonly - If true, the input field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the input field is required to be filled out before submitting the form.\n * @attr {number | 'any'} step - A number that specifies the granularity that the value must adhere to.\n * @attr {string} type - The type attribute specifies the type of input field to display.\n * @attr {'none' | 'error' | 'warning' | 'success'} validation-status - The validation status of the input.\n * @attr {string | number | string[]} value - The input value, it can be used to reset the input to a previous value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n * @event bqInput - Callback handler emitted when the input value changes.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n * @slot clear-icon - The clear icon slot container.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-input--background-color - Input background color\n * @cssprop --bq-input--border-color - Input border color\n * @cssprop --bq-input--border-color-focus - Input border color on focus\n * @cssprop --bq-input--border-radius - Input border radius\n * @cssprop --bq-input--border-width - Input border width\n * @cssprop --bq-input--border-style - Input border style\n * @cssprop --bq-input--gap - Gap between input content and prefix/suffix\n * @cssprop --bq-input--helper-margin-top - Helper text margin top\n * @cssprop --bq-input--helper-text-color - Helper text color\n * @cssprop --bq-input--helper-text-size - Helper text size\n * @cssprop --bq-input--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-input--label-margin-bottom - Input label margin bottom\n * @cssprop --bq-input--label-text-color - Input label text color\n * @cssprop --bq-input--label-text-size - Input label text size\n * @cssprop --bq-input--padding-start - Input padding start\n * @cssprop --bq-input--padding-end - Input padding end\n * @cssprop --bq-input--paddingY - Input padding top and bottom\n * @cssprop --bq-input--text-color - Input text color\n * @cssprop --bq-input--text-size - Input text size\n * @cssprop --bq-input--text-placeholder-color - Input placeholder text color\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean = false;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    const { internals, value } = this;\n    if (Array.isArray(value)) {\n      this.hasValue = value.some((val) => val.length > 0);\n      this.internals.setFormValue(value.join(','));\n      return;\n    }\n\n    this.hasValue = isDefined(value);\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.value?.toString());\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.handleClear();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    // Update form value and validity\n    this.setFormValue(`${this.value}`);\n    this.updateFormValidity();\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClear = () => {\n    if (this.disabled) return;\n\n    const { inputElem, setFormValue, updateFormValidity } = this;\n    // Clear input element value\n    inputElem.value = '';\n    this.value = inputElem.value;\n    // Set form value to empty string abd update validity\n    setFormValue(this.value);\n    updateFormValidity();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    this.handleClear();\n\n    const { bqClear, bqChange, bqInput, el, inputElem } = this;\n    // Emit events\n    bqClear.emit(el);\n    bqInput.emit({ value: this.value, el });\n    bqChange.emit({ value: this.value, el });\n    // Refocus input element\n    inputElem.focus();\n  };\n\n  private setFormValue = (value?: string) => {\n    this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          aria-label={this.name || this.fallbackInputId}\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          part=\"label\"\n          ref={(labelElem) => {\n            this.labelElem = labelElem;\n          }}\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n            ref={(spanElem) => {\n              this.prefixElem = spanElem;\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autocapitalize={this.autocapitalize}\n            autocomplete={this.autocomplete}\n            autofocus={this.autofocus}\n            class=\"bq-input--control__input\"\n            disabled={this.disabled}\n            form={this.form}\n            id={this.name || this.fallbackInputId}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n            part=\"input\"\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            ref={(inputElem) => {\n              this.inputElem = inputElem;\n            }}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              appearance=\"text\"\n              border=\"s\"\n              class=\"bq-input--control__clear ms-[--bq-date-picker--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0\"\n              exportparts=\"button\"\n              label={this.clearButtonLabel}\n              onBqClick={this.handleClearClick}\n              onlyIcon\n              part=\"clear-btn\"\n              size=\"small\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon aria-hidden=\"true\" class=\"flex\" name=\"x-circle\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n            ref={(spanElem) => {\n              this.suffixElem = spanElem;\n            }}\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          part=\"helper-text\"\n          ref={(divElem) => {\n            this.helperTextElem = divElem;\n          }}\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["bqInputCss","BqInput","__stencil_proxyCustomElement","HTMLElement","helperTextElem","inputElem","labelElem","prefixElem","suffixElem","debounceBqInput","fallbackInputId","internals","hasHelperText","hasLabel","hasPrefix","hasSuffix","hasValue","autocapitalize","autocomplete","autofocus","clearButtonLabel","debounceTime","disabled","disableClear","form","formValidationMessage","inputmode","max","maxlength","min","minlength","name","pattern","placeholder","readonly","required","step","type","validationStatus","value","handleValueChange","this","Array","isArray","some","val","length","setFormValue","join","isDefined","isNil","undefined","bqBlur","bqChange","bqClear","bqFocus","bqInput","componentWillLoad","componentDidLoad","handleSlotChange","formAssociatedCallback","toString","updateFormValidity","formResetCallback","handleClear","handleBlur","emit","el","handleFocus","handleInput","ev","cancel","isHTMLElement","target","Number","debounce","handleChange","handleClearClick","stopPropagation","focus","states","clear","trim","add","setValidity","valueMissing","hasSlotContent","render","h","key","class","part","htmlFor","ref","onSlotchange","spanElem","id","inputMode","maxLength","minLength","onBlur","onChange","onFocus","onInput","readOnly","appearance","border","exportparts","label","onBqClick","onlyIcon","size","divElem"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Input styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n  @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Input group control                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n  // Padding\n  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n  // Text\n  @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-input--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-input--border-color-focus);\n\n    @apply focus border-[color:--bq-input--border-color-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-input--control__clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-input--control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-input--control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-input--control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n  @apply flex-auto cursor-inherit appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n  @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n  @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Hide webkit clear button                          */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n  @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n  @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n  @apply p-b-0 p-i-0;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\n\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, type TDebounce } from '../../shared/utils';\nimport type { TInputType, TInputValidation, TInputValue } from './bq-input.types';\n\n/**\n * The Input component is a fundamental user interface element that allows users to input data by typing it into a text field.\n * It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms.\n *\n * @example How to use it\n * ```html\n * <bq-input name=\"username\" label=\"Username\" placeholder=\"Enter your username\"></bq-input>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/980362-input\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {string} autocapitalize - Controls whether or not the input field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the input field should have autocomplete enabled.\n * @attr {boolean} autofocus - If true, the input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disabled - Indicates whether the input is disabled or not.\n * @attr {boolean} disable-clear - If true, the clear button won't be displayed.\n * @attr {string} form - The ID of the form that the input field belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {string} inputmode - The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n * @attr {number | string} max - The maximum value that the input field can accept.\n * @attr {number} maxlength - The maximum number of characters that the input field can accept.\n * @attr {number | string} min - The minimum value that the input field can accept.\n * @attr {number} minlength - The minimum number of characters that the input field can accept.\n * @attr {string} name - The input field name.\n * @attr {string} pattern - Specifies a regular expression the form control's value should match.\n * @attr {string} placeholder - The input placeholder text value.\n * @attr {boolean} readonly - If true, the input field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the input field is required to be filled out before submitting the form.\n * @attr {number | 'any'} step - A number that specifies the granularity that the value must adhere to.\n * @attr {string} type - The type attribute specifies the type of input field to display.\n * @attr {'none' | 'error' | 'warning' | 'success'} validation-status - The validation status of the input.\n * @attr {string | number | string[]} value - The input value, it can be used to reset the input to a previous value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n * @event bqInput - Callback handler emitted when the input value changes.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n * @slot clear-icon - The clear icon slot container.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-input--background-color - Input background color\n * @cssprop --bq-input--border-color - Input border color\n * @cssprop --bq-input--border-color-focus - Input border color on focus\n * @cssprop --bq-input--border-radius - Input border radius\n * @cssprop --bq-input--border-width - Input border width\n * @cssprop --bq-input--border-style - Input border style\n * @cssprop --bq-input--gap - Gap between input content and prefix/suffix\n * @cssprop --bq-input--helper-margin-top - Helper text margin top\n * @cssprop --bq-input--helper-text-color - Helper text color\n * @cssprop --bq-input--helper-text-size - Helper text size\n * @cssprop --bq-input--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-input--label-margin-bottom - Input label margin bottom\n * @cssprop --bq-input--label-text-color - Input label text color\n * @cssprop --bq-input--label-text-size - Input label text size\n * @cssprop --bq-input--padding-start - Input padding start\n * @cssprop --bq-input--padding-end - Input padding end\n * @cssprop --bq-input--paddingY - Input padding top and bottom\n * @cssprop --bq-input--text-color - Input text color\n * @cssprop --bq-input--text-size - Input text size\n * @cssprop --bq-input--text-placeholder-color - Input placeholder text color\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean = false;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    const { internals, value } = this;\n    if (Array.isArray(value)) {\n      this.hasValue = value.some((val) => val.length > 0);\n      this.internals.setFormValue(value.join(','));\n      return;\n    }\n\n    this.hasValue = isDefined(value);\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.value?.toString());\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.handleClear();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    // Update form value and validity\n    this.setFormValue(`${this.value}`);\n    this.updateFormValidity();\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClear = () => {\n    if (this.disabled) return;\n\n    const { inputElem, setFormValue, updateFormValidity } = this;\n    // Clear input element value\n    inputElem.value = '';\n    this.value = inputElem.value;\n    // Set form value to empty string abd update validity\n    setFormValue(this.value);\n    updateFormValidity();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    this.handleClear();\n\n    const { bqClear, bqChange, bqInput, el, inputElem } = this;\n    // Emit events\n    bqClear.emit(el);\n    bqInput.emit({ value: this.value, el });\n    bqChange.emit({ value: this.value, el });\n    // Refocus input element\n    inputElem.focus();\n  };\n\n  private setFormValue = (value?: string) => {\n    this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          aria-label={this.name || this.fallbackInputId}\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          part=\"label\"\n          ref={(labelElem) => {\n            this.labelElem = labelElem;\n          }}\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n            ref={(spanElem) => {\n              this.prefixElem = spanElem;\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autocapitalize={this.autocapitalize}\n            autocomplete={this.autocomplete}\n            autofocus={this.autofocus}\n            class=\"bq-input--control__input\"\n            disabled={this.disabled}\n            form={this.form}\n            id={this.name || this.fallbackInputId}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n            part=\"input\"\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            ref={(inputElem) => {\n              this.inputElem = inputElem;\n            }}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              appearance=\"text\"\n              border=\"s\"\n              class=\"bq-input--control__clear ms-[--bq-date-picker--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0\"\n              exportparts=\"button\"\n              label={this.clearButtonLabel}\n              onBqClick={this.handleClearClick}\n              onlyIcon\n              part=\"clear-btn\"\n              size=\"small\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon aria-hidden=\"true\" class=\"flex\" name=\"x-circle\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n            ref={(spanElem) => {\n              this.suffixElem = spanElem;\n            }}\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          part=\"helper-text\"\n          ref={(divElem) => {\n            this.helperTextElem = divElem;\n          }}\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}