@digital-realty/ix-wizard 1.3.2-SM-2775.526716.0 → 1.3.2
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 +0 -3
- package/dist/IxWizard.js +2 -36
- package/dist/IxWizard.js.map +1 -1
- package/dist/ix-wizard.min.js +10 -20
- package/package.json +3 -3
package/dist/IxWizard.d.ts
CHANGED
|
@@ -11,11 +11,8 @@ export declare class IxWizard extends LitElement {
|
|
|
11
11
|
hideNextStep?: boolean | undefined;
|
|
12
12
|
hidePrevStep?: boolean | undefined;
|
|
13
13
|
enableNextStepClick?: boolean | undefined;
|
|
14
|
-
enablePrevStepClick?: boolean | undefined;
|
|
15
14
|
enableHideCloseButton?: boolean | undefined;
|
|
16
15
|
enableHideButton: boolean;
|
|
17
|
-
private handlePrevStepKeydown;
|
|
18
|
-
private handleNextStepKeydown;
|
|
19
16
|
firstUpdated(): void;
|
|
20
17
|
renderStepCount(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
21
18
|
renderWithHideAndCloseButton(): import("lit-html").TemplateResult<1>;
|
package/dist/IxWizard.js
CHANGED
|
@@ -11,29 +11,12 @@ export class IxWizard extends LitElement {
|
|
|
11
11
|
this.hideNextStep = false;
|
|
12
12
|
this.hidePrevStep = false;
|
|
13
13
|
this.enableNextStepClick = false;
|
|
14
|
-
this.enablePrevStepClick = true;
|
|
15
14
|
this.enableHideCloseButton = false;
|
|
16
15
|
this.enableHideButton = false;
|
|
17
16
|
}
|
|
18
17
|
static get styles() {
|
|
19
18
|
return [IxWizardStyles];
|
|
20
19
|
}
|
|
21
|
-
handlePrevStepKeydown(event) {
|
|
22
|
-
var _a;
|
|
23
|
-
if ((event.key === 'Enter' || event.key === ' ') &&
|
|
24
|
-
this.enablePrevStepClick) {
|
|
25
|
-
event.preventDefault();
|
|
26
|
-
(_a = this.onPrevStepClick) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
handleNextStepKeydown(event) {
|
|
30
|
-
var _a;
|
|
31
|
-
if ((event.key === 'Enter' || event.key === ' ') &&
|
|
32
|
-
this.enableNextStepClick) {
|
|
33
|
-
event.preventDefault();
|
|
34
|
-
(_a = this.onNextStepClick) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
20
|
firstUpdated() {
|
|
38
21
|
var _a;
|
|
39
22
|
if (this.totalSteps === 0) {
|
|
@@ -48,17 +31,8 @@ export class IxWizard extends LitElement {
|
|
|
48
31
|
return html `<div class="wizard-title">
|
|
49
32
|
${!this.hidePrevStep
|
|
50
33
|
? html `<md-icon
|
|
51
|
-
class
|
|
52
|
-
|
|
53
|
-
aria-label="Go to previous step"
|
|
54
|
-
aria-disabled=${!this.enablePrevStepClick}
|
|
55
|
-
tabindex=${this.enablePrevStepClick ? '0' : '-1'}
|
|
56
|
-
@click=${() => {
|
|
57
|
-
var _a;
|
|
58
|
-
if (this.enablePrevStepClick)
|
|
59
|
-
(_a = this.onPrevStepClick) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
60
|
-
}}
|
|
61
|
-
@keydown=${this.handlePrevStepKeydown}
|
|
34
|
+
class="prev-arrow enable-click"
|
|
35
|
+
@click=${() => this.onPrevStepClick()}
|
|
62
36
|
>
|
|
63
37
|
chevron_left
|
|
64
38
|
</md-icon>`
|
|
@@ -69,15 +43,10 @@ export class IxWizard extends LitElement {
|
|
|
69
43
|
${!this.hideNextStep
|
|
70
44
|
? html `<md-icon
|
|
71
45
|
class=${`next-arrow ${this.enableNextStepClick ? 'enable-click' : ''}`}
|
|
72
|
-
role="button"
|
|
73
|
-
aria-label="Go to next step"
|
|
74
|
-
aria-disabled=${!this.enableNextStepClick}
|
|
75
|
-
tabindex=${this.enableNextStepClick ? '0' : '-1'}
|
|
76
46
|
@click=${() => {
|
|
77
47
|
if (this.enableNextStepClick)
|
|
78
48
|
this.onNextStepClick();
|
|
79
49
|
}}
|
|
80
|
-
@keydown=${this.handleNextStepKeydown}
|
|
81
50
|
>
|
|
82
51
|
chevron_right
|
|
83
52
|
</md-icon>`
|
|
@@ -163,9 +132,6 @@ __decorate([
|
|
|
163
132
|
__decorate([
|
|
164
133
|
property({ type: Boolean })
|
|
165
134
|
], IxWizard.prototype, "enableNextStepClick", void 0);
|
|
166
|
-
__decorate([
|
|
167
|
-
property({ type: Boolean })
|
|
168
|
-
], IxWizard.prototype, "enablePrevStepClick", void 0);
|
|
169
135
|
__decorate([
|
|
170
136
|
property({ type: Boolean })
|
|
171
137
|
], IxWizard.prototype, "enableHideCloseButton", void 0);
|
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;QAUtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,iBAAY,GAAI,KAAK,CAAC;QAEtB,wBAAmB,GAAI,KAAK,CAAC;QAE7B,
|
|
1
|
+
{"version":3,"file":"IxWizard.js","sourceRoot":"","sources":["../src/IxWizard.ts"],"names":[],"mappings":"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","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: Function }) onCloseClick?: any;\n\n @property({ type: Function }) onMinimiseClick?: any;\n\n @property({ type: Boolean }) hideNextStep? = false;\n\n @property({ type: Boolean }) hidePrevStep? = false;\n\n @property({ type: Boolean }) enableNextStepClick? = false;\n\n @property({ type: Boolean }) enableHideCloseButton? = false;\n\n @property({ type: Boolean }) enableHideButton = 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 renderWithHideAndCloseButton() {\n return html`\n <div class=\"wizard-wrapper\">\n <div class=\"wizard-hideclose-header\">\n <div>\n ${this.enableHideButton\n ? html`<ix-button\n class=\"hideButton\"\n data-testid=\"hideButton\"\n appearance=\"text\"\n has-icon\n @click=${() => this.onMinimiseClick()}\n >\n <ix-icon slot=\"icon\">fullscreen_exit</ix-icon>\n HIDE\n </ix-button>`\n : nothing}\n </div>\n ${this.renderStepCount()}\n <div>\n <ix-icon-button\n class=\"closeButton\"\n @click=${() => this.onCloseClick()}\n icon=\"close\"\n ></ix-icon-button>\n </div>\n </div>\n <div class=\"wizard-body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n renderDefault() {\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 render() {\n return html` ${this.enableHideCloseButton\n ? this.renderWithHideAndCloseButton()\n : this.renderDefault()}`;\n }\n}\n"]}
|
package/dist/ix-wizard.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,html as
|
|
1
|
+
import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,html as r}from"lit";import{property as n}from"lit/decorators.js";const d=t`
|
|
2
2
|
.wizard-wrapper {
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -64,37 +64,27 @@ import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,
|
|
|
64
64
|
color: #092241;
|
|
65
65
|
padding: 0 1rem;
|
|
66
66
|
}
|
|
67
|
-
`;class
|
|
68
|
-
${this.hidePrevStep?
|
|
69
|
-
class
|
|
70
|
-
|
|
71
|
-
aria-label="Go to previous step"
|
|
72
|
-
aria-disabled=${!this.enablePrevStepClick}
|
|
73
|
-
tabindex=${this.enablePrevStepClick?"0":"-1"}
|
|
74
|
-
@click=${()=>{var e;this.enablePrevStepClick&&(null===(e=this.onPrevStepClick)||void 0===e||e.call(this))}}
|
|
75
|
-
@keydown=${this.handlePrevStepKeydown}
|
|
67
|
+
`;class l extends i{constructor(){super(...arguments),this.totalSteps=0,this.currentStep=0,this.hideStepCount=!1,this.hideNextStep=!1,this.hidePrevStep=!1,this.enableNextStepClick=!1,this.enableHideCloseButton=!1,this.enableHideButton=!1}static get styles(){return[d]}firstUpdated(){var e;if(0===this.totalSteps){const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot"),i=null==t?void 0:t.assignedElements();this.totalSteps=(null==i?void 0:i.length)||0}}renderStepCount(){return 0===this.currentStep||this.hideStepCount?o:r`<div class="wizard-title">
|
|
68
|
+
${this.hidePrevStep?r`<span></span>`:r`<md-icon
|
|
69
|
+
class="prev-arrow enable-click"
|
|
70
|
+
@click=${()=>this.onPrevStepClick()}
|
|
76
71
|
>
|
|
77
72
|
chevron_left
|
|
78
73
|
</md-icon>`}
|
|
79
74
|
<span class="button-label">
|
|
80
75
|
${this.currentStep} of ${this.totalSteps}
|
|
81
76
|
</span>
|
|
82
|
-
${this.hideNextStep?o:
|
|
77
|
+
${this.hideNextStep?o:r`<md-icon
|
|
83
78
|
class=${"next-arrow "+(this.enableNextStepClick?"enable-click":"")}
|
|
84
|
-
role="button"
|
|
85
|
-
aria-label="Go to next step"
|
|
86
|
-
aria-disabled=${!this.enableNextStepClick}
|
|
87
|
-
tabindex=${this.enableNextStepClick?"0":"-1"}
|
|
88
79
|
@click=${()=>{this.enableNextStepClick&&this.onNextStepClick()}}
|
|
89
|
-
@keydown=${this.handleNextStepKeydown}
|
|
90
80
|
>
|
|
91
81
|
chevron_right
|
|
92
82
|
</md-icon>`}
|
|
93
|
-
</div>`}renderWithHideAndCloseButton(){return
|
|
83
|
+
</div>`}renderWithHideAndCloseButton(){return r`
|
|
94
84
|
<div class="wizard-wrapper">
|
|
95
85
|
<div class="wizard-hideclose-header">
|
|
96
86
|
<div>
|
|
97
|
-
${this.enableHideButton?
|
|
87
|
+
${this.enableHideButton?r`<ix-button
|
|
98
88
|
class="hideButton"
|
|
99
89
|
data-testid="hideButton"
|
|
100
90
|
appearance="text"
|
|
@@ -118,11 +108,11 @@ import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,
|
|
|
118
108
|
<slot></slot>
|
|
119
109
|
</div>
|
|
120
110
|
</div>
|
|
121
|
-
`}renderDefault(){return
|
|
111
|
+
`}renderDefault(){return r`
|
|
122
112
|
<div class="wizard-wrapper">
|
|
123
113
|
<div class="wizard-header">${this.renderStepCount()}</div>
|
|
124
114
|
<div class="wizard-body">
|
|
125
115
|
<slot></slot>
|
|
126
116
|
</div>
|
|
127
117
|
</div>
|
|
128
|
-
`}render(){return
|
|
118
|
+
`}render(){return r` ${this.enableHideCloseButton?this.renderWithHideAndCloseButton():this.renderDefault()}`}}e([n({type:Number})],l.prototype,"totalSteps",void 0),e([n({type:Number})],l.prototype,"currentStep",void 0),e([n({type:Boolean})],l.prototype,"hideStepCount",void 0),e([n({type:Function})],l.prototype,"onNextStepClick",void 0),e([n({type:Function})],l.prototype,"onPrevStepClick",void 0),e([n({type:Function})],l.prototype,"onCloseClick",void 0),e([n({type:Function})],l.prototype,"onMinimiseClick",void 0),e([n({type:Boolean})],l.prototype,"hideNextStep",void 0),e([n({type:Boolean})],l.prototype,"hidePrevStep",void 0),e([n({type:Boolean})],l.prototype,"enableNextStepClick",void 0),e([n({type:Boolean})],l.prototype,"enableHideCloseButton",void 0),e([n({type:Boolean})],l.prototype,"enableHideButton",void 0),window.customElements.define("ix-wizard",l);
|
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.3.2
|
|
6
|
+
"version": "1.3.2",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@digital-realty/ix-button": "^3.5.3
|
|
32
|
+
"@digital-realty/ix-button": "^3.5.3",
|
|
33
33
|
"@lit/react": "^1.0.2",
|
|
34
34
|
"@material/web": "2.4.0",
|
|
35
35
|
"lit": "^3.2.1",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "849097b9b2b21d8acdb88fe9718bbf244d4f531a"
|
|
104
104
|
}
|