@digital-realty/ix-wizard 1.0.29-alpha.0 → 1.0.29
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/dist/IxWizard.d.ts +15 -15
- package/dist/IxWizard.js +77 -72
- package/dist/IxWizard.js.map +1 -1
- package/dist/IxWizardStep.d.ts +18 -18
- package/dist/IxWizardStep.js +63 -63
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/ix-wizard-step.d.ts +1 -1
- package/dist/ix-wizard-step.js +2 -2
- package/dist/ix-wizard.d.ts +1 -1
- package/dist/ix-wizard.js +2 -2
- package/dist/ix-wizard.min.js +1 -1
- package/dist/react/IxWizard.d.ts +4 -4
- package/dist/react/IxWizard.js +12 -12
- package/dist/react/IxWizard.js.map +1 -1
- package/dist/react/IxWizardStep.d.ts +4 -4
- package/dist/react/IxWizardStep.js +12 -12
- package/dist/react/IxWizardStep.js.map +1 -1
- package/dist/styles/ix-wizard-step-styles.d.ts +1 -1
- package/dist/styles/ix-wizard-step-styles.js +2 -2
- package/dist/styles/ix-wizard-styles.d.ts +1 -1
- package/dist/styles/ix-wizard-styles.js +2 -2
- package/package.json +3 -3
package/dist/IxWizard.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { LitElement, nothing } from 'lit';
|
|
2
|
-
export declare class IxWizard extends LitElement {
|
|
3
|
-
static get styles(): import("lit").CSSResult[];
|
|
4
|
-
totalSteps: number;
|
|
5
|
-
currentStep: number;
|
|
6
|
-
hideStepCount: boolean;
|
|
7
|
-
onNextStepClick?: any;
|
|
8
|
-
onPrevStepClick?: any;
|
|
9
|
-
hideNextStep?: boolean | undefined;
|
|
10
|
-
hidePrevStep?: boolean | undefined;
|
|
11
|
-
enableNextStepClick?: boolean | undefined;
|
|
12
|
-
firstUpdated(): void;
|
|
13
|
-
renderStepCount(): typeof nothing | import("lit").TemplateResult<1>;
|
|
14
|
-
render(): import("lit").TemplateResult<1>;
|
|
15
|
-
}
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
|
+
export declare class IxWizard extends LitElement {
|
|
3
|
+
static get styles(): import("lit").CSSResult[];
|
|
4
|
+
totalSteps: number;
|
|
5
|
+
currentStep: number;
|
|
6
|
+
hideStepCount: boolean;
|
|
7
|
+
onNextStepClick?: any;
|
|
8
|
+
onPrevStepClick?: any;
|
|
9
|
+
hideNextStep?: boolean | undefined;
|
|
10
|
+
hidePrevStep?: boolean | undefined;
|
|
11
|
+
enableNextStepClick?: boolean | undefined;
|
|
12
|
+
firstUpdated(): void;
|
|
13
|
+
renderStepCount(): typeof nothing | import("lit").TemplateResult<1>;
|
|
14
|
+
render(): import("lit").TemplateResult<1>;
|
|
15
|
+
}
|
package/dist/IxWizard.js
CHANGED
|
@@ -1,52 +1,57 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html, nothing } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
4
|
-
import { IxWizardStyles } from './styles/ix-wizard-styles.js';
|
|
5
|
-
export class IxWizard extends LitElement {
|
|
6
|
-
constructor() {
|
|
7
|
-
super(...arguments);
|
|
8
|
-
this.totalSteps = 0;
|
|
9
|
-
this.currentStep = 0;
|
|
10
|
-
this.hideStepCount = false;
|
|
11
|
-
this.hideNextStep = false;
|
|
12
|
-
this.hidePrevStep = false;
|
|
13
|
-
this.enableNextStepClick = false;
|
|
14
|
-
}
|
|
15
|
-
static get styles() {
|
|
16
|
-
return [IxWizardStyles];
|
|
17
|
-
}
|
|
18
|
-
firstUpdated() {
|
|
19
|
-
var _a;
|
|
20
|
-
if (this.totalSteps === 0) {
|
|
21
|
-
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22
|
-
const wizardSteps = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
|
|
23
|
-
this.totalSteps = (wizardSteps === null || wizardSteps === void 0 ? void 0 : wizardSteps.length) || 0;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
renderStepCount() {
|
|
27
|
-
if (this.currentStep === 0 || this.hideStepCount)
|
|
28
|
-
return nothing;
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, html, nothing } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { IxWizardStyles } from './styles/ix-wizard-styles.js';
|
|
5
|
+
export class IxWizard extends LitElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.totalSteps = 0;
|
|
9
|
+
this.currentStep = 0;
|
|
10
|
+
this.hideStepCount = false;
|
|
11
|
+
this.hideNextStep = false;
|
|
12
|
+
this.hidePrevStep = false;
|
|
13
|
+
this.enableNextStepClick = false;
|
|
14
|
+
}
|
|
15
|
+
static get styles() {
|
|
16
|
+
return [IxWizardStyles];
|
|
17
|
+
}
|
|
18
|
+
firstUpdated() {
|
|
19
|
+
var _a;
|
|
20
|
+
if (this.totalSteps === 0) {
|
|
21
|
+
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22
|
+
const wizardSteps = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
|
|
23
|
+
this.totalSteps = (wizardSteps === null || wizardSteps === void 0 ? void 0 : wizardSteps.length) || 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
renderStepCount() {
|
|
27
|
+
if (this.currentStep === 0 || this.hideStepCount)
|
|
28
|
+
return nothing;
|
|
29
29
|
return html `<div class="wizard-title">
|
|
30
|
-
${!this.hidePrevStep
|
|
31
|
-
? html
|
|
32
|
-
class="enable-click"
|
|
30
|
+
${!this.hidePrevStep
|
|
31
|
+
? html `<md-icon
|
|
32
|
+
class="prev-arrow enable-click"
|
|
33
33
|
@click=${() => this.onPrevStepClick()}
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
>
|
|
35
|
+
chevron_left
|
|
36
|
+
</md-icon>`
|
|
36
37
|
: html `<span></span>`}
|
|
37
|
-
<span class="button-label"
|
|
38
|
-
|
|
39
|
-
>
|
|
40
|
-
${!this.hideNextStep
|
|
41
|
-
? html
|
|
42
|
-
class=${this.enableNextStepClick ? 'enable-click' : ''}
|
|
43
|
-
@click=${() =>
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
<span class="button-label">
|
|
39
|
+
${this.currentStep} of ${this.totalSteps}
|
|
40
|
+
</span>
|
|
41
|
+
${!this.hideNextStep
|
|
42
|
+
? html `<md-icon
|
|
43
|
+
class=${`next-arrow ${this.enableNextStepClick ? 'enable-click' : ''}`}
|
|
44
|
+
@click=${() => {
|
|
45
|
+
if (this.enableNextStepClick)
|
|
46
|
+
this.onNextStepClick();
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
chevron_right
|
|
50
|
+
</md-icon>`
|
|
46
51
|
: nothing}
|
|
47
|
-
</div>`;
|
|
48
|
-
}
|
|
49
|
-
render() {
|
|
52
|
+
</div>`;
|
|
53
|
+
}
|
|
54
|
+
render() {
|
|
50
55
|
return html `
|
|
51
56
|
<div class="wizard-wrapper">
|
|
52
57
|
<div class="wizard-header">${this.renderStepCount()}</div>
|
|
@@ -54,31 +59,31 @@ export class IxWizard extends LitElement {
|
|
|
54
59
|
<slot></slot>
|
|
55
60
|
</div>
|
|
56
61
|
</div>
|
|
57
|
-
`;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
__decorate([
|
|
61
|
-
property({ type: Number })
|
|
62
|
-
], IxWizard.prototype, "totalSteps", void 0);
|
|
63
|
-
__decorate([
|
|
64
|
-
property({ type: Number })
|
|
65
|
-
], IxWizard.prototype, "currentStep", void 0);
|
|
66
|
-
__decorate([
|
|
67
|
-
property({ type: Boolean })
|
|
68
|
-
], IxWizard.prototype, "hideStepCount", void 0);
|
|
69
|
-
__decorate([
|
|
70
|
-
property({ type: Function })
|
|
71
|
-
], IxWizard.prototype, "onNextStepClick", void 0);
|
|
72
|
-
__decorate([
|
|
73
|
-
property({ type: Function })
|
|
74
|
-
], IxWizard.prototype, "onPrevStepClick", void 0);
|
|
75
|
-
__decorate([
|
|
76
|
-
property({ type: Boolean })
|
|
77
|
-
], IxWizard.prototype, "hideNextStep", void 0);
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ type: Boolean })
|
|
80
|
-
], IxWizard.prototype, "hidePrevStep", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ type: Boolean })
|
|
83
|
-
], IxWizard.prototype, "enableNextStepClick", void 0);
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
__decorate([
|
|
66
|
+
property({ type: Number })
|
|
67
|
+
], IxWizard.prototype, "totalSteps", void 0);
|
|
68
|
+
__decorate([
|
|
69
|
+
property({ type: Number })
|
|
70
|
+
], IxWizard.prototype, "currentStep", void 0);
|
|
71
|
+
__decorate([
|
|
72
|
+
property({ type: Boolean })
|
|
73
|
+
], IxWizard.prototype, "hideStepCount", void 0);
|
|
74
|
+
__decorate([
|
|
75
|
+
property({ type: Function })
|
|
76
|
+
], IxWizard.prototype, "onNextStepClick", void 0);
|
|
77
|
+
__decorate([
|
|
78
|
+
property({ type: Function })
|
|
79
|
+
], IxWizard.prototype, "onPrevStepClick", void 0);
|
|
80
|
+
__decorate([
|
|
81
|
+
property({ type: Boolean })
|
|
82
|
+
], IxWizard.prototype, "hideNextStep", void 0);
|
|
83
|
+
__decorate([
|
|
84
|
+
property({ type: Boolean })
|
|
85
|
+
], IxWizard.prototype, "hidePrevStep", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
property({ type: Boolean })
|
|
88
|
+
], IxWizard.prototype, "enableNextStepClick", void 0);
|
|
84
89
|
//# sourceMappingURL=IxWizard.js.map
|
package/dist/IxWizard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxWizard.js","sourceRoot":"","sources":["../src/IxWizard.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAK8B,eAAU,GAAG,CAAC,CAAC;QAEf,gBAAW,GAAG,CAAC,CAAC;QAEf,kBAAa,GAAG,KAAK,CAAC;QAMtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,wBAAmB,GAAI,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxWizard.js","sourceRoot":"","sources":["../src/IxWizard.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAK8B,eAAU,GAAG,CAAC,CAAC;QAEf,gBAAW,GAAG,CAAC,CAAC;QAEf,kBAAa,GAAG,KAAK,CAAC;QAMtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,wBAAmB,GAAI,KAAK,CAAC;IAkD5D,CAAC;IApEC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IAkBD,YAAY;;QACV,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,EAAE;YACzB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;YACpD,MAAM,WAAW,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,KAAI,CAAC,CAAC;SAC5C;IACH,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO,OAAO,CAAC;QAEjE,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;qBAEO,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;;;qBAG5B;YACb,CAAC,CAAC,IAAI,CAAA,eAAe;;UAEnB,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU;;QAExC,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;oBACM,cACN,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAC9C,EAAE;qBACO,GAAG,EAAE;gBACZ,IAAI,IAAI,CAAC,mBAAmB;oBAAE,IAAI,CAAC,eAAe,EAAE,CAAC;YACvD,CAAC;;;qBAGQ;YACb,CAAC,CAAC,OAAO;WACN,CAAC;IACV,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,eAAe,EAAE;;;;;KAKtD,CAAC;IACJ,CAAC;CACF;AAhE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AAEf;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAuB;AAErB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;iDAAuB;AAEtB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;iDAAuB;AAEvB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA8B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { IxWizardStyles } from './styles/ix-wizard-styles.js';\n\nexport class IxWizard extends LitElement {\n static get styles() {\n return [IxWizardStyles];\n }\n\n @property({ type: Number }) totalSteps = 0;\n\n @property({ type: Number }) currentStep = 0;\n\n @property({ type: Boolean }) hideStepCount = false;\n\n @property({ type: Function }) onNextStepClick?: any;\n\n @property({ type: Function }) onPrevStepClick?: any;\n\n @property({ type: Boolean }) hideNextStep? = false;\n\n @property({ type: Boolean }) hidePrevStep? = false;\n\n @property({ type: Boolean }) enableNextStepClick? = false;\n\n firstUpdated() {\n if (this.totalSteps === 0) {\n const slot = this.shadowRoot?.querySelector('slot');\n const wizardSteps = slot?.assignedElements();\n this.totalSteps = wizardSteps?.length || 0;\n }\n }\n\n renderStepCount() {\n if (this.currentStep === 0 || this.hideStepCount) return nothing;\n\n return html`<div class=\"wizard-title\">\n ${!this.hidePrevStep\n ? html`<md-icon\n class=\"prev-arrow enable-click\"\n @click=${() => this.onPrevStepClick()}\n >\n chevron_left\n </md-icon>`\n : html`<span></span>`}\n <span class=\"button-label\">\n ${this.currentStep} of ${this.totalSteps}\n </span>\n ${!this.hideNextStep\n ? html`<md-icon\n class=${`next-arrow ${\n this.enableNextStepClick ? 'enable-click' : ''\n }`}\n @click=${() => {\n if (this.enableNextStepClick) this.onNextStepClick();\n }}\n >\n chevron_right\n </md-icon>`\n : nothing}\n </div>`;\n }\n\n render() {\n return html`\n <div class=\"wizard-wrapper\">\n <div class=\"wizard-header\">${this.renderStepCount()}</div>\n <div class=\"wizard-body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n"]}
|
package/dist/IxWizardStep.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement, nothing } from 'lit';
|
|
2
|
-
import '@digital-realty/ix-button';
|
|
3
|
-
import '@material/web/icon/icon.js';
|
|
4
|
-
export declare class IxWizardStep extends LitElement {
|
|
5
|
-
static get styles(): import("lit").CSSResult[];
|
|
6
|
-
isVisible: boolean;
|
|
7
|
-
isBackButtonVisible: boolean;
|
|
8
|
-
isBackButtonDisabled: boolean;
|
|
9
|
-
onBackButtonClick: any;
|
|
10
|
-
backButtonText: string;
|
|
11
|
-
isNextButtonVisible: boolean;
|
|
12
|
-
isNextButtonDisabled: boolean;
|
|
13
|
-
onNextButtonClick: any;
|
|
14
|
-
nextButtonText: string;
|
|
15
|
-
renderBackButton(): typeof nothing | import("lit").TemplateResult<1>;
|
|
16
|
-
renderNextButton(): typeof nothing | import("lit").TemplateResult<1>;
|
|
17
|
-
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
18
|
-
}
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
|
+
import '@digital-realty/ix-button';
|
|
3
|
+
import '@material/web/icon/icon.js';
|
|
4
|
+
export declare class IxWizardStep extends LitElement {
|
|
5
|
+
static get styles(): import("lit").CSSResult[];
|
|
6
|
+
isVisible: boolean;
|
|
7
|
+
isBackButtonVisible: boolean;
|
|
8
|
+
isBackButtonDisabled: boolean;
|
|
9
|
+
onBackButtonClick: any;
|
|
10
|
+
backButtonText: string;
|
|
11
|
+
isNextButtonVisible: boolean;
|
|
12
|
+
isNextButtonDisabled: boolean;
|
|
13
|
+
onNextButtonClick: any;
|
|
14
|
+
nextButtonText: string;
|
|
15
|
+
renderBackButton(): typeof nothing | import("lit").TemplateResult<1>;
|
|
16
|
+
renderNextButton(): typeof nothing | import("lit").TemplateResult<1>;
|
|
17
|
+
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
18
|
+
}
|
package/dist/IxWizardStep.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html, nothing } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
4
|
-
import '@digital-realty/ix-button';
|
|
5
|
-
import '@material/web/icon/icon.js';
|
|
6
|
-
import { IxWizardStepStyles } from './styles/ix-wizard-step-styles.js';
|
|
7
|
-
export class IxWizardStep extends LitElement {
|
|
8
|
-
constructor() {
|
|
9
|
-
super(...arguments);
|
|
10
|
-
this.isVisible = true;
|
|
11
|
-
this.isBackButtonVisible = false;
|
|
12
|
-
this.isBackButtonDisabled = false;
|
|
13
|
-
this.backButtonText = 'Back';
|
|
14
|
-
this.isNextButtonVisible = true;
|
|
15
|
-
this.isNextButtonDisabled = false;
|
|
16
|
-
this.nextButtonText = 'Next';
|
|
17
|
-
}
|
|
18
|
-
static get styles() {
|
|
19
|
-
return [IxWizardStepStyles];
|
|
20
|
-
}
|
|
21
|
-
renderBackButton() {
|
|
22
|
-
if (!this.isBackButtonVisible)
|
|
23
|
-
return nothing;
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, html, nothing } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import '@digital-realty/ix-button';
|
|
5
|
+
import '@material/web/icon/icon.js';
|
|
6
|
+
import { IxWizardStepStyles } from './styles/ix-wizard-step-styles.js';
|
|
7
|
+
export class IxWizardStep extends LitElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
this.isVisible = true;
|
|
11
|
+
this.isBackButtonVisible = false;
|
|
12
|
+
this.isBackButtonDisabled = false;
|
|
13
|
+
this.backButtonText = 'Back';
|
|
14
|
+
this.isNextButtonVisible = true;
|
|
15
|
+
this.isNextButtonDisabled = false;
|
|
16
|
+
this.nextButtonText = 'Next';
|
|
17
|
+
}
|
|
18
|
+
static get styles() {
|
|
19
|
+
return [IxWizardStepStyles];
|
|
20
|
+
}
|
|
21
|
+
renderBackButton() {
|
|
22
|
+
if (!this.isBackButtonVisible)
|
|
23
|
+
return nothing;
|
|
24
24
|
return html ` <ix-button
|
|
25
25
|
type="button"
|
|
26
26
|
appearance="outlined"
|
|
@@ -30,11 +30,11 @@ export class IxWizardStep extends LitElement {
|
|
|
30
30
|
>
|
|
31
31
|
<span class="button-label">${this.backButtonText}</span>
|
|
32
32
|
<md-icon slot="icon">west</md-icon>
|
|
33
|
-
</ix-button>`;
|
|
34
|
-
}
|
|
35
|
-
renderNextButton() {
|
|
36
|
-
if (!this.isNextButtonVisible)
|
|
37
|
-
return nothing;
|
|
33
|
+
</ix-button>`;
|
|
34
|
+
}
|
|
35
|
+
renderNextButton() {
|
|
36
|
+
if (!this.isNextButtonVisible)
|
|
37
|
+
return nothing;
|
|
38
38
|
return html ` <ix-button
|
|
39
39
|
?disabled=${this.isNextButtonDisabled}
|
|
40
40
|
type="submit"
|
|
@@ -44,44 +44,44 @@ export class IxWizardStep extends LitElement {
|
|
|
44
44
|
>
|
|
45
45
|
<md-icon slot="icon">east</md-icon>
|
|
46
46
|
<span class="button-label">${this.nextButtonText}</span>
|
|
47
|
-
</ix-button>`;
|
|
48
|
-
}
|
|
49
|
-
render() {
|
|
50
|
-
if (!this.isVisible)
|
|
51
|
-
return nothing;
|
|
47
|
+
</ix-button>`;
|
|
48
|
+
}
|
|
49
|
+
render() {
|
|
50
|
+
if (!this.isVisible)
|
|
51
|
+
return nothing;
|
|
52
52
|
return html `
|
|
53
53
|
<slot></slot>
|
|
54
54
|
<div class="wizard-step__btn-group">
|
|
55
55
|
${this.renderBackButton()} ${this.renderNextButton()}
|
|
56
56
|
</div>
|
|
57
|
-
`;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
__decorate([
|
|
61
|
-
property({ type: Boolean })
|
|
62
|
-
], IxWizardStep.prototype, "isVisible", void 0);
|
|
63
|
-
__decorate([
|
|
64
|
-
property({ type: Boolean })
|
|
65
|
-
], IxWizardStep.prototype, "isBackButtonVisible", void 0);
|
|
66
|
-
__decorate([
|
|
67
|
-
property({ type: Boolean })
|
|
68
|
-
], IxWizardStep.prototype, "isBackButtonDisabled", void 0);
|
|
69
|
-
__decorate([
|
|
70
|
-
property({ type: Function })
|
|
71
|
-
], IxWizardStep.prototype, "onBackButtonClick", void 0);
|
|
72
|
-
__decorate([
|
|
73
|
-
property({ type: String })
|
|
74
|
-
], IxWizardStep.prototype, "backButtonText", void 0);
|
|
75
|
-
__decorate([
|
|
76
|
-
property({ type: Boolean })
|
|
77
|
-
], IxWizardStep.prototype, "isNextButtonVisible", void 0);
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ type: Boolean })
|
|
80
|
-
], IxWizardStep.prototype, "isNextButtonDisabled", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ type: Function })
|
|
83
|
-
], IxWizardStep.prototype, "onNextButtonClick", void 0);
|
|
84
|
-
__decorate([
|
|
85
|
-
property({ type: String })
|
|
86
|
-
], IxWizardStep.prototype, "nextButtonText", void 0);
|
|
57
|
+
`;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
__decorate([
|
|
61
|
+
property({ type: Boolean })
|
|
62
|
+
], IxWizardStep.prototype, "isVisible", void 0);
|
|
63
|
+
__decorate([
|
|
64
|
+
property({ type: Boolean })
|
|
65
|
+
], IxWizardStep.prototype, "isBackButtonVisible", void 0);
|
|
66
|
+
__decorate([
|
|
67
|
+
property({ type: Boolean })
|
|
68
|
+
], IxWizardStep.prototype, "isBackButtonDisabled", void 0);
|
|
69
|
+
__decorate([
|
|
70
|
+
property({ type: Function })
|
|
71
|
+
], IxWizardStep.prototype, "onBackButtonClick", void 0);
|
|
72
|
+
__decorate([
|
|
73
|
+
property({ type: String })
|
|
74
|
+
], IxWizardStep.prototype, "backButtonText", void 0);
|
|
75
|
+
__decorate([
|
|
76
|
+
property({ type: Boolean })
|
|
77
|
+
], IxWizardStep.prototype, "isNextButtonVisible", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
property({ type: Boolean })
|
|
80
|
+
], IxWizardStep.prototype, "isNextButtonDisabled", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Function })
|
|
83
|
+
], IxWizardStep.prototype, "onNextButtonClick", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
property({ type: String })
|
|
86
|
+
], IxWizardStep.prototype, "nextButtonText", void 0);
|
|
87
87
|
//# sourceMappingURL=IxWizardStep.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IxWizard } from './IxWizard.js';
|
|
2
|
-
export { IxWizardStep } from './IxWizardStep.js';
|
|
1
|
+
export { IxWizard } from './IxWizard.js';
|
|
2
|
+
export { IxWizardStep } from './IxWizardStep.js';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { IxWizard } from './IxWizard.js';
|
|
2
|
-
export { IxWizardStep } from './IxWizardStep.js';
|
|
1
|
+
export { IxWizard } from './IxWizard.js';
|
|
2
|
+
export { IxWizardStep } from './IxWizardStep.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/ix-wizard-step.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-wizard-step.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxWizardStep } from './IxWizardStep.js';
|
|
2
|
-
window.customElements.define('ix-wizard-step', IxWizardStep);
|
|
1
|
+
import { IxWizardStep } from './IxWizardStep.js';
|
|
2
|
+
window.customElements.define('ix-wizard-step', IxWizardStep);
|
|
3
3
|
//# sourceMappingURL=ix-wizard-step.js.map
|
package/dist/ix-wizard.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-wizard.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxWizard } from './IxWizard.js';
|
|
2
|
-
window.customElements.define('ix-wizard', IxWizard);
|
|
1
|
+
import { IxWizard } from './IxWizard.js';
|
|
2
|
+
window.customElements.define('ix-wizard', IxWizard);
|
|
3
3
|
//# sourceMappingURL=ix-wizard.js.map
|
package/dist/ix-wizard.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,nothing,html}from"lit";import{property}from"lit/decorators.js";let IxWizardStyles=css`.wizard-wrapper{display:flex;flex-direction:column;gap:20px;margin:0 25px}.wizard-header{display:flex;justify-content:center}.wizard-header .wizard-title{position:relative;width:140px;display:grid;grid-template-columns:24px 1fr 24px;-webkit-box-align:center;place-items:center;top:var(--ix-wizard-top,0)}.wizard-header .wizard-title md-icon{color:#d3d3d3}.wizard-header .wizard-title md-icon.enable-click:hover{cursor:pointer}.wizard-header .wizard-title md-icon.enable-click{color:var(--ix-sys-primary,#1456e0)}.wizard-header .wizard-title span{font-weight:700;font-style:normal;font-size:14px;letter-spacing:1.25px;text-transform:uppercase;color:#092241}`;class IxWizard extends LitElement{constructor(){super(...arguments),this.totalSteps=0,this.currentStep=0,this.hideStepCount=!1,this.hideNextStep=!1,this.hidePrevStep=!1,this.enableNextStepClick=!1}static get styles(){return[IxWizardStyles]}firstUpdated(){var e;0===this.totalSteps&&(e=null==(e=null==(e=this.shadowRoot)?void 0:e.querySelector("slot"))?void 0:e.assignedElements(),this.totalSteps=(null==e?void 0:e.length)||0)}renderStepCount(){return 0===this.currentStep||this.hideStepCount?nothing:html`<div class="wizard-title">${this.hidePrevStep?html`<span></span>`:html`<md-icon class="enable-click" @click="${()=>this.onPrevStepClick()}">chevron_left</md-icon>`} <span class="button-label">${this.currentStep} of ${this.totalSteps}</span
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,nothing,html}from"lit";import{property}from"lit/decorators.js";let IxWizardStyles=css`.wizard-wrapper{display:flex;flex-direction:column;gap:20px;margin:0 25px}.wizard-header{display:flex;justify-content:center}.wizard-header .wizard-title{position:relative;width:140px;display:grid;grid-template-columns:24px 1fr 24px;-webkit-box-align:center;place-items:center;top:var(--ix-wizard-top,0)}.wizard-header .wizard-title md-icon{color:#d3d3d3}.wizard-header .wizard-title md-icon.enable-click:hover{cursor:pointer}.wizard-header .wizard-title md-icon.enable-click{color:var(--ix-sys-primary,#1456e0)}.wizard-header .wizard-title span{font-weight:700;font-style:normal;font-size:14px;letter-spacing:1.25px;text-transform:uppercase;color:#092241}`;class IxWizard extends LitElement{constructor(){super(...arguments),this.totalSteps=0,this.currentStep=0,this.hideStepCount=!1,this.hideNextStep=!1,this.hidePrevStep=!1,this.enableNextStepClick=!1}static get styles(){return[IxWizardStyles]}firstUpdated(){var e;0===this.totalSteps&&(e=null==(e=null==(e=this.shadowRoot)?void 0:e.querySelector("slot"))?void 0:e.assignedElements(),this.totalSteps=(null==e?void 0:e.length)||0)}renderStepCount(){return 0===this.currentStep||this.hideStepCount?nothing:html`<div class="wizard-title">${this.hidePrevStep?html`<span></span>`:html`<md-icon class="prev-arrow enable-click" @click="${()=>this.onPrevStepClick()}">chevron_left</md-icon>`} <span class="button-label">${this.currentStep} of ${this.totalSteps} </span>${this.hideNextStep?nothing:html`<md-icon class="${"next-arrow "+(this.enableNextStepClick?"enable-click":"")}" @click="${()=>{this.enableNextStepClick&&this.onNextStepClick()}}">chevron_right</md-icon>`}</div>`}render(){return html`<div class="wizard-wrapper"><div class="wizard-header">${this.renderStepCount()}</div><div class="wizard-body"><slot></slot></div></div>`}}__decorate([property({type:Number})],IxWizard.prototype,"totalSteps",void 0),__decorate([property({type:Number})],IxWizard.prototype,"currentStep",void 0),__decorate([property({type:Boolean})],IxWizard.prototype,"hideStepCount",void 0),__decorate([property({type:Function})],IxWizard.prototype,"onNextStepClick",void 0),__decorate([property({type:Function})],IxWizard.prototype,"onPrevStepClick",void 0),__decorate([property({type:Boolean})],IxWizard.prototype,"hideNextStep",void 0),__decorate([property({type:Boolean})],IxWizard.prototype,"hidePrevStep",void 0),__decorate([property({type:Boolean})],IxWizard.prototype,"enableNextStepClick",void 0),window.customElements.define("ix-wizard",IxWizard);
|
package/dist/react/IxWizard.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IxWizard as IxWizardLit } from '../IxWizard.js';
|
|
2
|
-
export declare const IxWizard: import("@lit/react").ReactWebComponent<IxWizardLit, {
|
|
3
|
-
onclick: string;
|
|
4
|
-
}>;
|
|
1
|
+
import { IxWizard as IxWizardLit } from '../IxWizard.js';
|
|
2
|
+
export declare const IxWizard: import("@lit/react").ReactWebComponent<IxWizardLit, {
|
|
3
|
+
onclick: string;
|
|
4
|
+
}>;
|
package/dist/react/IxWizard.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxWizard as IxWizardLit } from '../IxWizard.js';
|
|
4
|
-
customElements.define('ix-wizard', IxWizardLit);
|
|
5
|
-
export const IxWizard = createComponent({
|
|
6
|
-
tagName: 'ix-wizard',
|
|
7
|
-
elementClass: IxWizardLit,
|
|
8
|
-
react: React,
|
|
9
|
-
events: {
|
|
10
|
-
onclick: 'onClick',
|
|
11
|
-
},
|
|
12
|
-
});
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { IxWizard as IxWizardLit } from '../IxWizard.js';
|
|
4
|
+
customElements.define('ix-wizard', IxWizardLit);
|
|
5
|
+
export const IxWizard = createComponent({
|
|
6
|
+
tagName: 'ix-wizard-react',
|
|
7
|
+
elementClass: IxWizardLit,
|
|
8
|
+
react: React,
|
|
9
|
+
events: {
|
|
10
|
+
onclick: 'onClick',
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
13
|
//# sourceMappingURL=IxWizard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxWizard.js","sourceRoot":"","sources":["../../src/react/IxWizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"IxWizard.js","sourceRoot":"","sources":["../../src/react/IxWizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { IxWizard as IxWizardLit } from '../IxWizard.js';\n\ncustomElements.define('ix-wizard', IxWizardLit);\n\nexport const IxWizard = createComponent({\n tagName: 'ix-wizard-react',\n elementClass: IxWizardLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IxWizardStep as IxWizardStepLit } from '../IxWizardStep.js';
|
|
2
|
-
export declare const IxWizardStep: import("@lit/react").ReactWebComponent<IxWizardStepLit, {
|
|
3
|
-
onclick: string;
|
|
4
|
-
}>;
|
|
1
|
+
import { IxWizardStep as IxWizardStepLit } from '../IxWizardStep.js';
|
|
2
|
+
export declare const IxWizardStep: import("@lit/react").ReactWebComponent<IxWizardStepLit, {
|
|
3
|
+
onclick: string;
|
|
4
|
+
}>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxWizardStep as IxWizardStepLit } from '../IxWizardStep.js';
|
|
4
|
-
customElements.define('ix-wizard-step', IxWizardStepLit);
|
|
5
|
-
export const IxWizardStep = createComponent({
|
|
6
|
-
tagName: 'ix-wizard-step',
|
|
7
|
-
elementClass: IxWizardStepLit,
|
|
8
|
-
react: React,
|
|
9
|
-
events: {
|
|
10
|
-
onclick: 'onClick',
|
|
11
|
-
},
|
|
12
|
-
});
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { IxWizardStep as IxWizardStepLit } from '../IxWizardStep.js';
|
|
4
|
+
customElements.define('ix-wizard-step', IxWizardStepLit);
|
|
5
|
+
export const IxWizardStep = createComponent({
|
|
6
|
+
tagName: 'ix-wizard-step-react',
|
|
7
|
+
elementClass: IxWizardStepLit,
|
|
8
|
+
react: React,
|
|
9
|
+
events: {
|
|
10
|
+
onclick: 'onClick',
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
13
|
//# sourceMappingURL=IxWizardStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxWizardStep.js","sourceRoot":"","sources":["../../src/react/IxWizardStep.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErE,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"IxWizardStep.js","sourceRoot":"","sources":["../../src/react/IxWizardStep.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErE,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,sBAAsB;IAC/B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { IxWizardStep as IxWizardStepLit } from '../IxWizardStep.js';\n\ncustomElements.define('ix-wizard-step', IxWizardStepLit);\n\nexport const IxWizardStep = createComponent({\n tagName: 'ix-wizard-step-react',\n elementClass: IxWizardStepLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxWizardStepStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxWizardStepStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxWizardStepStyles = css `
|
|
3
3
|
.wizard-step__btn-group {
|
|
4
4
|
padding: 20px 0px;
|
|
@@ -6,5 +6,5 @@ export const IxWizardStepStyles = css `
|
|
|
6
6
|
gap: 20px;
|
|
7
7
|
justify-content: flex-end;
|
|
8
8
|
}
|
|
9
|
-
`;
|
|
9
|
+
`;
|
|
10
10
|
//# sourceMappingURL=ix-wizard-step-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxWizardStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxWizardStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxWizardStyles = css `
|
|
3
3
|
.wizard-wrapper {
|
|
4
4
|
display: flex;
|
|
@@ -38,5 +38,5 @@ export const IxWizardStyles = css `
|
|
|
38
38
|
text-transform: uppercase;
|
|
39
39
|
color: #092241;
|
|
40
40
|
}
|
|
41
|
-
`;
|
|
41
|
+
`;
|
|
42
42
|
//# sourceMappingURL=ix-wizard-styles.js.map
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-wizard following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.0.29
|
|
6
|
+
"version": "1.0.29",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@digital-realty/ix-button": "^3.2.
|
|
34
|
+
"@digital-realty/ix-button": "^3.2.32",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
37
|
"lit": "^2.0.2",
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"README.md",
|
|
109
109
|
"LICENSE"
|
|
110
110
|
],
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "705b8d4a1375a3ce54b1562c65d8636b98b14466"
|
|
112
112
|
}
|