npm package: @startinblox/solid-data-permissioning
Description: Startin'blox data-sharing module
Author: startinblox
Latest version: 4.0.2

# Data-sharing

## Table of Contents

1. [Introduction](#introduction)
2. [Installation](#installation)
3. [Development](#development)
4. [Tests](#tests)
5. [Storybook](#storybook)
6. [Build](#build)
7. [License](#license)
8. [Usage of the component](#usage-of-the-component)

## Introduction

This is the data sharing startin'blox component.

## Installation

```bash
npm install
```

## Development

```bash
npm run watch
```

## Tests

```bash
npm run cy:run
```

or

```bash
npm run cy:open
```

## Storybook

```bash
npm run storybook
```

## Build

```bash
npm run build
```

## Localization

This project uses [`@lit/localize`](https://www.npmjs.com/package/@lit/localize) for internationalization.

### Extracting strings

To extract strings for translation, run:

```bash
npm run locale:extract
```

This command will generate XLIFF files in the `locales` directory.

### Changing locale

To change the locale, run:

```javascript
window.setLocale.map((setLocale) => setLocale("your-lang-code"));
```

### Getting current locale

To get the current locale, run:

```javascript
window.getLocale.map((locale) => console.log(locale));
```

## License

[MIT](LICENSE)

## Usage of the component

To use the component, first, you'll need to import the startinblox core in the head of your file : 
```html
<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@startinblox/core@latest/dist/index.js"
></script>
```

In the html file, you will also need to add this script to the body :
```html
<script type="module">
    window.orbit = {
    client: {
        name: "Orbit",
        logo: "https://cdn.startinblox.com/logos/ACME.svg",
    },
    components: [],
    getRoute: (route) => route,
    getDefaultRoute: () => "",
    getComponent: () => undefined,
    getComponentFromRoute: () => undefined,
    Swal: () => {},
    defaultRoute: "",
    federations: {},
    componentSet: new Set(["routing", "menu", "menu-top", "autoLogin", "solid-permissioning"]),
    };
</script>
```

Then, you have to call the component with three parameters : 
- data-src : where the datas wil be found. You need to respect the specifications [here](https://git.startinblox.com/projets/projets-clients/open-food-network/data-permissioning-module/-/issues/37). You can find an example [here](https://data-server.cqcm.startinblox.com/enterprises/1/platforms)
- noRouter
```html
<solid-permissioning
    data-src="https://data-server.cqcm.startinblox.com/enterprises/1/platforms"
    noRouter
    auto-lang
    lang="fr"
    auth-token="1654654zdaz54d">
</solid-permissioning>
```
- Attributes `auto-lang`, `lang` and `auth-token` are optional. 
- `auto-lang`: the component takes the browser language, and if this is not known, it will default to English.
- `lang` : to set a language. If this is not known, the component will default to English.
- Without attributes `auto-lang` and `lang`, the component will default to English.
- For the moment, the known languages are English and French. Other languages may be added in the future.
- Without attributes `auth-token`, the put request wil have no `authorization` in the request's header.

Finally in the body, after the call at the component, you'll have to import the script : 
```html
<script 
    src="https://cdn.jsdelivr.net/npm/@startinblox/solid-data-permissioning@latest/dist/index.js" 
    type="module">
</script>
```

you can customize the colors by adding the following instructions to your application's css file: 
```css
solid-permissioning {
  --font-family: [your font];
  --color-text: [text color];
  --color-primary: [button background];
  --color-primary-dark: [background of active buttons];
  --color-primary-light: [light button border]; 
  --color-secondary: [secondary button border];
  --color-secondary: [title line of platforms with scopes and used for cheked];
  --color-third: [block background];
  --color-third-dark: [background of active light buttons];
  --color-heading: [platform title line without scopes];
  --color-grey: [gray used for unchecked];
}
```

## Changelog
###  04/09 - new way to retrieve scopes: 
scopes-uri now useless, replaced by retrieving scopes from the proxy profile.