igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
134 lines • 3.88 kB
JavaScript
class StepperState {
constructor() {
this._state = new WeakMap();
this._steps = [];
this.linear = false;
}
get steps() {
return this._steps;
}
get activeStep() {
return this._activeStep;
}
get accessibleSteps() {
return this._steps.filter((step) => this.isAccessible(step));
}
set(step, state) {
this.has(step)
? this._state.set(step, { ...this.get(step), ...state })
: this._state.set(step, {
linearDisabled: false,
previousCompleted: false,
visited: false,
...state,
});
step.requestUpdate();
}
has(step) {
return this._state.has(step);
}
get(step) {
return this._state.get(step);
}
delete(step) {
return this._state.delete(step);
}
isAccessible(step) {
return !(step.disabled || this.get(step)?.linearDisabled);
}
setSteps(steps) {
this._steps = steps;
}
changeActiveStep(step) {
if (step === this._activeStep) {
return;
}
if (this._activeStep) {
this._activeStep.active = false;
}
step.active = true;
this.set(step, { visited: true });
this._activeStep = step;
}
activateFirstStep() {
const step = this._steps.find((s) => !s.disabled);
if (step) {
this.changeActiveStep(step);
}
}
getAdjacentStep(next = true) {
const steps = this.accessibleSteps;
const activeIndex = steps.indexOf(this._activeStep);
if (activeIndex === -1) {
return undefined;
}
return next ? steps[activeIndex + 1] : steps[activeIndex - 1];
}
syncState() {
for (const [index, step] of this._steps.entries()) {
step.active = this._activeStep === step;
if (index > 0) {
this.set(step, {
previousCompleted: this._steps[index - 1].complete,
});
}
}
}
setVisitedState(value) {
const activeIndex = this._steps.indexOf(this._activeStep);
this.linear = value;
for (const [index, step] of this._steps.entries()) {
this.set(step, { visited: index <= activeIndex });
}
this.setLinearState();
}
setLinearState() {
if (!this.linear) {
for (const step of this._steps) {
this.set(step, { linearDisabled: false });
}
return;
}
const invalidIndex = this._steps.findIndex((step) => !(step.disabled || step.optional) && step.invalid);
if (invalidIndex > -1) {
for (const [index, step] of this._steps.entries()) {
this.set(step, { linearDisabled: index > invalidIndex });
}
}
else {
for (const step of this._steps) {
this.set(step, { linearDisabled: false });
}
}
}
onStepPropertyChanged(step, changed) {
if (changed.has('active') && step.active) {
this.changeActiveStep(step);
}
this.syncState();
this.setLinearState();
}
stepsChanged() {
const lastActiveStep = this._steps.findLast((step) => step.active);
if (lastActiveStep) {
this.changeActiveStep(lastActiveStep);
}
else {
this.activateFirstStep();
}
this.syncState();
this.setLinearState();
}
reset() {
for (const step of this._steps) {
this.delete(step);
}
this.activateFirstStep();
this.setLinearState();
}
}
function createStepperState() {
return new StepperState();
}
export { createStepperState };
//# sourceMappingURL=state.js.map