open-index/open-npm huggingface dataset:
npm package: @sreyaj/ng-star-rating
Description: A Simple and Customizable SVG based Star Rating Component For Angular
Author: Adithya Sreyaj
Latest version: 2.0.0

# SVG Based Angular Star Rating Component

Simple Rating Component for your next Angular Project. Very simple to setup and use and comes with a lot of customizations.

![User Ratings Card](https://raw.githubusercontent.com/adisreyaj/angular-star-rating/master/src/assets/rating.png)

### Features

- Simple and Easy to Setup
- Ease to use
- SVG based super light
- Material Spec Icons for Standard Feel
- Zero Dependencies
- Supports **half-star** rating
- Supports Rating Mode and also Display only Mode

## How to Use the Component

#### Install the package using the command:

```
npm i @sreyaj/ng-star-rating
```

#### Import the StarRatingModule into your module

```ts
import { StarRatingModule } from '@sreyaj/ng-star-rating';
@NgModule({
  ...
  imports: [StarRatingModule],
  ...
})
export class AppModule {}
```

#### Now you can use the component inside your application

```html
<ngx-star-rating></ngx-star-rating>
```

#### You can now customize it with the following attributes

Eg with few options:

```html
<ngx-star-rating [total]="5" [filledColor]="'#ff0000'"></ngx-star-rating>
```

## Customizations

| Feature       | Description                                                  | Attribute   | Type             | Default |
| ------------- | ------------------------------------------------------------ | ----------- | ---------------- | ------- |
| No of Stars   | You can change the total rating number                       | total       | number           | 5       |
| Display Mode  | Star Rating component can be used to just display the rating | readonly    | boolean          | false   |
| Type of Stars | The component supports filled stars and hollow stars design  | type        | filled or hollow | hollow  |
| Rating Color  | The color for the filled Stars                               | filledColor | string           | #3db700 |
| Rating Color  | The color for the empty Stars                                | emptyColor  | string           | #e0e0e0 |
| Rating Event  | Rating Emitted when user clicks on the rating                | rated       | number           | nil     |

Feel free to open Issues and Pull Requests
npm package: @srfnstack/fntags
Description: <p align="center">   <img alt="fntags header" src="https://raw.githubusercontent.com/SRFNStack/fntags/master/docs/fntags_header.gif"> </p>
Author: Robert Kempton
Latest version: 1.2.6

<p align="center">
  <img alt="fntags header" src="https://raw.githubusercontent.com/SRFNStack/fntags/master/docs/fntags_header.gif">
</p>

---

# fntags

A lightweight, no-build ES6 framework for building fast and reactive web applications.

fntags allows you to build complex, interactive web apps using standard JavaScript and HTML5. No special syntax, no build steps, and no magic.

## Why fntags?

- **No Build Step**: Import the framework directly from a CDN or your file system. No Webpack, no Babel, no headaches.
- **Granular State**: Bind only what needs to change—text, attributes, or styles—for high-performance updates.
- **Standards Based**: Just standard ES6 JavaScript and HTML5. Zero magic syntax to learn.
- **Effortless Debugging**: In fntags, there is no black box. Errors produce clean stack traces that point exactly to your source code.
- **TypeScript Support**: Includes TypeScript definitions out of the box. No need to install separate `@types` packages.
- **Real DOM Elements**: Every element is a real DOM element. No virtual DOM and no wrapper objects.
- **Dynamic Routing**: Built-in path-based routing that only loads files required by each route.

## Documentation

Check out the [full documentation](https://srfnstack.github.io/fntags) to learn more!

## Getting Started

### Option 1: CDN (Recommended for prototyping)

You can use fntags directly in your browser without downloading anything:

```html
<!DOCTYPE html>
<html lang="en">
<body>
    <script type="module">
        import { div } from 'https://cdn.jsdelivr.net/npm/@srfnstack/fntags@1.0.0/src/fnelements.mjs'
        
        document.body.append(
            div("Hello, World!")
        )
    </script>
</body>
</html>
```

### Option 2: NPM

Install via npm:

```bash
npm install @srfnstack/fntags
```

Then import it in your code:

```javascript
import { div } from '@srfnstack/fntags'
```

## Examples

### Re-usable Components

Components in fntags are just functions that return HTML elements.

```javascript
import { div, b } from '@srfnstack/fntags'

// A simple component
const Greeting = (name) => {
    return div( "Hello, ", b(name), "!")
}

document.body.append(
    Greeting("Developer")
)
```

### Explicit State Binding

State binding is explicit and granular. You control exactly what updates.

```javascript
import { fnstate } from '@srfnstack/fntags'
import { div, button } from '@srfnstack/fntags'

const Counter = () => {
    const count = fnstate(0)

    return div(
        div('Count: ', count.bindAs()),
        button({
            onclick: () => count(count() + 1)
        }, 'Increment')
    )
}

document.body.append(Counter())
```

### Benchmark

Check the latest benchmark results in the widely used [JS Web Frameworks Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)!
npm package: @srfnstack/redish
Description: Redis Protocol Object/Document storage in collections
Author: Robert Kempton
Latest version: 0.3.4

## redish

#### What is redish 
redish is a NO->RM (Nice Object to Redis protocol Mapper) that will save your documents to a storage backend that supports
the redis protocol with transactions ( MULTI, EXEC, etc ). Redis or ( Titan + TiKV ) are excellent options.

The primary goal is to provide a typical ORM like experience that uses the redis protocol instead of sql. 

Redish adds collections, which are much like mongo collections, or tables in RDBMS. 

It supports storing and retrieving objects with the data types of properties preserved on retrieval.

## Getting Started
Provide a redis client to initialize the db.

You should use  https://www.npmjs.com/package/redis version 4+.

version 3 will not work for 0.3+ of redish.

Serialization configuration is done once per db. You can create multiple instances of db if you wish.

After creating the db, use the result to create collections. A collection consists of a key prefix and a zset that all keys
are stored in. The zset allows finding all the objects in the collection and provides speedy pagination.

Use the collection object to save, find, and update the collection and objects within it.

By default, a field named 'id' is used as the key to store the object in redis. 

The value of id is prefixed with the collection name and two underscores, i.e. given id='1234', it will store the object using the key stuff__1234.

You can change the id field by passing the option idField to db.collection. I.e. `db.collection('stuff', {idField:'myField'})`

The collection prefix is used for two reasons, first to quickly identify which collection any given key belongs too, and to
ensure uniqueness across collections since there's only a single keyspace in redis.

When loading objects, the key can be passed in with or without the prefix to make some use cases simpler. 
```js
const db = redish.createDb( client )
const stuff = db.collection('stuff')

const saved = stuff.save({
    id: '1234',
    things: [
        {name: 'thing1'},
        {name: 'thing2'}
    ]
})

expect(saved.id).toEqual('stuff__1234')

const loaded = stuff.findOneById(saved.id)

```

## Serialization
Objects are serialized using the jpflat and all fields are serialized to string

### Custom Serialization
All data in redis is stored as a string, so serialization is done by checking the type of the value, and adding a 
prefix of fixed length to every value. This way the data  

If you want to change the way that values are serialized and deserialized, you can provide custom serializers.
This is useful for cases where you want to convert objects of a specific type (i.e. Date) to a string and back.
npm package: @srfnstack/spliffy
Description: > directory based routing with js request handlers and static file serving
Author: snowbldr
Latest version: 1.4.1

# Spliffy

> directory based routing with js request handlers and static file serving

## Getting started
Create a directories for your app

`mkdir -p ~/app/www`

Install spliffy

`cd ~/app && npm install spliffy`

Create a handler for the desired route name 

`vi ~/app/www/spliffy.js`
```js
module.exports = {
    GET: () => ({hello: "spliffy"})
}

```
Create the start script, ```vi ~/app/serve.js``` 
```js
require('spliffy')({routeDir: __dirname+ '/www'})
```

because the routeDir is ~/app/www, the filename `spliffy.js` creates the path `/spliffy`

The object passed to spliffy is the config. See the [Config](#Config) section for more information.

routeDir is the only required property and should be an absolute path.

`10420` is the default port for http, and can be changed by setting the port in the config

start the server
`node ~/app/serve.js`

Go to `localhost:10420/spliffy`

# [Documentation](https://srfnstack.github.io/spliffy/)

#### [Examples](https://github.com/narcolepticsnowman/spliffy/tree/master/example)
npm package: @srgssr/big-replay-button
Description: A big replay button that appears when the media ends, allowing users to easily restart playback. It integrates naturally with video.js, reusing the look and behavior of the standard big play button, and ensuring accessibility support.
Author: SRG SSR
Latest version: 1.0.0

# Pillarbox Web: Big-Replay-Button

A big replay button that appears when the media ends, allowing users to easily restart playback.
It integrates naturally with video.js, reusing the look and behavior of the standard big play
button, and ensuring accessibility support.

## Requirements

To use this component, you need the following installed on your system:

- Node.js

## Quick Start

To get started with this component, install it through the following command:

```bash
npm install --save video.js @srgssr/big-replay-button
```

Once the player is installed you can activate the component as follows:

```javascript
import videojs from 'video.js';
import '@srgssr/big-replay-button';

const player = videojs('my-player', { BigReplayButton: true });
```

To apply the default styling, add the following line to your CSS file:

```css
@import "@srgssr/big-replay-button/dist/big-replay-button.min.css";
```

## Contributing

For detailed contribution guidelines, refer to our [Contributing guide][contributing-guide].
Please adhere to the specified guidelines.

### Setting up a development server

Start the development server:

```bash
npm run start
```

This will start the server on `http://localhost:4200`. Open this URL in your browser to view the
demo page.

The video player (`player`) and the Pillarbox library (`pillarbox`) are exposed on the `window`
object, making it easy to access and manipulate from the browser's developer console for debugging.

#### Available URL parameters

The demo page supports several URL parameters that modify the behavior of the video player:

- `debug`: Set this to enable debugging mode.
- `ilHost`: Specifies the host for the data provider.
- `language`: Sets the language for the player interface.
- `urn`: Specifies the URN of the video to load. Default is `urn:rts:video:14683290`.

You can combine parameters in the URL like so:

```plaintext
http://localhost:4200/?language=fr&urn=urn:rts:video:14318206
```

## Licensing

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more
details.

[contributing-guide]: https://github.com/SRGSSR/pillarbox-web-suite/blob/main/docs/README.md#contributing
npm package: @srgssr/chapters-bar
Description: The `ChaptersBar` component displays a scrollable list of video chapters, allowing users to easily navigate through the content.
Author: SRG SSR
Latest version: 1.0.1

# Pillarbox Web: ChaptersBar

The `ChaptersBar` component displays a scrollable list of video chapters, allowing users to easily navigate through the content.

## Requirements

To use this component, you need the following installed on your system:

- Node.js

## Quick Start

To get started with this component, install it through the following command:

```bash
npm install --save @srgssr/pillarbox-web @srgssr/chapters-bar
```

For instructions on setting up Pillarbox, see
the [Quick Start guide](https://github.com/SRGSSR/pillarbox-web#quick-start).

Once the player is installed you can activate the component as follows:

```javascript
import pillarbox from '@srgssr/pillarbox-web';
import '@srgssr/chapters-bar';

const player = pillarbox('my-player', { chaptersBar: true });
```

To apply the default styling, add the following line to your CSS file:

```css
@import "@srgssr/chapters-bar/dist/chapters-bar.min.css";
```

## API Documentation

### Options

The chapters bar component can be configured with the following options:

| Option           | Type     | Default | Description                                                                                                |
| ---------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `chapterOptions` | `object` | `{}`    | An object containing options to be passed to the underlying `CardLink` components for each chapter. See the Card component documentation for more details. |

## Contributing

For detailed contribution guidelines, refer to our [Contributing guide][contributing-guide].
Please adhere to the specified guidelines.

### Setting up a development server

Start the development server:

```bash
npm run start
```

This will start the server on `http://localhost:4200`. Open this URL in your browser to view the
demo page.

The video player (`player`) and the Pillarbox library (`pillarbox`) are exposed on the `window`
object, making it easy to access and manipulate from the browser's developer console for debugging.

#### Available URL parameters

The demo page supports several URL parameters that modify the behavior of the video player:

- `debug`: Set this to enable debugging mode.
- `ilHost`: Specifies the host for the data provider.
- `language`: Sets the language for the player interface.
- `urn`: Specifies the URN of the video to load. Default is `urn:rts:video:14683290`.

You can combine parameters in the URL like so:

```plaintext
http://localhost:4200/?language=fr&urn=urn:rts:video:14318206
```

## Licensing

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more
details.

[contributing-guide]: https://github.com/SRGSSR/pillarbox-web-suite/blob/main/docs/README.md#contributing
npm package: @srgssr/live-dvr-time-display
Description: Live DVR Time Display is a component that overrides the default behaviors of the video.js `CurrentTimeDisplay` and `TimeTooltip` components, allowing to display the time corresponding to the position in the progress bar in a live stream with DVR.
Author: SRG SSR
Latest version: 1.0.0

# Pillarbox Web: Live DVR Time Display

Live DVR Time Display is a component that overrides the default behaviors of the video.js
`CurrentTimeDisplay` and `TimeTooltip` components, allowing to display the time
corresponding to the position in the progress bar in a live stream with DVR.

> [!NOTE]
> The seconds have been deliberately removed from the `CurrentTimeDisplay`
> display to avoid any sudden changes that may occur when the buffer is updated.
> `TimeTooltip` displays the seconds when the mouse is over the progress bar.

## Requirements

To use this component, you need the following installed on your system:

- Node.js

## Quick Start

To get started with this component, install it through the following command:

```bash
npm install --save video.js @srgssr/live-dvr-time-display
```

Once the player is installed you can activate the component as follows:

```javascript
import videojs from 'video.js';
import '@srgssr/live-dvr-time-display';

const player = videojs('my-player');
```

To apply the default styling, add the following line to your CSS file:

```css
@import "@srgssr/live-dvr-time-display/dist/live-dvr-time-display.min.css";
```

## Contributing

For detailed contribution guidelines, refer to our [Contributing guide][contributing-guide].
Please adhere to the specified guidelines.

### Setting up a development server

Start the development server:

```bash
npm run start
```

This will start the server on `http://localhost:4200`. Open this URL in your browser to view the
demo page.

The video player (`player`) and the Pillarbox library (`pillarbox`) are exposed on the `window`
object, making it easy to access and manipulate from the browser's developer console for debugging.

#### Available URL parameters

The demo page supports several URL parameters that modify the behavior of the video player:

- `debug`: Set this to enable debugging mode.
- `ilHost`: Specifies the host for the data provider.
- `language`: Sets the language for the player interface.
- `urn`: Specifies the URN of the video to load. Default is `urn:rts:video:14683290`.

You can combine parameters in the URL like so:

```plaintext
http://localhost:4200/?language=fr&urn=urn:rts:video:14318206
```

## Licensing

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more
details.

[contributing-guide]: https://github.com/SRGSSR/pillarbox-web-suite/blob/main/docs/README.md#contributing
npm package: @srgssr/skip-button
Description: A button to skip certain parts of the content, such as opening credits or end credits
Author: SRG SSR
Latest version: 1.1.0

# Pillarbox Web: SkipButton

A custom component that extends the pillarbox-web player allowing users to skip certain parts of the
video content, such as opening credits or end credits, by listening to
the [`srgssr/interval` event](https://web.pillarbox.ch/api/tutorial-Events.html#srgssr%2Finterval-event).

## Requirements

To use this component, you need the following installed on your system:

- Node.js

## Quick Start

To get started with this component, install it through the following command:

```bash
npm install --save @srgssr/pillarbox-web @srgssr/skip-button
```

For instructions on setting up Pillarbox, see
the [Quick Start guide](https://github.com/SRGSSR/pillarbox-web#quick-start).

Once the player is installed you can activate the button as follows:

```javascript
import Pillarbox from '@srgssr/pillarbox-web';
import '@srgssr/skip-button';

const player = new Pillarbox('my-player', { SkipButton: true });
player.src({
  src: 'urn:swi:video:48115940',
  type: 'srgssr/urn'
});
```

To apply the default styling, add the following line to your CSS file:

```css
@import "@srgssr/skip-button/dist/skip-button.min.css";
```

## Contributing

For detailed contribution guidelines, refer to our [Contributing guide][contributing-guide].
Please adhere to the specified guidelines.

### Setting up a development server

Start the development server:

```bash
npm run start
```

This will start the server on `http://localhost:4200`. Open this URL in your browser to view the
demo page.

The video player (`player`) and the Pillarbox library (`pillarbox`) are exposed on the `window`
object, making it easy to access and manipulate from the browser's developer console for debugging.

#### Available URL parameters

The demo page supports several URL parameters that modify the behavior of the video player:

- `debug`: Set this to enable debugging mode.
- `ilHost`: Specifies the host for the data provider.
- `language`: Sets the language for the player interface.
- `urn`: Specifies the URN of the video to load. Default is `urn:rts:video:14683290`.

You can combine parameters in the URL like so:

```plaintext
http://localhost:4200/?language=fr&urn=urn:rts:video:14318206
```

## Licensing

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more
details.

[contributing-guide]: https://github.com/SRGSSR/pillarbox-web-suite/blob/main/docs/README.md#contributing
npm package: @srgssr/web-suite-utils
Description: `@srgssr/web-suite-utils` is a lightweight utility library used across Pillarbox Web components and plugins. It contains shared helper functions and modules designed to reduce duplication and promote consistency across the suite.
Author: SRG SSR
Latest version: 1.0.0

# Pillarbox Web: WebSuiteUtils

`@srgssr/web-suite-utils` is a lightweight utility library used across Pillarbox Web components and
plugins. It contains shared helper functions and modules designed to reduce duplication and promote
consistency across the suite.

## Requirements

To use this component, you need the following installed on your system:

- Node.js

## Quick Start

To get started with this component, install it through the following command:

```bash
npm install --save @srgssr/web-suite-utils
```

## API Documentation

### `loadSvgElement(icon)`

Resolves an icon source to an `SVGElement`. Useful for dynamic or flexible icon handling.

| Parameter | Type                          | Description                                                                                          |
|-----------|-------------------------------|------------------------------------------------------------------------------------------------------|
| `icon`    | `SVGElement \| string \| URL` | Source of the SVG. Can be an actual `SVGElement`, a raw SVG string, a URL string, or a `URL` object. |

**Returns:**
A `Promise<SVGElement>` resolving to the parsed and validated SVG element.

**Throws:**
If the input is of an unsupported type or the SVG cannot be parsed (e.g., malformed XML, unreachable
URL, or invalid root tag).

#### Icon Input Formats

The utility supports a variety of input formats:

- SVGElement
  ```js
  const myIcon = document.querySelector('svg');
  const svg = await loadSvgElement(myIcon); // Returned as-is
  ```

- Inline SVG string
  ```js
  const svg = await loadSvgElement('<svg><rect width="20" height="20" /></svg>');
  ```

- URL (string or URL object)
 ```js
  const svg = await loadSvgElement('https://example.com/icon.svg');

  // Or with a URL object
  const iconUrl = new URL('https://example.com/icon.svg');
  const svg = await loadSvgElement(iconUrl);
  ```

## Contributing

For detailed contribution guidelines, refer to our [Contributing guide][contributing-guide].
Please adhere to the specified guidelines.

## Licensing

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more
details.

[contributing-guide]: https://github.com/SRGSSR/pillarbox-web-suite/blob/main/docs/README.md#contributing