igniteui-webcomponents/components/stepper/stepper.js

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.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcStepperComponent_1;
import { LitElement, html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import { themes } from '../../theming/theming-decorator.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { isLTR } from '../common/util.js';
import IgcStepComponent from './step.js';
import { styles } from './themes/stepper/stepper.base.css.js';
import { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';
import { styles as fluent } from './themes/stepper/stepper.fluent.css.js';
import { styles as indigo } from './themes/stepper/stepper.indigo.css.js';
let IgcStepperComponent = IgcStepperComponent_1 = class IgcStepperComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcStepperComponent_1, IgcStepComponent);
    }
    orientationChange() {
        this.setAttribute('aria-orientation', this.orientation);
        this.steps.forEach((step) => {
            step.orientation = this.orientation;
            this.updateAnimation(step);
        });
    }
    stepTypeChange() {
        this.steps.forEach((step) => {
            step.stepType = this.stepType;
        });
    }
    titlePositionChange() {
        this.steps.forEach((step) => {
            if (this.titlePosition !== 'bottom' &&
                this.titlePosition !== 'top' &&
                this.titlePosition !== 'end' &&
                this.titlePosition !== 'start') {
                step.titlePosition = undefined;
            }
            else {
                step.titlePosition = this.titlePosition;
            }
        });
    }
    contentTopChange() {
        this.steps.forEach((step) => {
            step.contentTop = this.contentTop;
        });
    }
    linearChange() {
        this.steps.forEach((step) => {
            step.linearDisabled = this.linear;
            if (step.index <= this.activeStep.index) {
                step.visited = true;
            }
            else {
                step.visited = false;
            }
        });
        if (this.linear) {
            this.updateStepsLinearDisabled();
        }
    }
    animationTypeChange() {
        this.steps.forEach((step) => {
            this.updateAnimation(step);
        });
    }
    animationDurationChange() {
        this.steps.forEach((step) => {
            step.animationDuration = this.animationDuration;
        });
    }
    constructor() {
        super();
        this.keyDownHandlers = new Map(Object.entries({
            Enter: this.activateStep,
            Space: this.activateStep,
            SpaceBar: this.activateStep,
            ' ': this.activateStep,
            ArrowUp: this.onArrowUpKeyDown,
            ArrowDown: this.onArrowDownKeyDown,
            ArrowLeft: this.onArrowLeftKeyDown,
            ArrowRight: this.onArrowRightKeyDown,
            Home: this.onHomeKey,
            End: this.onEndKey,
        }));
        this.orientation = 'horizontal';
        this.stepType = 'full';
        this.linear = false;
        this.contentTop = false;
        this.verticalAnimation = 'grow';
        this.horizontalAnimation = 'slide';
        this.animationDuration = 320;
        this.addEventListener('stepActiveChanged', (event) => {
            event.stopPropagation();
            this.activateStep(event.target, event.detail);
        });
        this.addEventListener('stepDisabledInvalidChanged', (event) => {
            event.stopPropagation();
            if (this.linear) {
                this.updateStepsLinearDisabled();
            }
        });
        this.addEventListener('stepCompleteChanged', (event) => {
            event.stopPropagation();
            const nextStep = this.steps[event.target.index + 1];
            if (nextStep) {
                nextStep.previousComplete = event.target.complete;
            }
        });
        this.addEventListener('stepHeaderKeydown', (event) => {
            event.stopPropagation();
            this.handleKeydown(event.detail.event, event.detail.focusedStep);
        });
    }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('role', 'tablist');
        this.setAttribute('aria-orientation', this.orientation);
    }
    activateFirstStep() {
        const firstEnabledStep = this.steps.find((s) => !s.disabled);
        if (firstEnabledStep) {
            this.activateStep(firstEnabledStep, false);
        }
    }
    animateSteps(nextStep, currentStep) {
        if (nextStep.index > currentStep.index) {
            currentStep.toggleAnimation('out');
            nextStep.toggleAnimation('in');
        }
        else {
            currentStep.toggleAnimation('in', 'reverse');
            nextStep.toggleAnimation('out', 'reverse');
        }
    }
    async activateStep(step, shouldEmit = true) {
        if (step === this.activeStep) {
            return;
        }
        if (shouldEmit) {
            const args = {
                detail: {
                    owner: this,
                    oldIndex: this.activeStep.index,
                    newIndex: step.index,
                },
                cancelable: true,
            };
            this.animateSteps(step, this.activeStep);
            const allowed = this.emitEvent('igcActiveStepChanging', args);
            if (!allowed) {
                return;
            }
            this.changeActiveStep(step);
            this.emitEvent('igcActiveStepChanged', {
                detail: { owner: this, index: step.index },
            });
        }
        else {
            this.changeActiveStep(step);
        }
    }
    changeActiveStep(step) {
        if (this.activeStep) {
            this.activeStep.active = false;
        }
        step.active = true;
        step.visited = true;
        this.activeStep = step;
    }
    moveToNextStep(next = true) {
        let steps = this.steps;
        let activeStepIndex = this.activeStep.index;
        if (!next) {
            steps = this.steps.reverse();
            activeStepIndex = steps.findIndex((step) => step === this.activeStep);
        }
        const nextStep = steps.find((step, i) => i > activeStepIndex && step.isAccessible);
        if (nextStep) {
            this.animateSteps(nextStep, this.activeStep);
            this.activateStep(nextStep, false);
        }
    }
    handleKeydown(event, focusedStep) {
        const key = event.key.toLowerCase();
        if (this.keyDownHandlers.has(event.key)) {
            event.preventDefault();
            this.keyDownHandlers.get(event.key)?.call(this, focusedStep);
        }
        if (key === 'tab' && this.orientation === 'vertical') {
            return;
        }
        if (key === 'tab' && this.activeStep.index !== focusedStep.index) {
            this.activeStep.header.focus();
        }
    }
    onHomeKey() {
        this.steps
            .filter((step) => step.isAccessible)[0]
            ?.header?.focus();
    }
    onEndKey() {
        this.steps
            .filter((step) => step.isAccessible)
            .pop()
            ?.header?.focus();
    }
    onArrowDownKeyDown(focusedStep) {
        if (this.orientation === 'horizontal') {
            return;
        }
        this.getNextStep(focusedStep)?.header?.focus();
    }
    onArrowUpKeyDown(focusedStep) {
        if (this.orientation === 'horizontal') {
            return;
        }
        this.getPreviousStep(focusedStep)?.header?.focus();
    }
    onArrowRightKeyDown(focusedStep) {
        if (!isLTR(this) && this.orientation === 'horizontal') {
            this.getPreviousStep(focusedStep)?.header?.focus();
        }
        else {
            this.getNextStep(focusedStep)?.header?.focus();
        }
    }
    onArrowLeftKeyDown(focusedStep) {
        if (!isLTR(this) && this.orientation === 'horizontal') {
            this.getNextStep(focusedStep)?.header?.focus();
        }
        else {
            this.getPreviousStep(focusedStep)?.header?.focus();
        }
    }
    getNextStep(focusedStep) {
        if (focusedStep.index === this.steps.length - 1) {
            return this.steps.find((step) => step.isAccessible);
        }
        const nextAccessible = this.steps.find((step, i) => i > focusedStep.index && step.isAccessible);
        return nextAccessible
            ? nextAccessible
            : this.steps.find((step) => step.isAccessible);
    }
    getPreviousStep(focusedStep) {
        if (focusedStep.index === 0) {
            return this.steps
                .filter((step) => step.isAccessible)
                .pop();
        }
        let prevStep;
        for (let i = focusedStep.index - 1; i >= 0; i--) {
            const step = this.steps[i];
            if (step.isAccessible) {
                prevStep = step;
                break;
            }
        }
        return prevStep
            ? prevStep
            : this.steps.filter((step) => step.isAccessible).pop();
    }
    updateStepsLinearDisabled() {
        const firstInvalidStep = this.steps
            .filter((step) => !step.disabled && !step.optional)
            .find((step) => step.invalid);
        if (firstInvalidStep) {
            this.steps.forEach((step) => {
                if (step.index <= firstInvalidStep.index) {
                    step.linearDisabled = false;
                }
                else {
                    step.linearDisabled = true;
                }
            });
        }
        else {
            this.steps.forEach((step) => {
                step.linearDisabled = false;
            });
        }
    }
    updateAnimation(step) {
        if (this.orientation === 'horizontal') {
            step.animation = this.horizontalAnimation;
        }
        if (this.orientation === 'vertical') {
            step.animation = this.verticalAnimation;
        }
    }
    syncProperties() {
        this.steps.forEach((step, index) => {
            step.orientation = this.orientation;
            step.stepType = this.stepType;
            step.titlePosition = this.titlePosition;
            step.contentTop = this.contentTop;
            step.index = index;
            step.active = this.activeStep === step;
            step.header?.setAttribute('aria-posinset', (index + 1).toString());
            step.header?.setAttribute('aria-setsize', this.steps.length.toString());
            step.header?.setAttribute('id', `igc-step-header-${index}`);
            step.header?.setAttribute('aria-controls', `igc-step-content-${index}`);
            if (index > 0) {
                step.previousComplete = this.steps[index - 1].complete;
            }
            step.animationDuration = this.animationDuration;
            this.updateAnimation(step);
        });
    }
    stepsChanged() {
        this.style.setProperty('--steps-count', this.steps.length.toString());
        const lastActiveStep = this.steps
            .reverse()
            .find((step) => step.active);
        if (!lastActiveStep) {
            this.activateFirstStep();
        }
        else {
            this.activateStep(lastActiveStep, false);
        }
        this.syncProperties();
        if (this.linear) {
            this.updateStepsLinearDisabled();
        }
    }
    navigateTo(index) {
        const step = this.steps[index];
        if (!step) {
            return;
        }
        this.activateStep(step, false);
    }
    next() {
        this.moveToNextStep();
    }
    prev() {
        this.moveToNextStep(false);
    }
    reset() {
        this.steps.forEach((step) => {
            step.visited = false;
        });
        this.activateFirstStep();
    }
    render() {
        return html `<slot @slotchange=${this.stepsChanged}></slot>`;
    }
};
IgcStepperComponent.tagName = 'igc-stepper';
IgcStepperComponent.styles = styles;
__decorate([
    queryAssignedElements({ selector: 'igc-step' })
], IgcStepperComponent.prototype, "steps", void 0);
__decorate([
    property({ reflect: true })
], IgcStepperComponent.prototype, "orientation", void 0);
__decorate([
    property({ reflect: true, attribute: 'step-type' })
], IgcStepperComponent.prototype, "stepType", void 0);
__decorate([
    property({ type: Boolean })
], IgcStepperComponent.prototype, "linear", void 0);
__decorate([
    property({ reflect: true, type: Boolean, attribute: 'content-top' })
], IgcStepperComponent.prototype, "contentTop", void 0);
__decorate([
    property({ attribute: 'vertical-animation' })
], IgcStepperComponent.prototype, "verticalAnimation", void 0);
__decorate([
    property({ attribute: 'horizontal-animation' })
], IgcStepperComponent.prototype, "horizontalAnimation", void 0);
__decorate([
    property({ attribute: 'animation-duration', type: Number })
], IgcStepperComponent.prototype, "animationDuration", void 0);
__decorate([
    property({ reflect: false, attribute: 'title-position' })
], IgcStepperComponent.prototype, "titlePosition", void 0);
__decorate([
    watch('orientation', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "orientationChange", null);
__decorate([
    watch('stepType', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "stepTypeChange", null);
__decorate([
    watch('titlePosition', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "titlePositionChange", null);
__decorate([
    watch('contentTop', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "contentTopChange", null);
__decorate([
    watch('linear', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "linearChange", null);
__decorate([
    watch('verticalAnimation', { waitUntilFirstUpdate: true }),
    watch('horizontalAnimation', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "animationTypeChange", null);
__decorate([
    watch('animationDuration', { waitUntilFirstUpdate: true })
], IgcStepperComponent.prototype, "animationDurationChange", null);
IgcStepperComponent = IgcStepperComponent_1 = __decorate([
    themes({
        light: { bootstrap, fluent, indigo },
        dark: { bootstrap, fluent, indigo },
    })
], IgcStepperComponent);
export default IgcStepperComponent;
//# sourceMappingURL=stepper.js.map