@kelvininc/ui-components
Version:
Kelvin UI Components
532 lines (531 loc) • 20.8 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EActionButtonType, ETooltipPosition } from "../../types";
import { TOOLTIP_CUSTOM_STYLE } from "./wizard-footer.config";
/**
* @part footer-actions-container - the container of footer stepper and additional actions
*/
export class KvWizardFooter {
constructor() {
/** @inheritdoc */
this.showStepBar = true;
/** @inheritdoc */
this.completeBtnLabel = 'Submit';
/** @inheritdoc */
this.cancelEnabled = true;
/** @inheritdoc */
this.prevEnabled = true;
/** @inheritdoc */
this.nextEnabled = true;
this.onPrevClick = () => {
this.prevClick.emit();
};
this.onNextClick = () => {
this.nextClick.emit();
};
this.onCancelClick = () => {
this.cancelClick.emit();
};
this.onCompleteClick = () => {
this.completeClick.emit();
};
this.onStepClick = ({ detail }) => {
this.stepClick.emit(detail);
};
}
render() {
return (h(Host, { key: 'a41503ba15623276d6f01aaeb103e973572ef30c' }, h("div", { key: '7ccc7ab3b345bff5b0d5ee6fb2efc043853e2e7c', class: "wizard-footer-container" }, h("div", { key: '4769d4ac7a6a15d78cbe838da9700ef4f5884b32', class: "actions-container", part: "footer-actions-container" }, this.showStepBar && (h("div", { key: '04ec24e3eda2279807e9e30a973c141db94539f5', class: "wizard-stepper" }, h("kv-step-bar", { key: '389f981f38e663a24135f12b8b4fe8d439a0240f', label: this.label, steps: this.steps, currentStep: this.currentStep, progressPercentage: this.progressPercentage, hasError: this.hasError, onStepClicked: this.onStepClick }))), h("slot", { key: '7e24293cb3c87f46a8addaf3493e506e9831c522', name: "additional-actions" })), h("div", { key: 'fa33e0d777568447a22fcf1184a8d7ebaa13407e', class: "buttons-container" }, this.showCancelBtn && (h("kv-action-button-text", { key: '4fee4ca5c38ae878c6f6eb2c760c4821fa18e0e2', type: EActionButtonType.Ghost, text: "Cancel", disabled: !this.cancelEnabled, onClickButton: this.onCancelClick })), this.showPrevBtn && (h("kv-action-button-text", { key: '07123b81e5e265244a0238d5cbfe6d8a70e73925', type: EActionButtonType.Tertiary, text: "Previous", disabled: !this.prevEnabled, onClickButton: this.onPrevClick })), this.showNextBtn && (h("kv-tooltip", { key: '5b71ad8a2a40302c278e8ac28f606af3d302e73f', position: ETooltipPosition.TopEnd, text: this.nextTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: '4136953cfe3b5036fe4d234b70dbce45b0978124', type: EActionButtonType.Primary, text: "Next", disabled: !this.nextEnabled, onClickButton: this.onNextClick }))), this.showCompleteBtn && (h("kv-tooltip", { key: 'd9e53ea95c276c22c26021d27a9226490b235c9f', position: ETooltipPosition.TopEnd, text: this.completeTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: 'b1c50f16cfb75300be073500d28cb9c68ce0bee1', type: EActionButtonType.Primary, text: this.completeBtnLabel, disabled: !this.completeEnabled, onClickButton: this.onCompleteClick })))))));
}
static get is() { return "kv-wizard-footer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["wizard-footer.scss"]
};
}
static get styleUrls() {
return {
"$": ["wizard-footer.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the label to display next to the step counter (defaults to: \"Progress: \")"
},
"getter": false,
"setter": false,
"reflect": true
},
"steps": {
"type": "unknown",
"attribute": "steps",
"mutable": false,
"complexType": {
"original": "IStepBarStep[]",
"resolved": "IStepBarStep[]",
"references": {
"IStepBarStep": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::IStepBarStep"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the steps array to render"
},
"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
},
"progressPercentage": {
"type": "number",
"attribute": "progress-percentage",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the percentage of steps completed"
},
"getter": false,
"setter": false,
"reflect": true
},
"hasError": {
"type": "boolean",
"attribute": "has-error",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the progress bar should be in an error state"
},
"getter": false,
"setter": false,
"reflect": true
},
"showStepBar": {
"type": "boolean",
"attribute": "show-step-bar",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the step bar should render"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"completeBtnLabel": {
"type": "string",
"attribute": "complete-btn-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The `complete` button label"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "'Submit'"
},
"cancelEnabled": {
"type": "boolean",
"attribute": "cancel-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the `cancel` button should be enabled and interactable"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"prevEnabled": {
"type": "boolean",
"attribute": "prev-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the `previous` button should be enabled and interactable"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"nextEnabled": {
"type": "boolean",
"attribute": "next-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the `next` button should be enabled and interactable"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"nextTooltip": {
"type": "string",
"attribute": "next-tooltip",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The `next` button tooltip"
},
"getter": false,
"setter": false,
"reflect": true
},
"completeEnabled": {
"type": "boolean",
"attribute": "complete-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the `complete` button should be enabled and interactable"
},
"getter": false,
"setter": false,
"reflect": true
},
"completeTooltip": {
"type": "string",
"attribute": "complete-tooltip",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The `complete` button tooltip"
},
"getter": false,
"setter": false,
"reflect": true
},
"showCancelBtn": {
"type": "boolean",
"attribute": "show-cancel-btn",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A boolean that determines whether the `cancel` button should be shown"
},
"getter": false,
"setter": false,
"reflect": true
},
"showPrevBtn": {
"type": "boolean",
"attribute": "show-prev-btn",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A boolean that determines whether the `previous` button should be shown"
},
"getter": false,
"setter": false,
"reflect": true
},
"showNextBtn": {
"type": "boolean",
"attribute": "show-next-btn",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A boolean that determines whether the `next` button should be shown"
},
"getter": false,
"setter": false,
"reflect": true
},
"showCompleteBtn": {
"type": "boolean",
"attribute": "show-complete-btn",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A boolean that determines whether the `complete` button should be shown"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get events() {
return [{
"method": "stepClick",
"name": "stepClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when a step on the step bar is clicked and emits the index"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "cancelClick",
"name": "cancelClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when the `cancel` button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "prevClick",
"name": "prevClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when the `previous` button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "nextClick",
"name": "nextClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when the `next` button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "completeClick",
"name": "completeClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when the `complete` button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
}