open-index/open-npm huggingface dataset:
npm package: @scoped-elements/codemirror
Description: Wrapper of codemirror using the @open-wc/scoped-elements pattern
Author: guillem.cordoba@gmail.com
Latest version: 0.1.1

# @scoped-elements/codemirror

This is a wrapper of [codemirror](https://codemirror.net/6/) packaged using the scoped custom elements registries pattern using [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements).

## Installation

```bash
npm i @scoped-elements/codemirror
```

## Usage

### As an sub element in your own custom element

```js
import { CodemirrorMarkdown } from '@scoped-elements/codemirror';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'codemirror-markdown': CodemirrorMarkdown,
    };
  }

  render() {
    return html`
      <codemirror-markdown
        text="example text"
        @text-inserted=${e => {
          console.log(e);
        }}
      ></codemirror-markdown>
    `;
  }
}
```

### As a globally defined custom element

```js
import { CodemirrorMarkdown } from '@scoped-elements/codemirror';

customElements.define('codemirror-markdown', CodemirrorMarkdown);
```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for codemirror [here](https://codemirror.net/6/).

## Appreciation

This library is just a re-export, all the credit goes to [codemirror](https://codemirror.net/6/) and its authors. Thanks!
npm package: @scoped-elements/cytoscape
Description: Wrapper of cytoscape as a custom element following the @open-wc/scoped-elements pattern
Author: guillem.cordoba@gmail.com
Latest version: 0.2.7

# @scoped-elements/cytoscape

This is the [cytoscape](https://js.cytoscape.org/) library packaged using the scoped custom elements registries pattern using [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements).

## Installation

```bash
npm i @scoped-elements/cytoscape
```

## Usage

### As an sub element in your own custom element

```js
import { CytoscapeDagre } from '@scoped-elements/cytoscape';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'cytoscape-dagre': CytoscapeDagre,
    };
  }

  render() {
    return html`
      <cytoscape-dagre
        style="width: 100px; height: 100px;"
        .elements=${[
          {
            // node a
            data: { id: 'a' },
          },
          {
            // node b
            data: { id: 'b' },
          },
          {
            // edge ab
            data: { id: 'ab', source: 'a', target: 'b' },
          },
        ]}
        .options=${{
          autoungrabify: false,
        }}
      ></cytoscape-dagre>
    `;
  }
}
```

### As a globally defined custom element

```js
import { CytoscapeDagre } from '@scoped-elements/markdown-renderer';

customElements.define('cytoscape-dagre', CytoscapeDagre);
```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for cytoscape [here](https://js.cytoscape.org/).
npm package: @scoped-elements/dropzone
Description: Dropzone.js packaged as custom elements using @open-wc/scoped-elements
Author: guillem.cordoba@gmail.com
Latest version: 0.2.7

# \@scoped-elements/dropzone

Re-export of the `Dropzone.js` package in a custom element to be used with `@open-wc/scoped-elements`.

## Installation

```bash
npm i @scoped-elements/dropzone
```

## Usage

### As an sub element in your own custom element

```js
import { DropzoneElement } from '@scoped-elements/dropzone';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'drop-zone': DropzoneElement,
    };
  }

  render() {
    return html` <drop-zone url="https://my-upload-url.com"></drop-zone> `;
  }
}
```

### As a globally defined custom element

```js
import { DropzoneElement } from '@scoped-elements/material-web';

customElements.define('drop-zone', DropzoneElement);

```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for `Dropzone.js` here: https://www.dropzone.dev/js/.
npm package: @scoped-elements/event-calendar
Description: Webcomponent event-calendar following open-wc recommendations
Author: guillem.cordoba@gmail.com
Latest version: 0.1.2

# \<event-calendar>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i event-calendar
```

## Usage

```html
<script type="module">
  import 'event-calendar/event-calendar.js';
</script>

<event-calendar></event-calendar>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

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

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @scoped-elements/fullcalendar
Description: Wrapper of fullcalendar as a custom element following the @open-wc/scoped-elements pattern
Author: full-calendar
Latest version: 0.0.2

# \<full-calendar>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i full-calendar
```

## Usage

```html
<script type="module">
  import 'full-calendar/full-calendar.js';
</script>

<full-calendar></full-calendar>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

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

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @scoped-elements/markdown-renderer
Description: Fork of prismjs-markdown-element following the @open-wc/scoped-elements pattern
Author: guillem.cordoba@gmail.com
Latest version: 0.0.3

# @scoped-elements/markdown-renderer

This is the [prismjs-markdown-element](https://www.npmjs.com/package/prism-markdown-element) library packaged using the scoped custom elements registries pattern using [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements).

## Installation

```bash
npm i @scoped-elements/markdown-renderer
```

## Usage

### As an sub element in your own custom element

```js
import { MarkdownRenderer } from '@scoped-elements/markdown-renderer';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'markdown-renderer': Checkbox
    };
  }

  render() {
    return html`
      <markdown-renderer markdown="# Hi!"></markdown-renderer>
    `;
  }
}
```

### As a globally defined custom element

```js
import { MarkdownRenderer } from '@scoped-elements/markdown-renderer';

customElements.define('markdown-renderer', MarkdownRenderer);

```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for the elements in each of their npm pages, e.g.: https://www.npmjs.com/package/prism-markdown-element.

Custom theming is not supported yet.
npm package: @scoped-elements/material-web
Description: Material Web Components packaged in scoped custom elements registries using @open-wc/scoped-elements
Author: guillem.cordoba@gmail.com
Latest version: 0.1.7

# @scoped-elements/material-web

This is the [Material Web Components](https://github.com/material-components/material-web) library packaged using the scoped custom elements registries pattern using [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements).

## Installation

```bash
npm i @scoped-elements/material-web
```

## Usage

### As an sub element in your own custom element

```js
import { Checkbox } from '@scoped-elements/material-web';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'mwc-checkbox': Checkbox
    };
  }

  render() {
    return html`
      <mwc-checkbox checked></mwc-checkbox>
    `;
  }
}
```

### As a globally defined custom element

```js
import { Checkbox } from '@scoped-elements/material-web';

customElements.define('mwc-checkbox', Checkbox);

// Use in the same way as the material components library in the html
```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for the elements in each of their npm pages, e.g.: https://www.npmjs.com/package/@material/mwc-checkbox.
npm package: @scoped-elements/quill
Description: Quill packaged using the scoped custom elements registries pattern of @open-wc/scoped-elements
Author: guillem.cordoba@gmail.com
Latest version: 0.1.3

# @scoped-elements/quill

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @scoped-elements/quill
```

## Usage

### As an sub element in your own custom element

```js
import { QuillSnow } from '@scoped-elements/quill';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'quill-snow': QuillSnow
    };
  }

  render() {
    return html`
      <quill-snow></quill-snow>
    `;
  }
}
```

### As a globally defined custom element

```js
import { QuillSnow } from '@scoped-elements/quill';

customElements.define('quill-snow', QuillSnow);
```

## Documentation for the elements

As this package is just a re-export, you can find the documentation for Quill [here](https://quilljs.com/). API documentation for is yet to be done.
npm package: @scoped-elements/shoelace
Description: Shoelace design system exported using the scoped elements mixin
Author: guillem.cordoba@gmail.com
Latest version: 0.1.0

# @scoped-elements/shoelace

This is the [Shoelace Design System](https://shoelace.style/) library packaged using the scoped custom elements registries pattern using [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements).

## Installation

```bash
npm i @scoped-elements/shoelace
```

## Usage

### As an sub element in your own custom element

```js
import { SlButton } from '@scoped-elements/shoelace';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'sl-button': SlButton,
    };
  }

  render() {
    return html` <sl-button></sl-button> `;
  }
}
```

### As a globally defined custom element

```js
import { SlButton } from '@scoped-elements/shoelace';

customElements.define('sl-button', SlButton);

// Use in the same way as the shoelace library in the html
```

This requires you to include the shoelace theming separately. See [theming](https://shoelace.style/getting-started/themes?id=activating-themes).

## Documentation for the elements

As this package is just a re-export, you can find the documentation for the elements [here](https://shoelace.style/).

## Appreciation

This library is just a re-export, all the credit goes to [Shoelace](https://shoelace.style/) and its authors. Thanks!