@progressive-development/pd-wizard 0.6.19 → 0.9.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { PdWizard } from './pd-wizard.js';
+export { PdWizard } from './pd-wizard/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';

package/dist/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,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,10 +1,5 @@
-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";
-export {
-  PdWizard,
-  templates as beTemplates,
-  templates2 as deTemplates,
-  templates3 as enTemplates
-};
+import './pd-wizard.js';
+export { templates as beTemplates } from './locales/be.js';
+export { templates as deTemplates } from './locales/de.js';
+export { templates as enTemplates } from './locales/en.js';
+export { PdWizard } from './pd-wizard/PdWizard.js';

package/dist/locales/be.js

@@ -3,6 +3,5 @@ const templates = {
   "pd.wizard.button.next": `Volgende`,
   "pd.wizard.button.send": `Verzenden`
 };
-export {
-  templates
-};
+
+export { templates };

package/dist/locales/de.js

@@ -3,6 +3,5 @@ const templates = {
   "pd.wizard.button.next": `Weiter`,
   "pd.wizard.button.send": `Absenden`
 };
-export {
-  templates
-};
+
+export { templates };

package/dist/locales/en.js

@@ -3,6 +3,5 @@ const templates = {
   "pd.wizard.button.next": `Next`,
   "pd.wizard.button.send": `Submit`
 };
-export {
-  templates
-};
+
+export { templates };

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

@@ -0,0 +1,44 @@
+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
+ * @slot step-6 - Content for step 6
+ * @tagname pd-wizard
+ */
+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').TemplateResult<1>;
+    private _previousStep;
+    private _nextStep;
+    private _submit;
+    private _closeWizard;
+}
+//# sourceMappingURL=PdWizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdWizard.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/PdWizard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,mDAAmD,CAAC;AAO3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,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,CAqJpC;IAEF,SAAS,CAAC,MAAM;IAiGhB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-wizard/PdWizard.js

@@ -0,0 +1,292 @@
+import { css, LitElement, html } from 'lit';
+import { property, state } 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-panel-button';
+import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import './pd-steps/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?.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?.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">
+          ${this.wizardSteps.map(
+      (step, i) => html`
+              <div
+                style="${this.currentNumber === i + 1 ? "" : "display:none"}"
+              >
+                <slot name="step-${i + 1}"></slot>
+              </div>
+            `
+    )}
+        </div>
+      </div>
+
+      <div class="wiz-buttons">
+        ${this.currentNumber >= 1 && this.wizardSteps.length ? html`
+              <pd-panel-button
+                @button-clicked="${this._previousStep}"
+                pdButtonIcon="${pdIcons.ICON_ARROW_BACK}"
+                buttonText="${msg("Zurück", { id: "pd.wizard.button.back" })}"
+                style="visibility: ${this.currentNumber === 1 ? "hidden" : "visible"}"
+              ></pd-panel-button>
+
+              ${this.currentNumber !== this.wizardSteps.length && currentStep?.next !== false ? html`
+                    <pd-panel-button
+                      @button-clicked="${this._nextStep}"
+                      pdButtonIcon="${pdIcons.ICON_ARROW_NEXT}"
+                      buttonText="${msg("Weiter", {
+      id: "pd.wizard.button.next"
+    })}"
+                    ></pd-panel-button>
+                  ` : ""}
+              ${this.currentNumber === this.wizardSteps.length ? html`
+                    <pd-panel-button
+                      pdButtonIcon="${pdIcons.ICON_SYNC}"
+                      primary
+                      ?disabled="${this._submited}"
+                      @button-clicked="${this._submit}"
+                      buttonText="${msg("Absenden", {
+      id: "pd.wizard.button.send"
+    })}"
+                    ></pd-panel-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-col-active: white;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: 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-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([
+  localized()
+], PdWizard);
+
+export { PdWizard };

package/dist/{pd-steps.d.ts → pd-wizard/pd-steps/PdSteps.d.ts}

@@ -1,10 +1,11 @@
 import { LitElement, CSSResultGroup } from 'lit';
-import { PdWizardStep } from './types';
+import { PdWizardStep } from '../../types';
 /**
  * @tag pd-steps
  * @summary Fortschrittsanzeige in Kreis- oder Tab-Optik
  *
  * @fires go-to - wenn ein abgeschlossener Schritt erneut geklickt wird
+ * @tagname pd-steps
  */
 export declare class PdSteps extends LitElement {
     /**
@@ -20,8 +21,8 @@ export declare class PdSteps extends LitElement {
      */
     styleTyp: "circle" | "tab";
     static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     private _renderCircle;
     private _stepClicked;
 }
-//# sourceMappingURL=pd-steps.d.ts.map
+//# sourceMappingURL=PdSteps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdSteps.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/PdSteps.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBAAa,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/{pd-steps.js → pd-wizard/pd-steps/PdSteps.js}

@@ -1,81 +1,28 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
+import { LitElement, css, html } from 'lit';
+import { property } 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;
+  var result = void 0 ;
   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);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
-let PdSteps = class extends LitElement {
+class PdSteps 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`
+  static {
+    this.styles = [
+      PdColorStyles,
+      PdFontStyles,
+      css`
       :host {
         --circle-size: var(--pd-step-circle-size, 40px);
         display: block;
@@ -179,19 +126,70 @@ PdSteps.styles = [
         }
       }
     `
-];
+    ];
+  }
+  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
+        })
+      );
+    }
+  }
+}
 __decorateClass([
   property({ type: Array })
-], PdSteps.prototype, "steps", 2);
+], PdSteps.prototype, "steps");
 __decorateClass([
   property({ type: Number })
-], PdSteps.prototype, "currentStepNr", 2);
+], PdSteps.prototype, "currentStepNr");
 __decorateClass([
   property({ type: String })
-], PdSteps.prototype, "styleTyp", 2);
-PdSteps = __decorateClass([
-  customElement("pd-steps")
-], PdSteps);
-export {
-  PdSteps
-};
+], PdSteps.prototype, "styleTyp");
+
+export { PdSteps };

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

@@ -0,0 +1,3 @@
+import { PdSteps } from './PdSteps.js';
+export { PdSteps };
+//# sourceMappingURL=pd-steps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-steps.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/pd-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/pd-wizard/pd-steps/pd-steps.js

@@ -0,0 +1,8 @@
+import { PdSteps } from './PdSteps.js';
+
+const tag = "pd-steps";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdSteps);
+}
+
+export { PdSteps };

package/dist/{stories/steps.stories.d.ts → pd-wizard/pd-steps/pd-steps.stories.d.ts}

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: string;
     tags: string[];
-    render: ({ steps, currentStepNr, styleTyp }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    render: ({ steps, currentStepNr, styleTyp }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
     argTypes: {
         steps: {
             control: "object";
@@ -39,4 +39,4 @@ export declare const FirstStepActive: Story;
  * Zeigt alle Schritte als "abgeschlossen"
  */
 export declare const AllStepsPassed: Story;
-//# sourceMappingURL=steps.stories.d.ts.map
+//# sourceMappingURL=pd-steps.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-steps.stories.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/pd-steps.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,eAAe,CAAC;AAEvB,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/pd-wizard/pd-wizard.d.ts

@@ -0,0 +1,3 @@
+import { PdWizard } from './PdWizard.js';
+export { PdWizard };
+//# sourceMappingURL=pd-wizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-wizard.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/pd-wizard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/{stories/wizard.stories.d.ts → pd-wizard/pd-wizard.stories.d.ts}

@@ -9,4 +9,4 @@ export default meta;
 type Story = StoryObj<WizardArgs>;
 export declare const Wizard: Story;
 export declare const WizardPanel: Story;
-//# sourceMappingURL=wizard.stories.d.ts.map
+//# sourceMappingURL=pd-wizard.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-wizard.stories.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/pd-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,gBAAgB,CAAC;AAExB,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/pd-wizard.d.ts

@@ -1,43 +1,2 @@
-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
- * @slot step-6 - Content for step 6
- */
-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
+export * from './pd-wizard/pd-wizard'
+export {}

package/dist/pd-wizard.js

@@ -1,293 +1,8 @@
-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-icon-panel-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>
-            `}
+import { PdWizard } from './pd-wizard/PdWizard.js';
 
-        <div class="wiz-breadcrumbs">
-          <pd-steps
-            .steps="${this.wizardSteps}"
-            .currentStepNr="${this.currentNumber}"
-          ></pd-steps>
-        </div>
-      </div>
+const tag = "pd-wizard";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdWizard);
+}
 
-      <div class="wiz-content">
-        <div class="wiz-content-inner">
-          ${this.wizardSteps.map(
-      (step, i) => html`
-              <div
-                style="${this.currentNumber === i + 1 ? "" : "display:none"}"
-              >
-                <slot name="step-${i + 1}"></slot>
-              </div>
-            `
-    )}
-        </div>
-      </div>
-
-      <div class="wiz-buttons">
-        ${this.currentNumber >= 1 && this.wizardSteps.length ? html`
-              <pd-icon-panel-button
-                @button-clicked="${this._previousStep}"
-                pdButtonIcon="${pdIcons.ICON_ARROW_BACK}"
-                buttonText="${msg("Zurück", { id: "pd.wizard.button.back" })}"
-                style="visibility: ${this.currentNumber === 1 ? "hidden" : "visible"}"
-              ></pd-icon-panel-button>
-
-              ${this.currentNumber !== this.wizardSteps.length && (currentStep == null ? void 0 : currentStep.next) !== false ? html`
-                    <pd-icon-panel-button
-                      @button-clicked="${this._nextStep}"
-                      pdButtonIcon="${pdIcons.ICON_ARROW_NEXT}"
-                      buttonText="${msg("Weiter", {
-      id: "pd.wizard.button.next"
-    })}"
-                    ></pd-icon-panel-button>
-                  ` : ""}
-              ${this.currentNumber === this.wizardSteps.length ? html`
-                    <pd-icon-panel-button
-                      pdButtonIcon="${pdIcons.ICON_SYNC}"
-                      primary
-                      ?disabled="${this._submited}"
-                      @button-clicked="${this._submit}"
-                      buttonText="${msg("Absenden", {
-      id: "pd.wizard.button.send"
-    })}"
-                    ></pd-icon-panel-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-col-active: white;
-      }
-
-      .close:hover,
-      .close:focus {
-        color: 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-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
-};
+export { PdWizard };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-wizard",
-  "version": "0.6.19",
+  "version": "0.9.1",
   "description": "Webcomponent pd-wizard following open-wc recommendations",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
@@ -20,60 +21,39 @@
     "README.md",
     "LICENSE"
   ],
+  "dependencies": {
+    "lit": "^3.3.1",
+    "@lit/localize": "^0.12.2",
+    "tslib": "^2.8.1",
+    "@progressive-development/pd-icon": "0.9.1",
+    "@progressive-development/pd-shared-styles": "0.3.0",
+    "@progressive-development/pd-forms": "0.9.1"
+  },
+  "customElements": "custom-elements.json",
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "wizard",
+    "order",
+    "steps"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement --exclude dist,demo",
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "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",
+    "clean:all": "rm -rf dist node_modules pnpm-lock.yaml",
+    "lint": "eslint --ext .ts,.html src --ignore-path ../../../.eslintignore && prettier \"**/*.ts\" --check --ignore-path ../../../.eslintignore",
+    "lint:lit": "lit-analyzer",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path ../../../.eslintignore && prettier \"**/*.ts\" --write --ignore-path ../../../.eslintignore",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
-    "check": "npm run lint && npm run build",
-    "prepublishOnly": "npm run clean && npm run check",
+    "check": "pnpm run lint && pnpm run lint:lit && pnpm run build",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@lit/localize": "^0.12.2",
-    "@progressive-development/pd-forms": "^0.8.6",
-    "@progressive-development/pd-icon": "^0.7.6",
-    "@progressive-development/pd-shared-styles": "^0.2.5",
-    "lit": "^3.3.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@lit/localize-tools": "^0.6.10",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/test": "^8.6.14",
-    "@storybook/web-components": "^8.0.10",
-    "@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",
-    "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",
-  "keywords": [
-    "pd",
-    "progressive",
-    "development",
-    "wizard",
-    "order",
-    "steps"
-  ]
-}
+  }
+}

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

@@ -1 +0,0 @@
-{"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/pd-wizard.d.ts.map

@@ -1 +0,0 @@
-{"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,wDAAwD,CAAC;AAOhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;;GAeG;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,CAqJpC;IAEF,SAAS,CAAC,MAAM;IAiGhB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;CAGrB"}

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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"}