open-index/open-npm huggingface dataset:
npm package: @hart/modmap
Description: modmap: easy access key/value store with tags
Author: Mark Zepeda
Latest version: 0.1.4

# modmap

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/@hart/modmap.svg?style=flat-square
[npm]: https://www.npmjs.com/package/@hart/modmap

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

# Install

```
npm install @hart/modmap
```

# Usage

## exported functions

```
import { set, get, all, byTag, getTags, unset, clear } from '@hart/modmap';

//default import is 'get'
import get from '@hart/modmap';
```

## set - Set value with a key

```
const value = { ... };

set('key', value);
```

## set - Set value with a key and tag(s)

```
const value = { ... };

set('key', value, 'tag1', 'tag2', 'tag3');
```

## get - Get value by key

```
set('key1', { ... });

const value = get('key'); // { ... }
const noValue = get('badKey'); // null
```

## all - Get all key/values

```
set('key1', { ... });
set('key2', { ... });

const allKeyValues = all(); // { key1: {}, key2: {} }
```

## byTag - Get key/values by tag

```
set('key1', { ... }, 'tag1');
set('key2', { ... }, 'tag1', 'tag2');

const tag1Values = byTag('tag1'); // { key1: {}, key2: {} }
const tag2Values = byTag('tag2'); // { key2: {} }
const tag3Values = byTag('tag3'); // { }
```

## getTags - Get all tags

```
set('key1', { ... }, 'tag1');
set('key2', { ... }, 'tag1', 'tag2');

const tags = getTags(); // [ "tag1", "tag2" ]
```

## unset - Remove a key/value

```
set('key1', { ... }, 'tag1');
set('key2', { ... }, 'tag1');

unset('key1');

const value = get('key1'); // null
const valuesByTag = byTag('tag1'); // { key2: {} }
```

## clear - Remove all key/values and clears all tags

```
set('key1', { ... }, 'tag1');
set('key2', { ... }, 'tag1', 'tag2');

clear();

const value = get('key1'); // null
const allKeyValues = all(); // { }
const allTags = getTags(); // [ ]
```

## Author

- [Mark Zepeda](https://github.com/markario)
npm package: @hartings/la-example
Description: Webcomponent la-example following open-wc recommendations
Author: Robert Hartings
Latest version: 1.0.5

# \<la-example>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation and is used to showcase the possiblities of web components.

## Installation

```bash
yarn add "@hartings/la-example"
```

## Usage

The default export provides the Web Component class and does not register the web component itself. This approach prevents side-effects and gives you direct access to the Web Component. To use the Web Component in your HTML, you need to register it yourself. The following code provides a simple example:

```html
<script type="module">
  import { LaExample } from '@hartings/la-example';
  window.customElements.define('la-example', LaExample);
</script>

<la-example></la-example>
<la-example header="My Custom Header"></la-example>
<la-example counter="20"></la-example>
```

If you prefer to use the web component without defining it yourself, you can adjust the import as follows:

```html
<script type="module">
  import '@hartings/la-example/la-example.js';
</script>

<la-example></la-example>
<la-example header="My Custom Header"></la-example>
<la-example counter="20"></la-example>
```

## API Properties
The la-example Web Component uses reactive properties for configuration.

* header: string -> Add your own header content to the Web Component, defaults to "World"
* counter: number -> Initial value for button click counter, defaults to 0

You can also insert custom HTML into the la-example Web Component. Since the Web Component uses slots, you can place your custom HTML inside the <la-example> tags:

```html
<la-example>
  <img src="./example.jpg" alt="My example Image" />
</la-example>
```

## Testing with Web Test Runner

To execute a single test run for the web component, use:

```bash
yarn test
```

To run the tests in interactive watch mode run:

```bash
yarn test:watch
```

## Local Demo with `web-dev-server`

```bash
yarn start
```

To run a local development server that serves the basic demo located in `demo/index.html`

## Troubleshooting

* tslib not found: please add this to your dev dependencies
```bash
yarn add tslib --dev
```
* counter is not understand as a number: In plain JS this should not happen, in frameworks like Vue, please use in this case a variable set to your number
npm package: @hartings/la-tabs
Description: Webcomponent la-tabs for a simple tab system following open-wc recommendations
Author: Robert Hartings
Latest version: 1.0.8

# \<la-tabs>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation. This web component creates a tabbed interface by dynamically generating tabs.

## Installation

```bash
yarn add "@hartings/la-tabs"
```

## Usage

The default export provides the Web Component class and does not register the web component itself. This approach prevents side-effects and gives you direct access to the Web Component. To use the Web Component in your HTML, you need to register it yourself. The following code provides a simple example:

```html
<script type="module">
  import { LaTabs } from '@hartings/la-tabs';
  window.customElements.define('la-tabs', LaTabs);
</script>

<la-tabs>
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>
```

If you prefer to use the web component without defining it yourself, you can adjust the import as follows:

```html
<script type="module">
  import '@hartings/la-tabs/la-tabs.js';
</script>

<la-tabs>
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>
```

## Configuration
### Add Tabs
To add a tab to the tab system, please add a HTML element with a slot name inside the la-tabs element. Each HTML element must have a unique slot attribute set (e.g. slot="Tab 1")! Without a slot name, the element will not be accessible through the tab navigation and will not be displayed. If two elements have the same name both entries will be displayed in the navigation, but both navigation entries will show the content of the first element, the other content is inaccessible.

```html
<ELEMENT slot="UNIQUE NAME"></ELEMENT>
```
### Default open Tab

To set the tab that is open by default you can add selectedTab="NAME" to the la-tabs element. The Name is case-sensitive and has to be an exact match to a slot name of a child element. The selectedTab can be dynamically updated.

```html
<la-tabs selectedTab="Tab 1">
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>
```

### Styling

The Web Component have a default style which can be overwritten using the CSS :part pseudo-selector. You cannot just pass down styling to the shadow dom, please use the pseudo-selector
```css
la-tabs::part(KEYWORD)
```
with the following KEYWORD:
* tabs: General Navigation
* tab: Navigation Item
* tab-selected: Active Navigation Item
* content: Content of the selected Item


## Troubleshooting

* tslib not found: please add this to your dev dependencies
```bash
yarn add tslib --dev
```

# Further Development of Web Component 
## Testing with Web Test Runner

To execute a single test run:

```bash
yarn test
```

To run the tests in interactive watch mode run:

```bash
yarn test:watch
```

## Local Demo with `web-dev-server`

```bash
yarn start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @hartmannindustries/azure-media-player
Description: Azure Media Player Component for React.
Author: Hartmann Industries
Latest version: 1.0.4

# React Azure Media Player

This package is a React wrapper for Azure Media Player, providing an easy way to integrate the player into React applications.

## Install

```bash
npm install --save @hartmannindustries/azure-media-player
```

## Usage

```jsx
import React from 'react';
import { AzureMP } from '@hartmannindustries/azure-media-player';

const Example = () => (
  <AzureMP
     skin="amp-flush"
     src={[
        {
          src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", 
          type: "application/vnd.ms-sstr+xml" 
        }
      ]}
   />
)
```

## Playlist

Playlist support

```jsx
import React from 'react';
import { AzureMP } from '@hartmannindustries/azure-media-player';

const Example = () => (
  <AzureMP
     skin="amp-flush"
     playlist={{
        clips: [
            {
                isAd: false,
                name: 'Clip Name 2',
                offset: 0,
                parent: {
                    name: 'My Clip 2',
                    source: {
                        src: 'http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest',
                        type: 'application/vnd.ms-sstr+xml',
                    }
                }
            }, {
                isAd: false,
                name: 'Clip Name',
                offset: 0,
                parent: {
                    name: 'My Clip',
                    source: {
                        src: 'http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest',
                        type: 'application/vnd.ms-sstr+xml'
                    }
                }
            }
        ],
        name: 'My Playlist'
    }}
   />
)
```



## SSR
Supports server-side rendering