npm package: @pie-api/pie-api-components
Description: Pie Api Components
Latest version: 5.16.0

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Pie Api Components

This package provides Custom HTML Elements for using KDS PIE Service content.

For authoring content it provides the [pie-api-author](src/components/pie-api-author/readme.md) component:

`<pie-api-author></<pie-api-author>`

For rendering PIE content to students use the [pie-api-player](src/components/pie-api-player/readme.md) component.

`<pie-api-player></pie-api-player>`

## Using these components

### Script tag

Put

```html
<script src="https://unpkg.com/@pie-api/pie-api-components@0.0.2/dist/pie-api-components.js"></script>
```

in the head of your index.html

Then you can use the element anywhere in your template, JSX, html etc.

```html
<pie-api-author id="author"></pie-api-author>
<script>
  const author = document.getElementById("author");

  author.addEventListener("model-changed", (event) => {
    // hadndle update, e.g
    author.save().then((itemId, versionn) => {
      // handle
    });
  });

  author.contentConfig = {
    id: "1",
    elements: { "pie-multiple-choice": "@pie-element/multiple-choice@latest" },
    models: [
      {
        id: "1",
        element: "pie-multiple-choice",
      },
    ],
    markup: "<pie-multiple-choice id='1'></pie-multiple-choice>",
  };
</script>
```

### Node Modules

- Run `npm install @pie-api/pie-api-components --save`
- Put this `<script src='node_modules/@pie-api/pie-api-components/dist/pie-api-components.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### VUE JS

#### 1: Add the component to the dependencies

```shell
npm i @pie-api/pie-api-components
```

#### 2: Import the component(s)

```javascript
import { defineCustomElements } from "@pie-api/pie-api-components/dist/loader";

defineCustomElements(window);
```

#### 3: Consume the component

To prevent Vue from complaining that your component has an unrecognized tag, add the following in main.js. Use either the full name, or regex if you want to capture a family of components.

```json
Vue.config.ignoredElements = [
  "pie-api-player",
  "pie-api-author"
];
```

It is now possible to use the tag provided by the pie components in any template of the app.

```html
<pie-api-author v-bind:contentConfig.prop="contentConfig" />
```

### React

TODO

# Development

## Testing

- `yarn test` - test e2e and spec
- `./node_modules/.bin/stencil --spec` - run spec only
- `./node_modules/.bin/stencil --e2e` - run e2e only
- `./node_modules/.bin/stencil --e2e|spec path/to/file` - run single file

> Note: `yarn stencil` doesn't work so use the above instead.

## Build

`yarn build`

## Preview

You can add demo files to `src/demo` and they'll be available in the demo.

`yarn demo`

Then go to `http://localhost:3333/demo/...`

UPDATE:
### Project setup
```
npm install
```

### Run your demo files
```
npm run demo
```

# to avoid typescript errors use node 16.3.0