simple color wheel

.github/workflows/main.yml

@@ -0,0 +1,15 @@
+name: Build
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build 🔧
+        run: npm ci && npm run build

.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build 🔧
+        run: npm ci && npm run build
+      - name: Publish package on NPM 📦
+        run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

.npmignore

@@ -0,0 +1,5 @@
+src/
+sample/
+node_modules/
+tsconfig.json
+.github/

.release-it.json

@@ -0,0 +1,11 @@
+{
+    "git": {
+        "commitMessage": "chore: release v${version}"
+    },
+    "github": {
+        "release": true
+    },
+    "npm": {
+        "publish": false
+    }
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}${separator}[Branch: main]"
+}

README.md

@@ -0,0 +1,17 @@
+# tab.webcomponent
+
+[![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/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.

custom-elements.json

@@ -0,0 +1,56 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "dist/ColorWheel.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "a color wheel",
+                    "name": "ColorWheel",
+                    "members": [
+                        {
+                            "kind": "field",
+                            "name": "value",
+                            "type":  {
+                                "text": "string"
+                            }
+                        }
+                    ],
+                    "attributes": [
+                        {
+                            "name": "value",
+                            "fieldName": "value"
+                        }
+                    ],
+                    "events": [
+                        {
+                            "name": "value-changed",
+                            "description": "raised when the value changes",
+                            "type": {
+                                "title": "string"
+                            }
+                        }
+                    ],
+                    "superclass": {
+                        "name": "BaseCustomWebComponentConstructorAppend"
+                    },
+                    "tagName": "node-projects-color-wheel",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "node-projects-color-wheel",
+                    "declaration": {
+                        "name": "ColorWheel",
+                        "module": "dist/ColorWheel.js"
+                    }
+                }
+            ]
+        }
+    ]
+}