@kelvininc/ui-components
Version:
Kelvin UI Components
138 lines (133 loc) • 7.78 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, m as EActionButtonType, f as ETooltipPosition, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$9 } from './p-0XA6IHyr.js';
import { d as defineCustomElement$8 } from './p-DviRLduP.js';
import { d as defineCustomElement$7 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$6 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$5 } from './p-LxF5eaz5.js';
import { d as defineCustomElement$4 } from './p-BX_WQCNH.js';
import { d as defineCustomElement$3 } from './p-yOkIKVJR.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
const TOOLTIP_CUSTOM_STYLE = {
'--container-max-width': '350px'
};
const wizardFooterCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--stepper-width:100%}.wizard-footer-container{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-2xl)}.wizard-footer-container .actions-container{display:flex;flex:1}.wizard-footer-container .actions-container .wizard-stepper{width:var(--stepper-width);padding-right:var(--spacing-2xl)}.wizard-footer-container .buttons-container{display:flex;gap:var(--spacing-xl)}";
const KvWizardFooter = /*@__PURE__*/ proxyCustomElement(class KvWizardFooter extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.stepClick = createEvent(this, "stepClick", 7);
this.cancelClick = createEvent(this, "cancelClick", 7);
this.prevClick = createEvent(this, "prevClick", 7);
this.nextClick = createEvent(this, "nextClick", 7);
this.completeClick = createEvent(this, "completeClick", 7);
/** @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 style() { return wizardFooterCss; }
}, [257, "kv-wizard-footer", {
"label": [513],
"steps": [16],
"currentStep": [514, "current-step"],
"progressPercentage": [514, "progress-percentage"],
"hasError": [516, "has-error"],
"showStepBar": [516, "show-step-bar"],
"completeBtnLabel": [513, "complete-btn-label"],
"cancelEnabled": [516, "cancel-enabled"],
"prevEnabled": [516, "prev-enabled"],
"nextEnabled": [516, "next-enabled"],
"nextTooltip": [513, "next-tooltip"],
"completeEnabled": [516, "complete-enabled"],
"completeTooltip": [513, "complete-tooltip"],
"showCancelBtn": [516, "show-cancel-btn"],
"showPrevBtn": [516, "show-prev-btn"],
"showNextBtn": [516, "show-next-btn"],
"showCompleteBtn": [516, "show-complete-btn"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-wizard-footer", "kv-action-button", "kv-action-button-text", "kv-icon", "kv-portal", "kv-step-bar", "kv-step-indicator", "kv-step-progress-bar", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-wizard-footer":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvWizardFooter);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-step-bar":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-step-indicator":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-step-progress-bar":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvWizardFooter as K, defineCustomElement as d };