@digital-realty/ix-wizard 1.3.2 → 1.3.3-SM-2775.526998.0

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.
@@ -11,8 +11,11 @@ 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;
14
15
  enableHideCloseButton?: boolean | undefined;
15
16
  enableHideButton: boolean;
17
+ private handlePrevStepKeydown;
18
+ private handleNextStepKeydown;
16
19
  firstUpdated(): void;
17
20
  renderStepCount(): import("lit-html").TemplateResult<1> | typeof nothing;
18
21
  renderWithHideAndCloseButton(): import("lit-html").TemplateResult<1>;
package/dist/IxWizard.js CHANGED
@@ -11,12 +11,29 @@ export class IxWizard extends LitElement {
11
11
  this.hideNextStep = false;
12
12
  this.hidePrevStep = false;
13
13
  this.enableNextStepClick = false;
14
+ this.enablePrevStepClick = true;
14
15
  this.enableHideCloseButton = false;
15
16
  this.enableHideButton = false;
16
17
  }
17
18
  static get styles() {
18
19
  return [IxWizardStyles];
19
20
  }
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
+ }
20
37
  firstUpdated() {
21
38
  var _a;
22
39
  if (this.totalSteps === 0) {
@@ -31,8 +48,17 @@ export class IxWizard extends LitElement {
31
48
  return html `<div class="wizard-title">
32
49
  ${!this.hidePrevStep
33
50
  ? html `<md-icon
34
- class="prev-arrow enable-click"
35
- @click=${() => this.onPrevStepClick()}
51
+ class=${`prev-arrow ${this.enablePrevStepClick ? 'enable-click' : ''}`}
52
+ role="button"
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}
36
62
  >
37
63
  chevron_left
38
64
  </md-icon>`
@@ -43,10 +69,15 @@ export class IxWizard extends LitElement {
43
69
  ${!this.hideNextStep
44
70
  ? html `<md-icon
45
71
  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'}
46
76
  @click=${() => {
47
77
  if (this.enableNextStepClick)
48
78
  this.onNextStepClick();
49
79
  }}
80
+ @keydown=${this.handleNextStepKeydown}
50
81
  >
51
82
  chevron_right
52
83
  </md-icon>`
@@ -132,6 +163,9 @@ __decorate([
132
163
  __decorate([
133
164
  property({ type: Boolean })
134
165
  ], IxWizard.prototype, "enableNextStepClick", void 0);
166
+ __decorate([
167
+ property({ type: Boolean })
168
+ ], IxWizard.prototype, "enablePrevStepClick", void 0);
135
169
  __decorate([
136
170
  property({ type: Boolean })
137
171
  ], IxWizard.prototype, "enableHideCloseButton", void 0);
@@ -1 +1 @@
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"]}
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 }) enablePrevStepClick? = true;\n\n @property({ type: Boolean }) enableHideCloseButton? = false;\n\n @property({ type: Boolean }) enableHideButton = false;\n\n private handlePrevStepKeydown(event: KeyboardEvent) {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n this.enablePrevStepClick\n ) {\n event.preventDefault();\n this.onPrevStepClick?.();\n }\n }\n\n private handleNextStepKeydown(event: KeyboardEvent) {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n this.enableNextStepClick\n ) {\n event.preventDefault();\n this.onNextStepClick?.();\n }\n }\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 ${\n this.enablePrevStepClick ? 'enable-click' : ''\n }`}\n role=\"button\"\n aria-label=\"Go to previous step\"\n aria-disabled=${!this.enablePrevStepClick}\n tabindex=${this.enablePrevStepClick ? '0' : '-1'}\n @click=${() => {\n if (this.enablePrevStepClick) this.onPrevStepClick?.();\n }}\n @keydown=${this.handlePrevStepKeydown}\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 role=\"button\"\n aria-label=\"Go to next step\"\n aria-disabled=${!this.enableNextStepClick}\n tabindex=${this.enableNextStepClick ? '0' : '-1'}\n @click=${() => {\n if (this.enableNextStepClick) this.onNextStepClick();\n }}\n @keydown=${this.handleNextStepKeydown}\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"]}
@@ -1,4 +1,4 @@
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`
1
+ import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,html as l}from"lit";import{property as n}from"lit/decorators.js";const r=t`
2
2
  .wizard-wrapper {
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -64,27 +64,37 @@ 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 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()}
67
+ `;class a extends i{constructor(){super(...arguments),this.totalSteps=0,this.currentStep=0,this.hideStepCount=!1,this.hideNextStep=!1,this.hidePrevStep=!1,this.enableNextStepClick=!1,this.enablePrevStepClick=!0,this.enableHideCloseButton=!1,this.enableHideButton=!1}static get styles(){return[r]}handlePrevStepKeydown(e){var t;"Enter"!==e.key&&" "!==e.key||!this.enablePrevStepClick||(e.preventDefault(),null===(t=this.onPrevStepClick)||void 0===t||t.call(this))}handleNextStepKeydown(e){var t;"Enter"!==e.key&&" "!==e.key||!this.enableNextStepClick||(e.preventDefault(),null===(t=this.onNextStepClick)||void 0===t||t.call(this))}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:l`<div class="wizard-title">
68
+ ${this.hidePrevStep?l`<span></span>`:l`<md-icon
69
+ class=${"prev-arrow "+(this.enablePrevStepClick?"enable-click":"")}
70
+ role="button"
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}
71
76
  >
72
77
  chevron_left
73
78
  </md-icon>`}
74
79
  <span class="button-label">
75
80
  ${this.currentStep} of ${this.totalSteps}
76
81
  </span>
77
- ${this.hideNextStep?o:r`<md-icon
82
+ ${this.hideNextStep?o:l`<md-icon
78
83
  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"}
79
88
  @click=${()=>{this.enableNextStepClick&&this.onNextStepClick()}}
89
+ @keydown=${this.handleNextStepKeydown}
80
90
  >
81
91
  chevron_right
82
92
  </md-icon>`}
83
- </div>`}renderWithHideAndCloseButton(){return r`
93
+ </div>`}renderWithHideAndCloseButton(){return l`
84
94
  <div class="wizard-wrapper">
85
95
  <div class="wizard-hideclose-header">
86
96
  <div>
87
- ${this.enableHideButton?r`<ix-button
97
+ ${this.enableHideButton?l`<ix-button
88
98
  class="hideButton"
89
99
  data-testid="hideButton"
90
100
  appearance="text"
@@ -108,11 +118,11 @@ import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as o,
108
118
  <slot></slot>
109
119
  </div>
110
120
  </div>
111
- `}renderDefault(){return r`
121
+ `}renderDefault(){return l`
112
122
  <div class="wizard-wrapper">
113
123
  <div class="wizard-header">${this.renderStepCount()}</div>
114
124
  <div class="wizard-body">
115
125
  <slot></slot>
116
126
  </div>
117
127
  </div>
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);
128
+ `}render(){return l` ${this.enableHideCloseButton?this.renderWithHideAndCloseButton():this.renderDefault()}`}}e([n({type:Number})],a.prototype,"totalSteps",void 0),e([n({type:Number})],a.prototype,"currentStep",void 0),e([n({type:Boolean})],a.prototype,"hideStepCount",void 0),e([n({type:Function})],a.prototype,"onNextStepClick",void 0),e([n({type:Function})],a.prototype,"onPrevStepClick",void 0),e([n({type:Function})],a.prototype,"onCloseClick",void 0),e([n({type:Function})],a.prototype,"onMinimiseClick",void 0),e([n({type:Boolean})],a.prototype,"hideNextStep",void 0),e([n({type:Boolean})],a.prototype,"hidePrevStep",void 0),e([n({type:Boolean})],a.prototype,"enableNextStepClick",void 0),e([n({type:Boolean})],a.prototype,"enablePrevStepClick",void 0),e([n({type:Boolean})],a.prototype,"enableHideCloseButton",void 0),e([n({type:Boolean})],a.prototype,"enableHideButton",void 0),window.customElements.define("ix-wizard",a);
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.3-SM-2775.526998.0",
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.4-SM-2775.526998.0",
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": "849097b9b2b21d8acdb88fe9718bbf244d4f531a"
103
+ "gitHead": "d56a76583ebdc8712fad38a4465f9b89e0202069"
104
104
  }