# TEMS Components

[![npm](https://img.shields.io/npm/v/@startinblox/components-tems)](https://www.npmjs.com/package/@startinblox/components-tems)
[![stable](https://img.shields.io/gitlab/v/tag/components%2Fsolid-tems?gitlab_url=https%3A%2F%2Fgit.startinblox.com&sort=semver&label=stable)](https://git.startinblox.com/components/solid-tems/)
[![latest](https://img.shields.io/gitlab/v/tag/components/solid-tems?gitlab_url=https://git.startinblox.com&label=latest)](https://git.startinblox.com/components/solid-tems/)

## Table of Contents

1. [Introduction](#introduction)
2. [Components](#components)
    * [UI Components](#ui-components)
    * [Orbit Components](#orbit-components)
3. [Installation](#installation)
4. [Development](#development)
5. [Tests](#tests)
6. [Storybook](#storybook)
7. [Build](#build)
8. [License](#license)

## Introduction

This library provides a set of Lit components for building user interfaces in TEMS (Trusted European Media data Space) ecosystem. It includes a variety of UI components, form elements, and layout components, all designed to be reusable and customizable.

## Components

### UI Components

* `tems-active-tags`
* `tems-avatar`
* `tems-badge`
* `tems-breadcrumb`
* `tems-breadcrumb-divider`
* `tems-breadcrumb-item`
* `tems-button`
* `tems-card-catalog`
* `tems-card-service`
* `tems-checkbox`
* `tems-datepicker`
* `tems-datepicker-item`
* `tems-defined-field`
* `tems-division`
* `tems-dropdown`
* `tems-dropdown-item`
* `tems-filter-item`
* `tems-filter-sidebar`
* `tems-header`
* `tems-input`
* `tems-input-field`
* `tems-input-posttab`
* `tems-input-pretab`
* `tems-label`
* `tems-modal`
* `tems-profile-card`
* `tems-search-bar`
* `tems-sidebar`
* `tems-sidebar-item`
* `tems-sidebar-section`
* `tems-slider`
* `tems-tab-item`
* `tems-tag`
* `tems-tag-action`
* `tems-textarea`
* `tems-toggle`
* `tems-vertical-accordion`

### Orbit Components

* `tems-catalog`
* `tems-catalog-data-holder`
* `tems-catalog-filter-holder`
* `tems-mediatrendexplorer`
* `tems-mediatrendexplorer-content`
* `tems-notification`
* `tems-viewport`
* `cache-improver`

## 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("your-lang-code");
```

### Getting current locale

To get the current locale, run:

```javascript
window.getLocale();
```

## License

[MIT](LICENSE)