@kelvininc/ui-components
Version:
Kelvin UI Components
142 lines (137 loc) • 7.69 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { b as ETooltipPosition } from './p-BRgmvbuh.js';
import { E as EActionButtonType } from './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$9 } from './p-CsQJZTqg.js';
import { d as defineCustomElement$8 } from './p-yJnlG5V9.js';
import { d as defineCustomElement$7 } from './p-B41PGLQm.js';
import { d as defineCustomElement$6 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$5 } from './p-CAeVrBAn.js';
import { d as defineCustomElement$4 } from './p-CN9dVFXT.js';
import { d as defineCustomElement$3 } from './p-GT0Ue4fu.js';
import { d as defineCustomElement$2 } from './p-GHnCHOez.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.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}}:host{--stepper-width:100%}.wizard-footer-container{display:flex;align-items:center;justify-content:space-between;padding:var(--kv-spacing-4x, 16px)}.wizard-footer-container .actions-container{display:flex;flex:1}.wizard-footer-container .actions-container .wizard-stepper{width:var(--stepper-width);padding-right:var(--kv-spacing-4x, 16px)}.wizard-footer-container .buttons-container{display:flex;gap:var(--kv-spacing-3x, 12px)}";
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 = () => {
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 style() { return wizardFooterCss; }
}, [1, "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 };