@progressive-development/pd-wizard 0.9.2 → 1.0.1

package/dist/pd-wizard/PdWizard.js

@@ -3,7 +3,7 @@ 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 '@progressive-development/pd-forms/pd-button';
 import './pd-steps/pd-steps.js';
 
 var __defProp = Object.defineProperty;
@@ -21,36 +21,29 @@ let PdWizard = class extends LitElement {
     super(...arguments);
     this.currentNumber = -99;
     this.wizardSteps = [];
-    this.panelWizard = false;
-    this._submited = false;
+    this._submitted = 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-header" part="header">
+        <pd-icon
+          class="close"
+          activeIcon
+          tabindex="0"
+          role="button"
+          aria-label="${msg("Wizard schließen", {
+      id: "pd.wizard.close.aria"
+    })}"
+          icon="${pdIcons.ICON_XCLOSE}"
+          @click="${this._closeWizard}"
+          @keydown="${this._handleCloseKeydown}"
+        ></pd-icon>
+
+        <div class="wiz-title">
+          <span class="title">${currentStep?.title ?? "No-Title"}</span>
+        </div>
 
         <div class="wiz-breadcrumbs">
           <pd-steps
@@ -60,7 +53,7 @@ let PdWizard = class extends LitElement {
         </div>
       </div>
 
-      <div class="wiz-content">
+      <div class="wiz-content" part="content">
         <div class="wiz-content-inner">
           ${this.wizardSteps.map(
       (step, i) => html`
@@ -74,34 +67,43 @@ let PdWizard = class extends LitElement {
         </div>
       </div>
 
-      <div class="wiz-buttons">
+      <div class="wiz-buttons" part="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 === 1 ? html`
+                    <pd-button
+                      @button-clicked="${this._closeWizard}"
+                      text="${msg("Abbrechen", {
+      id: "pd.wizard.button.cancel"
+    })}"
+                    ></pd-button>
+                  ` : html`
+                    <pd-button
+                      @button-clicked="${this._previousStep}"
+                      icon="${pdIcons.ICON_ARROW_BACK}"
+                      text="${msg("Zurück", {
+      id: "pd.wizard.button.back"
+    })}"
+                    ></pd-button>
+                  `}
               ${this.currentNumber !== this.wizardSteps.length && currentStep?.next !== false ? html`
-                    <pd-panel-button
+                    <pd-button
                       @button-clicked="${this._nextStep}"
-                      pdButtonIcon="${pdIcons.ICON_ARROW_NEXT}"
-                      buttonText="${msg("Weiter", {
+                      icon="${pdIcons.ICON_ARROW_NEXT}"
+                      text="${msg("Weiter", {
       id: "pd.wizard.button.next"
     })}"
-                    ></pd-panel-button>
+                    ></pd-button>
                   ` : ""}
               ${this.currentNumber === this.wizardSteps.length ? html`
-                    <pd-panel-button
-                      pdButtonIcon="${pdIcons.ICON_SYNC}"
+                    <pd-button
+                      icon="${pdIcons.ICON_SYNC}"
                       primary
-                      ?disabled="${this._submited}"
+                      ?disabled="${this._submitted}"
                       @button-clicked="${this._submit}"
-                      buttonText="${msg("Absenden", {
+                      text="${msg("Absenden", {
       id: "pd.wizard.button.send"
     })}"
-                    ></pd-panel-button>
+                    ></pd-button>
                   ` : ""}
             ` : ""}
       </div>
@@ -114,56 +116,51 @@ let PdWizard = class extends LitElement {
     this.dispatchEvent(new CustomEvent("next-step"));
   }
   _submit() {
-    const detail = { submited: false };
+    const detail = { submitted: false };
     this.dispatchEvent(new CustomEvent("submit-wizard", { detail }));
-    this._submited = detail.submited;
+    this._submitted = detail.submitted;
   }
   _closeWizard() {
     this.dispatchEvent(new CustomEvent("close-wizard"));
   }
+  /**
+   * Handles keyboard events on the close icon.
+   * Activates on Enter or Space key.
+   */
+  _handleCloseKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._closeWizard();
+    }
+  }
 };
 PdWizard.styles = [
   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%;
+
+        --_border-radius: var(--pd-wizard-border-radius, 0);
       }
 
       .wiz-header {
-        flex-grow: 0;
+        position: relative;
+        flex-shrink: 0;
+        background: var(--pd-wizard-header-bg, var(--pd-default-col));
+        color: var(--pd-wizard-header-color, var(--pd-on-primary-col));
+        border-radius: var(--_border-radius) var(--_border-radius) 0 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);
+        padding-top: var(--pd-spacing-md);
       }
 
       .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 */
@@ -171,101 +168,65 @@ PdWizard.styles = [
         position: absolute;
         top: 6px;
         right: 6px;
-
         cursor: pointer;
-
         --pd-icon-size: 2em;
-        --pd-icon-col-active: white;
+        --pd-icon-col-active: var(
+          --pd-wizard-close-icon-col,
+          var(--pd-on-primary-col)
+        );
       }
 
       .close:hover,
-      .close:focus {
-        color: var(--pd-default-hover-col);
+      .close:focus-visible {
+        --pd-icon-col-active: var(
+          --pd-wizard-close-icon-hover-col,
+          var(--pd-default-hover-col)
+        );
+      }
+
+      .close:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, currentColor);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
       }
 
       .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);
+        overflow-y: var(--pd-wizard-content-overflow, auto);
+        background: var(--pd-wizard-content-bg, var(--pd-default-bg-col));
+        padding: var(--pd-wizard-content-padding, 2rem 3.5rem 0.5rem 3.5rem);
       }
 
       .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,
+          var(--pd-content-max-width)
         );
-        max-width: var(--pd-wizard-content-max-width, 1024px);
-        width: var(--pd-wizard-content-width, 75%);
+        margin: 0 auto;
       }
 
       .wiz-buttons {
+        flex-shrink: 0;
         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;
-      }
+        justify-content: var(--pd-wizard-buttons-justify, space-around);
+        background: var(--pd-wizard-buttons-bg, var(--pd-default-light-col));
+        padding: var(--pd-wizard-buttons-padding, var(--pd-spacing-md));
 
-      .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);
+        border-radius: 0 0 var(--_border-radius) var(--_border-radius);
       }
 
-      .panel-close-icon {
-        --pd-icon-size: 2em;
-        --pd-icon-col-active: white;
-        cursor: pointer;
-        position: absolute;
-        right: 0px;
-        top: 0px;
+      @media (max-width: 768px) {
+        .wiz-content {
+          padding: var(--pd-wizard-content-padding, 2rem 2.5rem 0.5rem 2.5rem);
+        }
       }
 
-      /* Size Elements for small width */
-      @media (max-width: 700px) {
-        .close {
-          font-size: 0.7rem;
-          --pd-icon-size: 1.2rem;
-          top: 3px;
-          right: 3px;
+      @media (max-width: 440px) {
+        .wiz-content {
+          padding: var(--pd-wizard-content-padding, 1rem 1rem 0.5rem 1rem);
         }
-        .title {
-          margin-left: 50px;
+        .close {
+          --pd-icon-size: 1em;
         }
       }
     `
@@ -276,12 +237,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array })
 ], PdWizard.prototype, "wizardSteps", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdWizard.prototype, "panelWizard", 2);
 __decorateClass([
   state()
-], PdWizard.prototype, "_submited", 2);
+], PdWizard.prototype, "_submitted", 2);
 PdWizard = __decorateClass([
   localized()
 ], PdWizard);

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

@@ -1,28 +1,44 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdWizardStep } from '../../types';
 /**
- * @tag pd-steps
- * @summary Fortschrittsanzeige in Kreis- oder Tab-Optik
+ * Progress indicator component with circle or tab style.
+ *
+ * @summary Step progress indicator with current, passed, and future states.
  *
- * @fires go-to - wenn ein abgeschlossener Schritt erneut geklickt wird
  * @tagname pd-steps
+ *
+ * @event go-to - Fired when a passed step is clicked with `{step}` detail.
+ *
+ * @cssprop --pd-step-circle-size - Circle diameter. Default: `40px`.
+ * @cssprop --pd-step-bg - Background color. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-step-color - Foreground color (border, line, text). Default: `var(--pd-on-primary-col)`.
+ * @cssprop --pd-step-name-font-size - Step name font size. Default: `1em`.
+ * @cssprop --pd-step-current-color - Current step accent color. Default: `var(--pd-default-hover-col)`.
+ * @cssprop --pd-step-passed-bg - Passed circle background. Default: `var(--pd-default-success-light-col)`.
+ * @cssprop --pd-step-passed-nr-color - Passed number color (dark on light bg). Default: `var(--pd-default-col)`.
  */
 export declare class PdSteps extends LitElement {
-    /**
-     * Schritte mit Namen
-     */
+    /** Step definitions with names. */
     steps: PdWizardStep[];
-    /**
-     * Der aktuell sichtbare Schritt (1-basiert)
-     */
+    /** Current visible step (1-based). */
     currentStepNr: number;
     /**
-     * Darstellungsmodus: `circle` oder `tab` (aktuell beide gleich)
+     * Display mode: circle or tab.
+     * @remarks Currently only "circle" is implemented. "tab" is reserved for future use.
      */
     styleTyp: "circle" | "tab";
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
     private _renderCircle;
     private _stepClicked;
+    /**
+     * Handles keyboard events on step circles.
+     * Activates on Enter or Space key.
+     */
+    private _handleStepKeydown;
+    /**
+     * Navigates to a specific step if it's a passed step.
+     */
+    private _navigateToStep;
 }
 //# sourceMappingURL=PdSteps.d.ts.map

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

@@ -1 +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;AAG5D,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,CAyGpC;IAEO,MAAM;IAIf,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,YAAY;CAcrB"}
+{"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;AAM5D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,mCAAmC;IAEnC,KAAK,EAAE,YAAY,EAAE,CAAM;IAE3B,sCAAsC;IAEtC,aAAa,SAAO;IAEpB;;;OAGG;IAEH,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAY;IAEtC,OAAgB,MAAM,EAAE,cAAc,CA8IpC;IAEO,MAAM;IAIf,OAAO,CAAC,aAAa;IAuDrB,OAAO,CAAC,YAAY;IAKpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,eAAe;CAaxB"}