# @lia-labs/elements

> The Lia SDK as custom elements, for any page and any framework. Put an element on the page and it does its job while it's there. From the Lia developer docs: https://docs.lialabs.org/packages/elements

```sh
npm install @lia-labs/elements
```

Or without a build step:

```html
<script src="https://unpkg.com/@lia-labs/elements/dist/auto.global.js"></script>
```

The script build registers the elements as it loads and puts the whole SDK on `window.liaElements`. With a bundler, register them once:

```ts
import { defineLiaElements } from '@lia-labs/elements';
defineLiaElements();
```

## An app

```html
<lia-app auto-ready></lia-app>
<lia-main-button text="Buy extra lives"></lia-main-button>
<button id="play">Play</button>
<div id="game"></div>

<script>
  document.querySelector('lia-main-button').addEventListener('lia-click', function () {
    liaElements.pay('extra-lives');
  });
  document.querySelector('lia-app').addEventListener('lia-ready', function (event) {
    console.log('Hello, @' + event.detail.player.name);
  });

  // While a game runs: a back button and closing confirmation, gone when the game ends.
  var game = document.getElementById('game');
  document.getElementById('play').onclick = function () {
    game.innerHTML = '<lia-back-button></lia-back-button><lia-closing-confirmation></lia-closing-confirmation>';
    game.querySelector('lia-back-button').addEventListener('lia-click', function () { game.innerHTML = ''; });
  };
</script>
```

The elements draw nothing on your page: each one controls a part of Lia while it's in the document. Removing it (or a parent) hides the button or ends the hold. Elements inside a `hidden` parent still count: add and remove them instead.

## Elements

| Element | While it's on the page | Attributes | Events |
| --- | --- | --- | --- |
| `<lia-app>` | Calls `init()`, then sets `ready` (or `error`) on itself | `auto-ready` calls `ready()` after the first frame; `no-css-vars` | `lia-ready` (detail: the init result), `lia-error` |
| `<lia-main-button>` | Lia's main button | `text`, `color`, `text-color`, `disabled`, `progress`, `shine` | `lia-click` |
| `<lia-secondary-button>` | The secondary button | The same, and `position` | `lia-click` |
| `<lia-back-button>` | The header's back button | | `lia-click` |
| `<lia-settings-button>` | Settings in the ⋯ menu | | `lia-click` |
| `<lia-closing-confirmation>` | Lia asks before closing | | |
| `<lia-swipe-lock>` | A swipe down won't close the sheet | | |

Changing an attribute updates the button: `button.setAttribute('progress', '')` shows its spinner, `button.toggleAttribute('disabled', true)` greys it out.