@kelvininc/ui-components
Version:
Kelvin UI Components
106 lines (100 loc) • 6.84 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var wizard_types = require('./wizard.types-DTbE-B6d.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
var isNil = require('./isNil-B-fGcnNC.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
const buildHeaderConfig = (steps, currentStep) => {
if (isEmpty.isEmpty(steps) || isNil.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.isEmpty(steps) || isNil.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) === wizard_types.EStepState.Success) || (index < currentStep && steps[index + 1].allowGoBack)),
active: index <= currentStep,
hasError: index === currentStep && (currentStepState === null || currentStepState === void 0 ? void 0 : currentStepState.state) === wizard_types.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) === wizard_types.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) === wizard_types.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}}: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(--kv-spacing-2x, 8px);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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.goToStep = index.createEvent(this, "goToStep", 7);
this.completeClick = index.createEvent(this, "completeClick", 7);
this.cancelClick = index.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);
}
render() {
return (index.h("div", { key: 'f340163196c108f1690108898e44a302489cd0c0', class: "wizard" }, this.showHeader && (index.h("div", { key: '4765a77e2deb6bcdfee7518424ceb361612bcdb2', class: "wizard-header" }, this.currentHeader && (index.h("kv-wizard-header", Object.assign({ key: '124e10f5f794de5b7ba3d19c4c0f0d0e2d88ac28' }, this.currentHeader), index.h("slot", { key: '548e004533fa5742d5496b2e55711072503a4ffa', slot: "additional-header-actions", name: "additional-header-actions" }))))), index.h("div", { key: '1f83368d3f8c61b575e49b23b887f005ca97b4e0', class: { 'wizard-content': true, 'has-header': this.showHeader } }, index.h("slot", { key: 'c10faaf1a135d8eaaa7ce784b086c043b26d564e', name: "step-content" })), index.h("div", { key: 'c643d60871c4a8298b2de2c39dd3042e6f15a4ee', class: "wizard-footer" }, index.h("kv-wizard-footer", Object.assign({ key: 'a4dface500a7ec36b0bfaa66745012c479868e4a', onPrevClick: this.onPrevClick, onNextClick: this.onNextClick, onStepClick: this.onStepClick, showStepBar: this.showStepBar, completeBtnLabel: this.completeBtnLabel, exportparts: "footer-actions-container" }, this.currentFooter), index.h("slot", { key: 'a70f587b16e03e31013b4a75d56029b71f3590e9', slot: "additional-actions", name: "additional-actions" })))));
}
static get watchers() { return {
"steps": ["stepsChangeHandler"],
"currentStep": ["currentStepChangeHandler"],
"currentStepState": ["hasErrorStepChangeHandler"]
}; }
};
KvWizard.style = wizardCss;
exports.kv_wizard = KvWizard;