@kelvininc/ui-components
Version:
Kelvin UI Components
362 lines (361 loc) • 14.4 kB
JavaScript
import { h } from "@stencil/core";
import { buildFooterConfig, buildHeaderConfig } from "./wizard.helper";
import { EStepState } from "./wizard.types";
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);
}
handleKeyDown(event) {
var _a;
if (event.key === 'Enter') {
// Don't handle if focus is on a textarea
const activeElement = document.activeElement;
if (activeElement instanceof HTMLTextAreaElement || event.target instanceof HTMLTextAreaElement) {
return;
}
// Don't handle if wizard is disabled
if (this.disabled) {
return;
}
// Don't handle if current step has errors
if (((_a = this.currentStepState) === null || _a === void 0 ? void 0 : _a.state) === EStepState.Error) {
return;
}
// Don't handle if the component hasn't fully initialized
if (!this.currentFooter) {
return;
}
event.preventDefault();
const { completeEnabled, showCompleteBtn, nextEnabled } = this.currentFooter;
if (showCompleteBtn) {
// Don't handle if complete button is disabled
if (!completeEnabled) {
return;
}
// Create a synthetic mouse event for consistency with existing API
const syntheticEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true
});
return this.completeClick.emit(syntheticEvent);
}
if (!nextEnabled) {
return;
}
// Move to next step
return this.goToStep.emit(this.currentStep + 1);
}
}
render() {
return (h("div", { key: '9dae3fb13799ee4afb6122f8a9434147f80e22ad', class: "wizard" }, this.showHeader && (h("div", { key: 'aa77f0a0f0e88bebb5e51b39df81295d2298372d', class: "wizard-header" }, this.currentHeader && (h("kv-wizard-header", Object.assign({ key: '8d826394496b081f3a0f3f4bc1545a690fa9bf5d' }, this.currentHeader), h("slot", { key: '0d7fc3a747e1a21ed53fc28afd7aeaf669e7e5b0', slot: "additional-header-actions", name: "additional-header-actions" }))))), h("div", { key: 'd079888c0a0839362ae94c5aa8e4f0fae153c77c', class: { 'wizard-content': true, 'has-header': this.showHeader } }, h("slot", { key: 'da9d0eac62014bc423267453e961a9b5a619066d', name: "step-content" })), h("div", { key: '6a7a45235e71ae82fc30ca5b63d98451af415c8c', class: "wizard-footer" }, h("kv-wizard-footer", Object.assign({ key: '92b03edb85808f7179da3b1af48784f416218726', onPrevClick: this.onPrevClick, onNextClick: this.onNextClick, onStepClick: this.onStepClick, showStepBar: this.showStepBar, completeBtnLabel: this.completeBtnLabel, exportparts: "footer-actions-container" }, this.currentFooter), h("slot", { key: '1ac6f61adeb68c4bca56853200a4f5b955372f76', 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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get watchers() {
return [{
"propName": "steps",
"methodName": "stepsChangeHandler"
}, {
"propName": "currentStep",
"methodName": "currentStepChangeHandler"
}, {
"propName": "currentStepState",
"methodName": "hasErrorStepChangeHandler"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": "document",
"capture": false,
"passive": false
}];
}
}