@progressive-development/pd-wizard 0.1.62 → 0.1.64

package/package.json

@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.1.62",
+  "version": "0.1.64",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-forms": "^0.2.8",
+    "@progressive-development/pd-forms": "^0.2.9",
     "@progressive-development/pd-icon": "^0.1.20",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.8.0"

package/src/PdWizard.js

@@ -7,7 +7,7 @@
 import { LitElement, html, css } from 'lit';
 import { msg, updateWhenLocaleChanges } from '@lit/localize';
 
-import { ICON_CLOSE as CLOSEICON, ICON_ARROW_BACK, ICON_CAMERA, ICON_CHECKBOX, ICON_NEXT, ICON_PREVIOUS, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
+import { ICON_CLOSE as CLOSEICON, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 import '@progressive-development/pd-forms/pd-button.js';
@@ -156,13 +156,8 @@ export class PdWizard extends LitElement {
         font-family: var(--pd-default-font-title-family);
       }
 
-      .header-icons {
-        display: flex;
-        align-items: center;
-        gap: 0.2em;
-      }
-
-      .header-icons pd-icon {        
+      .panel-close-icon {
+        --pd-icon-size: 3em;
         --pd-icon-stroke-col-active: var(--pd-default-col);
         --pd-icon-col-active: var(--pd-default-light-col);
         --pd-icon-stroke-col: var(--pd-default-col);
@@ -170,16 +165,6 @@ export class PdWizard extends LitElement {
         cursor: pointer;
       }
 
-      .next-arrow {
-        transform: rotate(180deg);
-        margin-right: 1.8em;
-        padding-right: 0.5em;
-      }
-
-      .panel-close-icon {
-        --pd-icon-size: 3em;
-      }
-
 
       /* Size Elements for small width */
       @media (max-width: 700px) {
@@ -222,19 +207,8 @@ export class PdWizard extends LitElement {
             <h1>${this.currentNumber >= 1 && this.wizardSteps
                   ? this.wizardSteps[this.currentNumber - 1].title
                   : 'No-Title'}</h1>
-            <div class="header-icons">
-              
-              <pd-icon icon="${ICON_ARROW_BACK}" ?disabled="${this.currentNumber === 1}" 
-                title="Previous Step" activeIcon @click="${this._previousStep}"></pd-icon>              
-              <pd-icon class="next-arrow" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false || this.currentNumber === this.wizardSteps.length}"
-                title="Next Step" activeIcon @click="${this._nextStep}"></pd-icon>
-
-              <pd-icon class="panel-close-icon" ?disabled="${this.currentNumber !== this.wizardSteps.length}" 
-                title="Submit" activeIcon icon="${ICON_CHECKBOX}" @click="${this._submit}"></pd-icon>
-              <pd-icon class="panel-close-icon" 
-                title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
-
-            </div>
+            <pd-icon class="panel-close-icon" 
+              title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
           </div>
           ` : html`
             <div class="wiz-title">
@@ -278,36 +252,34 @@ export class PdWizard extends LitElement {
           </div>
 
         </div>
-
-        ${!this.panelWizard ? html`
+        
         <div class="wiz-buttons">
-          ${this.currentNumber >= 1 && this.wizardSteps
-            ? html`
-                <pd-button
-                  @button-clicked="${this._previousStep}"
-                  text="${msg('Zurück', {desc: '#pd.wizard.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', {desc: '#pd.wizard.next#'})}"
-                    ></pd-button>`
-                  : ''}
-                ${this.currentNumber === this.wizardSteps.length
-                  ? html`<pd-button
-                      primary
-                      @button-clicked="${this._submit}"
-                      text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
-                    ></pd-button>`
-                  : ''}
-              `
-            : ''}
+        ${this.currentNumber >= 1 && this.wizardSteps
+          ? html`
+              <pd-button
+                @button-clicked="${this._previousStep}"
+                text="${msg('Zurück', {desc: '#pd.wizard.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', {desc: '#pd.wizard.next#'})}"
+                  ></pd-button>`
+                : ''}
+              ${this.currentNumber === this.wizardSteps.length
+                ? html`<pd-button
+                    primary
+                    @button-clicked="${this._submit}"
+                    text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
+                  ></pd-button>`
+                : ''}
+            `
+          : ''}
         </div>
-        ` : ''}        
       `;
     }
     return '';