@digital-realty/ix-wizard 1.0.26 → 1.0.27
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/IxWizard.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export declare class IxWizard extends LitElement {
|
|
|
8
8
|
onPrevStepClick?: any;
|
|
9
9
|
hideNextStep?: boolean | undefined;
|
|
10
10
|
hidePrevStep?: boolean | undefined;
|
|
11
|
+
enableNextStepClick?: boolean | undefined;
|
|
11
12
|
firstUpdated(): void;
|
|
12
13
|
renderStepCount(): typeof nothing | import("lit").TemplateResult<1>;
|
|
13
14
|
render(): import("lit").TemplateResult<1>;
|
package/dist/IxWizard.js
CHANGED
|
@@ -10,6 +10,7 @@ export class IxWizard extends LitElement {
|
|
|
10
10
|
this.hideStepCount = false;
|
|
11
11
|
this.hideNextStep = false;
|
|
12
12
|
this.hidePrevStep = false;
|
|
13
|
+
this.enableNextStepClick = false;
|
|
13
14
|
}
|
|
14
15
|
static get styles() {
|
|
15
16
|
return [IxWizardStyles];
|
|
@@ -27,7 +28,9 @@ export class IxWizard extends LitElement {
|
|
|
27
28
|
return nothing;
|
|
28
29
|
return html `<div class="wizard-title">
|
|
29
30
|
${!this.hidePrevStep
|
|
30
|
-
? html ` <md-icon
|
|
31
|
+
? html ` <md-icon
|
|
32
|
+
class="enable-click"
|
|
33
|
+
@click=${() => this.onPrevStepClick()}
|
|
31
34
|
>chevron_left</md-icon
|
|
32
35
|
>`
|
|
33
36
|
: html `<span></span>`}
|
|
@@ -35,7 +38,9 @@ export class IxWizard extends LitElement {
|
|
|
35
38
|
>${this.currentStep} of ${this.totalSteps}</span
|
|
36
39
|
>
|
|
37
40
|
${!this.hideNextStep
|
|
38
|
-
? html ` <md-icon
|
|
41
|
+
? html ` <md-icon
|
|
42
|
+
class=${this.enableNextStepClick ? 'enable-click' : ''}
|
|
43
|
+
@click=${() => this.onNextStepClick()}
|
|
39
44
|
>chevron_right</md-icon
|
|
40
45
|
>`
|
|
41
46
|
: nothing}
|
|
@@ -73,4 +78,7 @@ __decorate([
|
|
|
73
78
|
__decorate([
|
|
74
79
|
property({ type: Boolean })
|
|
75
80
|
], IxWizard.prototype, "hidePrevStep", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Boolean })
|
|
83
|
+
], IxWizard.prototype, "enableNextStepClick", void 0);
|
|
76
84
|
//# sourceMappingURL=IxWizard.js.map
|
package/dist/IxWizard.js.map
CHANGED
|
@@ -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;
|
|
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;IA4C5D,CAAC;IA9DC,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;;YAErC;YACJ,CAAC,CAAC,IAAI,CAAA,eAAe;;WAElB,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU;;QAEzC,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;oBACM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;qBAC7C,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;;YAErC;YACJ,CAAC,CAAC,OAAO;WACN,CAAC;IACV,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,eAAe,EAAE;;;;;KAKtD,CAAC;IACJ,CAAC;CACF;AA1D6B;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=\"enable-click\"\n @click=${() => this.onPrevStepClick()}\n >chevron_left</md-icon\n >`\n : html`<span></span>`}\n <span class=\"button-label\"\n >${this.currentStep} of ${this.totalSteps}</span\n >\n ${!this.hideNextStep\n ? html` <md-icon\n class=${this.enableNextStepClick ? 'enable-click' : ''}\n @click=${() => this.onNextStepClick()}\n >chevron_right</md-icon\n >`\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"]}
|
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";const 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 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}static get styles(){return[IxWizardStyles]}firstUpdated(){var
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,nothing,html}from"lit";import{property}from"lit/decorators.js";const 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="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="${this.enableNextStepClick?"enable-click":""}" @click="${()=>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);
|
|
@@ -24,6 +24,12 @@ export const IxWizardStyles = css `
|
|
|
24
24
|
.wizard-header .wizard-title md-icon {
|
|
25
25
|
color: lightgrey;
|
|
26
26
|
}
|
|
27
|
+
.wizard-header .wizard-title md-icon.enable-click:hover {
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
.wizard-header .wizard-title md-icon.enable-click {
|
|
31
|
+
color: var(--ix-sys-primary, #1456e0);
|
|
32
|
+
}
|
|
27
33
|
.wizard-header .wizard-title span {
|
|
28
34
|
font-weight: 700;
|
|
29
35
|
font-style: normal;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
|
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.
|
|
6
|
+
"version": "1.0.27",
|
|
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": "
|
|
111
|
+
"gitHead": "86ae1bee28a7cbbeea4b024585e60b7b58815152"
|
|
112
112
|
}
|