@kelvininc/ui-components
Version:
Kelvin UI Components
301 lines (300 loc) • 12 kB
JavaScript
import { h } from "@stencil/core";
import { buildFooterConfig, buildHeaderConfig } from "./wizard.helper";
export class KvWizard {
constructor() {
/** @inheritdoc */
this.showHeader = true;
/** @inheritdoc */
this.showStepBar = true;
/** @inheritdoc */
this.disabled = false;
this.onPrevClick = () => {
this.goToStep.emit(this.currentStep - 1);
};
this.onNextClick = () => {
this.goToStep.emit(this.currentStep + 1);
};
this.onStepClick = ({ detail }) => {
this.goToStep.emit(detail);
};
}
/** Watch the `steps` property and update internal state accordingly */
stepsChangeHandler(newValue) {
this.currentHeader = buildHeaderConfig(newValue, this.currentStep);
this.currentFooter = buildFooterConfig(newValue, this.currentStep, this.currentStepState, this.disabled);
}
/** Watch the `currentStep` property and update internal state accordingly */
currentStepChangeHandler(newValue) {
this.currentHeader = buildHeaderConfig(this.steps, newValue);
this.currentFooter = buildFooterConfig(this.steps, newValue, this.currentStepState, this.disabled);
}
/** Watch the `currentStepState` property and update internal state accordingly */
hasErrorStepChangeHandler(newValue) {
this.currentFooter = buildFooterConfig(this.steps, this.currentStep, newValue, this.disabled);
}
componentWillLoad() {
this.currentHeader = buildHeaderConfig(this.steps, this.currentStep);
this.currentFooter = buildFooterConfig(this.steps, this.currentStep, this.currentStepState, this.disabled);
}
render() {
return (h("div", { key: 'f340163196c108f1690108898e44a302489cd0c0', class: "wizard" }, this.showHeader && (h("div", { key: '4765a77e2deb6bcdfee7518424ceb361612bcdb2', class: "wizard-header" }, this.currentHeader && (h("kv-wizard-header", Object.assign({ key: '124e10f5f794de5b7ba3d19c4c0f0d0e2d88ac28' }, this.currentHeader), h("slot", { key: '548e004533fa5742d5496b2e55711072503a4ffa', slot: "additional-header-actions", name: "additional-header-actions" }))))), h("div", { key: '1f83368d3f8c61b575e49b23b887f005ca97b4e0', class: { 'wizard-content': true, 'has-header': this.showHeader } }, h("slot", { key: 'c10faaf1a135d8eaaa7ce784b086c043b26d564e', name: "step-content" })), h("div", { key: 'c643d60871c4a8298b2de2c39dd3042e6f15a4ee', class: "wizard-footer" }, h("kv-wizard-footer", Object.assign({ key: 'a4dface500a7ec36b0bfaa66745012c479868e4a', onPrevClick: this.onPrevClick, onNextClick: this.onNextClick, onStepClick: this.onStepClick, showStepBar: this.showStepBar, completeBtnLabel: this.completeBtnLabel, exportparts: "footer-actions-container" }, this.currentFooter), h("slot", { key: 'a70f587b16e03e31013b4a75d56029b71f3590e9', slot: "additional-actions", name: "additional-actions" })))));
}
static get is() { return "kv-wizard"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["wizard.scss"]
};
}
static get styleUrls() {
return {
"$": ["wizard.css"]
};
}
static get properties() {
return {
"steps": {
"type": "unknown",
"attribute": "steps",
"mutable": false,
"complexType": {
"original": "IWizardStep[]",
"resolved": "IWizardStep[]",
"references": {
"IWizardStep": {
"location": "import",
"path": "./wizard.types",
"id": "src/components/wizard/wizard.types.ts::IWizardStep"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the wizard steps"
},
"getter": false,
"setter": false
},
"currentStep": {
"type": "number",
"attribute": "current-step",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the current step index"
},
"getter": false,
"setter": false,
"reflect": true
},
"currentStepState": {
"type": "unknown",
"attribute": "current-step-state",
"mutable": false,
"complexType": {
"original": "StepState",
"resolved": "{ state: EStepState.Error; error?: string; } | { state: EStepState.Success; error?: never; }",
"references": {
"StepState": {
"location": "import",
"path": "./wizard.types",
"id": "src/components/wizard/wizard.types.ts::StepState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the current step state. Only the success state allows to proceed"
},
"getter": false,
"setter": false
},
"showHeader": {
"type": "boolean",
"attribute": "show-header",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the header should render. Default: true"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"showStepBar": {
"type": "boolean",
"attribute": "show-step-bar",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the step bar should render. Default: true"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the wizard navigation is disabled. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"completeBtnLabel": {
"type": "string",
"attribute": "complete-btn-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A label to show on the last step button. Default: 'Submit'"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get states() {
return {
"currentHeader": {},
"currentFooter": {}
};
}
static get events() {
return [{
"method": "goToStep",
"name": "goToStep",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when it's necessary to go to a different step"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "completeClick",
"name": "completeClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when a complete button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "cancelClick",
"name": "cancelClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when a cancel button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "steps",
"methodName": "stepsChangeHandler"
}, {
"propName": "currentStep",
"methodName": "currentStepChangeHandler"
}, {
"propName": "currentStepState",
"methodName": "hasErrorStepChangeHandler"
}];
}
}