@progressive-development/pd-wizard 0.1.60 → 0.1.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/PdWizard.js +15 -11
package/package.json
CHANGED
package/src/PdWizard.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { msg, updateWhenLocaleChanges } from '@lit/localize';
|
|
9
9
|
|
|
10
|
-
import { ICON_CLOSE as CLOSEICON, ICON_ARROW_BACK, ICON_CAMERA, ICON_NEXT, ICON_PREVIOUS, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
10
|
+
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';
|
|
11
11
|
|
|
12
12
|
import '@progressive-development/pd-icon/pd-icon.js';
|
|
13
13
|
import '@progressive-development/pd-forms/pd-button.js';
|
|
@@ -153,6 +153,7 @@ export class PdWizard extends LitElement {
|
|
|
153
153
|
padding: 0;
|
|
154
154
|
margin: 0;
|
|
155
155
|
font-size: 1.6em;
|
|
156
|
+
font-family: var(--pd-default-font-title-family);
|
|
156
157
|
}
|
|
157
158
|
|
|
158
159
|
.header-icons {
|
|
@@ -169,9 +170,14 @@ export class PdWizard extends LitElement {
|
|
|
169
170
|
cursor: pointer;
|
|
170
171
|
}
|
|
171
172
|
|
|
173
|
+
.next-arrow {
|
|
174
|
+
transform: rotate(180deg);
|
|
175
|
+
margin-right: 1.8em;
|
|
176
|
+
padding-right: 0.5em;
|
|
177
|
+
}
|
|
178
|
+
|
|
172
179
|
.panel-close-icon {
|
|
173
180
|
--pd-icon-size: 3em;
|
|
174
|
-
padding-left: 1.8em;
|
|
175
181
|
}
|
|
176
182
|
|
|
177
183
|
|
|
@@ -217,19 +223,17 @@ export class PdWizard extends LitElement {
|
|
|
217
223
|
? this.wizardSteps[this.currentNumber - 1].title
|
|
218
224
|
: 'No-Title'}</h1>
|
|
219
225
|
<div class="header-icons">
|
|
226
|
+
|
|
220
227
|
<pd-icon icon="${ICON_ARROW_BACK}" ?disabled="${this.currentNumber === 1}"
|
|
221
|
-
title="Previous Step" activeIcon @click="${this._previousStep}"></pd-icon>
|
|
222
|
-
|
|
223
|
-
${this.currentNumber !== this.wizardSteps.length ? html`
|
|
224
|
-
<pd-icon style="transform: rotate(180deg);" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false}"
|
|
228
|
+
title="Previous Step" activeIcon @click="${this._previousStep}"></pd-icon>
|
|
229
|
+
<pd-icon class="next-arrow" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false || this.currentNumber === this.wizardSteps.length}"
|
|
225
230
|
title="Next Step" activeIcon @click="${this._nextStep}"></pd-icon>
|
|
226
|
-
|
|
227
|
-
<pd-icon icon="${
|
|
228
|
-
title="Submit" activeIcon @click="${this._submit}"></pd-icon>
|
|
229
|
-
`}
|
|
230
|
-
|
|
231
|
+
|
|
232
|
+
<pd-icon class="panel-close-icon" ?disabled="${this.currentNumber !== this.wizardSteps.length}"
|
|
233
|
+
title="Submit" activeIcon icon="${ICON_CHECKBOX}" @click="${this._submit}"></pd-icon>
|
|
231
234
|
<pd-icon class="panel-close-icon"
|
|
232
235
|
title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
|
|
236
|
+
|
|
233
237
|
</div>
|
|
234
238
|
</div>
|
|
235
239
|
` : html`
|