lion/docs/components/input-amount-dropdown/use-cases.md

parts	title	eleventyNavigation
Input Amount Dropdown Use Cases	Input Amount Dropdown: Use Cases	key order parent title Input Amount Dropdown: Use Cases 20 Input Amount Dropdown Use Cases

Input Amount Dropdown: Use Cases

import { html } from '@mdjs/mdjs-preview';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
import '@lion/ui/define/lion-input-amount-dropdown.js';

Input Amount Dropdown

When .allowedCurrencies is not configured, all currencies will be available in the dropdown list.

export const InputAmountDropdown = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-amount-dropdown
      label="Select currency via dropdown"
      help-text="Shows all currencies by default"
      name="amount"
    ></lion-input-amount-dropdown>
  `;
};

Allowed currencies

When .allowedCurrencies is configured, only those currencies will be available in the dropdown list.

export const allowedCurrencies = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-amount-dropdown
      label="Select currency via dropdown"
      help-text="Shows only allowed currencies"
      name="amount"
      .allowedCurrencies=${['EUR', 'GBP']}
    ></lion-input-amount-dropdown>
  `;
};

Preferred currencies

When .preferredCurrencies is configured, they will show up on top of the dropdown list to enhance user experience.

export const preferredCurrencies = () => {
  loadDefaultFeedbackMessages();
  return html`
    <lion-input-amount-dropdown
      label="Select currency via dropdown"
      help-text="Preferred currencies show on top"
      name="amount"
      .allowedCurrencies=${['EUR', 'GBP', 'USD', 'JPY']}
      .preferredCurrencies=${['USD', 'JPY']}
    ></lion-input-amount-dropdown>
  `;
};

Suffix or prefix

Subclassers can decide the dropdown location via _dropdownSlot, this can be set to either suffix or prefix.

class DemoAmountDropdown extends LionInputAmountDropdown {
  constructor() {
    super();

    this._dropdownSlot = 'suffix';
  }
}

customElements.define('demo-amount-dropdown', DemoAmountDropdown);

export const suffixSlot = () => {
  loadDefaultFeedbackMessages();
  return html`
    <demo-amount-dropdown
      label="Select region via dropdown"
      help-text="the dropdown shows in the suffix slot"
      name="amount"
    ></demo-amount-dropdown>
  `;
};