igniteui-webcomponents 7.0.0 → 7.1.0

package/components/stepper/stepper.js

@@ -4,89 +4,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+import { ContextProvider } from '@lit/context';
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
-import { watch } from '../common/decorators/watch.js';
+import { addInternalsController } from '../common/controllers/internals.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { isLTR } from '../common/util.js';
+import { addSafeEventListener, findElementFromEventPath, first, getRoot, isLTR, last, wrap, } from '../common/util.js';
+import { STEPPER_CONTEXT } from './common/context.js';
+import { createStepperState } from './common/state.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';
+const STEPPER_SYNC_PROPERTIES = [
+    'orientation',
+    'stepType',
+    'contentTop',
+    'verticalAnimation',
+    'horizontalAnimation',
+    'animationDuration',
+    'titlePosition',
+];
 export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-stepper'; }
     static { this.styles = styles; }
     static register() {
         registerComponent(IgcStepperComponent, 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;
-        });
+    get _isHorizontal() {
+        return this.orientation === 'horizontal';
     }
-    titlePositionChange() {
-        this.steps.forEach((step) => {
-            step.titlePosition = this.titlePosition;
-        });
-    }
-    contentTopChange() {
-        this.steps.forEach((step) => {
-            step.contentTop = this.contentTop;
-        });
+    get steps() {
+        return this._state.steps;
     }
-    linearChange() {
-        if (!this.activeStep) {
-            this._shouldUpdateLinearState = true;
-            return;
-        }
-        this.steps.forEach((step) => {
-            step.linearDisabled = this.linear;
-            if (step.index <= this.activeStep.index) {
-                step.visited = true;
-            }
-            else {
-                step.visited = false;
-            }
+    constructor() {
+        super();
+        this._state = createStepperState();
+        this._contextProvider = new ContextProvider(this, {
+            context: STEPPER_CONTEXT,
+            initialValue: {
+                stepper: this,
+                state: this._state,
+            },
         });
-        if (this.linear) {
-            this.updateStepsLinearDisabled();
-        }
-    }
-    animationTypeChange() {
-        this.steps.forEach((step) => {
-            this.updateAnimation(step);
+        this._internals = addInternalsController(this, {
+            initialARIA: {
+                role: 'tablist',
+            },
         });
-    }
-    animationDurationChange() {
-        this.steps.forEach((step) => {
-            step.animationDuration = this.animationDuration;
+        this._slots = addSlotController(this, {
+            slots: setSlots(),
+            onChange: this._handleSlotChange,
         });
-    }
-    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._shouldUpdateLinearState = false;
         this.orientation = 'horizontal';
         this.stepType = 'full';
         this.linear = false;
@@ -95,273 +69,181 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
         this.horizontalAnimation = 'slide';
         this.animationDuration = 320;
         this.titlePosition = 'auto';
+        addSafeEventListener(this, 'click', this._handleInteraction);
         addThemingController(this, {
             light: { bootstrap, fluent, indigo },
             dark: { bootstrap, fluent, indigo },
         });
-        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;
+        addKeybindings(this, {
+            skip: this._skipKeyboard,
+        })
+            .set(arrowUp, this._handleArrowUp)
+            .set(arrowDown, this._handleArrowDown)
+            .set(arrowLeft, this._handleArrowLeft)
+            .set(arrowRight, this._handleArrowRight)
+            .set(homeKey, this._handleHomeKey)
+            .set(endKey, this._handleEndKey)
+            .setActivateHandler(this._handleInteraction);
+    }
+    update(properties) {
+        this._syncStepperAttributes(properties);
+        if (properties.has('orientation')) {
+            this._internals.setARIA({ ariaOrientation: this.orientation });
+        }
+        if (properties.has('linear')) {
+            this._state.setVisitedState(this.linear);
+        }
+        super.update(properties);
+    }
+    _skipKeyboard(_, event) {
+        return !findElementFromEventPath('[data-step-header]', event);
+    }
+    _handleHomeKey() {
+        this._getStepHeader(first(this._state.accessibleSteps))?.focus();
+    }
+    _handleEndKey() {
+        this._getStepHeader(last(this._state.accessibleSteps))?.focus();
+    }
+    _handleArrowDown() {
+        if (!this._isHorizontal) {
+            const step = this._getActiveStepComponent();
+            if (step) {
+                this._getStepHeader(this._getNextStep(step))?.focus();
             }
-        });
-        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;
+    _handleArrowUp() {
+        if (!this._isHorizontal) {
+            const step = this._getActiveStepComponent();
+            if (step) {
+                this._getStepHeader(this._getPreviousStep(step))?.focus();
             }
-            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;
+    _handleArrowLeft() {
+        const step = this._getActiveStepComponent();
+        if (step) {
+            const next = isLTR(this)
+                ? this._getPreviousStep(step)
+                : this._getNextStep(step);
+            this._getStepHeader(next)?.focus();
         }
-        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);
+    _handleArrowRight() {
+        const step = this._getActiveStepComponent();
+        if (step) {
+            const next = isLTR(this)
+                ? this._getNextStep(step)
+                : this._getPreviousStep(step);
+            this._getStepHeader(next)?.focus();
         }
-        const nextStep = steps.find((step, i) => i > activeStepIndex && step.isAccessible);
-        if (nextStep) {
-            this.animateSteps(nextStep, this.activeStep);
-            this.activateStep(nextStep, false);
+    }
+    _handleInteraction(event) {
+        const step = findElementFromEventPath(IgcStepComponent.tagName, event);
+        if (step && this._state.isAccessible(step)) {
+            this._activateStep(step);
         }
     }
-    handleKeydown(event, focusedStep) {
-        const key = event.key.toLowerCase();
-        if (this.keyDownHandlers.has(event.key)) {
-            event.preventDefault();
-            this.keyDownHandlers.get(event.key)?.call(this, focusedStep);
+    _handleSlotChange() {
+        this._state.setSteps(this._slots.getAssignedElements('[default]', {
+            selector: IgcStepComponent.tagName,
+        }));
+        this._state.stepsChanged();
+        this.style.setProperty('--steps-count', this.steps.length.toString());
+    }
+    _syncStepperAttributes(properties) {
+        if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {
+            this._contextProvider.updateObservers();
         }
-        if (key === 'tab' && this.orientation === 'vertical') {
-            return;
+    }
+    _animateSteps(nextStep, currentStep) {
+        const steps = this._state.steps;
+        if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {
+            currentStep.toggleAnimation('out');
+            nextStep.toggleAnimation('in');
         }
-        if (key === 'tab' && this.activeStep.index !== focusedStep.index) {
-            this.activeStep.header.focus();
+        else {
+            currentStep.toggleAnimation('in', 'reverse');
+            nextStep.toggleAnimation('out', 'reverse');
         }
     }
-    onHomeKey() {
-        this.steps
-            .filter((step) => step.isAccessible)[0]
-            ?.header?.focus();
+    _emitChanging(args) {
+        return this.emitEvent('igcActiveStepChanging', {
+            detail: args,
+            cancelable: true,
+        });
     }
-    onEndKey() {
-        this.steps
-            .filter((step) => step.isAccessible)
-            .pop()
-            ?.header?.focus();
+    _emitChanged(args) {
+        this.emitEvent('igcActiveStepChanged', {
+            detail: args,
+        });
     }
-    onArrowDownKeyDown(focusedStep) {
-        if (this.orientation === 'horizontal') {
+    _activateStep(step, shouldEmit = true) {
+        if (step === this._state.activeStep) {
             return;
         }
-        this.getNextStep(focusedStep)?.header?.focus();
-    }
-    onArrowUpKeyDown(focusedStep) {
-        if (this.orientation === 'horizontal') {
+        if (!shouldEmit) {
+            this._state.changeActiveStep(step);
             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();
+        const steps = this._state.steps;
+        const activeIndex = steps.indexOf(this._state.activeStep);
+        const index = steps.indexOf(step);
+        const args = { oldIndex: activeIndex, newIndex: index };
+        if (!this._emitChanging(args)) {
+            return;
         }
-    }
-    getNextStep(focusedStep) {
-        if (focusedStep.index === this.steps.length - 1) {
-            return this.steps.find((step) => step.isAccessible);
+        if (this._state.activeStep) {
+            this._animateSteps(step, this._state.activeStep);
         }
-        const nextAccessible = this.steps.find((step, i) => i > focusedStep.index && step.isAccessible);
-        return nextAccessible
-            ? nextAccessible
-            : this.steps.find((step) => step.isAccessible);
+        this._state.changeActiveStep(step);
+        this._emitChanged({ index });
     }
-    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;
+    _moveToNextStep(next = true) {
+        const step = this._state.getAdjacentStep(next);
+        if (step) {
+            if (this._state.activeStep) {
+                this._animateSteps(step, this._state.activeStep);
             }
+            this._state.changeActiveStep(step);
         }
-        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;
-            });
-        }
+    _getNextStep(step) {
+        const steps = this._state.accessibleSteps;
+        const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);
+        return steps[next];
     }
-    updateAnimation(step) {
-        if (this.orientation === 'horizontal') {
-            step.animation = this.horizontalAnimation;
-        }
-        if (this.orientation === 'vertical') {
-            step.animation = this.verticalAnimation;
-        }
+    _getPreviousStep(step) {
+        const steps = this._state.accessibleSteps;
+        const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);
+        return steps[previous];
     }
-    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);
-        });
+    _getActiveStepComponent() {
+        const active = getRoot(this).activeElement;
+        return active ? active.closest(IgcStepComponent.tagName) : null;
     }
-    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._shouldUpdateLinearState) {
-            this.linearChange();
-            this._shouldUpdateLinearState = false;
-        }
-        if (this.linear) {
-            this.updateStepsLinearDisabled();
-        }
+    _getStepHeader(step) {
+        return step?.renderRoot.querySelector('[data-step-header]') ?? null;
     }
     navigateTo(index) {
-        const step = this.steps[index];
-        if (!step) {
-            return;
+        const step = this._state.steps[index];
+        if (step) {
+            this._activateStep(step, false);
         }
-        this.activateStep(step, false);
     }
     next() {
-        this.moveToNextStep();
+        this._moveToNextStep();
     }
     prev() {
-        this.moveToNextStep(false);
+        this._moveToNextStep(false);
     }
     reset() {
-        this.steps.forEach((step) => {
-            step.visited = false;
-        });
-        this.activateFirstStep();
+        this._state.reset();
     }
     render() {
-        return html `<slot @slotchange=${this.stepsChanged}></slot>`;
+        return html `<slot></slot>`;
     }
 }
-__decorate([
-    queryAssignedElements({ selector: 'igc-step' })
-], IgcStepperComponent.prototype, "steps", void 0);
 __decorate([
     property({ reflect: true })
 ], IgcStepperComponent.prototype, "orientation", void 0);
@@ -369,10 +251,10 @@ __decorate([
     property({ reflect: true, attribute: 'step-type' })
 ], IgcStepperComponent.prototype, "stepType", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcStepperComponent.prototype, "linear", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean, attribute: 'content-top' })
+    property({ type: Boolean, reflect: true, attribute: 'content-top' })
 ], IgcStepperComponent.prototype, "contentTop", void 0);
 __decorate([
     property({ attribute: 'vertical-animation' })
@@ -381,31 +263,9 @@ __decorate([
     property({ attribute: 'horizontal-animation' })
 ], IgcStepperComponent.prototype, "horizontalAnimation", void 0);
 __decorate([
-    property({ attribute: 'animation-duration', type: Number })
+    property({ type: Number, attribute: 'animation-duration' })
 ], 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);
 //# sourceMappingURL=stepper.js.map