@digital-realty/ix-wizard 1.2.1 → 1.2.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.
@@ -12,8 +12,9 @@ export declare class IxWizard extends LitElement {
12
12
  hidePrevStep?: boolean | undefined;
13
13
  enableNextStepClick?: boolean | undefined;
14
14
  enableHideCloseButton?: boolean | undefined;
15
+ enableHideButton: boolean;
15
16
  firstUpdated(): void;
16
- renderStepCount(): typeof nothing | import("lit-html").TemplateResult<1>;
17
+ renderStepCount(): import("lit-html").TemplateResult<1> | typeof nothing;
17
18
  renderWithHideAndCloseButton(): import("lit-html").TemplateResult<1>;
18
19
  renderDefault(): import("lit-html").TemplateResult<1>;
19
20
  render(): import("lit-html").TemplateResult<1>;
package/dist/IxWizard.js CHANGED
@@ -12,6 +12,7 @@ export class IxWizard extends LitElement {
12
12
  this.hidePrevStep = false;
13
13
  this.enableNextStepClick = false;
14
14
  this.enableHideCloseButton = false;
15
+ this.enableHideButton = false;
15
16
  }
16
17
  static get styles() {
17
18
  return [IxWizardStyles];
@@ -56,20 +57,28 @@ export class IxWizard extends LitElement {
56
57
  return html `
57
58
  <div class="wizard-wrapper">
58
59
  <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>
60
+ <div>
61
+ ${this.enableHideButton
62
+ ? html `<ix-button
63
+ class="hideButton"
64
+ data-testid="hideButton"
65
+ appearance="text"
66
+ has-icon
67
+ @click=${() => this.onMinimiseClick()}
68
+ >
69
+ <ix-icon slot="icon">fullscreen_exit</ix-icon>
70
+ HIDE
71
+ </ix-button>`
72
+ : nothing}
73
+ </div>
68
74
  ${this.renderStepCount()}
69
- <ix-icon-button
70
- @click=${() => this.onCloseClick()}
71
- icon="close"
72
- ></ix-icon-button>
75
+ <div>
76
+ <ix-icon-button
77
+ class="closeButton"
78
+ @click=${() => this.onCloseClick()}
79
+ icon="close"
80
+ ></ix-icon-button>
81
+ </div>
73
82
  </div>
74
83
  <div class="wizard-body">
75
84
  <slot></slot>
@@ -126,4 +135,7 @@ __decorate([
126
135
  __decorate([
127
136
  property({ type: Boolean })
128
137
  ], IxWizard.prototype, "enableHideCloseButton", void 0);
138
+ __decorate([
139
+ property({ type: Boolean })
140
+ ], IxWizard.prototype, "enableHideButton", void 0);
129
141
  //# sourceMappingURL=IxWizard.js.map
@@ -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 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
+ {"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,0BAAqB,GAAI,KAAK,CAAC;QAE/B,qBAAgB,GAAG,KAAK,CAAC;IA0FxD,CAAC;IApHC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IA0BD,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,4BAA4B;QAC1B,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,gBAAgB;YACrB,CAAC,CAAC,IAAI,CAAA;;;;;2BAKO,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;;;;6BAI1B;YACf,CAAC,CAAC,OAAO;;YAEX,IAAI,CAAC,eAAe,EAAE;;;;uBAIX,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;;;;;;;KAS3C,CAAC;IACJ,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,eAAe,EAAE;;;;;KAKtD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,qBAAqB;YACvC,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE;YACrC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IAC7B,CAAC;CACF;AAhH6B;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;AAEtB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8CAAoB;AAEnB;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;AAE7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAgC;AAE/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA0B","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"]}
@@ -12,7 +12,7 @@ export declare class IxWizardStep extends LitElement {
12
12
  isNextButtonDisabled: boolean;
13
13
  onNextButtonClick: any;
14
14
  nextButtonText: string;
15
- renderBackButton(): typeof nothing | import("lit-html").TemplateResult<1>;
16
- renderNextButton(): typeof nothing | import("lit-html").TemplateResult<1>;
17
- render(): typeof nothing | import("lit-html").TemplateResult<1>;
15
+ renderBackButton(): import("lit-html").TemplateResult<1> | typeof nothing;
16
+ renderNextButton(): import("lit-html").TemplateResult<1> | typeof nothing;
17
+ render(): import("lit-html").TemplateResult<1> | typeof nothing;
18
18
  }
@@ -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}.wizard-header{display:flex;justify-content:center;min-height:1.5rem}.wizard-hideclose-header{display:flex;justify-content:space-between;background:#fff;z-index:10}.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);
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}.wizard-header{display:flex;justify-content:center;min-height:1.5rem}.wizard-hideclose-header{display:flex;justify-content:space-between;background:#fff;z-index:10}.wizard-hideclose-header>div{flex:1}.wizard-hideclose-header .closeButton{justify-content:flex-end;align-items:center}.wizard-hideclose-header .hideButton{justify-content:flex-start;align-items:center;display:inline-flex}.wizard-title{width:140px;display:flex;justify-content:center;-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;padding:0 1rem}`;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,this.enableHideButton=!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"><div>${this.enableHideButton?html`<ix-button class="hideButton" data-testid="hideButton" appearance="text" has-icon @click="${()=>this.onMinimiseClick()}"><ix-icon slot="icon">fullscreen_exit</ix-icon>HIDE</ix-button>`:nothing}</div>${this.renderStepCount()}<div><ix-icon-button class="closeButton" @click="${()=>this.onCloseClick()}" icon="close"></ix-icon-button></div></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),__decorate([property({type:Boolean})],IxWizard.prototype,"enableHideButton",void 0),window.customElements.define("ix-wizard",IxWizard);
@@ -17,10 +17,22 @@ export const IxWizardStyles = css `
17
17
  background: white;
18
18
  z-index: 10;
19
19
  }
20
+ .wizard-hideclose-header > div {
21
+ flex: 1;
22
+ }
23
+ .wizard-hideclose-header .closeButton {
24
+ justify-content: flex-end;
25
+ align-items: center;
26
+ }
27
+ .wizard-hideclose-header .hideButton {
28
+ justify-content: flex-start;
29
+ align-items: center;
30
+ display: inline-flex;
31
+ }
20
32
  .wizard-title {
21
33
  width: 140px;
22
- display: grid;
23
- grid-template-columns: 24px 1fr 24px;
34
+ display: flex;
35
+ justify-content: center;
24
36
  -webkit-box-align: center;
25
37
  place-items: center;
26
38
  top: var(--ix-wizard-top, 0);
@@ -50,6 +62,7 @@ export const IxWizardStyles = css `
50
62
  letter-spacing: 1.25px;
51
63
  text-transform: uppercase;
52
64
  color: #092241;
65
+ padding: 0 1rem;
53
66
  }
54
67
  `;
55
68
  //# sourceMappingURL=ix-wizard-styles.js.map
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDhC,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\n .wizard-header {\n display: flex;\n justify-content: center;\n min-height: 1.5rem;\n }\n .wizard-hideclose-header {\n display: flex;\n justify-content: space-between;\n background: white;\n z-index: 10;\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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEhC,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\n .wizard-header {\n display: flex;\n justify-content: center;\n min-height: 1.5rem;\n }\n .wizard-hideclose-header {\n display: flex;\n justify-content: space-between;\n background: white;\n z-index: 10;\n }\n .wizard-hideclose-header > div {\n flex: 1;\n }\n .wizard-hideclose-header .closeButton {\n justify-content: flex-end;\n align-items: center;\n }\n .wizard-hideclose-header .hideButton {\n justify-content: flex-start;\n align-items: center;\n display: inline-flex;\n }\n .wizard-title {\n width: 140px;\n display: flex;\n justify-content: center;\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 padding: 0 1rem;\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.2.1",
6
+ "version": "1.2.2",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -109,5 +109,5 @@
109
109
  "README.md",
110
110
  "LICENSE"
111
111
  ],
112
- "gitHead": "0a87dc6e3da94a1375ec43a7ead2bfdec4913821"
112
+ "gitHead": "8aedb85c479ed135c52fc49ab21f1e6faba4eccf"
113
113
  }