@kelvininc/ui-components
Version:
Kelvin UI Components
552 lines (551 loc) • 21.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 = (event) => {
this.prevClick.emit(event);
};
this.onNextClick = (event) => {
this.nextClick.emit(event);
};
this.onCancelClick = (event) => {
this.cancelClick.emit(event);
};
this.onCompleteClick = (event) => {
this.completeClick.emit(event);
};
this.onStepClick = ({ detail }) => {
this.stepClick.emit(detail);
};
}
render() {
return (h(Host, { key: '1c72b48a085e1fde9d89507ac439de49ba326758' }, h("div", { key: '941b5b1e93bfc47a026e2a4942bc19446540c195', class: "wizard-footer-container" }, h("div", { key: 'ad4384e06a633ad552dd16760d7c175bf0d0868e', class: "actions-container", part: "footer-actions-container" }, this.showStepBar && (h("div", { key: '9c297a9ab1791fa02e567eb7fa93bce06e713ddc', class: "wizard-stepper" }, h("kv-step-bar", { key: '4cfda7504734d659e3f4604de04623fdd4b3d3f1', label: this.label, steps: this.steps, currentStep: this.currentStep, progressPercentage: this.progressPercentage, hasError: this.hasError, onStepClicked: this.onStepClick }))), h("slot", { key: '9a6da7fe005aa1bbee378067b8d73f527a876263', name: "additional-actions" })), h("div", { key: 'eeb928d2812621d145f8048bed4695230b02a60e', class: "buttons-container" }, this.showCancelBtn && (h("kv-action-button-text", { key: '8e8c33251445c004b6c660c399907c23a952f378', type: EActionButtonType.Tertiary, text: "Cancel", disabled: !this.cancelEnabled, onClickButton: ({ detail: event }) => this.onCancelClick(event) })), this.showPrevBtn && (h("kv-action-button-text", { key: 'a8e79366aa9a139fd864ec4c4a22097f05e1fb88', type: EActionButtonType.Tertiary, text: "Previous", disabled: !this.prevEnabled, onClickButton: ({ detail: event }) => this.onPrevClick(event) })), this.showNextBtn && (h("kv-tooltip", { key: '4a33b37757bcf7ece8fdc11b731b91fbcde3abe3', position: ETooltipPosition.TopEnd, text: this.nextTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: '92d3abc54efab613dbc64be3b1cd9af05e0b5bcb', type: EActionButtonType.Primary, text: "Next", disabled: !this.nextEnabled, onClickButton: ({ detail: event }) => this.onNextClick(event) }))), this.showCompleteBtn && (h("kv-tooltip", { key: '003e61445fd913a3fee53bbedbb43831efd8297d', position: ETooltipPosition.TopEnd, text: this.completeTooltip, customStyle: TOOLTIP_CUSTOM_STYLE }, h("kv-action-button-text", { key: 'a62be7cc9a03a5ee7ca2dddda79c3f4ca0b74de9', type: EActionButtonType.Primary, text: this.completeBtnLabel, disabled: !this.completeEnabled, onClickButton: ({ detail: event }) => this.onCompleteClick(event) })))))));
}
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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
}