open-index/open-npm huggingface dataset:
npm package: @gip-recia/change-etab
Description: UI de change établissement en VueJS.
Author: Indah Juliani
Latest version: 1.0.0

# change-etab

- [change-etab](#change-etab)
  - [Installation](#installation)
  - [Paramètres](#paramètres)
  - [Variables CSS](#variables-css)
    - [Modification de style](#modification-de-style)

## Installation

1. Installation via npm :

```sh
npm install @gip-recia/change-etab
```

2. Importation du composant :

Dans un module JavaScript :

```js
import '@gip-recia/change-etab'
```

Dans une page HTML :

```html
<script src="./path/to/change-etab.min.js"></script>
```

3. Ajout du composant sur une page HTML :

```js
const changeEtab = document.createElement('change-etab')
document.body.appendChild(changeEtab)
```

## Paramètres

Propriétés disponibles :

| Nom                 |   Type    | Obligatoire | Default | Description                                |
| ------------------- | :-------: | :---------: | :-----: | ------------------------------------------ |
| `show`              | `boolean` |    `oui`    |         | activer/désactiver la modal                |
| `change-etab-api`   | `string`  |    `oui`    |         | URI de la route GET de change etab         |
| `user-info-api-url` | `string`  |    `oui`    |         | URL de l'API des informations utilisateurs |

<br/>

```html
<change-etab
  show="" 
  change-etab-api="" 
  user-info-api-url=""
/>
```

## Variables CSS

### Modification de style

Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :

| Nom                                              | Description                                        |
| ------------------------------------------------ | -------------------------------------------------- |
| `--change-etab-button-background-color`          | Permet de modifier la couleur de fond des boutons  |
| `--change-etab-button-text-color`                | Permet de modifier la couleur de texte des boutons |
| `--change-etab-font-text-color`                  | Permet de modifier la couleur de texte             |
| `--change-etab-background-modal-overlay-color`   | Permet de modifier la couleur de l'overlay         |
| `--change-etab-background-modal-component-color` | Permet de modifier la couleur de fond de la modale |
| `--change-etab-modal-z-index`                    | Permet de modifier le z-index de la modale         |
npm package: @gip-recia/esup-publisher-webcomponents-utils
Description: Esup-Publisher Webcomponents Utils
Author: GIP-RECIA
Latest version: 0.0.7

# **Esup-Publisher WebComponents Utils**

Esup-Publisher-Webcomponents-Utils est un projet contenant des classes utilitaires pour les webcomponents Esup.

## **Installation**

1. Installation via npm :

```shell
npm install @gip-recia/esup-publisher-webcomponents-utils
```

## **Classes disponibles**

Le projet Esup-Publisher-Webcomponents-Utils met à disposition les éléments suvants :

| Nom                   | Type   | Description                                                       |
| --------------------- | ------ | ----------------------------------------------------------------- |
| Localization          | Class  | Classe permettant d'afficher des labels selon une langue définie. |
| ToolTip               | Class  | Classe permettant d'afficher un tooltip.                          |
| bootstrapToolTipStyle | Object | Objet contenant le CSS pour les tooltips.                         |
| Utils                 | Class  | Classe contenant des méthodes utilitaires statiques.              |

## **Test des classes**

Pour tester les classes du projet, exécuter la commande suivante :

```shell
npm start
```

Une page utilisant les différentes classes est alors disponible à l'adresse http://localhost:8000.
npm package: @gip-recia/info-modal
Description: Info modal web component for GIP-Recia
Latest version: 0.0.1

# Info-Modal

Info-Modal est un webcomponent s'appuyant sur la librairie Lit pour afficher une modale d'information.

- [Info-Modal](#info-modal)
  - [Installation](#installation)
  - [Paramètres](#paramètres)
  - [Variables CSS](#variables-css)
    - [Modification de style](#modification-de-style)

## Installation

1. Installation via npm :

```sh
npm install @gip-recia/info-modal
```

2. Importation du composant :

Dans un module JavaScript :

```
import '@gip-recia/info-modal';
```

Dans une page HTML :

```html
<script src="./path/to/info-modal.min.js"></script>
```

3. Ajout du component sur une page HTML :

```js
const infoModal = document.createElement('info-modal');
document.body.appendChild(infoModal);
```

## Paramètres

Propriétés disponibles :

| Nom         | Type        | Obligatoire | Description                                                           |
| ----------- | ----------- | ----------- | --------------------------------------------------------------------- |
| titleModal  | string      | non         | Le titre de la modale                                                 |
| debug       | boolean     | non         | Un booléen qui permet d'afficher les retour console ou non            |
| mainElement | HTMLElement | oui         | Balise main du DOM (la modale gère la navigation clavier dans le DOM) |

<br/>

```html
<info-modal
  titleModal=""
  debug
/>
```

## Variables CSS

### Modification de style

Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :

| Nom                                           | Description                                                  |
| --------------------------------------------- | ------------------------------------------------------------ |
| --info-modal-background-modal-container-color | Couleur de fond de la modale                                 |
| --info-modal-background-modal-overlay-color   | Couleur d'arrière plan (donne le "focus visuel" à la modale) |
npm package: @gip-recia/menu-cantine
Description: Affichage des menus de cantine des établissements scolaire du secondaire en région centre.
Author: Pierre Legay
Latest version: 0.1.20

# Menu Cantine UI

- [Menu Cantine UI](#menu-cantine-ui)
  - [Installation](#installation)
  - [Paramètres](#paramètres)

## Installation

1. Installation via npm :

```sh
npm install @gip-recia/menu-cantine
```

2. Importation du composant :

Dans un module JavaScript :

```js
import '@gip-recia/menu-cantine';
```

Dans une page HTML :

```html
<script src="./path/to/menu-cantine.min.js"></script>
```

3. Ajout du composant sur une page HTML :

```js
const menuCantine = document.createElement('menu-cantine');
document.body.appendChild(menuCantine);
```

## Paramètres

Propriétés disponibles :

| Nom                     |   Type    | Obligatoire | Default | Description                                                           |
| ----------------------- | :-------: | :---------: | :-----: | --------------------------------------------------------------------- |
| `is-demo`               | `boolean` |    `non`    | `false` | True pour lancer en mode de test local (affichage de la page "admin") |
| `app-user-info-uri`     | `string`  |    `oui`    |         | URL de l'API pour récupérer les infos sur les users                   |
| `app-url-img`           | `string`  |    `oui`    |         | URL des images                                                        |
| `app-url-rest-api`      | `string`  |    `oui`    |         | URL du back pour récupérer les menus                                  |
| `app-url-api-etab`      | `string`  |    `oui`    |         | URL de l'API pour récupérer les infos sur les structures              |
| `app-url-rest-api-demo` | `string`  |    `non`    |         | URL du back pour récupérer les menus en mode test local               |

<br/>

```html
<menu-cantine-menu-semaine
  is-demo
  app-user-info-uri=""
  app-url-img=""
  app-url-rest-api=""
  app-url-api-etab=""
  app-url-rest-api-demo=""
/>
```