@tylertech/forge 2.0.0

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

@@ -0,0 +1,248 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { STEP_CONSTANTS } from './step-constants';
+export class StepFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._clickListener = () => this._onClickListener();
+        this._expansionContentSlotChangeListener = evt => this._onExpansionContentSlotChange(evt);
+        this._expansionContentFocusInListener = evt => this._onExpansionContentFocusIn(evt);
+        this._expansionContentFocusOutListener = evt => this._onExpansionContentFocusOut(evt);
+    }
+    initialize() {
+        this._adapter.initialize();
+        this._adapter.attachRipple();
+        this._applySelected();
+        this._toggleIcon();
+        if (this._vertical) {
+            this._adapter.addExpansionPanel();
+            this._adapter.addExpansionIcon();
+            this._adapter.setClickListener(this._clickListener);
+            this._adapter.setSlotListener(this._expansionContentSlotChangeListener);
+            this._adapter.addExpansionPanelListener('focusin', this._expansionContentFocusInListener);
+            this._adapter.addExpansionPanelListener('focusout', this._expansionContentFocusOutListener);
+        }
+        this._initialized = true;
+    }
+    disconnect() {
+        this._adapter.detatchRipple();
+        this._adapter.removeClickListener(this._clickListener);
+        this._adapter.removeSlotListener(this._expansionContentSlotChangeListener);
+        this._adapter.removeExpansionPanelListener('focusin', this._onExpansionContentFocusIn);
+        this._adapter.removeExpansionPanelListener('focusout', this._onExpansionContentFocusOut);
+    }
+    get index() {
+        return this._index;
+    }
+    set index(value) {
+        if (this._index !== value) {
+            this._index = value;
+            this._applyIndex();
+            this._adapter.setHostAttribute(STEP_CONSTANTS.attributes.INDEX, value.toString());
+        }
+    }
+    get editable() {
+        return this._editable;
+    }
+    set editable(value) {
+        if (this._editable !== value) {
+            this._editable = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.EDITABLE, value);
+            this._applyEditable();
+        }
+    }
+    get completed() {
+        return this._completed;
+    }
+    set completed(value) {
+        if (this._completed !== value) {
+            this._completed = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.COMPLETED, value);
+            this._applyCompleted();
+        }
+    }
+    get error() {
+        return this._error;
+    }
+    set error(value) {
+        if (this._error !== value) {
+            this._error = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.ERROR, value);
+            this._applyError();
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.SELECTED, value);
+            this._applySelected();
+        }
+    }
+    get alternative() {
+        return this._alternative;
+    }
+    set alternative(value) {
+        if (this._alternative !== value) {
+            this._alternative = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.ALTERNATIVE, value);
+            this._applyAlternative();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this._applyDisabled();
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(value) {
+        if (value !== this._vertical) {
+            this._vertical = value;
+            this._applyVertical();
+            if (this._initialized) {
+                if (this._vertical) {
+                    this._adapter.addExpansionPanel();
+                    this._adapter.addExpansionIcon();
+                    this._adapter.setClickListener(this._clickListener);
+                    this._adapter.setSlotListener(this._expansionContentSlotChangeListener);
+                }
+                else {
+                    this._adapter.removeClickListener(this._clickListener);
+                    this._adapter.removeSlotListener(this._expansionContentSlotChangeListener);
+                    this._adapter.removeExpansionPanel();
+                    this._adapter.removeExpansionIcon();
+                }
+            }
+        }
+    }
+    get expanded() {
+        return this._expanded;
+    }
+    set expanded(value) {
+        if (value !== this._expanded) {
+            this._expanded = value;
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.EXPANDED, this._expanded);
+            if (this._initialized) {
+                this._applyExpanded();
+            }
+        }
+    }
+    get ignoreUserExpansion() {
+        return this._ignoreUserExpansion;
+    }
+    set ignoreUserExpansion(value) {
+        if (value !== this._ignoreUserExpansion) {
+            this._ignoreUserExpansion = value;
+        }
+    }
+    setStepTabIndex(index) {
+        this._adapter.setRootTabIndex(index);
+    }
+    _applyExpanded() {
+        this._adapter.setExpanded(this._expanded);
+    }
+    _applyVertical() {
+        this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.VERTICAL, this._vertical);
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.VERTICAL, this._vertical);
+    }
+    focus() {
+        this._adapter.focusButton();
+    }
+    _applyAlternative() {
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.ALTERNATIVE, this._alternative);
+    }
+    _applySelected() {
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.SELECTED, this._selected);
+        this._adapter.setHostAttribute(STEP_CONSTANTS.attributes.ARIA_SELECTED, (this._selected || false).toString());
+        this._adapter.setRootTabIndex(this._selected ? 0 : -1);
+        this._toggleIcon();
+    }
+    _applyIndex() {
+        this._adapter.setIndex(this._index);
+    }
+    _applyEditable() {
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.EDITABLE, this._editable);
+        this._toggleIcon();
+    }
+    _applyCompleted() {
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.COMPLETED, this._completed);
+        this._toggleIcon();
+    }
+    _applyError() {
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.ERROR, this._error);
+        this._toggleIcon();
+    }
+    _applyDisabled() {
+        this._adapter.toggleDisabled(this._disabled);
+        this._toggleIcon();
+    }
+    _getIconState() {
+        if (this._error) {
+            return 'warning';
+        }
+        if (this._completed) {
+            if (this._editable) {
+                return 'mode_edit';
+            }
+            return 'check';
+        }
+        if (this._editable && this._selected && !this._disabled) {
+            return 'mode_edit';
+        }
+        if (this._disabled) {
+            return 'block';
+        }
+        return '';
+    }
+    _toggleIcon() {
+        this._iconState = this._getIconState();
+        this._adapter.toggleIcon(this._iconState, this._iconState !== '');
+    }
+    _toggleExpanded() {
+        if (this._adapter.slotHasContent()) {
+            this._expanded = !this._expanded;
+            this._applyExpanded();
+            this._adapter.toggleHostAttribute(STEP_CONSTANTS.attributes.EXPANDED, this._expanded);
+        }
+    }
+    _onClickListener() {
+        if (this._vertical && !this._ignoreUserExpansion) {
+            this._toggleExpanded();
+        }
+    }
+    _onExpansionContentSlotChange(evt) {
+        const hasSlotContent = this._adapter.slotHasContent();
+        if (hasSlotContent) {
+            this._adapter.setHostAttribute(STEP_CONSTANTS.attributes.EXPANDABLE);
+            this._applyExpanded();
+            // The animations on the initial slot content  is causing the panel not to open correctly. Opting out for animations on initialization
+            this._adapter.setExpansionPanelAnimations(true);
+        }
+        else {
+            this._adapter.removeHostAttribute(STEP_CONSTANTS.attributes.EXPANDABLE);
+            this._adapter.setExpansionPanelAnimations(false);
+        }
+        this._adapter.toggleRootClass(STEP_CONSTANTS.classes.EXPANDABLE, hasSlotContent);
+    }
+    _onExpansionContentFocusIn(event) {
+        if (!this._expandedContentFocused && this._adapter.isExpandedContentInFocus(event.target)) {
+            this._adapter.emitHostEvent(STEP_CONSTANTS.events.EXPANDED_CONTENT_FOCUSIN, this._adapter.component);
+            this._expandedContentFocused = true;
+        }
+    }
+    _onExpansionContentFocusOut(event) {
+        if (event.relatedTarget && !this._adapter.isExpandedContentInFocus(event.relatedTarget)) {
+            this._adapter.emitHostEvent(STEP_CONSTANTS.events.EXPANDED_CONTENT_FOCUSOUT, this._adapter.component);
+            this._expandedContentFocused = false;
+        }
+    }
+}

package/esm/stepper/step/step.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+export interface IStepComponent extends IBaseComponent {
+    index: number;
+    editable: boolean;
+    completed: boolean;
+    error: boolean;
+    selected: boolean;
+    alternative: boolean;
+    disabled: boolean;
+    vertical: boolean;
+    expanded: boolean;
+    ignoreUserExpansion: boolean;
+    setStepTabIndex(index: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-step': IStepComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-step-selected': CustomEvent<number>;
+        'forge-step-expanded-content-focusin': CustomEvent<IStepComponent>;
+        'forge-step-expanded-content-focusout': CustomEvent<IStepComponent>;
+    }
+}
+export declare class StepComponent extends BaseComponent implements IStepComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    alternative: boolean;
+    index: number;
+    editable: boolean;
+    completed: boolean;
+    error: boolean;
+    selected: boolean;
+    disabled: boolean;
+    vertical: boolean;
+    expanded: boolean;
+    ignoreUserExpansion: boolean;
+    focus(): void;
+    setStepTabIndex(index: number): void;
+}

package/esm/stepper/step/step.js

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconModeEdit, tylIconWarning, tylIconCheck, tylIconBlock } from '@tylertech/tyler-icons/standard';
+import { StepAdapter } from './step-adapter';
+import { STEP_CONSTANTS } from './step-constants';
+import { StepFoundation } from './step-foundation';
+import { IconRegistry, IconComponent } from '../../icon';
+import { BaseComponent } from '../../core/base/base-component';
+const template = '<template><div class=\"forge-step__container\" part=\"root\"><button class=\"forge-step\" type=\"button\" part=\"button\"><div class=\"before\" part=\"before\"></div><div class=\"forge-step__icon-container\" part=\"icon-container\"><div class=\"forge-step-icon-content\" part=\"icon-content\"><span class=\"forge-step-index\" part=\"index\"></span><forge-icon class=\"forge-step-icon\" part=\"icon\"></forge-icon></div></div><div class=\"forge-step__text-container\" part=\"text-container\"><div class=\"forge-step__title\" part=\"title-container\"><slot></slot></div><div class=\"forge-step__subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div></button></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-step{padding:12px 16px;outline:0;background:0 0;border:none;border-radius:14px;position:relative;display:-webkit-box;display:flex;overflow:hidden;-webkit-box-align:center;align-items:center;z-index:1;--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step::after,.forge-step::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-step::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-step::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-step.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-step.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-step.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-step.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-step.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-step::after,.forge-step::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-step.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-step::after,.forge-step::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.forge-step.mdc-ripple-surface--hover::before,.forge-step:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-step.mdc-ripple-upgraded--background-focused::before,.forge-step:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-step:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-step.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-step--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step--selected::after,.forge-step--selected::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-step--selected.mdc-ripple-surface--hover::before,.forge-step--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step--selected.mdc-ripple-upgraded--background-focused::before,.forge-step--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-step--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-step--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step.forge-step--error.forge-step--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-step.forge-step--error.forge-step--selected::after,.forge-step.forge-step--error.forge-step--selected::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-surface--hover::before,.forge-step.forge-step--error.forge-step--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-upgraded--background-focused::before,.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-step.forge-step--error.forge-step--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-step.forge-step--error.forge-step--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-step--selected{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-step--disabled::after,.forge-step--disabled::before{background-color:transparent}.forge-step__container{display:contents}.forge-step__expansion-panel{display:none}.forge-step__expanded-icon{color:#757575;color:var(--forge-theme-icon-color,#757575);display:none;margin-left:auto}.forge-step__title{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step__subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step__subtitle ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.forge-step__icon-container .forge-step-icon-content{border-style:solid;border-width:2px;border-color:transparent;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;border-radius:50%;height:24px;width:24px;font-size:14px;-webkit-transition:background-color .4s cubic-bezier(.25, .8, .25, 1);transition:background-color .4s cubic-bezier(.25, .8, .25, 1);margin:0 8px 0 0;-webkit-box-flex:0;flex:none}.forge-step__icon-container .forge-step-icon-content forge-icon{font-size:14px}.forge-step:not(.forge-step--disabled) .forge-step-icon-content{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-step--disabled{cursor:not-allowed;color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--disabled.forge-step .forge-step__icon-container .forge-step-icon-content{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-step--disabled .forge-step__text-container .forge-step__title{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--disabled .forge-step__text-container .forge-step__subtitle ::slotted(*){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-step--alternative{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-step--alternative .forge-step__icon-container .forge-step-icon-content{margin:0}.forge-step--alternative .forge-step__text-container{margin-top:8px;place-items:center}.forge-step:not(.forge-step--selected):not(.forge-step--disabled).forge-step--editable:not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content,.forge-step:not(.forge-step--selected):not(.forge-step--disabled):not(.forge-step--editable):not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-step:not(.forge-step--selected):not(.forge-step--disabled).forge-step--editable:not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content .forge-step-index,.forge-step:not(.forge-step--selected):not(.forge-step--disabled):not(.forge-step--editable):not(.forge-step--completed):not(.forge-step--error) .forge-step-icon-content .forge-step-index{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-step--selected.forge-step--disabled .forge-step-icon-content{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-step--selected:not(.forge-step--disabled) .forge-step__icon-container .forge-step-icon-content{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--selected:not(.forge-step--disabled) .forge-step__title{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);font-weight:500}.forge-step--selected:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);font-weight:500}.forge-step--error:not(.forge-step--disabled) .forge-step__title{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-step--error:not(.forge-step--disabled) .forge-step__subtitle ::slotted(*){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-step--error:not(.forge-step--disabled) .forge-step__icon-container .forge-step-icon-content{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020);color:#fff;color:var(--mdc-theme-on-error,#fff)}.forge-step--completed:not(.forge-step--disabled):not(.forge-step--error):not(.forge-step--editable) .forge-step-icon-content{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--completed:not(.forge-step--disabled):not(.forge-step--error).forge-step--editable .forge-step-icon-content{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-step--expandable .forge-step__expanded-icon{display:inline-block;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.forge-step--expandable.forge-step--expanded .forge-step__expanded-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.forge-step--expandable .forge-step__icon-container .forge-step-icon-content{margin:0 16px 0 0}.forge-step__text-container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:last-child)[alternative]) .after::after{content:\"\";-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;right:0;left:0;min-width:0;width:100%;border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child)[alternative]) .before::before{content:\"\";left:0;min-width:0;width:100%;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;position:absolute;border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:not(:last-child)):host(:not([vertical]))::after{border-top-color:#e0e0e0;border-top-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";position:relative;height:0;min-width:10px;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 0 0 -10px}:host(:focus){outline:0}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{width:100%;border-radius:4px;min-height:52px}:host([vertical]) .forge-step__text-container{white-space:normal}:host([vertical]) .forge-step__icon-container .forge-step-icon-content{margin:0 16px 0 0}:host([vertical][expandable]) .forge-step__expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step__expanded-icon{display:none}forge-expansion-panel::part(root){border-left-style:solid;border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);border-left-width:1px;border-left-width:var(--forge-step-expansion-panel-border-left-width,1px);margin-left:60px;margin-left:var(--forge-step-expansion-panel-margin-left,60px);margin-top:4px;margin-top:var(--forge-step-expansion-panel-margin-top,4px);margin-bottom:4px;margin-bottom:var(--forge-step-expansion-panel-margin-bottom,4px)}:host(:not(:last-child)[clustered])::after{min-width:25px}:host(:last-child[clustered])::before{min-width:25px}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{min-width:25px}:host(:not(:last-child)[safari][alternative])::after{top:24px;margin:0 -5px}:host(:last-child[safari][alternative])::before{top:24px;margin:0 -5px}:host(:not(:first-child):not(:last-child)[safari][alternative])::after,:host(:not(:first-child):not(:last-child)[safari][alternative])::before{top:24px;margin:0 -5px}';
+let StepComponent = class StepComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define([
+            tylIconModeEdit,
+            tylIconCheck,
+            tylIconWarning,
+            tylIconBlock
+        ]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StepFoundation(new StepAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            STEP_CONSTANTS.attributes.COMPLETED,
+            STEP_CONSTANTS.attributes.EDITABLE,
+            STEP_CONSTANTS.attributes.ERROR,
+            STEP_CONSTANTS.attributes.INDEX,
+            STEP_CONSTANTS.attributes.SELECTED,
+            STEP_CONSTANTS.attributes.ALTERNATIVE,
+            STEP_CONSTANTS.attributes.DISABLED,
+            STEP_CONSTANTS.attributes.VERTICAL,
+            STEP_CONSTANTS.attributes.EXPANDED,
+            STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case STEP_CONSTANTS.attributes.INDEX:
+                this.index = coerceNumber(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.COMPLETED:
+                this.completed = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.EDITABLE:
+                this.editable = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.ERROR:
+                this.error = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.SELECTED:
+                this.selected = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.ALTERNATIVE:
+                this.alternative = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.VERTICAL:
+                this.vertical = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.EXPANDED:
+                this.expanded = coerceBoolean(newValue);
+                break;
+            case STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION:
+                this.ignoreUserExpansion = coerceBoolean(newValue);
+                break;
+        }
+    }
+    focus() {
+        this._foundation.focus();
+    }
+    setStepTabIndex(index) {
+        this._foundation.setStepTabIndex(index);
+    }
+};
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "alternative", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "index", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "editable", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "completed", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "error", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "vertical", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "expanded", void 0);
+__decorate([
+    FoundationProperty()
+], StepComponent.prototype, "ignoreUserExpansion", void 0);
+StepComponent = __decorate([
+    CustomElement({
+        name: STEP_CONSTANTS.elementName,
+        dependencies: [
+            IconComponent
+        ]
+    })
+], StepComponent);
+export { StepComponent };

package/esm/stepper/stepper/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './stepper';
+export * from './stepper-adapter';
+export * from './stepper-constants';
+export * from './stepper-foundation';
+export declare function defineStepperComponent(): void;

package/esm/stepper/stepper/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { StepperComponent } from './stepper';
+export * from './stepper';
+export * from './stepper-adapter';
+export * from './stepper-constants';
+export * from './stepper-foundation';
+export function defineStepperComponent() {
+    defineCustomElement(StepperComponent);
+}

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base';
+import { IStepComponent } from '../step/step';
+import { IStepperComponent } from './stepper';
+import { StepperLayoutAlign, StepperLayoutMode } from './stepper-constants';
+export interface IStepperAdapter extends IBaseAdapter {
+    initializeAccessibility(): void;
+    toggleDisabled(disabled: boolean): void;
+    patchSafari(): void;
+    getFocusedOrSelectedStep(): IStepComponent;
+    applyConfiguredSteps(steps: IStepComponent[]): void;
+    setLinearState(linear: boolean): void;
+    setLayoutAlign(layoutAlign: StepperLayoutAlign): void;
+    setLayoutMode(layoutMode: StepperLayoutMode): void;
+    setAlternativeState(alternative: boolean): void;
+    setVertical(vertical: boolean): void;
+    assignIndices(): void;
+    addRootListener(event: string, listener: EventListener): void;
+    removeRootListener(event: string, listener: EventListener): void;
+    setSelected(step: IStepComponent): void;
+    setSelectedByIndex(index: number): void;
+    assignFirstLastStep(): void;
+    getStep(index: number): IStepComponent;
+    getLastStep(): IStepComponent;
+    addSlotChangeListener(listener: EventListener): void;
+    removeSlotChangeListener(listener: EventListener): void;
+    toggleRootClass(className: string, show: boolean): void;
+    isStepperFocused(): boolean;
+    setStepsListener(event: string, listener: EventListener): void;
+    removeStepsListener(event: string, listener: EventListener): void;
+}
+export declare class StepperAdapter extends BaseAdapter<IStepperComponent> implements IStepperAdapter {
+    private _rootElement;
+    private _slotElement;
+    constructor(component: IStepperComponent);
+    initializeAccessibility(): void;
+    patchSafari(): void;
+    addSlotChangeListener(listener: EventListener): void;
+    removeSlotChangeListener(listener: EventListener): void;
+    getLastStep(): IStepComponent;
+    setSelected(step: IStepComponent): void;
+    assignIndices(): void;
+    assignFirstLastStep(): void;
+    setLayoutAlign(layoutAlign: StepperLayoutAlign): void;
+    setLayoutMode(layoutMode: StepperLayoutMode): void;
+    setAlternativeState(alternative: boolean): void;
+    setVertical(vertical: boolean): void;
+    setLinearState(linear: boolean): void;
+    removeRootListener(event: string, listener: EventListener): void;
+    addRootListener(event: string, listener: EventListener): void;
+    setSelectedByIndex(index: number): void;
+    applyConfiguredSteps(steps: IStepComponent[]): void;
+    tryGetFocusedStep(): IStepComponent | undefined;
+    getFocusedOrSelectedStep(): IStepComponent;
+    getStep(index: number): IStepComponent;
+    toggleDisabled(disabled: boolean): void;
+    toggleRootClass(className: string, show: boolean): void;
+    isStepperFocused(): boolean;
+    setStepsListener(event: string, listener: EventListener): void;
+    removeStepsListener(event: string, listener: EventListener): void;
+    private _applyToSteps;
+    private _getSteps;
+}