open-index/open-npm huggingface dataset:
npm package: @neovici/cfg
Description: Configuration for Neovici packages
Author: Neovici dev
Latest version: 2.11.1

# cfg
Neovici frontend development configuration

# nix flakes
See https://nixos.wiki/wiki/Flakes

## usage
```
# basic shell
nix develop github:Neovici/nix

# test shell
nix develop github:Neovici/nix#testShell --impure -c 'npm test'
```
npm package: @neovici/computing-lit-element
Description: Add computed properties to LitElement
Author: Neovici
Latest version: 0.4.0

# \<computing-lit-element>
##### Adds computed properties functionality to LitElement.<p>
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i computing-lit-element
```

## Usage
```html
<script type="module">
  import ComputingLitElement from 'computing-lit-element';
  
  class MyElement extends ComputingLitElement {
  	static get properties() {
    	return {
        	property1: {
            	type: Number
            },
           	property2: {
            	type: Number
            },
            computedProperty: {
            	type: Number,
                computed: 'computeComputedProperty(property1, property2)'
            }
       	};
    }
    constructor() {
    	super();
        this.property1 = 10;
        this.property2 = 5;
    }
    computeComputedProperty(property1, property2) {
    	return property1 * property2;
    }
  }
</script>
```
##### Or use the mixin
```
<script type="module">
  import computingMixin from 'computing-lit-element';
  import { LitElement } from 'lit-element';
  
  const ComputingLitElement = computingMixin(LitElement);
  ...
```

## Testing using karma (if applied by author)
```bash
npm run test
```

## Testing using karma via browserstack (if applied by author)
```bash
npm run test:bs
```

## Linting (if applied by author)
```bash
npm run lint
```
npm package: @neovici/cosmoz-autocomplete
Description: A autocomplete input web component
Latest version: 13.5.1

# cosmoz-autocomplete

[![Build Status](https://github.com/Neovici/cosmoz-autocomplete/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-autocomplete/actions?workflow=Github+CI)
[![Depfu](https://badges.depfu.com/badges/c887733c2e1b6c70285860279a80fa03/overview.svg)](https://depfu.com/github/Neovici/cosmoz-autocomplete?project_id=9639)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Maintainability](https://api.codeclimate.com/v1/badges/56671dc0a46898d2f539/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-autocomplete/maintainability)
[![codecov](https://codecov.io/gh/Neovici/cosmoz-autocomplete/branch/master/graph/badge.svg?token=Pg5yXQH7wS)](https://codecov.io/gh/Neovici/cosmoz-autocomplete)

## &lt;cosmoz-autocomplete&gt;

**cosmoz-autocomplete** is a haunted auto-complete component.

## Getting started

### Installing

Using npm:

```bash
npm install --save @neovici/cosmoz-autocomplete
```

### Usage

```javascript
import { html } from 'lit-html';
html`<cosmoz-autocomplete .source=${['A', 'B', 'C', 'D']} />`;
```
npm package: @neovici/cosmoz-bottom-bar
Description: A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.
Author: Neovici Development
Latest version: 11.0.1

cosmoz-bottom-bar
==================

[![Build Status](https://github.com/Neovici/cosmoz-bottom-bar/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-bottom-bar/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-bottom-bar)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Depfu](https://badges.depfu.com/badges/8b56008467d80932f1a2deecefa0728c/overview.svg)](https://depfu.com/github/Neovici/cosmoz-bottom-bar?project_id=9732)

## &lt;cosmoz-bottom-bar&gt;

**cosmoz-bottom-bar** is a responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.

Example:

<!---
```
<custom-element-demo>
	<template>
		<script src="../webcomponentsjs/webcomponents-lite.js"></script>
		<link rel="import" href="cosmoz-bottom-bar.html">
		<link rel="import" href="../paper-button/paper-button.html">
		<style>
			body {
				background-color: lightblue;
				font-family: sans-serif;
				margin: 0;
				height: 100vh;
				flex-direction: column;
				display: flex;
			}
			p {
				margin: 40px 0;
			}
		</style>
		<next-code-block></next-code-block>
	</template>
</custom-element-demo>
```
-->
```html
<div style="padding: 0 18px;">
	<h3>Sample page</h3>
	<p>Nam non enim vitae mauris pharetra semper nec sed lectus.</p>
	<p>Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.</p>
	<p>Nulla pulvinar justo vel sodales sollicitudin.</p>
	<p>Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.</p>
	<p>Proin finibus elit libero, vitae scelerisque lacus maximus ac.</p>
	<p>Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.</p>
	<p>Duis nec placerat mauris, at tincidunt libero.</p>
	<p>Nullam non magna eget mauris porta tempor.</p>
	<p>Proin non sagittis enim.</p>
	<p>Sed pharetra ante ipsum, in porta dolor sagittis non.</p>
	<p>Cras odio quam, pretium consectetur finibus eu, elementum at risus.</p>
	<p>Proin feugiat vitae sem eu imperdiet.</p>
</div>
<cosmoz-bottom-bar active>
	<div slot="info">5 dummy actions</div>
	<paper-button>Action 1</paper-button>
	<paper-button>Action 2</paper-button>
	<paper-button>Action 3</paper-button>
	<paper-button>Action 4</paper-button>
	<paper-button>Action 5</paper-button>
</cosmoz-bottom-bar>
```
npm package: @neovici/cosmoz-charts
Description: Create beautiful charts using billboard.js
Author: Cristian Necula
Latest version: 5.6.0

[![Build Status](https://github.com/Neovici/cosmoz-charts/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-charts/actions?workflow=Github+CI)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)


# \<cosmoz-charts\>

Create beautiful charts using billboard.js

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @neovici/cosmoz-command-menu
Description: A data-driven command menu web component with search, groups, and keyboard navigation
Author: Neovici Development
Latest version: 1.0.0

# cosmoz-command-menu

A data-driven command menu web component with search, groups, and keyboard navigation.

## Install

```sh
npm install @neovici/cosmoz-command-menu
```

## Usage

```js
import '@neovici/cosmoz-command-menu';
```

```html
<cosmoz-command-menu
  .source=${[
    { label: 'Copy', value: 'copy' },
    { label: 'Edit', value: 'edit' },
    { label: 'Delete', value: 'delete' },
  ]}
  searchable
  @select=${(e) => console.log(e.detail.item)}
></cosmoz-command-menu>
```

### With cosmoz-dropdown-next

```js
import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
import '@neovici/cosmoz-command-menu';
```

```html
<cosmoz-dropdown-next>
  <button slot="button">Open</button>
  <cosmoz-command-menu .source=${items} searchable></cosmoz-command-menu>
</cosmoz-dropdown-next>
```

### Source

The `source` prop accepts:

- `MenuItem[]` — static array
- `Promise<MenuItem[]>` — async
- `(query: string) => MenuItem[] | Promise<MenuItem[]>` — function

### Keyboard navigation

Register the built-in keybindings in your app:

```js
import { useKeybindings } from '@neovici/cosmoz-utils/keybindings';
import { menuBindings } from '@neovici/cosmoz-command-menu/menu-keybindings';

useKeybindings(menuBindings);
```
npm package: @neovici/cosmoz-data-nav
Description: [![Build Status](https://travis-ci.org/Neovici/cosmoz-data-nav.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-data-nav)
Latest version: 7.2.1

[![Build Status](https://github.com/Neovici/cosmoz-data-nav/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-data-nav/actions?workflow=Github+CI)
[![Sauce Test Status](https://saucelabs.com/buildstatus/nomego)](https://saucelabs.com/u/nomego)
[![Code Climate](https://codeclimate.com/github/codeclimate/codeclimate/badges/gpa.svg)](https://codeclimate.com/github/Neovici/cosmoz-data-nav)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-data-nav)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

# &lt;cosmoz-data-nav&gt;

`<cosmoz-data-nav>` is a navigator that can be used to display items from a list one at time.

<!--
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="cosmoz-data-nav.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<cosmoz-data-nav>
</cosmoz-data-nav>
```

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

### Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs][sauce_homepage]

[![Sauce Test Status](https://saucelabs.com/browser-matrix/nomego.svg)](https://saucelabs.com/u/nomego)

[sauce_homepage]: https://saucelabs.com
npm package: @neovici/cosmoz-dialog
Description: Cosmoz dialog component built with pionjs
Latest version: 5.0.0

# cosmoz-dialog

Cosmoz dialog component built with pionjs

> **Note:** This package was previously published as `@neovici/cosmoz-dialog-next`. Starting from v4.0.0, it replaces the old Polymer-based `@neovici/cosmoz-dialog` (v3.x and earlier).
npm package: @neovici/cosmoz-grouped-list
Description: [![Build Status](https://travis-ci.org/Neovici/cosmoz-grouped-list.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-grouped-list)
Author: Neovici Development
Latest version: 8.0.0

cosmoz-grouped-list
====================

![Build Status](https://github.com/Neovici/cosmoz-grouped-list/workflows/Github%20CI/badge.svg)
npm package: @neovici/cosmoz-i18next
Description: A behavior extending the i18next internationalization-framework by providing useful translation functionalities.
Author: Neovici Development
Latest version: 3.5.2

cosmoz-i18next
=================

[![Build Status](https://travis-ci.org/Neovici/cosmoz-i18next.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-i18next)


[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-i18next)

## &lt;cosmoz-i18next&gt;

**cosmoz-i18next** is a behavior extending the I18next
internationalization-framework by providing useful translation functionalities.
This component does not contain any visual element.
npm package: @neovici/cosmoz-image-viewer
Description: [![Build Status](https://travis-ci.org/Neovici/cosmoz-image-viewer.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-image-viewer)
Latest version: 8.6.4

cosmoz-image-viewer
===================

[![Build Status](https://github.com/Neovici/cosmoz-image-viewer/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-image-viewer/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-image-viewer)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![codecov](https://codecov.io/gh/Neovici/cosmoz-image-viewer/branch/master/graph/badge.svg?token=l5LdrbgSSe)](https://codecov.io/gh/Neovici/cosmoz-image-viewer)

# &lt;cosmoz-image-viewer&gt;

**cosmoz-image-viewer** is an element for displaying images in a carousel while
being able to detach the currently selected image into another window, zooming
and activating a fullscreen mode.

`<cosmoz-image-viewer>`

Example:

<!--
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="cosmoz-image-viewer.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<cosmoz-image-viewer show-nav show-fullscreen show-zoom show-detach
images='["demo/images/stockholm.jpg", "demo/images/strasbourg.jpg"]'>
</cosmoz-image-viewer>
```

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @neovici/cosmoz-moment
Description: A Polymer component for centralized management of Moment.js with locale change distributed notification.
Author: Neovici Development
Latest version: 3.0.2

cosmoz-moment
=============

[![Build Status](https://github.com/Neovici/cosmoz-moment/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-moment/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

`cosmoz-moment` is a Polymer component for centralized management of Moment.js
with locale change distributed notification.

## Example

```html
<dom-bind>
	<template is="dom-bind">
		<paper-dropdown-menu label="Locale" value="{{ locale }}">
			<paper-listbox class="dropdown-content" slot="dropdown-content" selected="0">
				<paper-item>en</paper-item>
				<paper-item>fr</paper-item>
				<paper-item>sv</paper-item>
			</paper-listbox>
		</paper-dropdown-menu>
		<cosmoz-moment locale="[[ locale ]]"></cosmoz-moment>
		<div class="message">
			<div><b>Page was loaded</b> <cosmoz-moment-timeago></cosmoz-moment-timeago><br/></div>
			<div><b>Polymer was created</b> <cosmoz-moment-timeago date="2015-05-27"></cosmoz-moment-timeago><br/></div>
		</div>
	</template>
</dom-bind>
```

## Usage

### Install

`bower install --save Neovici/cosmoz-moment`

### Add the cosmoz-moment import
```html
<link rel="import" href="bower_components/cosmoz-moment/cosmoz-moment.html" />
<link rel="import" href="bower_components/cosmoz-moment/cosmoz-moment-timeago.html" />
```

### Use it inside your element

`cosmoz-moment` should only be used once per app to manage the locale and moment.js.

`cosmoz-moment-timeago` can be used within elements, or directly in the app, multiple times.

```html
<cosmoz-moment locale="[[locale]]"></cosmoz-moment>
<cosmoz-moment-timeago date="2017-06-15"></cosmoz-moment-timeago>
```

## Documentation

See [docs](http://neovici.github.io/cosmoz-moment) for more details

## License

cosmoz-moment is created under the terms of the [Apache-2.0](https://github.com/Neovici/cosmoz-moment/blob/master/LICENSE) license.
npm package: @neovici/cosmoz-omnitable
Description: [![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)
Author: Neovici Development
Latest version: 18.2.0

# cosmoz-omnitable

[![Build Status](https://github.com/Neovici/cosmoz-omnitable/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-omnitable/actions?workflow=Github+CI)
[![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
npm package: @neovici/cosmoz-omnitable-treenode-column
Description: A column for cosmoz-omnitable that displays a tree node.
Latest version: 11.0.0

# \<cosmoz-omnitable-treenode-column\>

[![Github CI](https://github.com/Neovici/cosmoz-omnitable-treenode-column/actions/workflows/ci.yml/badge.svg)](https://github.com/Neovici/cosmoz-omnitable-treenode-column/actions/workflows/ci.yml)

cosmoz-omnitable column to display a tree node

## Install

To install run `npm i -P @neovici/cosmoz-omnitable-treenode-column`.
npm package: @neovici/cosmoz-page-router
Description: A Polymer component to handle client side URL routing and view loading / management
Latest version: 9.0.0

cosmoz-page-router
==================

[![Build Status](https://github.com/Neovici/cosmoz-page-router/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-page-router/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-page-router)
[![Depfu](https://badges.depfu.com/badges/c887733c2e1b6c70285860279a80fa03/overview.svg)](https://depfu.com/github/Neovici/cosmoz-page-router?project_id=9639)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## &lt;cosmoz-page-router&gt;

**cosmoz-page-router** is a haunted component to handle client side URL routing
and view loading / management.

By default **cosmoz-page-router** listens to `popstate` event
, gets current location href and matches it against the routes defined.

## Getting started

### Installing

Using npm:
```bash
npm install --save @neovici/cosmoz-page-router
```

### Importing

The **cosmoz-page-router** element can be imported using:
```javascript
import '@neovici/cosmoz-page-router/cosmoz-page-router';
```

## Usage

### Routes
Routes are defined as an Array of Objects:
``` javascript
import { html } from 'lit-html';
import { creteElement, navigate } from '@neovici/cosmoz-page-router/lib/use-routes';

const routes = [
	{
		name: 'home', // optional (can be used to identity the route),
		rule: /^\/$/iu/, // a Regexp used to matched the route,
		handle: ({
			url, // the current url string ( that matched the route)
			match, // the result of matching route against the rule,
		}) => html`<home />`
	},
	{
		name: 'some-page',
		rule: (url) => url.startsWith('/some-page'), // function called with current url string
		handle: ({ url })=>import('page.js')
			.then(()=> createElement('some-element', Object.fromEntries(url.searchParams)))
	},
	{
		name: 'redirect',
		rule: /^\/some\-redirect$/iu,
		handle: ()=> navigate('#!/', null, {
			replace: true, // true to use replaceState,false to use pushState,
			notify: true // true to dispatch a `popstate` event
		})
	}
];
```
and passed to cosmoz-page-router:

``` javascript
html`<cosmoz-page-router .routes=${routes} />`;
```


## Documentation

See http://neovici.github.io/cosmoz-page-router (outdated)

TODO
npm package: @neovici/cosmoz-router
Description: A Polymer component to handle client side URL routing and view loading / management
Latest version: 11.3.0

cosmoz-router
==================

[![Build Status](https://github.com/Neovici/cosmoz-router/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-router/actions?workflow=Github+CI)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## &lt;cosmoz-router&gt;

**cosmoz-router** is a haunted component to handle client side URL routing
and view loading / management.

By default **cosmoz-router** listens to `popstate` event
, gets current location href and matches it against the routes defined.

## Getting started

### Installing

Using npm:
```bash
npm install --save @neovici/cosmoz-router
```

### Importing

The **cosmoz-router** element can be imported using:
```javascript
import '@neovici/cosmoz-router/cosmoz-page-router';
```

## Usage

### Routes
Routes are defined as an Array of Objects:
``` javascript
import { html } from 'lit-html';
import { creteElement, navigate } from '@neovici/cosmoz-router/lib/use-routes';

const routes = [
	{
		name: 'home', // optional (can be used to identity the route),
		rule: /^\/$/iu/, // a Regexp used to matched the route,
		handle: ({
			url, // the current url string ( that matched the route)
			match, // the result of matching route against the rule,
		}) => html`<home />`
	},
	{
		name: 'some-page',
		rule: (url) => url.startsWith('/some-page'), // function called with current url string
		handle: ({ url })=>import('page.js')
			.then(()=> createElement('some-element', Object.fromEntries(url.searchParams)))
	},
	{
		name: 'redirect',
		rule: /^\/some\-redirect$/iu,
		handle: ()=> navigate('#!/', null, {
			replace: true, // true to use replaceState,false to use pushState,
			notify: true // true to dispatch a `popstate` event
		})
	}
];
```
and passed to cosmoz-router:

``` javascript
html`<cosmoz-router .routes=${routes} />`;
```


## Documentation

See http://neovici.github.io/cosmoz-router (outdated)

TODO
npm package: @neovici/cosmoz-slider
Description: General purpose slider
Latest version: 5.2.1

cosmoz-slider
==================

[![Build Status](https://github.com/Neovici/cosmoz-slider/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-slider/actions?workflow=Github+CI)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![codecov](https://codecov.io/gh/Neovici/cosmoz-slider/branch/master/graph/badge.svg?token=joJeM1nLy5)](https://codecov.io/gh/Neovici/cosmoz-slider)

## &lt;cosmoz-slider&gt;

**cosmoz-slider** is a haunted general purpose slider.

## Getting started

### Installing

Using npm:
```bash
npm install --save @neovici/cosmoz-slider
```

### Usage

```js
import { html } from 'lit-html';
import { slideInRight } from '@neovici/cosmoz-slider';

html`<cosmoz-slider .slide=${ {id: 0, content: html`Hello`, animation: slideInRight}} />`;
```
npm package: @neovici/cosmoz-sse
Description: An element that allows subscribing to server-sent events.
Latest version: 4.1.3

[![Build Status](https://github.com/Neovici/cosmoz-sse/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-sse/actions?workflow=Github+CI)
[![Code Climate](https://codeclimate.com/github/codeclimate/codeclimate/badges/gpa.svg)](https://codeclimate.com/github/Neovici/cosmoz-sse)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-sse)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

# &lt;cosmoz-sse&gt;

`<cosmoz-sse>` is an element that allows subscribing to server-sent events.

## Install

`npm install`

## Viewing Your Element

Start a web server @ port `8080` providing an event source at `/events`, then:

```
$ npm start
```

## Running Tests

```
$ npm test
```
npm package: @neovici/cosmoz-tabs
Description: A multi views container element that allow navigation between the views using tabs or an accordion.
Author: Neovici Development
Latest version: 9.3.3

[![Build Status](https://github.com/Neovici/cosmoz-tabs/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-tabs/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-tabs)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

# &lt;cosmoz-tabs&gt;

`<cosmoz-tabs>` is a multi views (or pages) container element that allow navigation between the views using tabs or an accordion.

<!--
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="cosmoz-tabs.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<cosmoz-tabs selected="0">
  <cosmoz-tab heading="First tab">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa ante,
      maximus in consectetur non, imperdiet ullamcorper risus. Donec vulputate justo nibh.
    </p>
  </cosmoz-tab>
  <cosmoz-tab heading="Second tab">
    <p>
      Fusce consectetur nisi at felis finibus rutrum. Vestibulum fermentum pharetra sem,
      vitae tincidunt est mattis tristique. Donec blandit nulla non tellus tincidunt pretium.
    </p>
  </cosmoz-tab>
  <cosmoz-tab heading="Third tab">
    <p>
      Etiam ante dolor, commodo non vestibulum vel, malesuada a nunc. Vestibulum accumsan,
      sapien eu gravida consectetur, purus felis lobortis massa, id consequat eros lacus sit amet quam.
    </p>
  </cosmoz-tab>
</cosmoz-tabs>
```

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @neovici/cosmoz-tree
Description: Element and helper classes to manage tree data structure.
Latest version: 3.7.3

cosmoz-tree
===========

[![Build Status](https://github.com/Neovici/cosmoz-tree/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-tree/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-tree)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## &lt;cosmoz-tree&gt;

Element and helper classes to manage tree data structure.

## Install the Polymer-CLI

First, make sure you have the
[Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run
`polymer serve` to serve your application locally.

## Viewing Your Application

```
$ polymer serve
```

## Building Your Application

```
$ polymer build
```

This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.

You can serve the built versions by giving `polymer serve` a folder to serve
from:

```
$ polymer serve build/bundled
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run
your application's test suite locally.
npm package: @neovici/cosmoz-treenode
Description: Utility class to manipulate a tree data structure.
Author: Neovici dev
Latest version: 6.2.0

# \<cosmoz-treenode\>

[![Build Status](https://github.com/Neovici/cosmoz-treenode/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-treenode/actions?workflow=Github+CI)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

A web component to display a node in a tree data structure. Written in TypeScript using PionJS.

## Features

- Display a path to a node in a tree structure
- Control display options like maximum nodes to show
- Hide parts of the path from the root
- Customizable separator between path parts
- Fallback text when a path cannot be found

## Installation

```bash
npm install @neovici/cosmoz-treenode
```

## Usage

```html
<cosmoz-treenode
	key-property="pathLocator"
	key-value="1.2.3.301"
	value-property="name"
	path-separator=" / "
	hide-from-root="0"
	show-max-nodes="0"
	fallback="Not found"
></cosmoz-treenode>
```

## Scripts

- `npm start` - Starts Storybook development server at port 8000
- `npm run build` - Builds the TypeScript source files
- `npm run build:watch` - Watches and builds TypeScript files
- `npm test` - Runs tests with coverage
- `npm run test:watch` - Runs tests in watch mode
- `npm run storybook:build` - Builds Storybook for production
- `npm run storybook:preview` - Builds and previews Storybook

## Development

This component is written in TypeScript. The source files are in the `src/` directory.

### Development workflow

1. Clone the repository
2. Install dependencies: `npm ci`
3. Start Storybook: `npm start`

### Testing

Run tests:

```bash
npm test
```

Run tests in watch mode:

```bash
npm run test:watch
```

## License

Apache-2.0
npm package: @neovici/cosmoz-utils
Description: Date, money and template management functions commonly needed in Cosmoz views.
Author: Neovici Development
Latest version: 6.20.1

@neovici/cosmoz-utils
=================

[![Build Status](https://github.com/Neovici/cosmoz-utils/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-utils/actions?workflow=Github+CI)
[![Sauce Test Status](https://saucelabs.com/buildstatus/nomego)](https://saucelabs.com/u/nomego)
[![Maintainability](https://api.codeclimate.com/v1/badges/864f8d85f6b013e1caaa/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-utils/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/864f8d85f6b013e1caaa/test_coverage)](https://codeclimate.com/github/Neovici/cosmoz-utils/test_coverage)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## Cosmoz Utils

**cosmoz-utils** contains date, money and template management functions commonly
needed in page views. This package does not contain any visual element.

## Upgrade guide

Upgrading from `cosmoz-behaviors` is very straightforward.

* `Cosmoz.TemplateHelperBehavior` -> `import { Template } from '@neovici/cosmoz-utils'`
* `Cosmoz.MoneyHelperBehavior` -> `import { Money } from '@neovici/cosmoz-utils'`
* `Cosmoz.DateHelperBehavior` -> `import { Date } from '@neovici/cosmoz-utils'`
* `Polymer.mixinBehaviors([Cosmoz.TemplateHelperBehavior], Polymer.Element)` -> `mixin(Template, PolymerElement)`
* `Polymer.mixinBehaviors([Cosmoz.TemplateHelperBehavior, Cosmoz.MoneyHelperBehavior], Polymer.Element)` -> `mixin({...Template, ...Money}, PolymerElement)`

This code:

```js
<link rel="import" href="../cosmoz-templatehelper-behavior.html" />

class DemoTemplateHelper extends Polymer.mixinBehaviors([Cosmoz.TemplateHelperBehavior], Polymer.Element) {
```

Becomes:

```js
import { PolymerElement } from '@polymer/polymer/polymer-element';
import { mixin, Template } from '@neovici/cosmoz-utils';

class DemoTemplateHelper extends mixin(Template, PolymerElement) {
```

You can also pick and choose only the functions your element needs:

```js
import { mixin, Money } from '@neovici/cosmoz-utils';
import { isEmpty } from '@neovici/cosmoz-utils/template';
import { isoDate } from '@neovici/cosmoz-utils/date';

class DemoMoneyHelper extends mixin({isEmpty, isoDate, ...Money}, PolymerElement) {
```

### Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs][sauce_homepage]

[![Sauce Test Status](https://saucelabs.com/browser-matrix/nomego.svg)](https://saucelabs.com/u/nomego)
[sauce_homepage]: https://saucelabs.com
npm package: @neovici/cosmoz-viewinfo
Description: A component to create a view with information about available size and throttled resize events
Latest version: 4.1.2

cosmoz-viewinfo
=================

[![Build Status](https://github.com/Neovici/cosmoz-viewinfo/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-viewinfo/actions?workflow=Github+CI)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/cosmoz-viewinfo)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## &lt;cosmoz-viewinfo&gt;

**cosmoz-viewinfo** is a component to create a view with information about
available size and throttled resize events.

Example:

<!---
```
<custom-element-demo>
	<template>
		<script src="../webcomponentsjs/webcomponents-lite.js"></script>
		<link rel="import" href="cosmoz-viewinfo.html">
		<style>
			cosmoz-viewinfo {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		</style>
		<next-code-block></next-code-block>
	</template>
</custom-element-demo>
```
-->
```html
<dom-bind id="template">
	<template is="dom-bind">
		<cosmoz-viewinfo>
		</cosmoz-viewinfo>
	</template>
</dom-bind>
```
npm package: @neovici/eslint-config
Description: ESLint configuration for Neovici packages
Author: Neovici dev
Latest version: 1.3.3

# Neovici ESLint configuration

This is the shared ESLint configuration for Neovici packages.

## Installation guide

Add it to your package.json directly from the github repo:

```sh
npm install --save-dev @neovici/eslint-config@neovici/eslint-config#semver:^1.0.0
```

Then edit your eslint config to use it:

```js
// .eslintrc.json
{
	"extends": "@neovici"
}
```

```js
// test/.eslintrc.json
{
	"extends": "@neovici/eslint-config/test-config"
}
```