Europa Component Library

https://github.com/ec-europa/europa-component-library
Admin
The Europa Component Library (ECL) is a collection of reusable components designed for all European...
Tokens:327,316
Snippets:2,631
Trust Score:8.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies with pnpm install

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Run in the project root to install all external dependencies and link local dependencies together after running the prepublish script if available.

```bash
pnpm install
```

--------------------------------

### Start website development with pnpm start:website

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Starts the website development environment.

```bash
pnpm start:website
```

--------------------------------

### Build everything with pnpm dist

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Builds all presets, components, and resources.

```bash
pnpm dist
```

--------------------------------

### Build only presets with pnpm build:presets

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Builds only the presets.

```bash
pnpm build:presets
```

--------------------------------

### Run all component tests with pnpm test:components

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Runs all component tests.

```bash
pnpm test:components
```

--------------------------------

### Start EU system Storybook with pnpm start:eu

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Spawns a Storybook development environment for the EU system. Watches for changes in components, SCSS/CSS, and JavaScript assets, rebuilding resources and reloading the browser.

```bash
pnpm start:eu
```

--------------------------------

### Start EC system Storybook with pnpm start:ec

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Spawns a Storybook development environment for the EC system. Watches for changes in components, SCSS/CSS, and JavaScript assets, rebuilding resources and reloading the browser.

```bash
pnpm start:ec
```

--------------------------------

### Lint everything with pnpm lint

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Lints both JavaScript and SCSS files.

```bash
pnpm lint
```

--------------------------------

### Lint only SCSS with pnpm lint:css

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Lints only SCSS files.

```bash
pnpm lint:css
```

--------------------------------

### Format code with Prettier using pnpm prettier:write

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Formats code using Prettier.

```bash
pnpm prettier:write
```

--------------------------------

### Lint only JavaScript with pnpm lint:js

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Lints only JavaScript files.

```bash
pnpm lint:js
```

--------------------------------

### Setup and Key Commands for ECL Monorepo

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/AGENTS.md

Essential pnpm and npm commands for installing dependencies, running Storybook for EC/EU systems, testing components, linting, formatting, and building the monorepo. Use these for day-to-day development tasks.

```bash
pnpm install          # install and link all workspace packages

pnpm start:ec         # Storybook for the EC system (port 9001)
pnpm start:eu         # Storybook for the EU system (port 9002)
pnpm start:website    # Documentation website

pnpm test:components              # run all Jest tests
pnpm test:components -- button    # test a single component
npm run test:components -- button -u  # update snapshots for one component only
npm run test:components -- -u         # update all snapshots

pnpm lint             # ESLint + Stylelint
pnpm prettier:write   # auto-format

pnpm dist             # full build (presets + components + resources)
pnpm --filter '@ecl/button' run dist  # build a single package
```

--------------------------------

### Update test snapshots with pnpm test:components -- -u

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Updates test snapshots for components.

```bash
pnpm test:components -- -u
```

--------------------------------

### Install @ecl/page-president

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-president/README.md

Install the ECL President page example package via npm.

```shell
npm install --save @ecl/page-president
```

--------------------------------

### Build a specific component with pnpm --filter '@ecl/button' run dist

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/developers-start-here.md

Builds a specific component, here the button component, using pnpm's filter flag.

```bash
pnpm --filter '@ecl/button' run dist
```

--------------------------------

### Install @ecl/page-search npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-search/README.md

Install the ECL page-search package via npm. Use the --save flag to add it to your project's dependencies.

```shell
npm install --save @ecl/page-search
```

--------------------------------

### Start Netlify CMS proxy server

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/public/admin/README.md

Run the Netlify CMS proxy server to enable local backend functionality.

```bash
pnpm netlify-cms-proxy-server
```

--------------------------------

### Install @ecl/page-home with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-home/README.md

Install the ECL page-home npm package using npm. The package is published as @ecl/page-home.

```shell
npm install --save @ecl/page-home
```

--------------------------------

### Install ECL preset via pnpm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/getting-started/index.mdx

Alternative installation using pnpm, another package manager option.

```bash
pnpm install @ecl/preset-ec
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/video/README.md

Install the ECL Video component npm package.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/video
```
```

--------------------------------

### Install @ecl/layout-wrapper with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/layout/layout-wrapper/README.md

Install the ECL layout wrapper npm package.

```shell
npm install --save @ecl/layout-wrapper
```

--------------------------------

### README.md template for ECL component

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/agentic/ecl-new-component.md

Template for the component's README.md file. Includes npm install command, parameters list, and a Twig include example.

```markdown
# ECL <Name> component

npm package: `@ecl/<name>`

```shell
npm install --save @ecl/<name>
```

## Parameters

- **"extra_classes"** (string) (default: '')
- **"extra_attributes"** (optional) (array) (default: [])
  - "name" (string) Attribute name, eg. 'data-test'
  - "value" (optional) (string) Attribute value, eg: 'data-test-1'

## Example:

<!-- prettier-ignore -->
```twig
{% include '@ecl/<name>/<name>.html.twig' with {

} %}
```
```

--------------------------------

### Install @ecl/site-footer npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/site-footer/README.md

Install the ECL Site Footer component package using npm. This is the required setup step before using the component.

```shell
npm install --save @ecl/site-footer
```

--------------------------------

### Install @ecl/file npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/file/README.md

Install the ECL File component package via npm. This is the required setup step before using the component in a project.

```shell
npm install --save @ecl/file
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/menu/README.md

Install the ECL Menu package via npm.

```APIDOC
```shell
npm install --save @ecl/menu
```
```

--------------------------------

### Install @ecl/page-rich-text with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-rich-text/README.md

Install the ECL page-rich-text npm package using npm. The package is published as @ecl/page-rich-text.

```shell
npm install --save @ecl/page-rich-text
```

--------------------------------

### Install @ecl/page-inner npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-inner/README.md

Install the ECL page-inner component package using npm. The package is published as @ecl/page-inner.

```shell
npm install --save @ecl/page-inner
```

--------------------------------

### Install @ecl/menu via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/menu/README.md

Install the ECL Menu package using npm. This is the required setup step before using the menu component.

```shell
npm install --save @ecl/menu
```

--------------------------------

### Install ECL preset via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/getting-started/index.mdx

Install the ECL preset package using npm. This is the recommended package manager option for easy version management and updates.

```bash
npm install @ecl/preset-ec
```

--------------------------------

### npm install @ecl/layout-wrapper

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/layout/layout-wrapper/README.md

Install the ECL Layout wrapper package via npm.

```APIDOC
## [INSTALL] npm install

### Description
Install the ECL Layout wrapper package.

### Method
npm install

### Endpoint
npm install --save @ecl/layout-wrapper

### Parameters
None

### Request Example
```shell
npm install --save @ecl/layout-wrapper
```

### Response
#### Success Response
Package installed successfully.
```

--------------------------------

### Monorepo Directory Structure

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/AGENTS.md

Shows the top-level layout of the ECL monorepo, including components, compositions, themes, presets, playground, website, resources, and tools directories. Useful for understanding where different parts of the codebase live.

```text
src/
  components/     ← 60+ components, each an @ecl/{name} npm package
  compositions/   ← higher-level markup patterns built from components
  themes/         ← design tokens for EC and EU (maps/, variables/)
  presets/        ← bundled distributions (ec, eu, reset, rtl)
  playground/     ← Storybook instances (ec/, eu/)
  website/        ← documentation site (React + Vike + MDX)
  resources/      ← logos, favicons
  tools/          ← build tool (@ecl/builder), dom-utils, event-manager
docs/             ← developer documentation (start here for deep dives)
```

--------------------------------

### Start development server with pnpm start

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/README.md

Runs the development server for the ECL website. Use this command during development to preview changes with hot reload.

```sh
pnpm start
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/navigation-list/README.md

Install the ECL Navigation List component via npm.

```APIDOC
## Installation

### Description
Install the ECL Navigation List component via npm.

### Command
```shell
npm install --save @ecl/navigation-list
```
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/highlight-box/README.md

Install the @ecl/highlight-box npm package to use the Highlight Box component.

```APIDOC
## Installation

```shell
npm install --save @ecl/highlight-box
```
```

--------------------------------

### Install @ecl/tooltip with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/tooltip/README.md

Install the ECL Tooltip component package via npm.

```shell
npm install --save @ecl/tooltip
```

--------------------------------

### Install @ecl/select via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/select/README.md

Install the ECL Select component package using npm.

```shell
npm install --save @ecl/select
```

--------------------------------

### Install @ecl/video npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/video/README.md

Install the ECL Video component npm package using npm.

```shell
npm install --save @ecl/video
```

--------------------------------

### Basic HTML setup with ECL preset

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/getting-started/index.mdx

Complete HTML page structure integrating ECL styles and JavaScript. Includes the no-js/has-js class toggle for JavaScript detection and calls ECL.autoInit() to initialize components.

```html
<!doctype html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <title>Page title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Enable JavaScript detection -->
    <script>
      document.documentElement.classList.remove('no-js');
      document.documentElement.classList.add('has-js');
    </script>

    <!-- ECL Styles -->
    <link
      rel="stylesheet"
      href="/styles/optional/ecl-reset.css"
      media="screen"
    />
    <link
      rel="stylesheet"
      href="/styles/optional/ecl-ec-utilities.css"
      media="screen"
    />
    <link rel="stylesheet" href="/styles/ecl-ec.css" media="screen" />
    <link rel="stylesheet" href="/styles/ecl-ec-print.css" media="print" />
  </head>

  <body>
    <!-- Your page content here -->

    <!-- ECL JavaScript -->
    <script type="module" src="/scripts/ecl-esm-ec.js"></script>
    <script>
      ECL.autoInit();
    </script>
  </body>
</html>
```

--------------------------------

### Install dependencies and run component tests

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/agentic/ecl-new-component.md

Run these commands to install dependencies and execute the component tests. Tests should pass on first run; missing snapshots are created automatically.

```bash
pnpm install
pnpm test:components -- <name>
```

--------------------------------

### Install @ecl/text-media via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/text-media/README.md

Install the ECL text-media component package using npm.

```shell
npm install --save @ecl/text-media
```

--------------------------------

### CDN example links for ECL CSS and JS

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/getting-started/index.mdx

Example CDN links for the ECL CSS and JavaScript files. These are shown as clickable links in the documentation.

```html
<a
  className="ecl-link"
  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/ecl-ec.css`}
>
  {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/ecl-ec.css`}
</a>
```

```html
<a
  className="ecl-link"
  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/scripts/ecl-esm-ec.js`}
>
  {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/scripts/ecl-esm-ec.js`}
</a>
```

--------------------------------

### Navigate to website directory

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/public/admin/README.md

First step in the local development workflow: change into the src/website directory.

```bash
cd src/website
```

--------------------------------

### Install @ecl/card via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/card/README.md

Install the ECL Card component package using npm. This is the required setup before using the component.

```shell
npm install --save @ecl/card
```

--------------------------------

### gallery.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/media/gallery/docs/api.mdx

Initializes the Gallery instance. This method must be called after creating a new instance to set up the component.

```APIDOC
## gallery.init()

### Description
Initializes the Gallery instance. This method must be called after creating a new instance to set up the component.

### Method
`init()`

### Usage
Call on a Gallery instance to initialize it.

### Example
```js
var elt = document.querySelector('[data-ecl-gallery]');
var gallery = new ECL.Gallery(elt);
gallery.init();
```
```

--------------------------------

### Install @ecl/separator via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/separator/README.md

Install the ECL separator component package using npm. This is the required setup step before using the component.

```shell
npm install --save @ecl/separator
```

--------------------------------

### Import formatBytes from @ecl/ec-base/helpers/utilities (v2)

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/Migrating-v3.md

Shows the v2 import path for the formatBytes utility before migration to v3.

```javascript
import { formatBytes } from '@ecl/ec-base/helpers/utilities';
```

--------------------------------

### siteHeader.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/site-wide/site-header/docs/api.mdx

Initializes the SiteHeader instance. This method must be called after creating a new instance to activate the component.

```APIDOC
## siteHeader.init()

### Description
Initializes the SiteHeader instance. This method must be called after creating a new instance to activate the component.

### Method
`init()`

### Usage
Call this method on a SiteHeader instance to initialize it.

### Example
```js
var elt = document.querySelector('.ecl-site-header');
var siteHeader = new ECL.SiteHeader(elt);
siteHeader.init();
```
```

--------------------------------

### Media Container Component Example (Image)

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/media-container/README.md

Example usage of the media container component with an image, demonstrating how to include the component with parameters.

```twig
{% include '@ecl/media-container/media-container.html.twig' with { 
  description: 'A description for this image', 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  picture: {
    img: {
      src: '/path/to/your/image',
      alt: 'An alternate text',
    },
  },
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' } 
  ] 
} %}
```

--------------------------------

### Install @ecl/date-block via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/date-block/README.md

Install the ECL date block component package using npm. This is the required setup before using the component.

```shell
npm install --save @ecl/date-block
```

--------------------------------

### Basic HTML page with ECL integration

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/eu/getting-started/index.mdx

Complete HTML template showing how to integrate ECL preset files. Includes JavaScript detection, stylesheets, and ECL auto-initialization.

```html
<!doctype html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <title>Page title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Enable JavaScript detection -->
    <script>
      document.documentElement.classList.remove('no-js');
      document.documentElement.classList.add('has-js');
    </script>

    <!-- ECL Styles -->
    <link
      rel="stylesheet"
      href="/styles/optional/ecl-reset.css"
      media="screen"
    />
    <link
      rel="stylesheet"
      href="/styles/optional/ecl-eu-utilities.css"
      media="screen"
    />
    <link rel="stylesheet" href="/styles/ecl-eu.css" media="screen" />
    <link rel="stylesheet" href="/styles/ecl-eu-print.css" media="print" />
  </head>

  <body>
    <!-- Your page content here -->

    <!-- ECL JavaScript -->
    <script type="module" src="/scripts/ecl-esm-eu.js"></script>
    <script>
      ECL.autoInit();
    </script>
  </body>
</html>
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/tooltip/docs/api.mdx

Automatically initializes all Tooltip components on the page. Call this method when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all Tooltip components on the page. Call this method when the page is ready or on a custom event.

### Method
`ECL.autoInit()`

### Usage
Call this method after adding the `data-ecl-auto-init="Tooltip"` attribute to a container element.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### Install @duetds/date-picker npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/Migrating-v5.md

Install the duet datepicker npm package as an alternative to using an external CDN, which may not be allowed on your website (e.g., under europa.eu).

```bash
npm install @duetds/date-picker
```

--------------------------------

### Manual initialisation with ECL.DescriptionList

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/list/docs/api.mdx

Manually create an instance by selecting the element with data-ecl-description-list and calling init(). Requires the ECL library to be loaded.

```javascript
var elt = document.querySelector('[data-ecl-description-list]');
var descriptionList = new ECL.DescriptionList(elt);
descriptionList.init();
```

--------------------------------

### Install @ecl/twig-page-fact via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/page-example/page-fact-sheet/README.md

Install the ECL Twig page fact package with npm. Use the --save flag to add it to your project's dependencies.

```shell
npm install --save @ecl/twig-page-fact
```

--------------------------------

### Install @ecl/skip-link via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/skip-link/README.md

Install the ECL Skip Link component package using npm. This is the required setup step before using the component in your project.

```shell
npm install --save @ecl/skip-link
```

--------------------------------

### instance.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/media/gallery/docs/api.mdx

Initializes the Gallery instance. This method can be called on an existing instance to reinitialize it after a destroy.

```APIDOC
## instance.init()

### Description
Initializes the Gallery instance. This method can be called on an existing instance to reinitialize it after a destroy.

### Method
`init()`

### Usage
Call on an existing Gallery instance to initialize it.

### Example
```js
instance.init();
```
```

--------------------------------

### instance.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/expandable/docs/api.mdx

Initializes (or reinitializes) the Expandable instance. This method sets up the component's behavior and event listeners.

```APIDOC
## instance.init()

### Description
Initializes (or reinitializes) the Expandable instance. This method sets up the component's behavior and event listeners.

### Method
`init()`

### Usage
Call this method on an existing Expandable instance to initialize or reinitialize it.

### Example
```js
var elt = document.querySelector('[data-ecl-expandable]');
var instance = ECL.components.get(elt);
instance.destroy();
instance.init();
```
```

--------------------------------

### Include slogan-ticker Twig template with items

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/slogan-ticker/README.md

Twig include for the slogan ticker component. The example sets an id, color_mode, and an array of items with content strings. The autoplay parameter defaults to true, so it starts sliding automatically unless overridden.

```twig
{% include '@ecl/slogan-ticker/slogan-ticker.html.twig' with {
  id: 'slogan-ticker-example',
  color_mode: 'default',
  items: [
    { content: 'Europe invests in people, planet and prosperity.' },
    { content: 'Our digital future is green, open and fair.' },
    { content: 'Stronger together for resilience and innovation.' },
    { content: 'Sustainability and inclusion guide our vision.' },
  ],
} %}
```

--------------------------------

### descriptionList.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/list/docs/api.mdx

Initializes the DescriptionList instance. This method should be called after creating an instance or after destroying it to re-initialize.

```APIDOC
## descriptionList.init()

### Description
Initializes the DescriptionList instance. This method should be called after creating an instance or after destroying it to re-initialize.

### Method
`init()`

### Example
```js
var elt = document.querySelector('[data-ecl-description-list]');
var descriptionList = new ECL.DescriptionList(elt);
descriptionList.init();
```
```

--------------------------------

### Install @ecl/description-list via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/description-list/README.md

Install the ECL description list component package using npm.

```shell
npm install --save @ecl/description-list
```

--------------------------------

### Tooltip.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/tooltip/docs/api.mdx

Initializes the Tooltip instance. Must be called after creating a new instance.

```APIDOC
## Tooltip.init()

### Description
Initializes the Tooltip instance. Must be called after creating a new instance.

### Method
`Tooltip.init()`

### Usage
Call this method on a Tooltip instance to initialize it.

### Example
```js
var elt = document.body;
var Tooltip = new ECL.Tooltip(elt);
Tooltip.init();
```
```

--------------------------------

### Install @ecl/carousel via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/carousel/README.md

Install the ECL Carousel npm package using npm install.

```shell
npm install --save @ecl/carousel
```

--------------------------------

### Install @ecl/banner via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/banner/README.md

Install the ECL Banner npm package using npm. This is the standard installation command for the package.

```shell
npm install --save @ecl/banner
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/notification/README.md

Install the ECL Notification component via npm.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/notification
```
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/media/media-container/docs/api.mdx

Automatically initializes all components with the data-ecl-auto-init attribute. Call this method when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all components with the `data-ecl-auto-init` attribute. Call this method when the page is ready or on a custom event.

### Method
- (not specified)

### Endpoint
- (not specified)

### Parameters
- (not specified)

### Request Example
- (not specified)

### Response
- (not specified)
```

--------------------------------

### Automatic initialization with data-ecl-auto-init

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/site-wide/site-header/docs/api.mdx

Add the data-ecl-auto-init attribute to the component's markup to enable automatic initialization. Use ECL.autoInit() when the page is ready or on a custom event.

```html
<header class="ecl-site-header" data-ecl-auto-init="SiteHeader">...</header>
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/table/README.md

Install the ECL Table component via npm.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/table
```
```

--------------------------------

### mediaContainer.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/media/media-container/docs/api.mdx

Initializes the MediaContainer instance. Must be called after creating an instance.

```APIDOC
## mediaContainer.init()

### Description
Initializes the MediaContainer instance. Must be called after creating an instance.

### Method
- (not specified)

### Parameters
- (not specified)

### Request Example
```js
mediaContainer.init();
```

### Response
- (not specified)
```

--------------------------------

### Import formatBytes from @ecl/dom-utils (v3)

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/Migrating-v3.md

Shows the v3 import path for the formatBytes utility after migration. The same change applies to queryAll() and queryOne().

```javascript
import { formatBytes } from '@ecl/dom-utils';
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/text-area/README.md

Install the ECL Text Area component via npm.

```APIDOC
## Installation

### Description
Install the `@ecl/text-area` npm package.

### Command
```shell
npm install --save @ecl/text-area
```
```

--------------------------------

### Install @ecl/label

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/label/README.md

Install the ECL Label component npm package.

```APIDOC
## Install @ecl/label

### Description
Install the ECL Label component npm package.

### Method
npm install

### Endpoint
npm install --save @ecl/label

### Parameters
None

### Request Example
```shell
npm install --save @ecl/label
```

### Response
#### Success Response
Package installed successfully.

#### Response Example
No response body.
```

--------------------------------

### expandable.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/expandable/docs/api.mdx

Initializes the Expandable instance. This method sets up the component's behavior and event listeners.

```APIDOC
## expandable.init()

### Description
Initializes the Expandable instance. This method sets up the component's behavior and event listeners.

### Method
`init()`

### Usage
Call this method on an Expandable instance to initialize it.

### Example
```js
var elt = document.querySelector('[data-ecl-expandable]');
var expandable = new ECL.Expandable(elt);
expandable.init();
```
```

--------------------------------

### Manual initialization with new ECL.SiteHeader

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/site-wide/site-header/docs/api.mdx

Get the target element, create an instance, and invoke init() to manually initialize the component. Assumes one element with class ecl-site-header on the page.

```javascript
var elt = document.querySelector('.ecl-site-header');
var siteHeader = new ECL.SiteHeader(elt);
siteHeader.init();
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/add-to-calendar/README.md

Install the @ecl/add-to-calendar npm package to use the component.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/add-to-calendar
```
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/content-block/README.md

Install the ECL content block component via npm.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/content-block
```
```

--------------------------------

### Manual initialisation with ECL.Select.autoInit and custom labels

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/forms/select/docs/api.mdx

Use ECL.Select.autoInit to initialise the select and pass custom labels for defaultText, searchText, and selectAllText.

```javascript
var select = ECL.Select.autoInit(
  document.querySelector('[data-ecl-select-multiple]'),
  { defaultText: 'string', searchText: 'string', selectAllText: 'string' },
);
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/site-wide/site-header/docs/api.mdx

Automatically initializes all SiteHeader components on the page that have the data-ecl-auto-init="SiteHeader" attribute. Call this method when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all SiteHeader components on the page that have the `data-ecl-auto-init="SiteHeader"` attribute. Call this method when the page is ready or on a custom event.

### Method
`autoInit()`

### Usage
Call `ECL.autoInit()` when the page is ready or on a custom event.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### Automatic initialisation with data-ecl-auto-init

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/list/docs/api.mdx

Add the data-ecl-auto-init="DescriptionList" attribute to the component's markup to enable automatic initialisation. Use ECL.autoInit() when the page is ready or on a custom event.

```html
<dl
  class="ecl-description-list"
  data-ecl-description-list
  data-ecl-auto-init="DescriptionList"
>
  ...
</dl>
```

--------------------------------

### Find insertion point in presets package.json

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/agentic/ecl-new-component.md

Run this command to find where to insert the package dependency in the presets package.json files.

```bash
grep -n '"@ecl/' src/presets/ec/package.json
```

--------------------------------

### Install @ecl/quiz with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/quiz/README.md

Install the ECL Quiz component package using npm.

```shell
npm install --save @ecl/quiz
```

--------------------------------

### Icon class migration example: plus icon

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/Migrating-v5.md

Example of updating an ECL icon class to include the Webtools wt-* class. The wt-* class must be first in order for the script to convert it.

```html
ecl-icon ecl-icon--s ecl-icon--plus ecl-accordion__toggle-icon
```

```html
wt-icon--plus ecl-icon ecl-icon--s ecl-icon--plus ecl-accordion__toggle-icon
```

--------------------------------

### Install @ecl/picture npm package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/picture/README.md

Install the ECL Picture component npm package.

```shell
npm install --save @ecl/picture
```

--------------------------------

### Manual initialisation with new ECL.InpageNavigation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/navigation/inpage-navigation/docs/api.mdx

Get the target element, create an instance and invoke init(). Assumes one element with data-ecl-inpage-navigation on the page.

```javascript
var elt = document.querySelector('[data-ecl-inpage-navigation]');
var inpageNavigation = new ECL.InpageNavigation(elt);
inpageNavigation.init();
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/search-form/README.md

Install the ECL Search Form package via npm.

```APIDOC
## Installation

### Command
```shell
npm install --save @ecl/search-form
```
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/timeline/docs/api.mdx

Initializes all components with the data-ecl-auto-init attribute. Call this when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Initializes all components with the `data-ecl-auto-init` attribute. Call this when the page is ready or on a custom event.

### Method
`autoInit()`

### Usage
Call `ECL.autoInit()` when the page is ready or on a custom event.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### inpageNavigation.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/navigation/inpage-navigation/docs/api.mdx

Initializes the InpageNavigation instance. This method must be called after creating an instance to set up the component's behavior.

```APIDOC
## inpageNavigation.init()

### Description
Initializes the InpageNavigation instance. This method must be called after creating an instance to set up the component's behavior.

### Method
INIT

### Example
```js
var elt = document.querySelector('[data-ecl-inpage-navigation]');
var inpageNavigation = new ECL.InpageNavigation(elt);
inpageNavigation.init();
```
```

--------------------------------

### Install @ecl/link with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/link/README.md

Install the ECL Link component package via npm.

```shell
npm install --save @ecl/link
```

--------------------------------

### Install @ecl/spotlight via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/spotlight/README.md

Install the ECL Spotlight npm package using npm. Run this command in your project directory to add the package as a dependency.

```shell
npm install --save @ecl/spotlight
```

--------------------------------

### npm install @ecl/blockquote

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/blockquote/README.md

Install the ECL Blockquote component package via npm.

```APIDOC
## [INSTALL] npm install --save @ecl/blockquote

### Description
Install the ECL Blockquote component package via npm.

### Method
INSTALL

### Endpoint
npm install --save @ecl/blockquote

### Parameters
None

### Request Example
```shell
npm install --save @ecl/blockquote
```

### Response
#### Success Response (200)
- Package installed successfully

#### Response Example
```
+ @ecl/blockquote@version
```
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/media/gallery/docs/api.mdx

Automatically initializes all Gallery components on the page that have the data-ecl-auto-init="Gallery" attribute. Call this method when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all Gallery components on the page that have the `data-ecl-auto-init="Gallery"` attribute. Call this method when the page is ready or on a custom event.

### Method
`autoInit()`

### Usage
Call `ECL.autoInit()` when the page is ready or on a custom event.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### Install @ecl/blockquote with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/blockquote/README.md

Install the ECL Blockquote component package via npm.

```shell
npm install --save @ecl/blockquote
```

--------------------------------

### Manual initialization with ECL.Tooltip

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/tooltip/docs/api.mdx

Get the target element, create an instance of `ECL.Tooltip`, and invoke `init()` to manually initialise the component.

```javascript
var elt = document.body;
var Tooltip = new ECL.Tooltip(elt);
Tooltip.init();
```

--------------------------------

### Install @ecl/breadcrumb with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/breadcrumb/README.md

Install the ECL Breadcrumb component package via npm.

```shell
npm install --save @ecl/breadcrumb
```

--------------------------------

### instance.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/tooltip/docs/api.mdx

Re-initializes a Tooltip instance after it has been destroyed. Use this to update an existing instance.

```APIDOC
## instance.init()

### Description
Re-initializes a Tooltip instance after it has been destroyed. Use this to update an existing instance.

### Method
`instance.init()`

### Usage
Call this method on an existing Tooltip instance to re-initialize it.

### Example
```js
instance.init();
```
```

--------------------------------

### Usage Example

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/table/README.md

Example of using the ECL Table component in a Twig template.

```APIDOC
## Example

### Twig Template
```twig
{% include '@ecl/table/table.html.twig' with { 
  zebra: true, 
  headers: [ 
  [ 
    { label: 'Name' }, 
    { label: 'Registration date' }, 
    { label: 'Languages', colspan: '3' }, 
  ], 
  [ 
    { label: '' }, 
    { label: '' }, 
    { label: 'English' }, 
    { label: 'French' }, 
    { label: 'German' }, 
  ], 
  ], 
  rows: [ 
  [ 
    extra_classes: 'an-extra-class', 
    { label: 'John', 'data-ecl-table-header': 'Name' }, 
    { 
      label: 'September 14, 2013', 
      'data-ecl-table-header': 'Registration date', 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'English', 
      'data-ecl-table-header-group': 'Language', 
      group: true, 
    }, 
    {
      label: 'No', 
      'data-ecl-table-header': 'French', 
      group: true, 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'German', 
      group: true, 
    }, 
  ], 
  [ 
    extra_classes: 'an-extra-class', 
    extra_attributes: 'an-extra-attribute', 
    { label: 'Ron', 'data-ecl-table-header': 'Name' }, 
    { 
      label: 'October 23, 2014', 
      'data-ecl-table-header': 'Registration date', 
    },
    {
      label: 'Yes', 
      'data-ecl-table-header': 'English',
      'data-ecl-table-header-group': 'Language', 
      group: true, 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'French', 
      group: true, 
    },
    {
      label: 'Yes',
      'data-ecl-table-header': 'German', 
      group: true, 
    }, 
  ], 
  [ 
    { label: 'Albert', 'data-ecl-table-header': 'Name' }, 
    {
      label: 'December 13, 2014', 
      'data-ecl-table-header': 'Registration date', 
    }, 
    { 
      label: 'No', 
      'data-ecl-table-header': 'English', 
      'data-ecl-table-header-group': 'Language', 
      group: true, 
    }, 
    { 
      label: 'No', 
      'data-ecl-table-header': 'French', 
      group: true, 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'German', 
      group: true, 
    }, 
  ], 
  [ 
    { label: 'Marcel', 'data-ecl-table-header': 'Name' }, 
    { 
      label: 'January 12, 1995', 
      'data-ecl-table-header': 'Registration date', 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'English', 
      'data-ecl-table-header-group': 'Language', 
      group: true, 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'French', 
      group: true, 
    }, 
    { 
      label: 'Yes', 
      'data-ecl-table-header': 'German', 
      group: true, 
    }, 
  ], 
  ], 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test-1', value: 'data-test-value-1' }, 
    { name: 'data-test-2', value: 'data-test-value-2' } 
  ] 
} %} 
```
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/file/docs/api.mdx

Automatically initializes all FileDownload components on the page that have the data-ecl-auto-init="FileDownload" attribute. Call this method when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all FileDownload components on the page that have the `data-ecl-auto-init="FileDownload"` attribute. Call this method when the page is ready or on a custom event.

### Method
`autoInit()`

### Usage
Call `ECL.autoInit()` when the page is ready or on a custom event.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### Install @ecl/tag package

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/tag/README-tag-set.md

Install the ECL Tag component npm package.

```shell
npm install --save @ecl/tag
```

--------------------------------

### ECL.autoInit

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/forms/select/docs/api.mdx

Automatically initializes all components marked with data-ecl-auto-init attributes on the page. This is a global method from the ECL library.

```APIDOC
## `ECL.autoInit()`

### Description
Automatically initializes all components marked with `data-ecl-auto-init` attributes on the page.

### Parameters
None.

### Returns
None.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### Install @ecl/spinner via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/spinner/README.md

Install the ECL Spinner component package using npm.

```shell
npm install --save @ecl/spinner
```

--------------------------------

### Run pnpm install from root

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/conventions/new-component.md

Run this command from the project root after all files are in place to update the lock file and link the new package.

```bash
pnpm install

```

--------------------------------

### Retrieve an existing instance with ECL.components.get

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/site-wide/site-header/docs/api.mdx

Retrieve an existing instance to update it. Use ECL.components.get(elt) to get the instance.

```javascript
var elt = document.querySelector('.ecl-site-header');
var instance = ECL.components.get(elt);
```

--------------------------------

### Install @ecl/popover via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/popover/README.md

Install the ECL Popover component package using npm.

```shell
npm install --save @ecl/popover
```

--------------------------------

### Install @ecl/rating-field with npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/rating-field/README.md

Install the rating field component package via npm.

```shell
npm install --save @ecl/rating-field
```

--------------------------------

### ECL.autoInit()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/navigation/mega-menu/docs/api.mdx

Automatically initializes all MegaMenu components on the page that have the data-ecl-auto-init attribute. Call this when the page is ready or on a custom event.

```APIDOC
## ECL.autoInit()

### Description
Automatically initializes all MegaMenu components on the page that have the `data-ecl-auto-init` attribute. Call this when the page is ready or on a custom event.

### Method
`autoInit()`

### Usage
Call `ECL.autoInit()` when the page is ready or on a custom event.

### Example
```js
ECL.autoInit();
```
```

--------------------------------

### npm install @ecl/radio

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/radio/README.md

Install the ECL Radio component package via npm.

```APIDOC
## [INSTALL] npm install @ecl/radio

### Description
Install the ECL Radio component package via npm.

### Method
INSTALL

### Endpoint
npm install --save @ecl/radio

### Parameters
None

### Request Example
```shell
npm install --save @ecl/radio
```

### Response
#### Success Response (200)
- **status** (string) - Installation successful

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### instance.init()

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/website/src/pages/ec/components/slogan-ticker/docs/api.mdx

Re-initializes the SloganTicker instance after it has been destroyed.

```APIDOC
## instance.init()

### Description
Re-initializes the SloganTicker instance after it has been destroyed.

### Method
`init()`

### Usage
Call this method to re-enable the component after a destroy.

### Example
```js
instance.destroy();
instance.init();
```
```

--------------------------------

### Installation

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/list-illustration/README.md

Install the @ecl/list-illustration npm package to use the ECL List with illustration component.

```APIDOC
## Installation

### Description
Install the `@ecl/list-illustration` npm package to use the ECL List with illustration component.

### Command
```shell
npm install --save @ecl/list-illustration
```
```

--------------------------------

### ecl-builder.config.js example

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/tools/builder/README.md

Default configuration file read by ecl-builder at project root. Defines scripts, styles, and copy tasks with entry/dest paths and options like sourceMap, minify, and moduleName. Use -c or --config to specify a different file name.

```javascript
const path = require('path');
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  // Compile entry.js
  scripts: [
    {
      entry: path.resolve(__dirname, 'src/entry.js'),
      dest: path.resolve(__dirname, 'dist/output.js'),
      options: {
        sourceMap: isProd ? false : 'inline',
        moduleName: 'myModule',
      },
    },
  ],
  // Compile entry.scss
  styles: [
    {
      entry: path.resolve(__dirname, 'src/entry.scss'),
      dest: path.resolve(__dirname, 'dist/output.css'),
      options: {
        sourceMap: isProd ? 'file' : true,
        minify: true,
      },
    },
  ],
  // Copy files from src to dest
  copy: [
    {
      from: path.resolve(__dirname, 'src/fonts'),
      to: path.resolve(__dirname, 'dist/fonts'),
    },
    {
      from: path.resolve(__dirname, 'src/images'),
      to: path.resolve(__dirname, 'dist/images'),
    },
  ],
};
```

--------------------------------

### Install @ecl/notification via npm

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/notification/README.md

Install the ECL Notification component package using npm.

```shell
npm install --save @ecl/notification
```

--------------------------------

### npm install @ecl/card

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/card/README.md

Install the ECL Card component package via npm.

```APIDOC
## [INSTALL] npm install @ecl/card

### Description
Install the ECL Card component package via npm.

### Method
INSTALL

### Endpoint
npm install --save @ecl/card

### Parameters
None

### Request Example
```shell
npm install --save @ecl/card
```

### Response
#### Success Response (200)
- Package installed successfully

#### Response Example
```
+ @ecl/card@version
```
```

--------------------------------

### Initialize ECL Modal with custom options

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/docs/javascript.md

Shows how to pass custom options (e.g., dismissOnClickOutside, dismissOnEscape) during component initialization.

```javascript
const modal = new ECL.Modal(element, {
  // Custom options
  dismissOnClickOutside: true,
  dismissOnEscape: true,
});
modal.init();
```

--------------------------------

### npm install @ecl/checkbox

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/checkbox/README.md

Install the ECL Checkbox component package via npm.

```APIDOC
## [INSTALL] npm install --save @ecl/checkbox

### Description
Install the ECL Checkbox component package via npm.

### Method
INSTALL

### Endpoint
npm install --save @ecl/checkbox

### Parameters
None

### Request Example
```shell
npm install --save @ecl/checkbox
```

### Response
#### Success Response (200)
- **status** (string) - Installation successful

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### npm install @ecl/button

Source: https://github.com/ec-europa/europa-component-library/blob/v5-dev/src/components/button/README.md

Install the ECL Button component package via npm.

```APIDOC
## [INSTALL] npm install

### Description
Install the ECL Button component package.

### Method
npm install

### Command
npm install --save @ecl/button

```
Tokens:
Raw