@digital-realty/ix-wizard 1.0.29 → 1.0.30

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.
@@ -6,10 +6,15 @@ export declare class IxWizard extends LitElement {
6
6
  hideStepCount: boolean;
7
7
  onNextStepClick?: any;
8
8
  onPrevStepClick?: any;
9
+ onCloseClick?: any;
10
+ onMinimiseClick?: any;
9
11
  hideNextStep?: boolean | undefined;
10
12
  hidePrevStep?: boolean | undefined;
11
13
  enableNextStepClick?: boolean | undefined;
14
+ enableHideCloseButton?: boolean | undefined;
12
15
  firstUpdated(): void;
13
16
  renderStepCount(): typeof nothing | import("lit").TemplateResult<1>;
17
+ renderWithHideAndCloseButton(): import("lit").TemplateResult<1>;
18
+ renderDefault(): import("lit").TemplateResult<1>;
14
19
  render(): import("lit").TemplateResult<1>;
15
20
  }
package/dist/IxWizard.js CHANGED
@@ -11,6 +11,7 @@ export class IxWizard extends LitElement {
11
11
  this.hideNextStep = false;
12
12
  this.hidePrevStep = false;
13
13
  this.enableNextStepClick = false;
14
+ this.enableHideCloseButton = false;
14
15
  }
15
16
  static get styles() {
16
17
  return [IxWizardStyles];
@@ -51,7 +52,32 @@ export class IxWizard extends LitElement {
51
52
  : nothing}
52
53
  </div>`;
53
54
  }
54
- render() {
55
+ renderWithHideAndCloseButton() {
56
+ return html `
57
+ <div class="wizard-wrapper">
58
+ <div class="wizard-hideclose-header">
59
+ <ix-button
60
+ data-testid="hideButton"
61
+ appearance="text"
62
+ has-icon
63
+ @click=${() => this.onMinimiseClick()}
64
+ >
65
+ <ix-icon slot="icon">fullscreen_exit</ix-icon>
66
+ HIDE
67
+ </ix-button>
68
+ ${this.renderStepCount()}
69
+ <ix-icon-button
70
+ @click=${() => this.onCloseClick()}
71
+ icon="close"
72
+ ></ix-icon-button>
73
+ </div>
74
+ <div class="wizard-body">
75
+ <slot></slot>
76
+ </div>
77
+ </div>
78
+ `;
79
+ }
80
+ renderDefault() {
55
81
  return html `
56
82
  <div class="wizard-wrapper">
57
83
  <div class="wizard-header">${this.renderStepCount()}</div>
@@ -61,6 +87,11 @@ export class IxWizard extends LitElement {
61
87
  </div>
62
88
  `;
63
89
  }
90
+ render() {
91
+ return html ` ${this.enableHideCloseButton
92
+ ? this.renderWithHideAndCloseButton()
93
+ : this.renderDefault()}`;
94
+ }
64
95
  }
65
96
  __decorate([
66
97
  property({ type: Number })
@@ -77,6 +108,12 @@ __decorate([
77
108
  __decorate([
78
109
  property({ type: Function })
79
110
  ], IxWizard.prototype, "onPrevStepClick", void 0);
111
+ __decorate([
112
+ property({ type: Function })
113
+ ], IxWizard.prototype, "onCloseClick", void 0);
114
+ __decorate([
115
+ property({ type: Function })
116
+ ], IxWizard.prototype, "onMinimiseClick", void 0);
80
117
  __decorate([
81
118
  property({ type: Boolean })
82
119
  ], IxWizard.prototype, "hideNextStep", void 0);
@@ -86,4 +123,7 @@ __decorate([
86
123
  __decorate([
87
124
  property({ type: Boolean })
88
125
  ], IxWizard.prototype, "enableNextStepClick", void 0);
126
+ __decorate([
127
+ property({ type: Boolean })
128
+ ], IxWizard.prototype, "enableHideCloseButton", void 0);
89
129
  //# 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;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
+ {"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 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 <ix-button\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 ${this.renderStepCount()}\n <ix-icon-button\n @click=${() => this.onCloseClick()}\n icon=\"close\"\n ></ix-icon-button>\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 +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="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
+ 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-hideclose-header{display:flex;justify-content:space-between}.wizard-title{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{position:relative}.wizard-hideclose-header .wizard-title{position:static}.wizard-title md-icon{color:#d3d3d3}.wizard-header .wizard-title md-icon.enable-click:hover,.wizard-hideclose-header .wizard-title md-icon.enable-click:hover{cursor:pointer}.wizard-header .wizard-title md-icon.enable-click,.wizard-hideclose-header .wizard-title md-icon.enable-click{color:var(--ix-sys-primary,#1456e0)}.wizard-header .wizard-title span,.wizard-hideclose-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,this.enableHideCloseButton=!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>`}renderWithHideAndCloseButton(){return html`<div class="wizard-wrapper"><div class="wizard-hideclose-header"><ix-button data-testid="hideButton" appearance="text" has-icon @click="${()=>this.onMinimiseClick()}"><ix-icon slot="icon">fullscreen_exit</ix-icon>HIDE</ix-button>${this.renderStepCount()}<ix-icon-button @click="${()=>this.onCloseClick()}" icon="close"></ix-icon-button></div><div class="wizard-body"><slot></slot></div></div>`}renderDefault(){return html`<div class="wizard-wrapper"><div class="wizard-header">${this.renderStepCount()}</div><div class="wizard-body"><slot></slot></div></div>`}render(){return html`${this.enableHideCloseButton?this.renderWithHideAndCloseButton():this.renderDefault()}`}}__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:Function})],IxWizard.prototype,"onCloseClick",void 0),__decorate([property({type:Function})],IxWizard.prototype,"onMinimiseClick",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),__decorate([property({type:Boolean})],IxWizard.prototype,"enableHideCloseButton",void 0),window.customElements.define("ix-wizard",IxWizard);
@@ -12,8 +12,11 @@ export const IxWizardStyles = css `
12
12
  display: flex;
13
13
  justify-content: center;
14
14
  }
15
- .wizard-header .wizard-title {
16
- position: relative;
15
+ .wizard-hideclose-header {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ }
19
+ .wizard-title {
17
20
  width: 140px;
18
21
  display: grid;
19
22
  grid-template-columns: 24px 1fr 24px;
@@ -21,16 +24,25 @@ export const IxWizardStyles = css `
21
24
  place-items: center;
22
25
  top: var(--ix-wizard-top, 0);
23
26
  }
24
- .wizard-header .wizard-title md-icon {
27
+ .wizard-header .wizard-title {
28
+ position: relative;
29
+ }
30
+ .wizard-hideclose-header .wizard-title {
31
+ position: static;
32
+ }
33
+ .wizard-title md-icon {
25
34
  color: lightgrey;
26
35
  }
27
- .wizard-header .wizard-title md-icon.enable-click:hover {
36
+ .wizard-header .wizard-title md-icon.enable-click:hover,
37
+ .wizard-hideclose-header .wizard-title md-icon.enable-click:hover {
28
38
  cursor: pointer;
29
39
  }
30
- .wizard-header .wizard-title md-icon.enable-click {
40
+ .wizard-header .wizard-title md-icon.enable-click,
41
+ .wizard-hideclose-header .wizard-title md-icon.enable-click {
31
42
  color: var(--ix-sys-primary, #1456e0);
32
43
  }
33
- .wizard-header .wizard-title span {
44
+ .wizard-header .wizard-title span,
45
+ .wizard-hideclose-header .wizard-title span {
34
46
  font-weight: 700;
35
47
  font-style: normal;
36
48
  font-size: 14px;
@@ -1 +1 @@
1
- {"version":3,"file":"ix-wizard-styles.js","sourceRoot":"","sources":["../../src/styles/ix-wizard-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuChC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxWizardStyles = css`\n .wizard-wrapper {\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n margin: 0 25px;\n }\n\n .wizard-header {\n display: flex;\n justify-content: center;\n }\n .wizard-header .wizard-title {\n position: relative;\n width: 140px;\n display: grid;\n grid-template-columns: 24px 1fr 24px;\n -webkit-box-align: center;\n place-items: center;\n top: var(--ix-wizard-top, 0);\n }\n .wizard-header .wizard-title md-icon {\n color: lightgrey;\n }\n .wizard-header .wizard-title md-icon.enable-click:hover {\n cursor: pointer;\n }\n .wizard-header .wizard-title md-icon.enable-click {\n color: var(--ix-sys-primary, #1456e0);\n }\n .wizard-header .wizard-title span {\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #092241;\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-wizard-styles.js","sourceRoot":"","sources":["../../src/styles/ix-wizard-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxWizardStyles = css`\n .wizard-wrapper {\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n margin: 0 25px;\n }\n\n .wizard-header {\n display: flex;\n justify-content: center;\n }\n .wizard-hideclose-header {\n display: flex;\n justify-content: space-between;\n }\n .wizard-title {\n width: 140px;\n display: grid;\n grid-template-columns: 24px 1fr 24px;\n -webkit-box-align: center;\n place-items: center;\n top: var(--ix-wizard-top, 0);\n }\n .wizard-header .wizard-title {\n position: relative;\n }\n .wizard-hideclose-header .wizard-title {\n position: static;\n }\n .wizard-title md-icon {\n color: lightgrey;\n }\n .wizard-header .wizard-title md-icon.enable-click:hover,\n .wizard-hideclose-header .wizard-title md-icon.enable-click:hover {\n cursor: pointer;\n }\n .wizard-header .wizard-title md-icon.enable-click,\n .wizard-hideclose-header .wizard-title md-icon.enable-click {\n color: var(--ix-sys-primary, #1456e0);\n }\n .wizard-header .wizard-title span,\n .wizard-hideclose-header .wizard-title span {\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #092241;\n }\n`;\n"]}
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.30",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -108,5 +108,5 @@
108
108
  "README.md",
109
109
  "LICENSE"
110
110
  ],
111
- "gitHead": "705b8d4a1375a3ce54b1562c65d8636b98b14466"
111
+ "gitHead": "56a40b7b30216fdbb52f9d6eaa4e90ead4ab2440"
112
112
  }