@progressive-development/pd-wizard 0.5.8 → 0.6.0

package/dist/generated/locale-codes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export declare const sourceLocale = "dev";
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export declare const targetLocales: readonly ["be", "de", "en"];
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export declare const allLocales: readonly ["be", "de", "dev", "en"];
+//# sourceMappingURL=locale-codes.d.ts.map

package/dist/generated/locale-codes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-codes.d.ts","sourceRoot":"","sources":["../../src/generated/locale-codes.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,YAAY,QAAQ,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,aAAa,6BAA8B,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,UAAU,oCAAqC,CAAC"}

package/dist/generated/locales/be.d.ts

@@ -0,0 +1,6 @@
+export declare const templates: {
+    "pd.wizard.button.back": string;
+    "pd.wizard.button.next": string;
+    "pd.wizard.button.send": string;
+};
+//# sourceMappingURL=be.d.ts.map

package/dist/generated/locales/be.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;CAIrB,CAAC"}

package/dist/generated/locales/de.d.ts

@@ -0,0 +1,6 @@
+export declare const templates: {
+    "pd.wizard.button.back": string;
+    "pd.wizard.button.next": string;
+    "pd.wizard.button.send": string;
+};
+//# sourceMappingURL=de.d.ts.map

package/dist/generated/locales/de.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;CAIrB,CAAC"}

package/dist/generated/locales/en.d.ts

@@ -0,0 +1,6 @@
+export declare const templates: {
+    "pd.wizard.button.back": string;
+    "pd.wizard.button.next": string;
+    "pd.wizard.button.send": string;
+};
+//# sourceMappingURL=en.d.ts.map

package/dist/generated/locales/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;CAIrB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { PdWizard } from './pd-wizard.js';
+export type { PdWizardStep } from './types.js';
+export { templates as beTemplates } from './generated/locales/be.js';
+export { templates as deTemplates } from './generated/locales/de.js';
+export { templates as enTemplates } from './generated/locales/en.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { PdWizard } from "./src/PdWizard.js";
+import { PdWizard } from "./pd-wizard.js";
 import { templates } from "./locales/be.js";
 import { templates as templates2 } from "./locales/de.js";
 import { templates as templates3 } from "./locales/en.js";

package/dist/locales/be.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/be'
+export {}

package/dist/locales/de.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/de'
+export {}

package/dist/locales/en.d.ts

@@ -0,0 +1,2 @@
+export * from '../generated/locales/en'
+export {}

package/dist/pd-steps.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { PdWizardStep } from './types';
+/**
+ * @tag pd-steps
+ * @summary Fortschrittsanzeige in Kreis- oder Tab-Optik
+ *
+ * @fires go-to - wenn ein abgeschlossener Schritt erneut geklickt wird
+ */
+export declare class PdSteps extends LitElement {
+    /**
+     * Schritte mit Namen
+     */
+    steps: PdWizardStep[];
+    /**
+     * Der aktuell sichtbare Schritt (1-basiert)
+     */
+    currentStepNr: number;
+    /**
+     * Darstellungsmodus: `circle` oder `tab` (aktuell beide gleich)
+     */
+    styleTyp: "circle" | "tab";
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    private _renderCircle;
+    private _stepClicked;
+}
+//# sourceMappingURL=pd-steps.d.ts.map

package/dist/pd-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-steps.d.ts","sourceRoot":"","sources":["../src/pd-steps.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IAEH,KAAK,EAAE,YAAY,EAAE,CAAM;IAE3B;;OAEG;IAEH,aAAa,SAAO;IAEpB;;OAEG;IAEH,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAY;IAEtC,OAAgB,MAAM,EAAE,cAAc,CA2GpC;IAEO,MAAM;IAIf,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,YAAY;CAcrB"}

package/dist/{src/PdSteps.js → pd-steps.js}

@@ -1,28 +1,86 @@
-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.
- */
-class PdSteps extends LitElement {
-  /**
-   * Fired when `step` (when not current) clicked.
-   * @event step-clicked
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdSteps = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.currentStepNr = -99;
+    this.styleTyp = "circle";
+  }
+  render() {
+    return this._renderCircle();
+  }
+  _renderCircle() {
+    return html`
+      <div class="parent ${this.styleTyp}">
+        ${this.styleTyp === "circle" ? html`<hr />` : ""}
+        ${this.steps.map((st, index) => {
+      const stepNr = index + 1;
+      const isCurrent = this.currentStepNr === stepNr;
+      const isPassed = this.currentStepNr > stepNr;
+      const classNames = [
+        "step",
+        this.styleTyp,
+        isCurrent ? "current" : isPassed ? "passed" : ""
+      ].join(" ");
+      const nrClassNames = [
+        "step-nr",
+        isCurrent ? "current" : isPassed ? "passed" : ""
+      ].join(" ");
+      const nameClassNames = [
+        "step-name",
+        isCurrent ? "current" : isPassed ? "passed" : ""
+      ].join(" ");
+      return html`
+            <div class="step-container">
+              <div
+                class="${classNames}"
+                data-step="${stepNr}"
+                @click=${this._stepClicked}
+              >
+                <span class="${nrClassNames}">${stepNr}</span>
+              </div>
+              <span class="${nameClassNames}">${st.name}</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  _stepClicked(e) {
+    const stepStr = e.currentTarget.dataset.step;
+    const step = Number(stepStr);
+    if (!isNaN(step) && step < this.currentStepNr) {
+      this.dispatchEvent(
+        new CustomEvent("go-to", {
+          detail: { step },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+};
+PdSteps.styles = [
+  PdColorStyles,
+  PdFontStyles,
+  css`
       :host {
-
-        --circle-size: var(--pd-step-circle-size, 40px);        
-
+        --circle-size: var(--pd-step-circle-size, 40px);
         display: block;
         background-color: var(--pd-steps-bg-color, var(--pd-default-col));
-        
         padding-top: var(--pd-step-padding-top, 0.5em);
-        /* needed for the absolut step name */
         padding-bottom: calc(var(--pd-step-name-font-size, 1em) * 2.5);
       }
 
@@ -43,12 +101,12 @@ class PdSteps extends LitElement {
         position: relative;
       }
 
-      /* Kreis-Styling */
       .step.circle {
         width: var(--circle-size);
         height: var(--circle-size);
         border-radius: 50%;
-        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-circle-border-color, white);
+        border: solid var(--pd-step-circle-border-size, 2px)
+          var(--pd-step-circle-border-color, white);
         background-color: var(--pd-step-circle-bg-color, var(--pd-default-col));
         display: flex;
         justify-content: center;
@@ -63,12 +121,10 @@ class PdSteps extends LitElement {
         font-weight: bold;
         color: var(--pd-step-circle-nr-color, white);
         font-size: calc(var(--circle-size) / 1.8);
-        // line-height: 1;
         position: absolute;
         pointer-events: none;
       }
 
-      /* Linien-Styling */
       hr {
         background-color: var(--pd-step-hr-color, white);
         height: 2px;
@@ -76,39 +132,44 @@ class PdSteps extends LitElement {
         top: 50%;
         left: 0;
         width: 100%;
-        z-index: 50; /* Make sure the hr is under the circle */                        
+        z-index: 50;
         border-style: none;
-        border-width: 0em;
-        margin:0;
+        border-width: 0;
+        margin: 0;
       }
 
-      /* Schritt-Name Styling */
       .step-name {
         font-family: var(--pd-default-font-title-family);
         color: var(--pd-step-name-color, white);
         font-size: var(--pd-step-name-font-size, 1em);
         font-weight: bold;
         position: absolute;
-        top: calc(var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2));
+        top: calc(
+          var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2)
+        );
       }
 
       .current {
         color: var(--pd-step-color-current, var(--pd-default-hover-col));
       }
+
       .step.circle.current {
-        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-current, var(--pd-default-hover-col));
+        border-color: var(--pd-step-color-current, var(--pd-default-hover-col));
       }
 
       .passed {
         color: var(--pd-step-color-passed, var(--pd-default-dark-col));
       }
+
       .step.circle.passed {
-        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-passed, var(--pd-default-success-col));
-        background-color: var(--pd-default-success-light-col);   
-        cursor: pointer;     
+        border-color: var(
+          --pd-step-color-passed,
+          var(--pd-default-success-col)
+        );
+        background-color: var(--pd-default-success-light-col);
+        cursor: pointer;
       }
 
-      /* Dynamische Anpassung für kleine Bildschirme */
       @media (max-width: 700px) {
         :host {
           --circle-size: 30px;
@@ -117,74 +178,20 @@ class PdSteps extends LitElement {
           font-size: 0.9em;
         }
       }
-      
     `
-    ];
-  }
-  static get properties() {
-    return {
-      /**
-       * The steps for this component
-       */
-      steps: { type: Array },
-      currentStepNr: { type: Number },
-      styleTyp: { type: String }
-    };
-  }
-  constructor() {
-    super();
-    this.steps = [];
-    this.currentStepNr = -99;
-    this.styleTyp = "circle";
-  }
-  render() {
-    switch (this.styleTyp) {
-      case "circle":
-        return this._renderCircle();
-      case "tab":
-        return this._renderCircle();
-      default:
-        return "";
-    }
-  }
-  _renderCircle() {
-    return html`      
-      <div class="parent ${this.styleTyp}">
-        ${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`
-            <div class="step-container">
-              <div
-                class="step ${this.styleTyp} ${pClass}"
-                data-step="${index + 1}"
-                @click="${this._stepClicked}"
-              >
-                <span class="step-nr ${pClass}">${index + 1}</span>
-              </div>
-              <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", {
-          detail: {
-            step: stepNr
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-}
-window.customElements.define("pd-steps", PdSteps);
+];
+__decorateClass([
+  property({ type: Array })
+], PdSteps.prototype, "steps", 2);
+__decorateClass([
+  property({ type: Number })
+], PdSteps.prototype, "currentStepNr", 2);
+__decorateClass([
+  property({ type: String })
+], PdSteps.prototype, "styleTyp", 2);
+PdSteps = __decorateClass([
+  customElement("pd-steps")
+], PdSteps);
+export {
+  PdSteps
+};

package/dist/pd-wizard.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { PdWizardStep } from './types.js';
+/**
+ * A multi-step wizard UI component.
+ *
+ * @fires next-step - Fired when the "Weiter" button is clicked
+ * @fires previous-step - Fired when the "Zurück" button is clicked
+ * @fires submit-wizard - Fired when the wizard is submitted; can modify the `submited` flag in the detail object
+ * @fires close-wizard - Fired when the wizard is closed
+ *
+ * @slot slotLogo - The slot for the logo in the title area
+ * @slot step-1 - Content for step 1
+ * @slot step-2 - Content for step 2
+ * @slot step-3 - Content for step 3
+ * @slot step-4 - Content for step 4
+ * @slot step-5 - Content for step 5
+ */
+export declare class PdWizard extends LitElement {
+    /**
+     * Current step number (1-based index)
+     */
+    currentNumber: number;
+    /**
+     * List of wizard step definitions
+     */
+    wizardSteps: PdWizardStep[];
+    /**
+     * If true, renders the wizard in panel style (reduced header)
+     */
+    panelWizard: boolean;
+    /**
+     * Internal state to disable submit button after submission
+     */
+    private _submited;
+    static styles: CSSResultGroup;
+    protected render(): import('lit-html').TemplateResult<1>;
+    private _previousStep;
+    private _nextStep;
+    private _submit;
+    private _closeWizard;
+}
+//# sourceMappingURL=pd-wizard.d.ts.map

package/dist/pd-wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-wizard.d.ts","sourceRoot":"","sources":["../src/pd-wizard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,6CAA6C,CAAC;AAOrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;GAcG;AACH,qBAEa,QAAS,SAAQ,UAAU;IACtC;;OAEG;IAEH,aAAa,SAAO;IAEpB;;OAEG;IAEH,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAgB,MAAM,EAAE,cAAc,CAwJpC;IAEF,SAAS,CAAC,MAAM;IAwFhB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-wizard.js

@@ -1,4 +1,287 @@
-import { PdWizard } from "./src/PdWizard.js";
-if (!customElements.get("pd-wizard")) {
-  window.customElements.define("pd-wizard", PdWizard);
-}
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { pdIcons } 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 "./pd-steps.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdWizard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.currentNumber = -99;
+    this.wizardSteps = [];
+    this.panelWizard = false;
+    this._submited = false;
+  }
+  render() {
+    if (!this.wizardSteps.length) return html``;
+    const currentStep = this.wizardSteps[this.currentNumber - 1];
+    return html`
+      <div class="wiz-header">
+        ${this.panelWizard ? html`
+              <div class="wiz-panel-h">
+                <h1>${(currentStep == null ? void 0 : currentStep.title) ?? "No-Title"}</h1>
+                <pd-icon
+                  class="panel-close-icon"
+                  title="Close"
+                  activeIcon
+                  icon="${pdIcons.ICON_XCLOSE}"
+                  @click="${this._closeWizard}"
+                ></pd-icon>
+              </div>
+            ` : html`
+              <div class="wiz-title">
+                <slot name="slotLogo"></slot>
+                <span class="title">${(currentStep == null ? void 0 : currentStep.title) ?? "No-Title"}</span>
+                <pd-icon
+                  class="close"
+                  icon="${pdIcons.ICON_CLOSE}"
+                  @click="${this._closeWizard}"
+                ></pd-icon>
+              </div>
+            `}
+
+        <div class="wiz-breadcrumbs">
+          <pd-steps
+            .steps="${this.wizardSteps}"
+            .currentStepNr="${this.currentNumber}"
+          ></pd-steps>
+        </div>
+      </div>
+
+      <div class="wiz-content">
+        <div class="wiz-content-inner">
+          ${[1, 2, 3, 4, 5].map(
+      (i) => html`
+              <div style="${this.currentNumber === i ? "" : "display:none"}">
+                <slot name="step-${i}"></slot>
+              </div>
+            `
+    )}
+        </div>
+      </div>
+
+      <div class="wiz-buttons">
+        ${this.currentNumber >= 1 && this.wizardSteps.length ? html`
+              <pd-button
+                @button-clicked="${this._previousStep}"
+                text="${msg("Zurück", { id: "pd.wizard.button.back" })}"
+                style="visibility: ${this.currentNumber === 1 ? "hidden" : "visible"}"
+              ></pd-button>
+
+              ${this.currentNumber !== this.wizardSteps.length && (currentStep == null ? void 0 : currentStep.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
+                      primary
+                      ?disabled="${this._submited}"
+                      @button-clicked="${this._submit}"
+                      text="${msg("Absenden", { id: "pd.wizard.button.send" })}"
+                    ></pd-button>
+                  ` : ""}
+            ` : ""}
+      </div>
+    `;
+  }
+  _previousStep() {
+    this.dispatchEvent(new CustomEvent("previous-step"));
+  }
+  _nextStep() {
+    this.dispatchEvent(new CustomEvent("next-step"));
+  }
+  _submit() {
+    const detail = { submited: false };
+    this.dispatchEvent(new CustomEvent("submit-wizard", { detail }));
+    this._submited = detail.submited;
+  }
+  _closeWizard() {
+    this.dispatchEvent(new CustomEvent("close-wizard"));
+  }
+};
+PdWizard.styles = [
+  PdColorStyles,
+  PdFontStyles,
+  css`
+      :host {
+        /* These values are used more than onnce and dfined here for short access */
+        --my-height: var(--pd-wizard-title-height, 110px);
+        --my-header-font-color: var(
+          --pd-wizard-header-font-col,
+          var(--pd-default-bg-col)
+        );
+        --my-header-bg-col: var(
+          --pd-wizard-header-bg-col,
+          var(--pd-default-col)
+        );
+
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .wiz-header {
+        flex-grow: 0;
+      }
+
+      .wiz-title {
+        position: relative;
+        text-align: center;
+        background-color: var(--my-header-bg-col);
+        height: var(---my-height);
+        padding-left: var(--pd-wizard-title-padding-left, 0);
+        color: var(--my-header-font-color);
+      }
+
+      :host(.top-rounded) .wiz-title {
+        border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
+        border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
+      }
+
+      .title {
+        font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-wizard-header-font-size, 2em);
+        font-weight: bolder;
+        line-height: var(--my-height);
+      }
+
+      /* The Close Icon */
+      .close {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+
+        cursor: pointer;
+
+        --pd-icon-size: 2em;
+        --pd-icon-stroke-col-active: var(--pd-default-col);
+        --pd-icon-col-active: white;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: var(--pd-default-hover-col);
+        --pd-icon-stroke-col: var(--pd-default-hover-col);
+      }
+
+      .wiz-content {
+        display: flex;
+        justify-content: var(--pd-wizard-justify-content, center);
+        flex-grow: 1;
+
+        background-color: var(
+          --pd-wizard-content-bg-col,
+          var(--pd-default-bg-col)
+        );
+        padding: var(--pd-wizard-content-padding, 1em);
+        overflow-y: var(--pd-wizard-content-scroll, auto);
+      }
+
+      .wiz-content-inner {
+        background-color: var(
+          --pd-wizard-content-inner-bg-col,
+          var(--pd-default-bg-col)
+        );
+        max-width: var(--pd-wizard-content-max-width, 1024px);
+        width: var(--pd-wizard-content-width, 75%);
+      }
+
+      .wiz-buttons {
+        display: flex;
+        justify-content: var(--pd-wizard-justify-buttons, space-around);
+        flex-grow: 0;
+        padding: 1em;
+
+        background: linear-gradient(
+          to top,
+          var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
+          var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col))
+            100%
+        );
+      }
+
+      :host(.bottom-rounded) .wiz-buttons {
+        border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
+        border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
+      }
+
+      /* 
+       * CSS for panel wizard 
+       */
+      .wiz-panel-h {
+        padding: var(--pd-wizard-header-panel-padding, 0);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(
+          --pd-wizard-header-panel-bg-col,
+          var(--pd-default-col)
+        );
+        position: relative;
+      }
+
+      .wiz-panel-h h1 {
+        color: var(--pd-wizard-header-panel-title-col, white);
+        padding: 0;
+        margin: 0.8em 0 0.5em 0;
+        font-size: var(--pd-wizard-header-font-size, 1.2em);
+        font-family: var(--pd-default-font-title-family);
+      }
+
+      .panel-close-icon {
+        --pd-icon-size: 2em;
+        --pd-icon-stroke-col-active: var(--pd-default-col);
+        --pd-icon-col-active: white;
+        cursor: pointer;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 700px) {
+        .close {
+          font-size: 0.7rem;
+          --pd-icon-size: 1.2rem;
+          top: 3px;
+          right: 3px;
+        }
+        .title {
+          margin-left: 50px;
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdWizard.prototype, "currentNumber", 2);
+__decorateClass([
+  property({ type: Array })
+], PdWizard.prototype, "wizardSteps", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdWizard.prototype, "panelWizard", 2);
+__decorateClass([
+  state()
+], PdWizard.prototype, "_submited", 2);
+PdWizard = __decorateClass([
+  customElement("pd-wizard"),
+  localized()
+], PdWizard);
+export {
+  PdWizard
+};

package/dist/stories/steps.stories.d.ts

@@ -0,0 +1,42 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+    render: ({ steps, currentStepNr, styleTyp }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        steps: {
+            control: "object";
+        };
+        currentStepNr: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+        };
+        styleTyp: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+/**
+ * Standard-Zustand mit mehreren Schritten und aktuellem Schritt
+ */
+export declare const DefaultSteps: Story;
+/**
+ * Variante mit anderem Layout-Stil (tab), nur zwei Schritte
+ */
+export declare const TabSteps: Story;
+/**
+ * Zeigt die erste Stufe als aktiv
+ */
+export declare const FirstStepActive: Story;
+/**
+ * Zeigt alle Schritte als "abgeschlossen"
+ */
+export declare const AllStepsPassed: Story;
+//# sourceMappingURL=steps.stories.d.ts.map

package/dist/stories/steps.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.stories.d.ts","sourceRoot":"","sources":["../../src/stories/steps.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,gBAAgB,CAAC;AAExB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAuBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC"}

package/dist/stories/wizard.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { PdWizardStep } from '../types.js';
+type WizardArgs = {
+    wizardSteps: PdWizardStep[];
+    currentNumber: number;
+};
+declare const meta: Meta<WizardArgs>;
+export default meta;
+type Story = StoryObj<WizardArgs>;
+export declare const Wizard: Story;
+export declare const WizardPanel: Story;
+//# sourceMappingURL=wizard.stories.d.ts.map

package/dist/stories/wizard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.stories.d.ts","sourceRoot":"","sources":["../../src/stories/wizard.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,iBAAiB,CAAC;AAEzB,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA2B1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkEzB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Typdefinitionen für die PdWizard-Komponente
+ * @license Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+/**
+ * Repräsentiert einen einzelnen Schritt im Wizard.
+ */
+export interface PdWizardStep {
+    /**
+     * Interner Name oder Schlüssel des Schritts (optional).
+     */
+    name?: string;
+    /**
+     * Titel, der im Wizard-Kopfbereich angezeigt wird.
+     */
+    title: string;
+    /**
+     * Optional: Gibt an, ob ein „Weiter“-Button für diesen Schritt angezeigt werden soll.
+     * Wenn `false`, wird kein Button angezeigt. Standard ist `true`.
+     */
+    next?: boolean;
+    /**
+     * Beliebige zusätzliche Daten für den Schritt.
+     */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-wizard",
+  "version": "0.6.0",
   "description": "Webcomponent pd-wizard following open-wc recommendations",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.8",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-wizard": "./dist/pd-wizard.js",
@@ -20,70 +21,53 @@
     "LICENSE"
   ],
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude dist,demo",
     "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",
+    "clean": "rm -rf dist",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
+    "check": "npm run lint && npm run build",
+    "prepublishOnly": "npm run clean && npm run check",
     "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.5.7",
-    "@progressive-development/pd-icon": "^0.5.0",
-    "@progressive-development/pd-shared-styles": "0.1.1",
-    "lit": "^2.8.0"
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-forms": "^0.6.0",
+    "@progressive-development/pd-icon": "^0.6.1",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
+    "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
+    "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.6.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/test": "^8.0.10",
+    "@storybook/test": "^8.6.14",
     "@storybook/web-components": "^8.0.10",
-    "@storybook/web-components-vite": "^8.0.10",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.10.0",
+    "@storybook/web-components-vite": "^8.6.14",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.13.1",
-    "storybook": "^8.0.10",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8"
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.14",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.9"
   },
   "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  },
   "keywords": [
     "pd",
     "progressive",

package/dist/src/PdWizard.js

@@ -1,279 +0,0 @@
-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.
- */
-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
-   */
-  /**
-   * Fired when wizard submited
-   * @event close-wizard
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-
-        /* These values are used more than onnce and dfined here for short access */
-        --my-height: var(--pd-wizard-title-height, 110px);
-        --my-header-font-color: var(--pd-wizard-header-font-col, var(--pd-default-bg-col));
-        --my-header-bg-col: var(--pd-wizard-header-bg-col, var(--pd-default-col));
-
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .wiz-header {
-        flex-grow: 0;
-      }
-
-      .wiz-title {
-        position: relative;
-        text-align: center;
-        background-color: var(--my-header-bg-col);
-        height: var(---my-height);
-        padding-left: var(--pd-wizard-title-padding-left, 0);
-        color: var(--my-header-font-color);
-      }
-
-      :host(.top-rounded) .wiz-title {
-        border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
-        border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
-      }
-
-      .title {
-        font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-wizard-header-font-size, 2em);
-        font-weight: bolder;
-        line-height: var(--my-height);
-      }
-
-      /* The Close Icon */
-      .close {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-
-        cursor: pointer;
-
-        --pd-icon-size: 2em;
-        --pd-icon-stroke-col-active: var(--pd-default-col);
-        --pd-icon-col-active: white;
-      }
-
-      .close:hover,
-      .close:focus {
-        color: var(--pd-default-hover-col);
-        --pd-icon-stroke-col: var(--pd-default-hover-col);
-      }      
-      
-      .wiz-content {        
-        display: flex;
-        justify-content: var(--pd-wizard-justify-content, center);        
-        flex-grow: 1;
-
-        background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
-        padding: var(--pd-wizard-content-padding, 1em);
-        overflow-y: var(--pd-wizard-content-scroll, auto);
-      }
-
-      .wiz-content-inner {
-        background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
-        max-width: var(--pd-wizard-content-max-width, 1024px);
-        width: var(--pd-wizard-content-width, 75%);
-      }
-
-      .wiz-buttons {
-        display: flex;
-        justify-content: var(--pd-wizard-justify-buttons, space-around);
-        flex-grow: 0;
-        padding: 1em;
-
-        background: linear-gradient(to top,
-          var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
-          var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
-      }
-
-      :host(.bottom-rounded) .wiz-buttons {
-        border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
-        border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
-      }
-
-      /* 
-       * CSS for panel wizard 
-       */
-      .wiz-panel-h {
-        padding: var(--pd-wizard-header-panel-padding, 0);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--pd-wizard-header-panel-bg-col, var(--pd-default-col));
-        position: relative;
-      }
-
-      .wiz-panel-h h1 {
-        color: var(--pd-wizard-header-panel-title-col, white);
-        padding: 0;
-        margin: 0.8em 0 0.5em 0;
-        font-size: var(--pd-wizard-header-font-size, 1.2em);
-        font-family: var(--pd-default-font-title-family);
-      }
-
-      .panel-close-icon {
-        --pd-icon-size: 2em;
-        --pd-icon-stroke-col-active: var(--pd-default-col);
-        --pd-icon-col-active: white;
-        cursor: pointer;
-        position: absolute;
-        right: 0px;
-        top: 0px;
-      }
-
-
-      /* Size Elements for small width */
-      @media (max-width: 700px) {
-        .close {
-          font-size: 0.7rem;
-          --pd-icon-size: 1.2rem;
-          top: 3px;
-          right: 3px;
-        }
-        .title {
-          margin-left: 50px;
-        }
-      }
-
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      currentNumber: { type: Number },
-      wizardSteps: { Array },
-      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;
-  }
-  render() {
-    if (this.wizardSteps && this.wizardSteps.length > 0) {
-      return html`        
-
-        <div class="wiz-header">
-
-        ${this.panelWizard ? html`
-          <div class="wiz-panel-h">
-            <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>
-          ` : html`
-            <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
-              >                          
-              <pd-icon class="close" icon="${ICON_CLOSE}" @click="${this._closeWizard}"></pd-icon>            
-            </div>          
-          `}
-
-          <div class="wiz-breadcrumbs">
-            <pd-steps
-              .steps="${this.wizardSteps}"
-              currentStepNr="${this.currentNumber}"
-            ></pd-steps>
-          </div>
-
-        </div>
-
-        <div class="wiz-content">
-          
-          <div class="wiz-content-inner">
-            <div style="${this.currentNumber === 1 ? "" : "display:none"}">
-              <slot name="step-1"></slot>
-            </div>
-            <div style="${this.currentNumber === 2 ? "" : "display:none"}">
-              <slot name="step-2"></slot>
-            </div>
-            <div style="${this.currentNumber === 3 ? "" : "display:none"}">
-              <slot name="step-3"></slot>
-            </div>
-            <div style="${this.currentNumber === 4 ? "" : "display:none"}">
-              <slot name="step-4"></slot>
-            </div>
-            <div style="${this.currentNumber === 5 ? "" : "display:none"}">
-              <slot name="step-5"></slot>
-            </div>
-          </div>
-
-        </div>
-        
-        <div class="wiz-buttons">
-        ${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"};"
-              ></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
-                    primary
-                    ?disabled="${this._submited}"
-                    @button-clicked="${this._submit}"
-                    text="${msg("Absenden", { id: "pd.wizard.button.send" })}"
-                  ></pd-button>` : ""}
-            ` : ""}
-        </div>
-      `;
-    }
-    return "";
-  }
-  _previousStep() {
-    this.dispatchEvent(new CustomEvent("previous-step"));
-  }
-  _nextStep() {
-    this.dispatchEvent(new CustomEvent("next-step"));
-  }
-  _submit() {
-    const detail = { submited: false };
-    this.dispatchEvent(new CustomEvent("submit-wizard", { detail }));
-    this._submited = detail.submited;
-  }
-  _closeWizard() {
-    this.dispatchEvent(new CustomEvent("close-wizard"));
-  }
-}
-export {
-  PdWizard
-};