@kelvininc/ui-components
Version:
Kelvin UI Components
246 lines (240 loc) • 12.2 kB
JavaScript
import { G as EStepState, H as proxyCustomElement, I as H, J as createEvent, K as h } from './p-BP5CxQcH.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { i as isNil } from './p-CRcRM80a.js';
import { d as defineCustomElement$d } from './p-0XA6IHyr.js';
import { d as defineCustomElement$c } from './p-DviRLduP.js';
import { d as defineCustomElement$b } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$a } from './p-CgqRIP0M.js';
import { d as defineCustomElement$9 } from './p-LxF5eaz5.js';
import { d as defineCustomElement$8 } from './p-BX_WQCNH.js';
import { d as defineCustomElement$7 } from './p-yOkIKVJR.js';
import { d as defineCustomElement$6 } from './p-CJY_M4BW.js';
import { d as defineCustomElement$5 } from './p-DdZmrasC.js';
import { d as defineCustomElement$4 } from './p-DFBbXuLI.js';
import { d as defineCustomElement$3 } from './p-B5t1AX0L.js';
import { d as defineCustomElement$2 } from './p-Bw7fhcll.js';
const buildHeaderConfig = (steps, currentStep) => {
if (isEmpty(steps) || isNil(currentStep) || currentStep < 0 || currentStep > steps.length - 1) {
return null;
}
return {
label: `Step ${currentStep + 1}`,
description: steps[currentStep].title,
tip: steps[currentStep].tip
};
};
const buildFooterConfig = (steps, currentStep, currentStepState, disabled = false) => {
var _a, _b;
if (isEmpty(steps) || isNil(currentStep) || currentStep < 0 || currentStep > steps.length - 1) {
return null;
}
const stepsConfig = steps.map((step, index) => {
return {
stepKey: step.title,
enabled: !disabled && ((index === currentStep + 1 && (currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.state) === EStepState.Success) || (index < currentStep && steps[index + 1].allowGoBack)),
active: index <= currentStep,
hasError: index === currentStep && (currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.state) === EStepState.Error
};
});
return {
steps: stepsConfig,
currentStep,
hasError: false,
showPrevBtn: (_a = steps[currentStep].allowGoBack) !== null && _a !== void 0 ? _a : false,
prevEnabled: !disabled && currentStep > 0,
showNextBtn: currentStep < steps.length - 1,
nextEnabled: !disabled && (currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.state) === EStepState.Success,
nextTooltip: currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.error,
showCancelBtn: (_b = steps[currentStep].cancelable) !== null && _b !== void 0 ? _b : false,
cancelEnabled: true,
showCompleteBtn: currentStep === steps.length - 1,
completeEnabled: !disabled && (currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.state) === EStepState.Success,
completeTooltip: currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.error,
progressPercentage: currentStep * (100 / (steps.length - 1))
};
};
const wizardCss = "@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{--wizard-stepper-width:100%;--wizard-header-height:66px;--wizard-footer-height:68px}.wizard{height:100%;width:100%;display:flex;flex-direction:column}.wizard .wizard-header{width:100%;height:var(--wizard-header-height);padding:var(--spacing-md);box-sizing:border-box}.wizard .wizard-content{width:100%;height:calc(100% - var(--wizard-footer-height))}.wizard .wizard-content.has-header{height:calc(100% - var(--wizard-footer-height) - var(--wizard-header-height))}.wizard .wizard-footer{width:100%;height:var(--wizard-footer-height);display:flex;align-items:flex-end}.wizard .wizard-footer kv-wizard-footer{--stepper-width:var(--wizard-stepper-width);width:100%}";
const KvWizard$1 = /*@__PURE__*/ proxyCustomElement(class KvWizard extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.goToStep = createEvent(this, "goToStep", 7);
this.completeClick = createEvent(this, "completeClick", 7);
this.cancelClick = createEvent(this, "cancelClick", 7);
/** @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 watchers() { return {
"steps": ["stepsChangeHandler"],
"currentStep": ["currentStepChangeHandler"],
"currentStepState": ["hasErrorStepChangeHandler"]
}; }
static get style() { return wizardCss; }
}, [257, "kv-wizard", {
"steps": [16],
"currentStep": [514, "current-step"],
"currentStepState": [16, "current-step-state"],
"showHeader": [516, "show-header"],
"showStepBar": [516, "show-step-bar"],
"disabled": [516],
"completeBtnLabel": [513, "complete-btn-label"],
"currentHeader": [32],
"currentFooter": [32]
}, [[4, "keydown", "handleKeyDown"]], {
"steps": ["stepsChangeHandler"],
"currentStep": ["currentStepChangeHandler"],
"currentStepState": ["hasErrorStepChangeHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-wizard", "kv-action-button", "kv-action-button-text", "kv-icon", "kv-portal", "kv-step-bar", "kv-step-indicator", "kv-step-progress-bar", "kv-toggle-tip", "kv-tooltip", "kv-tooltip-text", "kv-wizard-footer", "kv-wizard-header"];
components.forEach(tagName => { switch (tagName) {
case "kv-wizard":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvWizard$1);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-step-bar":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-step-indicator":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-step-progress-bar":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-toggle-tip":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-wizard-footer":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-wizard-header":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvWizard = KvWizard$1;
const defineCustomElement = defineCustomElement$1;
export { KvWizard, defineCustomElement };