@digital-realty/ix-wizard 1.1.8 → 1.1.10
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/ix-wizard.min.js
CHANGED
|
@@ -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}.wizard-hideclose-header{display:flex;justify-content:space-between;background:#fff;z-index:10}.wizard-
|
|
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);
|
|
@@ -9,6 +9,7 @@ export const IxWizardStyles = css `
|
|
|
9
9
|
.wizard-header {
|
|
10
10
|
display: flex;
|
|
11
11
|
justify-content: center;
|
|
12
|
+
min-height: 1.5rem;
|
|
12
13
|
}
|
|
13
14
|
.wizard-hideclose-header {
|
|
14
15
|
display: flex;
|
|
@@ -16,17 +17,6 @@ export const IxWizardStyles = css `
|
|
|
16
17
|
background: white;
|
|
17
18
|
z-index: 10;
|
|
18
19
|
}
|
|
19
|
-
.wizard-hideclose-header::after {
|
|
20
|
-
content: '';
|
|
21
|
-
position: fixed;
|
|
22
|
-
top: 4.5rem;
|
|
23
|
-
left: 0px;
|
|
24
|
-
width: 100%;
|
|
25
|
-
height: 2rem;
|
|
26
|
-
background-color: white;
|
|
27
|
-
z-index: 10;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
20
|
.wizard-title {
|
|
31
21
|
width: 140px;
|
|
32
22
|
display: grid;
|
|
@@ -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
|
|
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"]}
|
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.1.
|
|
6
|
+
"version": "1.1.10",
|
|
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.3.
|
|
34
|
+
"@digital-realty/ix-button": "^3.3.6",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
37
|
"lit": "^2.8.0 || ^3.0.0",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"husky": "^4.3.8",
|
|
53
53
|
"lint-staged": "^10.5.4",
|
|
54
54
|
"prettier": "^2.4.1",
|
|
55
|
+
"rollup": "^4.29.1",
|
|
55
56
|
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
56
57
|
"rollup-plugin-summary": "^2.0.0",
|
|
57
58
|
"rollup-plugin-uglify": "^6.0.4",
|
|
@@ -108,5 +109,5 @@
|
|
|
108
109
|
"README.md",
|
|
109
110
|
"LICENSE"
|
|
110
111
|
],
|
|
111
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "3590ef8890b3526a1395c48f0e94c72757c33c35"
|
|
112
113
|
}
|