<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.
   *
   * @slot icon - Use this slot to insert an icon in the input.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the input element, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the input element, typically used for form submission.
     */
    name?: string;
    /**
     * The current value of the input field.
     */
    value?: string | number;
    /**
     * A placeholder text to show in the input when it is empty.
     */
    placeholder?: string;
    /**
     * Defines the type of input.
     */
    inputtype?:
      | 'date'
      | 'datetime-local'
      | 'email'
      | 'number'
      | 'password'
      | 'search'
      | 'tel'
      | 'text';
    /**
     * If `true`, applies an invalid state to the input.
     */
    isinvalid?: boolean;
    /**
     * If `true`, disables the input, making it non-interactive.
     */
    disabled?: boolean;
    /**
     * Determines the size of the input.
     */
    size?: 's' | 'm';
    /**
     * If `true`, the input is read-only (cannot be edited).
     */
    readonly?: boolean;
    /**
     * If `true`, a clear button will appear when the input has a value.
     */
    isclearable?: boolean;
    /**
     * The label text for the clear button.
     */
    clearlabel?: string;
    /**
     * Displays additional text inside the component, before the input.
     */
    prefix?: string;
    /**
     * Displays additional text inside the component, after the input.
     */
    suffix?: string;
    element?: HTMLElement | null;
  }

  let {
    id,
    name,
    value = $bindable(),
    placeholder,
    inputtype = 'text',
    isinvalid,
    disabled,
    readonly,
    size = 'm',
    clearlabel = 'Clear content',
    isclearable,
    prefix,
    suffix,
    element = $bindable(),
    class: className,
    ...attrs
  }: Props = $props();

  const resetValue = () => (value = '');
</script>

<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid', className]}>
  <span class="mc-text-input__icon">
    <slot name="icon" />
  </span>

  {#if prefix}
    <span class="mc-text-input__addon">{prefix}</span>
  {/if}

  <input
    bind:this={element}
    bind:value
    class="mc-text-input__control"
    aria-invalid={isinvalid}
    {name}
    {id}
    type={inputtype}
    {placeholder}
    {disabled}
    {readonly}
    {...attrs}
  />

  {#if suffix}
    <span class="mc-text-input__addon">{suffix}</span>
  {/if}

  {#if isclearable && value}
    <div class="mc-controls-options">
      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
        <svg class="mc-controls-options__icon" aria-hidden="true">
          <path
            fill-rule="evenodd"
            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
          />
        </svg>
        <span class="mc-controls-options__label">{clearlabel}</span>
      </button>
    </div>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-controls-options {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  gap: 0.5rem;
}
.mc-controls-options__button {
  background-color: transparent;
  border-width: 0;
  color: initial;
  font-family: inherit;
  outline: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--border-radius-full, 100%);
}
.mc-controls-options__button:hover .mc-controls-options__icon {
  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
}
.mc-controls-options__button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-controls-options__icon {
  fill: var(--forms-color-icon-clear, #666666);
  color: var(--forms-color-icon-clear, #666666);
}
.mc-controls-options__button, .mc-controls-options__icon {
  height: 1.5rem;
  width: 1.5rem;
}
.mc-controls-options__label {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  left: -1000px;
  text-align: left;
  opacity: 0;
}
.mc-controls-options__unit {
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}

/* stylelint-disable string-no-newline */
.mc-text-input {
  transition: box-shadow 200ms ease;
  background-color: var(--forms-color-background-default, #ffffff);
  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
  border-radius: var(--forms-border-radius, 0.25rem);
  transition: all ease 200ms;
  color: var(--forms-color-text-default, #000000);
  display: block;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}
.mc-text-input__control {
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  outline: none;
}
.mc-text-input__control[type=number] {
  /* For Blink & WebKit rendering engines */
}
.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.mc-text-input__control[type=number] {
  /* For Gecko rendering engine */
  appearance: textfield;
}
.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
  appearance: none;
}
.mc-text-input__control {
  padding: 0.75rem 0.6875rem;
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--forms-color-text-default, #000000);
  flex-grow: 1;
}
.mc-text-input__control::placeholder {
  color: var(--forms-color-placeholder, #666666);
}
.mc-text-input__addon {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}
.mc-text-input__icon {
  fill: var(--forms-color-icon-default, #666666);
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}
.mc-text-input:focus-within {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-text-input:hover:not(:focus-within) {
  border-color: var(--forms-color-border-hover, #4d4d4d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
}
.mc-text-input:has(input:disabled) {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
  pointer-events: none;
}
.mc-text-input:has(input[readonly]) {
  border-color: var(--forms-color-border-read-only, #cccccc);
  pointer-events: none;
}
.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-start: 0.6875rem;
}
.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-start: 0;
}
.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-end: 0.6875rem;
}
.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-end: 0;
}
.mc-text-input--s {
  height: 2rem;
}
.mc-text-input--s .mc-text-input__control {
  padding: 0.375rem 0.6875rem;
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
}
.mc-text-input--s:has(.mc-text-input__icon) {
  padding-inline-start: 0.4375rem;
}
.mc-text-input--s:has(.mc-controls-options) {
  padding-inline-end: 0.4375rem;
}
.mc-text-input.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-text-input.is-invalid:hover:not(:focus-within) {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}
.mc-text-input * {
  box-sizing: border-box;
}

/* stylelint-enable string-no-newline */
.mc-text-input__icon:empty {
  display: none;
}</style>
