@finastra/stepper
Version:
Stepper Web Component
110 lines • 4.35 kB
JavaScript
import { __decorate } from "tslib";
import '@finastra/icon';
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { events } from './constants';
/**
* @cssprop {text} [--fds-stepper-line-space=8px] - Stepper line space.
* @attr {boolean} [secondary=false] - Use Secondary color.
* @attr {boolean} [readonly=false] - Read only mode.
* @attr {boolean} [hideIndex=false] - Hide the index of each steps.
* @attr [currentStepIndex=-1] - Index of current active step.
*/
export class BaseStepper extends LitElement {
constructor() {
super(...arguments);
this.steps = [];
this.currentStepIndex = 0;
this.readonly = false;
this.hideIndex = false;
}
renderIconAndLine(step, index) {
var _a, _b;
const startLineClass = {
hidden: index === 0,
current: index === this.currentStepIndex + 1 && !((_a = this.steps[index - 1]) === null || _a === void 0 ? void 0 : _a.disabled),
error: ((_b = this.steps[index - 1]) === null || _b === void 0 ? void 0 : _b.error) ? true : false,
first: index === 0
};
const endLineClass = { hidden: index === this.steps.length - 1, last: index === this.steps.length - 1 };
return html `
<div class="line start-line ${classMap(startLineClass)}"></div>
<div class="circle step-item-icon">${this.renderIcon(step, index)}</div>
<div class="line end-line ${classMap(endLineClass)}"></div>
`;
}
renderIcon(step, index) {
var _a, _b;
if (index >= this.currentStepIndex) {
const activeStepIcon = (_a = this.steps[this.currentStepIndex]) === null || _a === void 0 ? void 0 : _a.activeStepIcon;
if (index === this.currentStepIndex && ((_b = this.steps[this.currentStepIndex]) === null || _b === void 0 ? void 0 : _b.error)) {
return html `<fds-icon>error_outline</fds-icon>`;
}
else if (index === this.currentStepIndex && activeStepIcon) {
return html `<fds-icon>${activeStepIcon}</fds-icon>`;
}
else {
return this.hideIndex ? null : index + 1;
}
}
else {
if (step === null || step === void 0 ? void 0 : step.error) {
return html `<fds-icon>error_outline</fds-icon>`;
}
else {
return html `<fds-icon>done</fds-icon>`;
}
}
}
render() {
return html `<div class="container">
${this.steps.map((step, idx) => html `<div
class="step-item
${idx < this.currentStepIndex ? 'done' : ''}
${idx === this.currentStepIndex && !step.disabled ? 'current' : ''}
${step.disabled ? 'disabled' : ''}
${step.error ? 'error' : ''}
${this.readonly ? 'readonly' : ''}"
@click="${() => this._onStepClick(idx)}"
>
${this.renderIconAndLine(step, idx)}
<div class="text-wrapper">
${step.description
? html ` <div class="step-item-label">${step.label}</div>
<div class="step-item-description">${step.description}</div>`
: html ` <div class="step-item-label">${step.label}</div> `}
</div>
</div>`)}
</div>`;
}
_onStepClick(index) {
var _a;
if (!((_a = this.steps[index]) === null || _a === void 0 ? void 0 : _a.disabled) && !this.readonly) {
this.currentStepIndex = index;
this.dispatchEvent(new CustomEvent(events.STEPCLICK, {
bubbles: true,
composed: true,
detail: {
value: `${index}`
}
}));
}
else {
return;
}
}
}
__decorate([
property({ attribute: false })
], BaseStepper.prototype, "steps", void 0);
__decorate([
property({ type: Number })
], BaseStepper.prototype, "currentStepIndex", void 0);
__decorate([
property({ type: Boolean })
], BaseStepper.prototype, "readonly", void 0);
__decorate([
property({ type: Boolean })
], BaseStepper.prototype, "hideIndex", void 0);
//# sourceMappingURL=base-stepper.js.map