@digital-realty/ix-wizard 1.2.7 → 1.2.9

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 +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-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);
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;margin-left:var(--ix-wizard-hideclose-header-custom-margin-left,0)}.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);
@@ -16,6 +16,7 @@ export const IxWizardStyles = css `
16
16
  justify-content: space-between;
17
17
  background: white;
18
18
  z-index: 10;
19
+ margin-left: var(--ix-wizard-hideclose-header-custom-margin-left, 0);
19
20
  }
20
21
  .wizard-hideclose-header > div {
21
22
  flex: 1;
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEhC,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 margin-left: var(--ix-wizard-hideclose-header-custom-margin-left, 0);\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.7",
6
+ "version": "1.2.9",
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.4.6",
34
+ "@digital-realty/ix-button": "^3.4.8",
35
35
  "@lit/react": "^1.0.2",
36
36
  "@material/web": "2.4.0",
37
37
  "lit": "^3.2.1",
@@ -109,5 +109,5 @@
109
109
  "README.md",
110
110
  "LICENSE"
111
111
  ],
112
- "gitHead": "ab315b433acc9b12065e1a2038a2bc3a7c07487f"
112
+ "gitHead": "5c1dfe00bd35091792fcfdcea4bdddec87bd2d8b"
113
113
  }