open-index/open-npm huggingface dataset:
npm package: @node-oauth/formats
Description: Validate ascii and unicode values.
Latest version: 1.1.0

# @node-oauth/formats

Minimal, [RFC 6749](https://datatracker.ietf.org/doc/html/rfc6749#appendix-A)
compliant ascii and unicode validator.

This package is intended to be used with a OAuth2 server, like 
[@node-oauth/node-oauth2-server](https://github.com/node-oauth/node-oauth2-server)
, but can also be used with any other project, that shares the same 
requirements.

## Install

```bash
$ npm install @node-oauth/formats
```

## Usage

```js
const isFormat = require('@node-oauth/formats')

isFormat.nchar('Hello, World!') // false
isFormat.nqchar('Hello, World!') // true
```

For detailed usage see the [API docs](./API.md)

## Test

```sh
npm install
npm run lint            # run esline in check mode
npm run lint:fix        # run esline in check mode
npm run test            # run test once
npm run test:coverage   # run tests with coverage report
```

## License

This project has been outsourced from 
[@node-oauth/node-oauth2-server](https://github.com/node-oauth/node-oauth2-server)
, which is a fork from [oauth2-server](https://github.com/oauthjs/node-oauth2-server)
. The licence remains MIT, see [our license file](./LICENSE).
npm package: @node-projects/add-js-to-esm-modules
Description: add's the .js extension to local im/exports
Author: jochen.kuehnergmx.de
Latest version: 1.3.0

# add-js-to-esm-modules

## goal

add .js to local imports/exports so they can be used directly as esm modules

## why

cause typescript does not add the extensions:

see: https://github.com/microsoft/TypeScript/issues/40878
annd a pull: https://github.com/microsoft/TypeScript/pull/47436

## thanks

basic script is from https://gist.github.com/lovasoa/8691344
npm package: @node-projects/automatic-slidershow-webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/automatic-slidershow-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/automatic-slidershow-webcomponent)
Author: cedricfranke28
Latest version: 1.0.7

# automatic-slidershow-webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/automatic-slidershow-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/automatic-slidershow-webcomponent)
 
# description
a simple slider show as webcomponent..

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/chart-js-webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/chart-js-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/chart-js-webcomponent)
Latest version: 0.1.7

# chart-js-webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/chart-js-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/chart-js-webcomponent)

# description
a chart.js webcomponent

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/color-wheel.webcomponent
Description: ![wheel.png](./wheel.png)
Latest version: 1.4.0

# color-wheel.webcomponent

![wheel.png](./wheel.png)

[![Published on npm](https://img.shields.io/npm/v/@node-projects/color-wheel.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/color-wheel.webcomponent)

# description
a simple tab control as webcomponent..

usable in web-component-designer: [https://node-projects.github.io/web-component-designer-demo/index.html](https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/color-wheel.webcomponent&html=%3Cnode-projects-color-wheel%20style=%22width:200px;height:200px;position:absolute;left:20px;top:20px;%22%3E%3C/node-projects-color-wheel%3E)

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.

# thanks

based on https://www.codehim.com/vanilla-javascript/javascript-color-wheel-picker/
npm package: @node-projects/custom-sidebar-webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/custom-sidebar-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/custom-sidebar-webcomponent)
Author: cedricfranke28
Latest version: 1.0.5

# custom-sidebar-webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/custom-sidebar-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/custom-sidebar-webcomponent)
 
# description
a fully customable sidebar webcomponent...

# modifications

sidebar-width -> Change the width of the sidebar (default = 300px)

sidebar-background-color -> Change the backgroundcolor (default = lightgrey)

sidebar-position -> Position of the sidebar left or right (default = right)

sidebar-toggle-button-top-position -> Position of the toggle button depending from top in % (default = 25)

toggle-button-background-color -> Change the backgroundcolor (default = lightgrey)

toggle-button-color -> change color of button icon black or white (default = black)


# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/gauge.webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/gauge.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/gauge.webcomponent)
Latest version: 0.0.9

# gauge.webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/gauge.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/gauge.webcomponent)

# description

port of a few gauge components to webcomponents and typescript.
so that they would be usable in web-component-designer: https://node-projects.github.io/web-component-designer-demo/index.html

# sample in web-component-designer

[Sample in Designer](https://node-projects.github.io/web-component-designer-demo/index.html?loadAllImports&npm=@node-projects/gauge.webcomponent&html=%3Cnode-projects-double-gauge%20left-value=%2237%22%20right-value=%2264%22%20style=%22width:200px;height:200px;position:absolute;left:107px;top:55px;%22%3E%3C/node-projects-double-gauge%3E%20%3Cnode-projects-css-gauge%20value=%2227%22%20display-value=%2226%22%20style=%22width:200px;height:200px;position:absolute;left:394px;top:67px;%22%3E%3C/node-projects-css-gauge%3E)

# included components

- node-projects-double-gauge  -> a port of https://github.com/boonzaai/doublegauge
- node-projects-css-gauge -> a port of https://github.com/rotvalli/css-gauge
- node-projects-material-gauge -> a port of https://github.com/sathomas/material-gauge
- node-projects-gauge-js -> (WIP) a port of https://github.com/bernii/gauge.js to typescript and a webcomponent
- node-projects-canvas-gauges -> (WIP) a port of https://github.com/Mikhus/canvas-gauges

# use:

you could import every single component explictly, or all at once.

# todo look if we also integrate:
(maybe some only as a wraper (if they are still maintained))

- https://github.com/naikus/svg-gauge ??
- https://github.com/JohnrBell/Gauge_CSS
npm package: @node-projects/hsluv-webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/hsluv-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/hsluv-webcomponent)
Latest version: 0.0.3

# hsluv-webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/hsluv-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/hsluv-webcomponent)

# description

port wrapper of hsluv library and a copy of the ui from https://www.hsluv.org/.
so that they would be usable in web-component-designer: https://node-projects.github.io/web-component-designer-demo/index.html

# sample in web-component-designer

[Sample in Designer](https://node-projects.github.io/web-component-designer-demo/index.html?loadAllImports&npm=@node-projects/hsluv-webcomponent&html=%3Cnode-projects-hsluv%20style=%22width:439px;height:677px;position:absolute;left:19px;top:17px;%22%3E%3C/node-projects-hsluv%3E)

# included components

- node-projects-hsluv-webcomponent

# use:

you could import every single component explictly, or all at once.
npm package: @node-projects/imask-webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/imask-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/imask-webcomponent)
Latest version: 0.0.3

# imask-webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/imask-webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/imask-webcomponent)

# description
a simple wrapper for imask lib (https://imask.js.org/) into a webcomponent..

usable in web-component-designer: [https://node-projects.github.io/web-component-designer-demo/index.html](https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/imask-webcomponent&loadAllImports&html=%3Cnode-projects-imask%20mask=%22%7B%23%7D000%5Baaa%5D%2FNIC-`*%5B**%5D%22%20style=%22position:%20absolute;%20top:%2030px;%20left:%2030px;%20width:%20200px;%20height:%2030px;%22%3E%3C/node-projects-imask%3E)

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/propertygrid.webcomponent
Description: a propertygrid webcomponent.
Latest version: 1.4.1

# propertygrid.webcomponent
a propertygrid control webcomponent

# description
a simple propertygrid control as webcomponent..

supported types (out of the box)
- number
- string
- boolean
- color
- nullable- of all types

usable in web-component-designer: https://node-projects.github.io/web-component-designer-demo/index.html

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/slider.webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/slider.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/slider.webcomponent)
Latest version: 1.1.0

# slider.webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/slider.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/slider.webcomponent)
npm package: @node-projects/speech-recognition.webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/speech-recognition.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/speech-recognition.webcomponent)
Latest version: 1.1.0

# speech-recognition.webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/speech-recognition.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/speech-recognition.webcomponent)

# description
a simple speech-recognition.webcomponent ..

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.

# thanks

based on https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/
npm package: @node-projects/splitview.webcomponent
Description: a splitview webcomponent.
Latest version: 1.0.1

# propertygrid.webcomponent
a propertygrid control webcomponent

# description
a simple propertygrid control as webcomponent..

supported types (out of the box)
- number
- string
- boolean
- color
- nullable- of all types

usable in web-component-designer: https://node-projects.github.io/web-component-designer-demo/index.html

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/svghmi.webcomponent
Description: a svghmi webcomponent.
Latest version: 1.2.0

# svghmi.webcomponent
a  webcomponent to display svghmi files

# description
a webcomponent to support svghmi in the web

usable in web-component-designer: https://node-projects.github.io/web-component-designer-demo/index.html

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.

# info and demo files from:

http://wtt.vanse.de/2021/10/27/svghmi-dateien-erstellen/
https://www.youtube.com/watch?v=EHxW9MD5r2Q (https://iqagent.sharefile.com/share/view/sf11d94e0d00248f39b375b6ea2897e62)

# more infos

https://support.industry.siemens.com/cs/mdm/109813308?c=160642938123&lc=de-DE
npm package: @node-projects/tab.webcomponent
Description: [![Published on npm](https://img.shields.io/npm/v/@node-projects/tab.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/tab.webcomponent)
Latest version: 0.2.3

# tab.webcomponent

[![Published on npm](https://img.shields.io/npm/v/@node-projects/tab.webcomponent.svg?logo=npm)](https://www.npmjs.com/package/@node-projects/tab.webcomponent)

# description
a simple tab control as webcomponent..

usable in web-component-designer: [https://node-projects.github.io/web-component-designer-demo/index.html](https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/tab.webcomponent&html=%3Cnode-projects-tab%20style=%22width:326px;height:257px;position:absolute;left:177px;top:79px;%22%3E%20%3Cdiv%3E%20%3Cbutton%20style=%22width:80px;height:30px;position:absolute;left:119px;top:68px;%22%3EButton%3C/button%3E%20%3C/div%3E%20%3Cdiv%3E%20Hello%20%3C/div%3E%20%3C/node-projects-tab%3E)

# development
## upload new version
simple run
  
    npm run release

then you need to go to github and create a release from the uploaded tag.
this will then create a npm package via github action.
npm package: @node-projects/web-component-designer
Description: A WYSIWYG designer webcomponent for html components
Author: jochen.kuehner@gmx.de
Latest version: 0.1.348

# web-component-designer

```It's now considered beta. It works, we use it in production, but there are many more features to come```

A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.
Meanwhile polymer is not used anymore.

![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png)


## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer

     npm i @node-projects/web-component-designer

## Browser support

  - Chrome/Firefox & Safari

## Developing

  * Install dependencies
```
  $ npm install
```

  * Compile typescript after doing changes
```
  $ npm run build (if you use Visual Studio Code, you can also run the build task via Ctrl + Shift + B > tsc:build - tsconfig.json)
```

  * *Link node module*<br/>
```
  $ npm link 
```

## Using

At first you have to setup a service container providing services for history, properties, elements, ...

## Code Editor

You can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco).
If you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget.

## TreeView

We have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI).

## DragDrop

If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library.
Your index.html should be extended as follows:

    <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
    <script src="/node_modules/mobile-drag-drop/index.js"></script>

## Keys

Pointer Tool:
alt:   select element behind
shift:  draw selection rect
ctrl:  add/remove from selection
ctrl+shift: pan

## Copyright notice

The Library uses Images from the Chrome Dev Tools, see
https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
and
https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
npm package: @node-projects/web-component-designer-codeview-ace
Description: web-component-designer addon: Code Editor using ACE
Author: jochen.kuehner@gmx.de
Latest version: 0.1.3

# web-component-designer-codeview-ace

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-ace

     npm i @node-projects/web-component-designer-codeview-ace

## Description

This uses the ACE Codeeditor for the Webcomponent Designer Codeview

## Usage

    import { CodeViewAce } from '@node-projects/web-component-designer-codeview-ace';
    serviceContainer.config.codeViewWidget = CodeViewAce;
npm package: @node-projects/web-component-designer-codeview-codemirror
Description: web-component-designer addon: Code Editor using Codemirror 6 and newer
Author: jochen.kuehner@gmx.de
Latest version: 0.1.4

# web-component-designer-codeview-codemirror

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror

     npm i @node-projects/web-component-designer-codeview-codemirror

## Description

This uses the Codemirror Editor for the Webcomponent Designer Codeview

## Usage

    import { CodeViewCodeMirror } from '@node-projects/web-component-designer-codeview-codemirror';
    serviceContainer.config.codeViewWidget = CodeViewCodeMirror;
npm package: @node-projects/web-component-designer-codeview-codemirror5
Description: web-component-designer addon: Code Editor using Codemirror 5
Author: jochen.kuehner@gmx.de
Latest version: 0.1.5

# web-component-designer-codeview-codemirror5

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror5

     npm i @node-projects/web-component-designer-codeview-codemirror5

## Description

This uses the Codemirror Version 5 Editor for the Webcomponent Designer Codeview.

The NPM Package is linked via alias from "codemirror5" directory not "codemirror", look at package.json on how to do.

## Usage

    import { CodeViewCodeMirror5 } from '@node-projects/web-component-designer-codeview-codemirror5';
    serviceContainer.config.codeViewWidget = CodeViewCodeMirror5;
npm package: @node-projects/web-component-designer-codeview-monaco
Description: web-component-designer addon: Code Editor using Monaco
Author: jochen.kuehner@gmx.de
Latest version: 0.1.33

# web-component-designer-codeview-monaco

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-monaco

     npm i @node-projects/web-component-designer-codeview-monaco

## Description

This uses the Monaco Editor for the Webcomponent Designer Codeview

## Usage

    import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
    serviceContainer.config.codeViewWidget = CodeViewMonaco;

You need to load the monaco manualy and call

     await CodeViewMonaco.setMonacoLibrary(...); 
     
or via

     await CodeViewMonaco.loadMonacoEditorViaRequire(); 

or

     await CodeViewMonaco.loadMonacoEditorViaImport();

or

     <script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
     <script>
          require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs', 'vs/css': { disabled: true } } });
          require(['vs/editor/editor.main'], () => { });    
     </script>
npm package: @node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent
Description: web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent
Author: jochen.kuehner@gmx.de
Latest version: 0.1.5

# web-component-designer-htmlparserservice-base-custom-webcomponent

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent

     npm i @node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent

## Description

This is a HTML Parser Service for Templates inside of BaseCustomWebcomponent, it needs a HTML Parser Service as Parameter.

## Usage

    import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
    import { BaseCustomWebcomponentParserService } from '@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent';
    serviceContainer.register("htmlParserService", new BaseCustomWebcomponentParserService(new NodeHtmlParserService()));
npm package: @node-projects/web-component-designer-htmlparserservice-lit-element
Description: web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent
Author: jochen.kuehner@gmx.de
Latest version: 0.1.4

# web-component-designer-htmlparserservice-lit-element

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-lit-element

     npm i @node-projects/web-component-designer-htmlparserservice-lit-element

## Description

This is a HTML Parser Service for Templates inside of LitElement, it needs a HTML Parser Service as Parameter.
And it only can parse very simple Templates at the moment.
It also needed to be switched to use Typescript instead of esprima.

## Usage

    import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
    import { LitElementParserService } from '@node-projects/web-component-designer-htmlparserservice-lit-element';
    serviceContainer.register("htmlParserService", new LitElementParserService(new NodeHtmlParserService()));
npm package: @node-projects/web-component-designer-htmlparserservice-nodehtmlparser
Description: web-component-designer addon: Parser Service using the Node HTML Parser
Author: jochen.kuehner@gmx.de
Latest version: 0.1.12

# web-component-designer-htmlparserservice-nodehtmlparser

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-nodehtmlparser

     npm i @node-projects/web-component-designer-htmlparserservice-nodehtmlparser

## Description

This is a HTML Parser Service using a external Lib. The browser Parser strips some Attributes from Templates, so often it's better to use this parser.

## Usage

    import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
    serviceContainer.register("htmlParserService", new NodeHtmlParserService());
npm package: @node-projects/web-component-designer-stylesheetservice-css-parser
Description: web-component-designer addon: Stylesheet Parser Service using @node-projects/css-parser
Author: jochen.kuehner@gmx.de
Latest version: 0.1.4

# web-component-designer-stylesheetservice-css-tools

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-parser

     npm i @node-projects/web-component-designer-stylesheetservice-css-parser

## Description

This is a Stylesheetparser using @node-projects/css-parser

## Usage

    import { CssParserStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-parser';
    serviceContainer.register("stylesheetService", designerCanvas => new CssParserStylesheetService(designerCanvas));
npm package: @node-projects/web-component-designer-stylesheetservice-css-tools
Description: web-component-designer addon: Stylesheet Parser Service using @adobe/css-tools
Author: jochen.kuehner@gmx.de
Latest version: 0.1.11

# web-component-designer-stylesheetservice-css-tools

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-tools

     npm i @node-projects/web-component-designer-stylesheetservice-css-tools

## Description

This is a Stylesheetparser using @adobe/css-tools

## Usage

    import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools';
    serviceContainer.register("stylesheetService", designerCanvas => new CssToolsStylesheetService(designerCanvas));
npm package: @node-projects/web-component-designer-stylesheetservice-css-tree
Description: web-component-designer addon: Stylesheet Parser Service using css-tree
Author: jochen.kuehner@gmx.de
Latest version: 0.1.4

# web-component-designer-stylesheetservice-css-tree

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-tree

     npm i @node-projects/web-component-designer-stylesheetservice-css-tree

## Description

This is a Stylesheetparser using @adobe/css-tree

## Usage

    import { CssTreeStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tree';
    serviceContainer.register("stylesheetService", designerCanvas => new CssTreeStylesheetService(designerCanvas));
npm package: @node-projects/web-component-designer-texteditextension-stylo
Description: web-component-designer addon: Edit Text via stylo editor
Author: jochen.kuehner@gmx.de
Latest version: 0.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# web-component-designer-texteditextension-stylo

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-texteditextension-stylo

     npm i @node-projects/web-component-designer-texteditextension-stylo

## Description

This is a extension to edit Text via the @papyrs/stylo

## Usage

    import { EditTextWithStyloExtensionProvider } from '@node-projects/web-component-designer-texteditextension-stylo';
    serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [new EditTextWithStyloExtensionProvider()]);
npm package: @node-projects/web-component-designer-visualization-addons
Description: web-component-designer addon for visualizations
Author: jochen.kuehner@gmx.de
Latest version: 0.1.137

# web-component-designer-visualization-addons

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-visualization-addons

     npm i @node-projects/web-component-designer-visualization-addons

## Description

This package contains basic elements for a custom visualization, like a script system, a bindings system, ...
It is used for example by the iobroker.webui.

## Dependencies

- long
- blockly
- @adobe/css-tools ( only if you use Bindingshelper.parseCssBindings() )

## Usage
npm package: @node-projects/web-component-designer-webrtc-multiplayer
Description: web-component-designer addon for multiplayer via webrtc
Author: jochen.kuehner@gmx.de
Latest version: 0.1.0

# web-component-designer-webrtc-multiplayer

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-webrtc-multiplayer

     npm i @node-projects/web-component-designer-webrtc-multiplayer

## Description

Sample Multiplayer 

## Dependencies

## Usage
npm package: @node-projects/web-component-designer-widgets-fancytree
Description: web-component-designer addon: Widgets using JQuery FancTree
Author: jochen.kuehner@gmx.de
Latest version: 0.1.16

# web-component-designer-widgets-fancytree

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-widgets-fancytree

     npm i @node-projects/web-component-designer-widgets-fancytree

## Description

This package contains widgets using jquery/fancytree. This are more powerfull than the included ones in the designer.

## Usage

you need to load JQuery and FancyTree before or you could load it via

    import '@node-projects/web-component-designer-widgets-fancytree/dist/loadJqueryAndFancytree.js';

then import the widgets:

    import '@node-projects/web-component-designer-widgets-fancytree';

now you could use following widgets:

    <node-projects-palette-tree-view></node-projects-palette-tree-view>
    <node-projects-tree-view-extended></node-projects-tree-view-extended>
npm package: @node-projects/web-component-designer-widgets-wunderbaum
Description: web-component-designer addon: Widgets using wunderbaum
Author: jochen.kuehner@gmx.de
Latest version: 0.1.44

# web-component-designer-widgets-wunderbaum

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-widgets-wunderbaum

     npm i @node-projects/web-component-designer-widgets-wunderbaum

## Description

This package contains widgets using wunderbaum. This are more powerfull than the included ones in the designer.

## Usage

then import the widgets:

    import '@node-projects/web-component-designer-widgets-wunderbaum';

now you could use following widgets:

    <node-projects-palette-tree-view></node-projects-palette-tree-view>
    <node-projects-tree-view-extended></node-projects-tree-view-extended>
npm package: @node-projects/web-component-designer-zpl
Description: web-component-designer addon: Widgets and Services for creating a ZPL Designer
Author: jochen.kuehner@gmx.de
Latest version: 0.1.22

# web-component-designer-zpl

## NPM Package

https://www.npmjs.com/package/@node-projects/web-component-designer-zpl

     npm i @node-projects/web-component-designer-zpl

## Description

This package contains widgets and services wich help to create a zpl designer.

## Usage

see the zpl designer sample application
npm package: @node-projects/web-component-sidebar
Description: This is supposed to be a generic, multipurpose sidebar, that is going to be highly adaptable. At the moment, the sidebar is working and useable, but there will be lots of changes and improvements to come.
Latest version: 1.1.0

# Web Component Sidebar
## What?

This is supposed to be a generic, multipurpose sidebar, that is going to be highly adaptable. At the moment, the sidebar is working and useable, but there will be lots of changes and improvements to come.

## How?

Use the sidebar by importing the web-component and adding it to the HTML DOM like this:

```html
<script  type="module">
	import  "./node_modules/web-component-sidebar/dist/sidebar-menu.js";
</script>
<style>
	#sidebar {
		/* --main-bg-color: #21333D;
		--main-font-color: #fff;*/
		--hover-bg-color: red;
		/* --selected-font-color: #fff;
		--submenu-border-color: #2E4A5A;
		--icon-bg-color: transparent;
		--sidebar-cell-height: 80px;
		--sidebar-icon-height: 60px; */
		/* --sidebar-cell-minwidth: 550px; */
		/*--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		--font-size: 1.1rem; */
	}
</style>
<sidebar-menu  id="sidebar"  
	images-root="../../../assets"  
	menu-items='
		[
		   {
		       "id": "what-ever-you-set",
		       "displayName": "Sidebaritem",
		       "icon": "Sidebarlogo.svg",
		       "children": [
		           {
		               "id": "RBG1",
		               "displayName": "Sub-Sidebaritem",
		               "children": [
		                   {
		                       "id": "what-ever-you-set",
		                       "displayName": "Sub-Sidebaritem"
		                   },
		                   {
		                       "id": "what-ever-you-set",
		                       "displayName": "Sub-Sidebaritem"
		                   },
		                   {
		                       "id": "what-ever-you-set",
		                       "displayName": "Sub-Sidebaritem",
		                       "children": [
		                           {
		                               "id": "what-ever-you-set",
		                               "displayName": "Sub-Sub-Sidebaritem"
		                           },
		                           {
		                               "id": "what-ever-you-set",
		                               "displayName": "Sub-Sub-Sidebaritem"
		                           }
		                       ]
		                   }
		               ]
		           }
		       ]
		   }
		]'></sidebar-menu>
```

You can pass the sidebar structure via json into the element. The icon property contains the relative path to the images folder. The base path can be set via the **images-root** property.

## Styling
The component has a default style, which can be overwritten by setting the css variables, like seen in the code-snippet above.
npm package: @node-projects/wired-elements
Description: Collection of hand-drawn sketchy web components
Author: Preet Shihn
Latest version: 3.1.1

# Info

This is a fork of the wired repo to fix es6 imports, also updates all Librarys and makes the Library usable in webcomponents Designer.

# wired-elements 👉 [wiredjs.com](https://wiredjs.com)
Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. 

![alt Preview](https://i.imgur.com/qttPllg.png)


## Try now
Play with wired-elements:

[Wired Elements in Designer](https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/wired-elements&loadAllImports&html=%3Cwired-button%20style=%22position:absolute;left:39px;top:28px;%22%3EHallo%3C/wired-button%3E%20%3Cwired-combo%20style=%22position:absolute;left:51px;top:109px;%22%3E%3C/wired-combo%3E%20%3Cwired-checkbox%20style=%22position:absolute;left:41px;top:184px;%22%3Echeck%3C/wired-checkbox%3E%20%3Cwired-video%20src=%22https://archive.org/download/Rick_Astley_Never_Gonna_Give_You_Up/Rick_Astley_Never_Gonna_Give_You_Up.mp4%22%20style=%22position:absolute;left:211px;top:28px;%22%3E%3C/wired-video%3E)

[Wired Elements](https://codesandbox.io/s/wired-elements-vanilla-4bpny)

#### Try it with a framework

[Wired Elements in React](https://codesandbox.io/s/xrll5wyl8w)

[Wired Elements in Vue](https://codesandbox.io/s/vj389y9375)

[Wired Elements in Svelte](https://codesandbox.io/s/wired-elements-svelte-4hfkb)


## Install

The package (wired-elements) exports all components in the **_wired_** category. List of all wired elements can be found [here](https://github.com/node-projects/wired-elements/tree/master/src).

Add wired-elements to your project:
```
npm i @node-projects/wired-elements
```


Or load the ES module directly through unpkg

```html
<script type="module" src="https://unpkg.com/@node-projects/wired-elements?module"></script>
```


## Usage

Import into your module script:
```javascript
import { WiredButton, WiredInput } from "@node-projects/wired-elements"
```

or 

```javascript
import { WiredButton } from '@node-projects/wired-elements/lib/wired-button.js';
import { WiredInput } from '@node-projects/wired-elements/lib/wired-input.js';
```

#### Use it in your HTML:
```html
<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>
```

Learn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).

## Component API

To view details of each component - properties, events, css-properties, etc, are provided in the [docs folder](https://github.com/node-projects/wired-elements/tree/master/docs).

## Demo

Demo of all components is available at [wiredjs.com](https://wiredjs.com/showcase.html).

## Credits

wired-elements was built using [RoughJS](https://roughjs.com/) and [Lit](https://lit.dev/).

## License
[MIT License](https://github.com/node-projects/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)
npm package: @node-real/uikit
Description: A simple, modular and reusable React UI component library.
Author: node-real
Latest version: 2.56.0

# UIKit

A simple, reusable and modular React component library.


## Documentation

For full documentation, visit [here](https://node-real.github.io/uikit/#/guides).


## Installation
```bash
npm i @node-real/uikit @emotion/react@^11 @emotion/styled@^11
```

```bash
npm i @node-real/icons
```

## Contributing

A complete development workflow like following:

1. Create a new branch out of `main` branch
2. Make some changes, fix bugs or add new features
3. Run `pnpm changeset` to create a new changeset
4. Commit the code, code review is required, after code review, we can merge the code to `alpha`
   branch
5. Then [github action](https://github.com/node-real/uikit/actions) will automatically execute
   and create a new [release PR](https://github.com/node-real/uikit/pulls), merge this PR, a new
   `alpha version` will be released
6. After testing on the `alpha version`, we can merge the `alpha` branch into the `main` branch, and the [github action](https://github.com/node-real/uikit/actions) will automatically execute
   and create a new [release PR](https://github.com/node-real/uikit/pulls), merge this PR, a new
   `stable version` will be released

## License

See [LICENSE](./LICENSE) for more information.
npm package: @node-red-contrib-themes/cobalt2
Description: A dark theme for Node-RED based on the Cobalt2 theme by Wes Bos
Author: Mauricio Bonani @mbonani
Latest version: 0.1.0
Deprecated: Use @node-red-contrib-themes/theme-collection instead. See https://github.com/node-red-contrib-themes/theme-collection for installation and usage instructions.

# Node-RED Contrib Theme: Cobalt2

A dark theme for [Node-RED][node-red] based on the [Cobalt2 Theme for VS Code][cobalt2-theme] by [Wes Bos][wes-bos].

![screenshot](https://raw.githubusercontent.com/node-red-contrib-themes/cobalt2/master/images/screenshot.png)

<!-- This theme is part of the [Node-RED Contrib Theme Collection][theme-collection]. -->

## Install

### Install with npm

Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`).

```shell
npm install @node-red-contrib-themes/cobalt2
```

## Usage

Add `theme: "cobalt2"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "cobalt2",
},
```

For details on the Node-RED's configuration file and its structure, please refer to the [Node-RED official documentation][node-red-doc].

### Themed Scrollbars (*EXPERIMENTAL*)

Includes the theme and changes the scrollbars to make them better fit the theme.

**NOTE**: This is ***EXPERIMENTAL*** and may not work on all browsers.

Add `theme: "cobalt2-scroll"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "cobalt2-scroll",
},
```

### Monaco Editor Theme

This package comes with a pre-configured theme for the Monaco editor.

Just leave `theme` under `codeEditor` commented out in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: cobalt2,
    codeEditor: {
        lib: "monaco",
        options: {
            // theme: "",
        },
    },
},
```

## License

This project is licensed under the [MIT license][license].

## Like my work?

If you like my work please give it a GitHub ⭐️.

Also, consider supporting me with a coffee ☕.

<a href="https://www.buymeacoffee.com/mbonani" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="60px"></a>

[cobalt2-theme]: https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2
[license]: LICENSE
[node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes
[node-red]: https://nodered.org/
[theme-collection]: https://www.npmjs.com/package/@node-red-contrib-themes/theme-collection
[wes-bos]: http://www.wesbos.com/
npm package: @node-red-contrib-themes/dark
Description: A dark theme for Node-RED
Author: Mauricio Bonani @mbonani
Latest version: 2.2.3
Deprecated: Use @node-red-contrib-themes/theme-collection instead. See https://github.com/node-red-contrib-themes/theme-collection for installation and usage instructions.

# Node-RED Contrib Theme: Dark

A dark theme for [Node-RED][node-red].

![screenshot](https://raw.githubusercontent.com/node-red-contrib-themes/dark/master/images/screenshot.png)

This theme is part of the [Node-RED Contrib Theme Collection][theme-collection].

## Install

### Install with npm

Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`).

```shell
npm install @node-red-contrib-themes/dark
```

## Usage

Add `theme: "dark"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "dark",
},
```

For details on the Node-RED's configuration file and its structure, please refer to the [Node-RED official documentation][node-red-doc].

### Themed Scrollbars (*EXPERIMENTAL*)

Includes the theme and changes the scrollbars to make them better fit the theme.

**NOTE**: This is ***EXPERIMENTAL*** and may not work on all browsers.

Add `theme: "dark-scroll"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "dark-scroll",
},
```

### Monaco Editor Theme

This package comes with a pre-configured theme for the Monaco editor.

Just leave `theme` under `codeEditor` commented out in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: dark,
    codeEditor: {
        lib: "monaco",
        options: {
            // theme: "",
        },
    },
},
```

## License

This project is licensed under the [MIT license][license].

## Like my work?

If you like my work please give it a GitHub ⭐️.

Also, consider supporting me with a coffee ☕.

<a href="https://www.buymeacoffee.com/mbonani" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="60px"></a>

[license]: LICENSE
[node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes
[node-red]: https://nodered.org/
[theme-collection]: https://www.npmjs.com/package/@node-red-contrib-themes/theme-collection
npm package: @node-red-contrib-themes/dracula
Description: A dark theme for Node-RED based on the Dracula theme by Zeno Rocha
Author: Mauricio Bonani @mbonani
Latest version: 2.2.3
Deprecated: Use @node-red-contrib-themes/theme-collection instead. See https://github.com/node-red-contrib-themes/theme-collection for installation and usage instructions.

# Node-RED Contrib Theme: Dracula

A dark theme for [Node-RED][node-red] based on the [Dracula theme][dracula-theme] by [Zeno Rocha][zeno-rocha].

![screenshot](https://raw.githubusercontent.com/node-red-contrib-themes/dracula/master/images/screenshot.png)

This theme is part of the [Node-RED Contrib Theme Collection][theme-collection].

## Install

### Install with npm

Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`).

```shell
npm install @node-red-contrib-themes/dracula
```

## Usage

Add `theme: "dracula"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "dracula"
},
```

For details on the Node-RED's configuration file and its structure, please refer to the [Node-RED official documentation][node-red-doc].

Includes the theme and changes the scrollbars to make them better fit the theme.

**NOTE**: This is ***EXPERIMENTAL*** and may not work on all browsers.

Add `theme: "dracula-scroll"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "dracula-scroll",
},
```

### Monaco Editor Theme

This package comes with a pre-configured theme for the Monaco editor.

Just leave `theme` under `codeEditor` commented out in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: dracula,
    codeEditor: {
        lib: "monaco",
        options: {
            // theme: "",
        },
    },
},
```

## License

This project is licensed under the [MIT license][license].

## Like my work?

If you like my work please give it a GitHub ⭐️.

Also, consider supporting me with a coffee ☕.

<a href="https://www.buymeacoffee.com/mbonani" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="60px"></a>

[dracula-theme]: https://draculatheme.com/
[license]: LICENSE
[node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes
[node-red]: https://nodered.org/
[theme-collection]: https://www.npmjs.com/package/@node-red-contrib-themes/theme-collection
[zeno-rocha]: https://zenorocha.com/
npm package: @node-red-contrib-themes/midnight-red
Description: A gorgeous dark theme for Node-RED
Author: Mauricio Bonani @mbonani
Latest version: 2.2.3
Deprecated: Use @node-red-contrib-themes/theme-collection instead. See https://github.com/node-red-contrib-themes/theme-collection for installation and usage instructions.

# Node-RED Contrib Theme: Midnight-RED

A dark theme for [Node-RED][node-red] based on the
[midnight theme][ha-midnight-theme] for [Home Assistant][home-assistant].

![screenshot](https://raw.githubusercontent.com/node-red-contrib-themes/midnight-red/master/images/screenshot.png)

This theme is part of the [Node-RED Contrib Theme Collection][theme-collection].

## Install

### Install with npm

Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`).

```shell
npm install @node-red-contrib-themes/midnight-red
```

## Usage

Add `theme: "midnight-red"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "midnight-red",
},
```

For details on the Node-RED's configuration file and its structure, please refer to the [Node-RED official documentation][node-red-doc].

### Themed Scrollbars (*EXPERIMENTAL*)

Includes the theme and changes the scrollbars to make them better fit the theme.

**NOTE**: This is ***EXPERIMENTAL*** and may not work on all browsers.

Add `theme: "midnight-red-scroll"` to the `editorTheme` object in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: "midnight-red-scroll",
},
```

### Monaco Editor Theme

This package comes with a pre-configured theme for the Monaco editor.

Just leave `theme` under `codeEditor` commented out in your `settings.js` and then restart Node-RED.

```js
editorTheme: {
    theme: midnight-red,
    codeEditor: {
        lib: "monaco",
        options: {
            // theme: "",
        },
    },
},
```

## Acknowledgments

- [Sebastian Raff][hobbyquaker] - for the inspiration and help in creating the
NPM package for this theme.
- [Ristomatti Airo][ristomatti] - for his amazing [theme][solarized-dark-gray-theme] on which major
readability improvements were based.

## License

This project is licensed under the [MIT license][license].

## Like my work?

If you like my work please give it a GitHub ⭐️.

Also, consider supporting me with a coffee ☕.

<a href="https://www.buymeacoffee.com/mbonani" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" height="60px"></a>

[ha-midnight-theme]: https://community.home-assistant.io/t/midnight-theme/28598
[hobbyquaker]: https://github.com/hobbyquaker
[home-assistant]: https://home-assistant.io
[license]: LICENSE
[node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes
[node-red]: https://nodered.org/
[ristomatti]: https://github.com/ristomatti
[solarized-dark-gray-theme]: https://github.com/ristomatti/node-red-contrib-theme-solarized-dark-grey
[theme-collection]: https://www.npmjs.com/package/@node-red-contrib-themes/theme-collection