@progressive-development/pd-wizard 0.1.61 → 0.1.62

package/package.json

@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.1.61",
+  "version": "0.1.62",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

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_NEXT, ICON_PREVIOUS, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
+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 '@progressive-development/pd-icon/pd-icon.js';
 import '@progressive-development/pd-forms/pd-button.js';
@@ -170,9 +170,14 @@ 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;
-        padding-left: 1.8em;
       }
 
 
@@ -218,19 +223,17 @@ export class PdWizard extends LitElement {
                   ? 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>
-
-              ${this.currentNumber !== this.wizardSteps.length ? html`
-              <pd-icon style="transform: rotate(180deg);" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false}"
+                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>
-              ` : html`
-              <pd-icon icon="${ICON_CAMERA}"
-                title="Submit" activeIcon @click="${this._submit}"></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>
           </div>
           ` : html`