open-index/open-npm huggingface dataset:
npm package: @processpuzzle/testbed
Description: Test application for @processpuzzle libraries
Latest version: 1.0.1

# ProcessPuzzle Testbed
![Build and Test](https://github.com/ZsZs/processpuzzle/actions/workflows/build-testbed.yml/badge.svg)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=processpuzzle_testbed&metric=alert_status)](https://sonarcloud.io/summary?id=processpuzzle_testbed&branch=develop)
[![Node version](https://img.shields.io/npm/v/%40processpuzzle%2Ftestbed?style=flat)](https://www.npmjs.com/package/@processpuzzle/testbed)

This is a test application for the libraries under the @processpuzzle organization. For more explanation see the [live demo app](https://testbed.processpuzzle.de/home).
All the source code you can find in the [GitHub repository](https://github.com/ZsZs/processpuzzle).

### Currently the following libraries are available:
- [@processpuzzle/util](https://github.com/ZsZs/processpuzzle/tree/develop/libs/util)
- [@processpuzzle/widgets](https://github.com/ZsZs/processpuzzle/tree/develop/libs/widgets)
- [@processpuzzle/auth](https://github.com/ZsZs/processpuzzle/tree/develop/libs/auth)
- [@processpuzzle/base-entity](https://github.com/ZsZs/processpuzzle/tree/develop/libs/base-entity)
npm package: @processpuzzle/widgets
Description: ![Build and Test](https://github.com/ZsZs/processpuzzle/actions/workflows/build-widgets.yml/badge.svg) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=processpuzzle_widgets&metric=alert_status)](https://sonarcloud.io/summa
Latest version: 0.2.4

# @processpuzzle/widgets
![Build and Test](https://github.com/ZsZs/processpuzzle/actions/workflows/build-widgets.yml/badge.svg)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=processpuzzle_widgets&metric=alert_status)](https://sonarcloud.io/summary?id=processpuzzle_widgets)
[![Node version](https://img.shields.io/npm/v/%40processpuzzle%2Fwidgets?style=flat)](https://www.npmjs.com/package/@processpuzzle/widgets)

This library provides a range of small widgets that can be built into an Angular application. These widgets primarily define UI elements 
but also domain classes or signal stores. Some of them are even persistent, so they need appropriate configuration to access the backend.

## Language Selector Component
The **LanguageSelector** is an Angular component designed to allow users to select their preferred language in an application. It integrates seamlessly with the Transloco library for internationalization and supports dynamic updates of the application's language.

### Features
- **Language Selection**: Allows switching between predefined languages.
- **Integration with Transloco**: Updates active language using `TranslocoService`.
- **Dynamic Label Translation**: Displays localized language names.
- **Single Selection**: Users can select only one language at a time.
- **Customizable Options**: Easily configure available languages and their labels.
### Setup and Usage
#### Installation
Ensure that you have the required dependencies for Angular Material and Transloco installed:
```
npm install @angular/material @jsverse/transloco
```
### Template Example
Add the `LanguageSelector` component to your application:
```xhtml
<pp-language-selector [languages]="languages" [selectedLanguage]="selectedLanguage"></pp-language-selector>
```
### Component Configuration
#### Input Properties

| Input | Type | Description |
| --- | --- | --- |
| `languages` | `Array` | An array of available language objects. Each object should include `code`, `label`, and `flag`. |
| `selectedLanguage` | `string` | The current active language code. This value indicates which language is selected by default. |
Example Language Configuration:

## Like Button Component

## Navigate Back Button Component

## Share Button Component