<tk-input label-id="default-input">
  <span slot="label" class="l-block mb-2x">Default input</span>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  size='small'
  step='5'>
  <span slot="label" class="l-block mb-2x">Small numeric input</span>
</tk-input>

<tk-input
  placeholder='Example placeholder text'>
  <span slot="label" class="l-block mb-2x">Input with placeholder</span>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  placeholder='Input your number'>
  <span slot="label" class="l-block mb-2x">Numeric input with placeholder</span>
</tk-input>

<tk-input
  value='Prefilled text'
  is-filled="true">
  <span slot="label" class="l-block mb-2x">Input with prefilled text</span>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  max-length='8'
  value='-100.10'
  is-filled="true">
  <span slot="label" class="l-block mb-2x">Numeric input with a controlled input</span>
</tk-input>
<hr>
<tk-input
  error
  value="Prefilled text"
  is-filled="true">
  <span slot="label" class="l-block mb-2x">Input with prefilled text that contains error</span>
</tk-input>
<hr>
<tk-input
  disabled
  is-filled="true"
  value="Prefilled text">
  <span slot="label" class="l-block mb-2x">Disabled Input with prefilled text</span>
</tk-input>

<tk-input
  size='xs'
  placeholder='xs'>
  <span slot="label" class="l-block mb-2x">Extra small input</span>
</tk-input>
<hr>
<tk-input
  size='small'
  placeholder='small'>
  <span slot="label" class="l-block mb-2x">Small input</span>
</tk-input>
<hr>
<tk-input
  size='medium'
  placeholder='medium'>
  <span slot="label" class="l-block mb-2x">Medium input</span>
</tk-input>
<hr>
<tk-input
  size='large'
  placeholder='large'>
  <span slot="label" class="l-block mb-2x">Large input</span>
</tk-input>
<hr>
<tk-input
  size='fullwidth'
  placeholder='fullwidth'>
  <span slot="label" class="l-block mb-2x">Extra large input</span>
</tk-input>

<tk-input
  error
  placeholder="Error state">
  <span slot="label" class="l-block mb-2x">Error state</span>
</tk-input>
<hr>
<tk-input
  disabled
  placeholder="Disabled state">
  <span slot="label" class="l-block mb-2x">Disabled state</span>
</tk-input>
<hr>
<tk-input
  readonly
  placeholder="Readonly state">
  <span slot="label" class="l-block mb-2x">Read-only state</span>
</tk-input>

<tk-input
  input-type='numeric'
  size='small'
  step='1'>
  <span slot="label" class="l-block mb-2x">Small numeric input</span>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  size='small'
  step='0.2'
  min='0'
  max='1'>
  <span slot="label" class="l-block mb-2x">Small numeric input with a min and max</span>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  size='small'
  step='5'>
  <span slot="label" class="l-block mb-2x">Smaller numeric input with a step of 5</span>
</tk-input>

<tk-input
  id="password-input"
  placeholder="Enter password"
  input-type="password">
    <span slot="label" class="l-block mb-2x">Enter password</span>
    <tk-icon-button slot="input-action-button" type="ghost">
      <tk-icon name="eye-slash"></tk-icon>
    </tk-icon-button>
</tk-input>

<script>
  const input = document.getElementById('password-input');
  const actionButton = input.querySelector('tk-icon-button');
  const icon = actionButton.querySelector('tk-icon');

  actionButton.addEventListener('click', (event) => {
    const currentIcon = icon.getAttribute('name');
    const currentType= input.getAttribute('input-type')
    const newIcon = (currentIcon === 'eye') ? 'eye-slash' : 'eye';
    const type = (currentType === 'text') ? 'password' : 'text';
    icon.setAttribute('name', newIcon);
    input.setAttribute('input-type', type);
  });
</script>

<tk-input>
  <span slot="hint" class="l-inline-flex l-v-center">
    <tk-icon name="heart" size="xs" class="mr-1x" variant="filled"></tk-icon>
    Enter your text to see the hint
  </span>
  <span slot="label" class="l-block mb-2x">Hint</span>
</tk-input>
<hr>
<tk-input error value="Hint with an error">
  <span slot="hint" class="l-inline-flex l-v-center">
    <tk-icon name="bell" size="xs" class="mr-1x"></tk-icon>
    See a hint with an error 
  </span>
    <span slot="label" class="l-block mb-2x">Hint with an error</span>
</tk-input>

<tk-input value="">
  <tk-character-counter
    text=""
    count-down="true"
    max-length="25"
    slot="character-counter"
  ></tk-character-counter>
  <span slot="label" class="l-block mb-2x">Input with a Character Counter</span>
</tk-input>
<hr>
<tk-input value="" error>
  <span slot="hint" class="l-inline-flex l-v-baseline">
    <tk-icon name="alert" size="xs" class="mr-1x"></tk-icon>
    Please enter text above all others
  </span>
  <tk-character-counter
    text=""
    count-down="true"
    max-length="25"
    slot="character-counter"
  ></tk-character-counter>
  <span slot="label" class="l-block mb-2x">Input Error with a Character Counter</span>
</tk-input>

  <tk-input>
    <span slot="label" class="mb-2x t-medium">Text Area With Medium Label</span>
  </tk-input>
  <hr/>
  <tk-input>
    <span slot="label" class="mb-2x t-large">Text Area With Large Label</span>
  </tk-input>

  <tk-input placeholder="Ask a question...">
    <span slot="label" class="mb-2x t-medium">Input with Icon</span>
    <tk-icon slot="icon" name="ai" />
  </tk-input>

<tk-input label-id="default-input" prevent-paste="true">
  <span slot="label" class="l-block mb-2x">Pasting from clipboard or dropping in text is disabled</span>
</tk-input>

<tk-input-financial
  id="inputFinancialExample1"
  class="mb-2x l-block"
  placeholder="5"
  max-value="300"
  min-value="10"
  required
  value="300"
  unit="decimalPeriod"
>
  <span slot="label">Loan amount</span>
  <tk-hint slot="hint">Roughly how much would you like to borrow?</tk-hint>
</tk-input-financial>

<!-- for demo only -->
<tk-highlight id="inputFinancialExampleOutput1"
></tk-highlight>
<hr>
<!-- end demo -->

<tk-input-financial
  id="inputFinancialExample2"
  placeholder="10"
  step="5"
>
  <span slot="label">Loan amount</span>
  <tk-hint slot="hint">Enter an amount in increments of $5.</tk-hint>
</tk-input-financial>

<!-- for demo only -->
<tk-highlight id="inputFinancialExampleOutput2"
></tk-highlight>
<hr>
<!-- end demo -->

<tk-input-financial
  class="l-block mb-2x"
  id="inputFinancialExample3"
  currency="JPY"
>
  <span slot="label">Contributor payment</span>
</tk-input-financial>

<!-- for demo only -->
<tk-highlight
  id="inputFinancialExampleOutput3"
></tk-highlight>

<script>
  const displayInputFinancialEventChange = (outputElement, amount) => {
    outputElement.innerText = `📣 valueChanged emitted: ${amount}`;
  }

  inputFinancialExample1.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput1, $event.detail));
  inputFinancialExample2.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput2, $event.detail));
  inputFinancialExample3.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput3, $event.detail));
</script>
<!-- end demo -->

<tk-input-financial
  class="mb-2x l-block"
  status="disabled"
  value="300"
>
  <span slot="label">Financial input's disabled state</span>
  <tk-hint slot="hint">The status prop is set to disabled.</tk-hint>
</tk-input-financial>