@tylertech/forge 2.0.0

package/esm/stepper/stepper/stepper-adapter.js

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, getActiveElement, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base';
+import { StepperUtils } from '../core/stepper-utils';
+import { STEP_CONSTANTS } from '../step/step-constants';
+import { STEPPER_CONSTANTS } from './stepper-constants';
+export class StepperAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, STEPPER_CONSTANTS.selectors.STEPPER);
+        this._slotElement = this._rootElement.querySelector('slot');
+    }
+    initializeAccessibility() {
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'tablist');
+        }
+    }
+    patchSafari() {
+        this._applyToSteps(s => s.setAttribute('safari', ''));
+    }
+    addSlotChangeListener(listener) {
+        this._slotElement.addEventListener('slotchange', listener);
+    }
+    removeSlotChangeListener(listener) {
+        this._slotElement.addEventListener('slotchange', listener);
+    }
+    getLastStep() {
+        const steps = this._getSteps();
+        return steps.item(steps.length - 1);
+    }
+    setSelected(step) {
+        this._getSteps().forEach(s => {
+            if (s === step) {
+                s.selected = true;
+            }
+            else {
+                s.selected = false;
+            }
+        });
+    }
+    assignIndices() {
+        const steps = this._getSteps();
+        steps.forEach((tab, index) => {
+            tab.index = index;
+        });
+    }
+    assignFirstLastStep() {
+        const steps = this._getSteps();
+        if (steps && steps.length > 1) {
+            steps[0].setAttribute('first', '');
+            steps[steps.length - 1].setAttribute('last', '');
+        }
+    }
+    setLayoutAlign(layoutAlign) {
+        StepperUtils.setLayoutAlign(this._rootElement, layoutAlign);
+    }
+    setLayoutMode(layoutMode) {
+        StepperUtils.setLayoutMode(this._rootElement, layoutMode);
+        this._applyToSteps(s => s.setAttribute(STEP_CONSTANTS.attributes.CLUSTERED, ''));
+    }
+    setAlternativeState(alternative) {
+        StepperUtils.setAlternativeState(this._rootElement, alternative);
+        this._applyToSteps(step => step.alternative = alternative);
+    }
+    setVertical(vertical) {
+        toggleClass(this._rootElement, vertical, STEPPER_CONSTANTS.classes.VERTICAL);
+        this._applyToSteps(step => step.vertical = vertical);
+    }
+    setLinearState(linear) {
+        StepperUtils.setLinearState(this._rootElement, linear);
+    }
+    removeRootListener(event, listener) {
+        this._rootElement.removeEventListener('click', listener);
+    }
+    addRootListener(event, listener) {
+        this._rootElement.addEventListener(event, listener);
+    }
+    setSelectedByIndex(index) {
+        this._applyToSteps(step => {
+            if (step.selected && step.index !== index) {
+                step.selected = false;
+            }
+            if (step.index === index) {
+                step.selected = true;
+            }
+        });
+    }
+    applyConfiguredSteps(steps) {
+        this._component.querySelectorAll(STEP_CONSTANTS.elementName).forEach(n => {
+            this._component.removeChild(n);
+        });
+        steps.forEach(s => this._component.appendChild(s));
+    }
+    tryGetFocusedStep() {
+        let focusedStep = undefined;
+        const activeElement = getActiveElement();
+        this._applyToSteps(step => {
+            if (activeElement === getShadowElement(step, STEP_CONSTANTS.selectors.STEP)) {
+                focusedStep = step;
+            }
+        });
+        return focusedStep;
+    }
+    getFocusedOrSelectedStep() {
+        let focusedStep = this.tryGetFocusedStep();
+        if (!focusedStep) {
+            focusedStep = this._getSteps()[0];
+            focusedStep.focus();
+        }
+        return focusedStep;
+    }
+    getStep(index) {
+        let realIndex = 0;
+        const steps = this._getSteps();
+        if (index < 0) {
+            return steps.item(steps.length - 1);
+        }
+        if (steps.length > index) {
+            realIndex = index;
+        }
+        return steps.item(realIndex);
+    }
+    toggleDisabled(disabled) {
+        this._applyToSteps(s => s.disabled = disabled);
+    }
+    toggleRootClass(className, show) {
+        toggleClass(this._rootElement, show, className);
+    }
+    isStepperFocused() {
+        return this._rootElement.classList.contains(STEPPER_CONSTANTS.classes.FOCUSED);
+    }
+    setStepsListener(event, listener) {
+        this._applyToSteps(s => s.addEventListener(event, listener));
+    }
+    removeStepsListener(event, listener) {
+        this._applyToSteps(s => s.removeEventListener(event, listener));
+    }
+    _applyToSteps(action) {
+        this._getSteps().forEach(action);
+    }
+    _getSteps() {
+        return this._component.querySelectorAll(STEP_CONSTANTS.elementName);
+    }
+}

package/esm/stepper/stepper/stepper-constants.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const STEPPER_CONSTANTS: {
+    elementName: "forge-stepper";
+    classes: {
+        STEPPER: string;
+        LINEAR: string;
+        ALTERNATIVE: string;
+        CLUSTERED: string;
+        FIXED: string;
+        ALIGN_LEFT: string;
+        ALIGN_CENTER: string;
+        ALIGN_RIGHT: string;
+        VERTICAL: string;
+        FOCUSED: string;
+    };
+    selectors: {
+        STEPPER: string;
+    };
+    attributes: {
+        SELECTED_INDEX: string;
+        LINEAR: string;
+        ALTERNATIVE: string;
+        LAYOUT_MODE: string;
+        LAYOUT_ALIGN: string;
+        DISABLED: string;
+        VERTICAL: string;
+    };
+    numbers: {
+        ARROW_LEFT_KEYCODE: number;
+        ARROW_RIGHT_KEYCODE: number;
+        END_KEYCODE: number;
+        HOME_KEYCODE: number;
+        ENTER_KEYCODE: number;
+        SPACE_KEYCODE: number;
+    };
+    strings: {
+        ARROW_LEFT_KEY: string;
+        ARROW_RIGHT_KEY: string;
+        ARROW_UP_KEY: string;
+        ARROW_DOWN_KEY: string;
+        END_KEY: string;
+        ENTER_KEY: string;
+        HOME_KEY: string;
+        SPACE_KEY: string;
+        TAB_KEY: string;
+    };
+    ACCEPTABLE_KEYS: string[];
+    KEYCODE_MAP: {
+        [x: number]: string;
+    };
+};
+export interface IStepConfiguration {
+    label: string;
+    optionalLabel?: string;
+    editable?: boolean;
+    completed?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    vertical?: boolean;
+    expanded?: boolean;
+    ignoreUserExpansion?: boolean;
+}
+export interface IStepperConfiguration {
+    steps: IStepConfiguration[];
+    selectedIndex: number;
+    linear: boolean;
+    alternative: boolean;
+    layoutMode: StepperLayoutMode;
+    layoutAlign: StepperLayoutAlign;
+    vertical?: boolean;
+}
+export declare type StepperLayoutMode = 'fixed' | 'clustered';
+export declare type StepperLayoutAlign = 'left' | 'center' | 'right';

package/esm/stepper/stepper/stepper-constants.js

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}stepper`;
+const classes = {
+    STEPPER: 'forge-stepper',
+    LINEAR: 'forge-stepper--linear',
+    ALTERNATIVE: 'forge-stepper--alternative',
+    CLUSTERED: 'forge-stepper--clustered',
+    FIXED: 'forge-stepper--fixed',
+    ALIGN_LEFT: 'forge-stepper--align-left',
+    ALIGN_CENTER: 'forge-stepper--align-center',
+    ALIGN_RIGHT: 'forge-stepper--align-right',
+    VERTICAL: 'forge-stepper--vertical',
+    FOCUSED: 'forge-stepper--focused'
+};
+const selectors = {
+    STEPPER: `.${classes.STEPPER}`
+};
+const attributes = {
+    SELECTED_INDEX: 'selected-index',
+    LINEAR: 'linear',
+    ALTERNATIVE: 'alternative',
+    LAYOUT_MODE: 'layout-mode',
+    LAYOUT_ALIGN: 'layout-align',
+    DISABLED: 'disabled',
+    VERTICAL: 'vertical'
+};
+const strings = {
+    ARROW_LEFT_KEY: 'ArrowLeft',
+    ARROW_RIGHT_KEY: 'ArrowRight',
+    ARROW_UP_KEY: 'ArrowUp',
+    ARROW_DOWN_KEY: 'ArrowDown',
+    END_KEY: 'End',
+    ENTER_KEY: 'Enter',
+    HOME_KEY: 'Home',
+    SPACE_KEY: 'Space',
+    TAB_KEY: 'Tab'
+};
+const numbers = {
+    ARROW_LEFT_KEYCODE: 37,
+    ARROW_RIGHT_KEYCODE: 39,
+    END_KEYCODE: 35,
+    HOME_KEYCODE: 36,
+    ENTER_KEYCODE: 13,
+    SPACE_KEYCODE: 32
+};
+const ACCEPTABLE_KEYS = [
+    strings.ARROW_LEFT_KEY,
+    strings.ARROW_RIGHT_KEY,
+    strings.ARROW_DOWN_KEY,
+    strings.ARROW_UP_KEY,
+    strings.END_KEY,
+    strings.HOME_KEY,
+    strings.ENTER_KEY,
+    strings.SPACE_KEY,
+    strings.TAB_KEY
+];
+const KEYCODE_MAP = {
+    [numbers.ARROW_LEFT_KEYCODE]: strings.ARROW_LEFT_KEY,
+    [numbers.ARROW_RIGHT_KEYCODE]: strings.ARROW_RIGHT_KEY,
+    [numbers.END_KEYCODE]: strings.END_KEY,
+    [numbers.HOME_KEYCODE]: strings.HOME_KEY,
+    [numbers.ENTER_KEYCODE]: strings.ENTER_KEY,
+    [numbers.SPACE_KEYCODE]: strings.SPACE_KEY
+};
+export const STEPPER_CONSTANTS = {
+    elementName,
+    classes,
+    selectors,
+    attributes,
+    numbers,
+    strings,
+    ACCEPTABLE_KEYS,
+    KEYCODE_MAP
+};

package/esm/stepper/stepper/stepper-foundation.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IStepperAdapter } from './stepper-adapter';
+import { IStepConfiguration, StepperLayoutAlign, StepperLayoutMode } from './stepper-constants';
+export interface IStepperFoundation extends ICustomElementFoundation {
+    steps: IStepConfiguration[];
+    selectedIndex: number;
+    linear: boolean;
+    alternative: boolean;
+    layoutMode: StepperLayoutMode;
+    layoutAlign: StepperLayoutAlign;
+}
+export declare class StepperFoundation implements IStepperFoundation {
+    private _adapter;
+    private _steps;
+    private _selectedIndex;
+    private _linear;
+    private _alternative;
+    private _layoutMode;
+    private _layoutAlign;
+    private _initialize;
+    private _disabled;
+    private _vertical;
+    private _clickListener;
+    private _keyListener;
+    private _slotChangeListener;
+    private _stepFocusListener;
+    private _stepBlurListener;
+    private _stepExpandedContentFocusInListener;
+    private _stepExpandedContentFocusOutListener;
+    constructor(_adapter: IStepperAdapter);
+    initialize(): void;
+    disconnect(): void;
+    /** The step configurations. */
+    get steps(): IStepConfiguration[];
+    set steps(value: IStepConfiguration[]);
+    /** The active step index. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    /** Whether the stepper is linear or non-linear. */
+    get linear(): boolean;
+    set linear(value: boolean);
+    /** Whether the stepper uses the default or alternative label layout mode. */
+    get alternative(): boolean;
+    set alternative(value: boolean);
+    /** The layout mode of the stepper. */
+    get layoutMode(): StepperLayoutMode;
+    set layoutMode(value: StepperLayoutMode);
+    /** The layout alignment of the stepper. */
+    get layoutAlign(): StepperLayoutAlign;
+    set layoutAlign(value: StepperLayoutAlign);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    private _applyVertical;
+    private _applyDisabled;
+    private _applySelectedIndex;
+    private _handleClick;
+    private _renderConfiguration;
+    private _onKeydown;
+    private _moveFocusTo;
+    private _getKeyFromEvent;
+    private _determineMoveTarget;
+    private _determineVerticalMoveTarget;
+    private _onSlotChange;
+    private _onStepExpandedContentFocusIn;
+    private _onStepExpandedContentFocusOut;
+    private _onStepFocus;
+    private _onStepBlur;
+    private _patchBrowser;
+}

package/esm/stepper/stepper/stepper-foundation.js

@@ -0,0 +1,292 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getEventPath, getShadowElement, isDefined, isNumber, Platform } from '@tylertech/forge-core';
+import { STEP_CONSTANTS } from '../step/step-constants';
+import { StepperUtils } from '../core/stepper-utils';
+import { STEPPER_CONSTANTS } from './stepper-constants';
+export class StepperFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._steps = [];
+        this._selectedIndex = 0;
+        this._linear = false;
+        this._alternative = false;
+        this._layoutMode = 'fixed';
+        this._layoutAlign = 'center';
+        this._initialize = false;
+        this._clickListener = event => this._handleClick(event);
+        this._keyListener = event => this._onKeydown(event);
+        this._stepFocusListener = () => this._onStepFocus();
+        this._stepBlurListener = () => this._onStepBlur();
+        this._stepExpandedContentFocusInListener = event => this._onStepExpandedContentFocusIn(event);
+        this._stepExpandedContentFocusOutListener = event => this._onStepExpandedContentFocusOut(event);
+        this._slotChangeListener = event => this._onSlotChange(event);
+    }
+    initialize() {
+        this._adapter.initializeAccessibility();
+        this._adapter.assignIndices();
+        this._adapter.setLinearState(this._linear);
+        this._adapter.setAlternativeState(this._alternative);
+        this._adapter.setLayoutAlign(this._layoutAlign);
+        this._adapter.setLayoutMode(this._layoutMode);
+        this._adapter.addRootListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keyListener);
+        this._adapter.assignFirstLastStep();
+        this._adapter.addRootListener(STEP_CONSTANTS.events.EXPANDED_CONTENT_FOCUSIN, this._stepExpandedContentFocusInListener);
+        this._adapter.addRootListener(STEP_CONSTANTS.events.EXPANDED_CONTENT_FOCUSOUT, this._stepExpandedContentFocusOutListener);
+        this._applySelectedIndex();
+        this._patchBrowser();
+        this._adapter.setStepsListener('blur', this._stepBlurListener);
+        this._adapter.setStepsListener('focus', this._stepFocusListener);
+        if (!this._initialize) {
+            this._adapter.addSlotChangeListener(this._slotChangeListener);
+        }
+        this._initialize = true;
+    }
+    disconnect() {
+        this._adapter.removeRootListener('click', this._clickListener);
+        this._adapter.removeHostListener('keydown', this._keyListener);
+        this._adapter.removeSlotChangeListener(this._slotChangeListener);
+        this._adapter.removeStepsListener('blur', this._stepBlurListener);
+        this._adapter.removeStepsListener('focus', this._stepFocusListener);
+    }
+    /** The step configurations. */
+    get steps() {
+        return JSON.parse(JSON.stringify(this._steps));
+    }
+    set steps(value) {
+        if (Array.isArray(value) && value.length > 0) {
+            this._steps = [...value.map(s => (Object.assign({}, s)))];
+        }
+        else {
+            this._steps = [];
+            return;
+        }
+        this._renderConfiguration();
+    }
+    /** The active step index. */
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value) {
+        if (!isDefined(value)) {
+            value = 0;
+        }
+        else if (!isNumber(value)) {
+            const v = Number(value);
+            value = !isNaN(v) ? v : 0;
+        }
+        if (this._selectedIndex !== value) {
+            this._selectedIndex = value;
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.SELECTED_INDEX, this._selectedIndex.toString());
+            this._applySelectedIndex();
+        }
+    }
+    /** Whether the stepper is linear or non-linear. */
+    get linear() {
+        return this._linear;
+    }
+    set linear(value) {
+        value = Boolean(value);
+        if (this._linear !== value) {
+            this._linear = value;
+            this._adapter.setLinearState(this._linear);
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.LINEAR, this._linear.toString());
+        }
+    }
+    /** Whether the stepper uses the default or alternative label layout mode. */
+    get alternative() {
+        return this._alternative;
+    }
+    set alternative(value) {
+        value = Boolean(value);
+        if (this._alternative !== value) {
+            this._alternative = value;
+            this._adapter.setAlternativeState(this._alternative);
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.ALTERNATIVE, this._alternative.toString());
+        }
+    }
+    /** The layout mode of the stepper. */
+    get layoutMode() {
+        return this._layoutMode;
+    }
+    set layoutMode(value) {
+        if (!/^(fixed|clustered)$/.test(value)) {
+            return;
+        }
+        if (this._layoutMode !== value) {
+            this._layoutMode = value;
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.LAYOUT_MODE, this._layoutMode);
+            this._adapter.setLayoutMode(this._layoutMode);
+        }
+    }
+    /** The layout alignment of the stepper. */
+    get layoutAlign() {
+        return this._layoutAlign;
+    }
+    set layoutAlign(value) {
+        if (!/^(left|center|right)$/.test(value)) {
+            return;
+        }
+        if (this._layoutAlign !== value) {
+            this._layoutAlign = value;
+            this._adapter.setLayoutAlign(this._layoutAlign);
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.LAYOUT_ALIGN, this._layoutAlign);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== this._disabled) {
+            this._disabled = value;
+            this._applyDisabled();
+        }
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(value) {
+        if (value !== this._vertical) {
+            this._vertical = value;
+            this._applyVertical();
+            this._adapter.toggleHostAttribute(STEPPER_CONSTANTS.attributes.VERTICAL, this._vertical);
+        }
+    }
+    _applyVertical() {
+        this._adapter.setVertical(this._vertical);
+    }
+    _applyDisabled() {
+        if (this._disabled) {
+            this._adapter.setHostAttribute(STEPPER_CONSTANTS.attributes.DISABLED, 'disabled');
+        }
+        else {
+            this._adapter.removeHostAttribute(STEPPER_CONSTANTS.attributes.DISABLED);
+        }
+        this._adapter.toggleDisabled(this._disabled);
+    }
+    _applySelectedIndex() {
+        this._adapter.setSelectedByIndex(this._selectedIndex);
+    }
+    _handleClick(event) {
+        event.preventDefault();
+        if (this._linear) {
+            return;
+        }
+        const eventPath = getEventPath(event);
+        const stepRoot = eventPath.find(el => el.classList && el.classList.contains(STEP_CONSTANTS.classes.STEP));
+        const step = eventPath.find(el => el.localName === STEP_CONSTANTS.elementName);
+        if (stepRoot && step && !step.selected && !step.disabled && this._adapter.emitHostEvent(STEP_CONSTANTS.events.SELECT, step.index, true, true)) {
+            this._adapter.setSelected(step);
+            this.selectedIndex = step.index;
+        }
+    }
+    _renderConfiguration() {
+        const steps = StepperUtils.createSteps({
+            steps: this._steps,
+            selectedIndex: this._selectedIndex,
+            alternative: this._alternative,
+            layoutAlign: this._layoutAlign,
+            layoutMode: this._layoutMode,
+            linear: this._linear
+        });
+        this.disconnect();
+        this._adapter.applyConfiguredSteps(steps);
+        this.initialize();
+    }
+    _onKeydown(event) {
+        if (this._linear) {
+            return;
+        }
+        const key = this._getKeyFromEvent(event);
+        // If the expanded content is currently being focused, ignore stepper specific keys
+        if (!this._adapter.isStepperFocused()) {
+            return;
+        }
+        // Early exit if the event key isn't one of the keyboard navigation keys
+        if (!key) {
+            return;
+        }
+        if ([STEP_CONSTANTS.strings.HOME_KEY, STEP_CONSTANTS.strings.END_KEY, STEP_CONSTANTS.strings.ARROW_DOWN_KEY, STEPPER_CONSTANTS.strings.ARROW_UP_KEY].includes(key)) {
+            event.preventDefault();
+        }
+        const step = this._vertical ? this._determineVerticalMoveTarget(key) : this._determineMoveTarget(key);
+        if (step) {
+            this._moveFocusTo(step);
+        }
+    }
+    _moveFocusTo(step) {
+        getShadowElement(step, STEP_CONSTANTS.selectors.STEP).focus();
+    }
+    _getKeyFromEvent(evt) {
+        if (STEPPER_CONSTANTS.ACCEPTABLE_KEYS.includes(evt.key)) {
+            return evt.key;
+        }
+        return STEPPER_CONSTANTS.KEYCODE_MAP[evt.keyCode];
+    }
+    _determineMoveTarget(key) {
+        const step = this._adapter.getFocusedOrSelectedStep();
+        if (step) {
+            switch (key) {
+                case STEPPER_CONSTANTS.strings.ARROW_RIGHT_KEY:
+                    return this._adapter.getStep(step.index + 1);
+                case STEPPER_CONSTANTS.strings.ARROW_LEFT_KEY:
+                    return this._adapter.getStep(step.index - 1);
+                case STEPPER_CONSTANTS.strings.HOME_KEY:
+                    return this._adapter.getStep(0);
+                case STEPPER_CONSTANTS.strings.END_KEY:
+                    return this._adapter.getLastStep();
+            }
+        }
+        return step;
+    }
+    _determineVerticalMoveTarget(key) {
+        const step = this._adapter.getFocusedOrSelectedStep();
+        if (step) {
+            switch (key) {
+                case STEPPER_CONSTANTS.strings.ARROW_DOWN_KEY:
+                    return this._adapter.getStep(step.index + 1);
+                case STEPPER_CONSTANTS.strings.ARROW_UP_KEY:
+                    return this._adapter.getStep(step.index - 1);
+                case STEPPER_CONSTANTS.strings.HOME_KEY:
+                    return this._adapter.getStep(0);
+                case STEPPER_CONSTANTS.strings.END_KEY:
+                    return this._adapter.getLastStep();
+            }
+        }
+        return step;
+    }
+    _onSlotChange(event) {
+        this.disconnect();
+        this.initialize();
+    }
+    _onStepExpandedContentFocusIn(event) {
+        const step = this._adapter.getStep(event.detail.index + 1);
+        if (step) {
+            step.setStepTabIndex(0);
+        }
+        event.detail.setStepTabIndex(0);
+    }
+    _onStepExpandedContentFocusOut(event) {
+        const focusOutStep = event.target;
+        const step = this._adapter.getStep(focusOutStep.index + 1);
+        if (step) {
+            step.setStepTabIndex(-1);
+        }
+        focusOutStep.setStepTabIndex(-1);
+    }
+    _onStepFocus() {
+        this._adapter.toggleRootClass(STEPPER_CONSTANTS.classes.FOCUSED, true);
+    }
+    _onStepBlur() {
+        this._adapter.toggleRootClass(STEPPER_CONSTANTS.classes.FOCUSED, false);
+    }
+    _patchBrowser() {
+        if (new Platform().SAFARI()) {
+            this._adapter.patchSafari();
+        }
+    }
+}