lion/packages/localize/stories/20-web-components.stories.mdx

import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { render } from '@lion/core';
import { localize, formatNumber, formatDate } from '../index.js';

<Meta title="Localize/Web Components" />

## Web Component

<Story name="Default"></Story>

For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.

<Story id="localize-system-internals--web-component" />

```js
class MessageExample extends LocalizeMixin(LitElement) {
  render() {
    return html`
      <div aria-live="polite">
        <p>${localize.msg('lit-html-example:body')}</p>
      </div>
    `;
  }
}
```

## Numbers

To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).

<Story name="Numbers">
  {() => {
    const wrapper = document.createElement('div');
    let value = 1234.56;
    function update() {
      render(
        html`
          <input type="text" value=${value} />
          <p>${formatNumber(value)}</p>
          <sb-locale-switcher></sb-locale-switcher>
        `,
        wrapper,
      );
    }
    localize.addEventListener('localeChanged', () => {
      update();
    });
    update();
    const input = wrapper.querySelector('input');
    input.addEventListener('input', ev => {
      value = ev.target.value;
      update();
    });
    return wrapper;
  }}
</Story>

## Dates

To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).

<Story name="Dates">
  {() => {
    const wrapper = document.createElement('div');
    let value = '1987/05/12';
    function update() {
      render(
        html`
          <input type="text" value=${value} />
          <p>${formatDate(new Date(value))}</p>
          <sb-locale-switcher></sb-locale-switcher>
        `,
        wrapper,
      );
    }
    localize.addEventListener('localeChanged', () => {
      update();
    });
    update();
    const input = wrapper.querySelector('input');
    input.addEventListener('input', ev => {
      value = ev.target.value;
      update();
    });
    return wrapper;
  }}
</Story>