@progressive-development/pd-wizard 0.1.83 → 0.5.0

package/dist/index.js

@@ -0,0 +1,10 @@
+import { PdWizard } from "./src/PdWizard.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdWizard,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,8 @@
+const templates = {
+  "pd.wizard.button.back": `Terug`,
+  "pd.wizard.button.next": `Volgende`,
+  "pd.wizard.button.send": `Verzenden`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,8 @@
+const templates = {
+  "pd.wizard.button.back": `Zurück`,
+  "pd.wizard.button.next": `Weiter`,
+  "pd.wizard.button.send": `Absenden`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,8 @@
+const templates = {
+  "pd.wizard.button.back": `Back`,
+  "pd.wizard.button.next": `Next`,
+  "pd.wizard.button.send": `Submit`
+};
+export {
+  templates
+};

package/dist/pd-wizard.js

@@ -0,0 +1,4 @@
+import { PdWizard } from "./src/PdWizard.js";
+if (!customElements.get("pd-wizard")) {
+  window.customElements.define("pd-wizard", PdWizard);
+}

package/{src → dist/src}/PdSteps.js

@@ -1,28 +1,18 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, css, html } from "lit";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
 class PdSteps extends LitElement {
   /**
    * Fired when `step` (when not current) clicked.
    * @event step-clicked
    */
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
 
@@ -128,9 +118,9 @@ class PdSteps extends LitElement {
         }
       }
       
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       /**
@@ -138,39 +128,35 @@ class PdSteps extends LitElement {
        */
       steps: { type: Array },
       currentStepNr: { type: Number },
-      styleTyp: { type: String },
+      styleTyp: { type: String }
     };
   }
-
   constructor() {
     super();
     this.steps = [];
     this.currentStepNr = -99;
-    this.styleTyp = 'circle';
+    this.styleTyp = "circle";
   }
-
   render() {
     switch (this.styleTyp) {
-      // TODO: Noch das gleiche, ggf. später gebraucht...
-      case 'circle':
+      case "circle":
         return this._renderCircle();
-      case 'tab':
+      case "tab":
         return this._renderCircle();
       default:
-        return '';
+        return "";
     }
   }
-
   _renderCircle() {
     return html`      
       <div class="parent ${this.styleTyp}">
-        ${this.styleTyp === 'circle' ? html`<hr />` : ''}
+        ${this.styleTyp === "circle" ? html`<hr />` : ""}
         ${this.steps.map((st, index) => {
-          let pClass = '';
-          if (this.currentStepNr > index) {
-            pClass = this.currentStepNr === index + 1 ? 'current' : 'passed';
-          }
-          return html`
+      let pClass = "";
+      if (this.currentStepNr > index) {
+        pClass = this.currentStepNr === index + 1 ? "current" : "passed";
+      }
+      return html`
             <div class="step-container">
               <div
                 class="step ${this.styleTyp} ${pClass}"
@@ -182,25 +168,23 @@ class PdSteps extends LitElement {
               <span class="step-name ${pClass}">${st.name}</span>
             </div>
           `;
-        })}
+    })}
       </div>
     `;
   }
-
   _stepClicked(e) {
     const stepNr = e.target.dataset.step;
     if (stepNr < this.currentStepNr) {
       this.dispatchEvent(
-        new CustomEvent('go-to', {
+        new CustomEvent("go-to", {
           detail: {
-            step: stepNr,
+            step: stepNr
           },
           bubbles: true,
-          composed: true,
+          composed: true
         })
       );
     }
   }
 }
-
-window.customElements.define('pd-steps', PdSteps);
+window.customElements.define("pd-steps", PdSteps);

package/{src → dist/src}/PdWizard.js

@@ -1,38 +1,23 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, css, html } from "lit";
+import { updateWhenLocaleChanges, msg } from "@lit/localize";
+import { ICON_XCLOSE, ICON_CLOSE } from "@progressive-development/pd-icon";
+import "@progressive-development/pd-icon/pd-icon";
+import "@progressive-development/pd-forms/pd-button";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
+import "./PdSteps.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-import { msg, updateWhenLocaleChanges } from '@lit/localize';
-
-import { ICON_CLOSE as CLOSEICON, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-import '@progressive-development/pd-forms/pd-button.js';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-import './PdSteps.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdWizard extends LitElement {
+class PdWizard extends LitElement {
   /**
    * Fired when next step clicked
    * @event next-step
    */
-
   /**
    * Fired when previous step clicked
    * @event previous-step
    */
-
   /**
    * Fired when wizard submited
    * @event submit-wizard
@@ -41,10 +26,10 @@ export class PdWizard extends LitElement {
    * Fired when wizard submited
    * @event close-wizard
    */
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
 
@@ -178,28 +163,26 @@ export class PdWizard extends LitElement {
         }
       }
 
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       currentNumber: { type: Number },
       wizardSteps: { Array },
-      logo: { type: Object },      
-      panelWizard: { type: Boolean },      
-      _submited: { type: Boolean, state: true },
+      logo: { type: Object },
+      panelWizard: { type: Boolean },
+      _submited: { type: Boolean, state: true }
     };
   }
-
   constructor() {
     super();
     updateWhenLocaleChanges(this);
     this.currentNumber = -99;
-    this.wizardSteps = [];    
-    this.panelWizard = false;    
-    this._submited = false;    
+    this.wizardSteps = [];
+    this.panelWizard = false;
+    this._submited = false;
   }
-
   render() {
     if (this.wizardSteps && this.wizardSteps.length > 0) {
       return html`        
@@ -208,9 +191,7 @@ export class PdWizard extends LitElement {
 
         ${this.panelWizard ? html`
           <div class="wiz-panel-h">
-            <h1>${this.currentNumber >= 1 && this.wizardSteps
-                  ? this.wizardSteps[this.currentNumber - 1].title
-                  : 'No-Title'}</h1>
+            <h1>${this.currentNumber >= 1 && this.wizardSteps ? this.wizardSteps[this.currentNumber - 1].title : "No-Title"}</h1>
             <pd-icon class="panel-close-icon" 
               title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
           </div>
@@ -218,11 +199,9 @@ export class PdWizard extends LitElement {
             <div class="wiz-title">
               <slot name="slotLogo"></slot>
               <span class="title"
-                >${this.currentNumber >= 1 && this.wizardSteps
-                  ? this.wizardSteps[this.currentNumber - 1].title
-                  : 'No-Title'}</span
+                >${this.currentNumber >= 1 && this.wizardSteps ? this.wizardSteps[this.currentNumber - 1].title : "No-Title"}</span
               >                          
-              <pd-icon class="close" icon="${CLOSEICON}" @click="${this._closeWizard}"></pd-icon>            
+              <pd-icon class="close" icon="${ICON_CLOSE}" @click="${this._closeWizard}"></pd-icon>            
             </div>          
           `}
 
@@ -238,19 +217,19 @@ export class PdWizard extends LitElement {
         <div class="wiz-content">
           
           <div class="wiz-content-inner">
-            <div style="${this.currentNumber === 1 ? '' : 'display:none'}">
+            <div style="${this.currentNumber === 1 ? "" : "display:none"}">
               <slot name="step-1"></slot>
             </div>
-            <div style="${this.currentNumber === 2 ? '' : 'display:none'}">
+            <div style="${this.currentNumber === 2 ? "" : "display:none"}">
               <slot name="step-2"></slot>
             </div>
-            <div style="${this.currentNumber === 3 ? '' : 'display:none'}">
+            <div style="${this.currentNumber === 3 ? "" : "display:none"}">
               <slot name="step-3"></slot>
             </div>
-            <div style="${this.currentNumber === 4 ? '' : 'display:none'}">
+            <div style="${this.currentNumber === 4 ? "" : "display:none"}">
               <slot name="step-4"></slot>
             </div>
-            <div style="${this.currentNumber === 5 ? '' : 'display:none'}">
+            <div style="${this.currentNumber === 5 ? "" : "display:none"}">
               <slot name="step-5"></slot>
             </div>
           </div>
@@ -258,54 +237,43 @@ export class PdWizard extends LitElement {
         </div>
         
         <div class="wiz-buttons">
-        ${this.currentNumber >= 1 && this.wizardSteps
-          ? html`
+        ${this.currentNumber >= 1 && this.wizardSteps ? html`
               <pd-button
                 @button-clicked="${this._previousStep}"
-                text="${msg('Zurück', {id: 'pd.wizard.button.back'})}"
-                style="visibility: ${this.currentNumber === 1
-                  ? 'hidden'
-                  : 'visible'};"
+                text="${msg("Zurück", { id: "pd.wizard.button.back" })}"
+                style="visibility: ${this.currentNumber === 1 ? "hidden" : "visible"};"
               ></pd-button>
-              ${this.currentNumber !== this.wizardSteps.length &&
-              this.wizardSteps[this.currentNumber - 1].next !== false
-                ? html`<pd-button
+              ${this.currentNumber !== this.wizardSteps.length && this.wizardSteps[this.currentNumber - 1].next !== false ? html`<pd-button
                     @button-clicked="${this._nextStep}"
-                    text="${msg('Weiter', {id: 'pd.wizard.button.next'})}"
-                  ></pd-button>`
-                : ''}
-              ${this.currentNumber === this.wizardSteps.length
-                ? html`<pd-button
+                    text="${msg("Weiter", { id: "pd.wizard.button.next" })}"
+                  ></pd-button>` : ""}
+              ${this.currentNumber === this.wizardSteps.length ? html`<pd-button
                     primary
                     ?disabled="${this._submited}"
                     @button-clicked="${this._submit}"
-                    text="${msg('Absenden', {id: 'pd.wizard.button.send'})}"
-                  ></pd-button>`
-                : ''}
-            `
-          : ''}
+                    text="${msg("Absenden", { id: "pd.wizard.button.send" })}"
+                  ></pd-button>` : ""}
+            ` : ""}
         </div>
       `;
     }
-    return '';
+    return "";
   }
-
   _previousStep() {
-    this.dispatchEvent(new CustomEvent('previous-step'));
+    this.dispatchEvent(new CustomEvent("previous-step"));
   }
-
   _nextStep() {
-    this.dispatchEvent(new CustomEvent('next-step'));
+    this.dispatchEvent(new CustomEvent("next-step"));
   }
-
   _submit() {
-    const detail = {submited: false};
-    this.dispatchEvent(new CustomEvent('submit-wizard', {detail}));
+    const detail = { submited: false };
+    this.dispatchEvent(new CustomEvent("submit-wizard", { detail }));
     this._submited = detail.submited;
   }
-
   _closeWizard() {
-    // eslint-disable-next-line no-restricted-globals    
-    this.dispatchEvent(new CustomEvent('close-wizard'));
+    this.dispatchEvent(new CustomEvent("close-wizard"));
   }
 }
+export {
+  PdWizard
+};

package/package.json

@@ -1,62 +1,65 @@
 {
   "name": "@progressive-development/pd-wizard",
-  "description": "Webcomponent pd-wizard following open-wc recommendations",
-  "license": "SEE LICENSE IN LICENSE",
+  "description": "Webcomponent pd-wizard following open-wc recommendations",  
   "author": "PD Progressive Development",
-  "directories": {
-    "test": "test"
+  "license": "SEE LICENSE IN LICENSE",
+  "version": "0.5.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pd-wizard": "./dist/pd-wizard.js",
+    "./locales/be": "./dist/locales/be.js",
+    "./locales/de": "./dist/locales/de.js",
+    "./locales/en": "./dist/locales/en.js"
   },
-  "keywords": [
-    "pd",
-    "progressive",
-    "development",
-    "wizard",
-    "order",
-    "steps"
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
   ],
-  "version": "0.1.83",
-  "main": "index.js",
-  "module": "index.js",
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.{js,html}\" --write --ignore-path .gitignore",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest --watch",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-forms": "^0.2.16",
-    "@progressive-development/pd-icon": "^0.1.23",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-forms": "^0.5.0",
+    "@progressive-development/pd-icon": "^0.5.0",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.8.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@lit/localize-tools": "^0.6.10",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/web-components": "^7.6.4",
-    "@storybook/web-components-vite": "^7.6.4",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
+    "@lit/localize-tools": "^0.7.2",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/web-components": "^8.0.10",
+    "@storybook/web-components-vite": "^8.0.10",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.4"
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^8.0.10",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
@@ -80,5 +83,13 @@
       "eslint --fix",
       "prettier --write"
     ]
-  }
+  },
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "wizard",
+    "order",
+    "steps"
+  ]
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,13 +0,0 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
-const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,35 +0,0 @@
-
-<!-- .storybook/preview-head.html -->
-
-<!-- Pull in static files served from your Static directory or the internet -->
-<!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">
-
-<script>
-  // Redux assumes `process.env.NODE_ENV` exists in the ES module build.
-  // https://github.com/reactjs/redux/issues/2907
-  window.process = { env: { NODE_ENV: 'dev' } };
-</script>
-
-<style>
-
-    html,
-    body {    
-      padding: 0;
-      margin: 0;
-      min-height: 100%;
-      height: 100%; /* !!! works only with both, height/min-height */
-    }
-
-    /* storybook internal, sets root to 100% height => only then wizard flex grow works here in story book #root, in older version*/
-    #root-inner, #storybook-root {
-      height: 100%;
-    }
-
-    /* storybook internal, sets padding to 0 */
-    .sb-show-main.sb-main-padded {
-      padding: 0;
-    }
-
-</style>

package/.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/web-components').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../pd-wizard.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-wizard .title=${title}>
-          some light-dom
-        </pd-wizard>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/index.js

@@ -1,5 +0,0 @@
-export { PdWizard } from './src/PdWizard.js';
-
-export { templates as beTemplates } from './src/generated/locales/be.js';
-export { templates as deTemplates } from './src/generated/locales/de.js';
-export { templates as enTemplates } from './src/generated/locales/en.js';

package/lit-localize.json

@@ -1,18 +0,0 @@
-{
-    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
-    "sourceLocale": "dev",
-    "targetLocales": ["de", "en", "be"],
-    "inputFiles": [
-      "src/**/*.js"
-    ],
-    "output": {
-        "mode": "runtime",
-        "localeCodesModule": "src/generated/locale-codes.js",
-        "outputDir": "src/generated/locales"
-        
-    },
-    "interchange": {
-      "format": "xliff",
-      "xliffDir": "./xliff/"
-    }
-  }

package/pd-wizard.js

@@ -1,3 +0,0 @@
-import { PdWizard } from './src/PdWizard.js';
-
-window.customElements.define('pd-wizard', PdWizard);

package/src/generated/locale-codes.js

@@ -1,27 +0,0 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize.
-
-/**
- * The locale code that templates in this source code are written in.
- */
-export const sourceLocale = `dev`;
-
-/**
- * The other locale codes that this application is localized into. Sorted
- * lexicographically.
- */
-export const targetLocales = [
-  `be`,
-  `de`,
-  `en`,
-];
-
-/**
- * All valid project locale codes. Sorted lexicographically.
- */
-export const allLocales = [
-  `be`,
-  `de`,
-  `dev`,
-  `en`,
-];

package/src/generated/locales/be.js

@@ -1,16 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.wizard.button.back': `Terug`,
-'pd.wizard.button.next': `Volgende`,
-'pd.wizard.button.send': `Verzenden`,
-    };
-  

package/src/generated/locales/de.js

@@ -1,16 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.wizard.button.back': `Zurück`,
-'pd.wizard.button.next': `Weiter`,
-'pd.wizard.button.send': `Absenden`,
-    };
-  

package/src/generated/locales/en.js

@@ -1,16 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'pd.wizard.button.back': `Back`,
-'pd.wizard.button.next': `Next`,
-'pd.wizard.button.send': `Submit`,
-    };
-  

package/src/stories/index.stories.js

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-import '../../pd-wizard.js';
-
-export default {
-  title: 'PdWizard',
-  component: 'pd-wizard',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
-};
-
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
-  return html`
-    <pd-wizard
-      style="--pd-wizard-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-wizard>
-  `;
-}
-
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};

package/src/stories/steps.stories.js

@@ -1,32 +0,0 @@
-import { html } from 'lit';
-import '../PdSteps.js';
-
-export default {
-  title: 'Squi-Components/UI/Steps',
-  component: 'squi-steps',
-  argTypes: {
-    
-  },
-};
-
-function StepsTemplate({ steps, currentStepNr, styleTyp }) {
-  return html`
-    <squi-steps currentStepNr="${currentStepNr}" .steps="${steps}" styleTyp=${styleTyp}>      
-      </squi-steps>
-  `;
-}
-
-export const CircleNumber = StepsTemplate.bind({});
-CircleNumber.args = {
-  steps: [{name: 'Step 1'}, {name: 'Step 2'}, {name: 'Step 3'}, {name: 'Step 4'}],
-  currentStepNr: 2,
-  styleTyp: 'circle'
-};
-
-export const TabStyle = StepsTemplate.bind({});
-TabStyle.args = {
-  steps: [{name: 'Repair'}, {name: 'Billing'}],
-  currentStepNr: 1,
-  styleTyp: 'tab'
-};
-

package/src/stories/wizard.stories.js

@@ -1,171 +0,0 @@
-import { html } from 'lit';
-import '../../pd-wizard.js';
-
-export default {
-  title: 'PdWizard/Wizard',
-  component: 'pd-wizard',
-  argTypes: {},
-};
-
-function WizardTemplate({ wizardSteps, currentNumber }) {
-
-  let currentNr = currentNumber;
-
-  return html`
-    <pd-wizard
-      id="wizardId"
-      .wizardSteps="${wizardSteps}"
-      class="small-size_"
-      currentNumber="${currentNr}"
-      @previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
-      @next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
-    >
-      <div slot="step-1">
-        <h2>Das ist ein Titel 1</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
-      </div>
-      <div slot="step-2">
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-        <h2>Das ist ein Titel 2</h2>
-        <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-      </div>
-      <div slot="step-3">Test 3</div>
-      <div slot="step-4">Test 4</div>
-    </pd-wizard>
-  `;
-}
-
-function WizardPanelTemplate({ wizardSteps, currentNumber }) {
-
-  let currentNr = currentNumber;
-
-  return html`
-
-    <style>
-      :host {
-        display: block;
-      }
-
-      :host {
-        display: block;
-      }
-
-      /* The Modal (background) */
-      .modal {        
-        position: fixed; /* Stay in place */      
-        left: 0;
-        top: 0;
-        z-index: 100; /* Sit on top */        
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-                
-        width: 100%; /* Full width */
-        height: 100%; /* Full height */        
-        overflow: hidden;
-        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
-        background-color: var(--pd-modal-panel-bg-rgba, rgba(175, 193, 210, 0.8)); 
-      }
-
-      .content {
-        background-color: var(--pd-modal-panel-content-bg-col, var(--pd-default-bg-col, #edf7fd));
-        border: 2px solid var(--pd-modal-panel-content-border-col, var(--pd-default-col, #067394));
-        border-radius: 5px;
-
-        height: var(--pd-modal-panel-content-height, auto);
-        height: var(--pd-modal-panel-content-min-height, auto);
-        max-height: var(--pd-modal-panel-content-max-height, auto);
-        min-width: var(--pd-modal-panel-content-min-width, auto);
-        padding: var(--pd-modal-panel-content-padding, 0);
-        margin: var(--pd-modal-panel-content-margin, 1em);
-      }
-
-      .event-details-panel {
-        --pd-modal-panel-content-bg-col: white;
-        --pd-modal-panel-content-max-height: 90%;
-      }
-
-      .event-wizard-panel {
-        --pd-modal-panel-content-min-width: 60%;
-        --pd-modal-panel-content-min-height: 45em;
-        --pd-steps-padding-top: 0px;
-      }
-    </style>
-
-    <div id="modalId" class="modal event-wizard-panel">
-      <div class="content">    
-
-        <pd-wizard
-          id="wizardId"
-          panelWizard
-          .wizardSteps="${wizardSteps}"
-          currentNumber="${currentNr}"
-          @previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
-          @next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
-        >
-          <div slot="step-1">
-            <h2>Das ist ein Titel 1</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
-          </div>
-          <div slot="step-2">
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-            <h2>Das ist ein Titel 2</h2>
-            <p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
-          </div>
-          <div slot="step-3">Test 3</div>
-          <div slot="step-4">Test 4</div>
-        </pd-wizard>
-
-      </div>
-    </div>
-  `;
-}
-
-export const Wizard = WizardTemplate.bind({});
-Wizard.args = {
-  wizardSteps: [
-    { title: 'Step 1', name: 'Step 1' },
-    { title: 'Maintenance Bronze', name: 'Step 2' },
-    { title: 'Step 3', name: 'Step 3' },
-    { title: 'Step 4', name: 'Step 4' },
-  ],
-  currentNumber: 2,
-};
-
-export const WizardPanel = WizardPanelTemplate.bind({});
-WizardPanel.args = {
-  wizardSteps: [
-    { title: 'Step 1', name: 'Step 1' },
-    { title: 'Maintenance Bronze', name: 'Step 2' },
-    { title: 'Step 3', name: 'Step 3' },
-    { title: 'Step 4', name: 'Step 4' },
-  ],
-  currentNumber: 2,
-};

package/test/pd-wizard.test.js

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-
-import '../pd-wizard.js';
-
-describe('PdWizard', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture(html`<pd-wizard></pd-wizard>`);
-
-    expect(el.title).to.equal('Hey there');
-    expect(el.counter).to.equal(5);
-  });
-
-  it('increases the counter on button click', async () => {
-    const el = await fixture(html`<pd-wizard></pd-wizard>`);
-    el.shadowRoot.querySelector('button').click();
-
-    expect(el.counter).to.equal(6);
-  });
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture(
-      html`<pd-wizard title="attribute title"></pd-wizard>`
-    );
-
-    expect(el.title).to.equal('attribute title');
-  });
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture(html`<pd-wizard></pd-wizard>`);
-
-    await expect(el).shadowDom.to.be.accessible();
-  });
-});

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});

package/xliff/be.xlf

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-<file target-language="be" source-language="de" original="lit-localize-inputs" datatype="plaintext">
-<body>
-<trans-unit id="pd.wizard.button.back">
-  <source>Zurück</source>
-  <target>Terug</target>
-</trans-unit>
-<trans-unit id="pd.wizard.button.next">
-  <source>Weiter</source>
-  <target>Volgende</target>
-</trans-unit>
-<trans-unit id="pd.wizard.button.send">
-  <source>Absenden</source>
-  <target>Verzenden</target>
-</trans-unit>
-</body>
-</file>
-</xliff>

package/xliff/de.xlf

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-<file target-language="de" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
-<body>
-<trans-unit id="pd.wizard.button.back">
-  <source>Zurück</source>
-</trans-unit>
-<trans-unit id="pd.wizard.button.next">
-  <source>Weiter</source>
-</trans-unit>
-<trans-unit id="pd.wizard.button.send">
-  <source>Absenden</source>
-</trans-unit>
-</body>
-</file>
-</xliff>

package/xliff/en.xlf

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-<file target-language="en" source-language="de" original="lit-localize-inputs" datatype="plaintext">
-<body>
-<trans-unit id="pd.wizard.button.back">
-  <source>Zurück</source>
-  <target>Back</target>
-</trans-unit>
-<trans-unit id="pd.wizard.button.next">
-  <source>Weiter</source>
-  <target>Next</target>
-</trans-unit>
-<trans-unit id="pd.wizard.button.send">
-  <source>Absenden</source>
-  <target>Submit</target>
-</trans-unit>
-</body>
-</file>
-</xliff>