@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.
@@ -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 ` <md-icon
32
- class="enable-click"
30
+ ${!this.hidePrevStep
31
+ ? html `<md-icon
32
+ class="prev-arrow enable-click"
33
33
  @click=${() => this.onPrevStepClick()}
34
- >chevron_left</md-icon
35
- >`
34
+ >
35
+ chevron_left
36
+ </md-icon>`
36
37
  : html `<span></span>`}
37
- <span class="button-label"
38
- >${this.currentStep} of ${this.totalSteps}</span
39
- >
40
- ${!this.hideNextStep
41
- ? html ` <md-icon
42
- class=${this.enableNextStepClick ? 'enable-click' : ''}
43
- @click=${() => this.onNextStepClick()}
44
- >chevron_right</md-icon
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
@@ -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;IA4C5D,CAAC;IA9DC,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;;YAErC;YACJ,CAAC,CAAC,IAAI,CAAA,eAAe;;WAElB,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU;;QAEzC,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;oBACM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;qBAC7C,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;;YAErC;YACJ,CAAC,CAAC,OAAO;WACN,CAAC;IACV,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,eAAe,EAAE;;;;;KAKtD,CAAC;IACJ,CAAC;CACF;AA1D6B;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=\"enable-click\"\n @click=${() => this.onPrevStepClick()}\n >chevron_left</md-icon\n >`\n : html`<span></span>`}\n <span class=\"button-label\"\n >${this.currentStep} of ${this.totalSteps}</span\n >\n ${!this.hideNextStep\n ? html` <md-icon\n class=${this.enableNextStepClick ? 'enable-click' : ''}\n @click=${() => this.onNextStepClick()}\n >chevron_right</md-icon\n >`\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"]}
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"]}
@@ -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
+ }
@@ -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
@@ -1 +1 @@
1
- export {};
1
+ export {};
@@ -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
@@ -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
@@ -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> ${this.hideNextStep?nothing:html`<md-icon class="${this.enableNextStepClick?"enable-click":""}" @click="${()=>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);
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);
@@ -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
+ }>;
@@ -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,WAAW;IACpB,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',\n elementClass: IxWizardLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}
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,gBAAgB;IACzB,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',\n elementClass: IxWizardStepLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}
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-alpha.0",
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.33-alpha.0",
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": "020de6dab25bbe6058e9a71b2c56681822403481"
111
+ "gitHead": "705b8d4a1375a3ce54b1562c65d8636b98b14466"
112
112
  }