lion/docs/components/select-rich/examples.md

parts	title	eleventyNavigation
Select Rich Examples	Select Rich: Examples	key order parent title Select Rich: Examples 30 Select Rich Examples

Select Rich: Examples

import { html } from '@mdjs/mdjs-preview';
import { repeat } from 'lit/directives/repeat.js';
import '@lion/ui/define/lion-select-rich.js';
import './src/intl-select-rich.js';
import { regionMetaList } from './src/regionMetaList.js';

Select Rich International

A visually advanced Subclasser implementation of LionSelectRich.

Inspired by:

• intl-tel-input

export const IntlSelectRich = () => html`
  <intl-select-rich label="Choose a region" name="regions">
    ${repeat(
      regionMetaList,
      regionMeta => regionMeta.regionCode,
      regionMeta =>
        html` <intl-option .choiceValue="${regionMeta.regionCode}" .regionMeta="${regionMeta}">
        </intl-option>`,
    )}
  </intl-select-rich>
`;