@tylertech/forge 2.0.0

package/esm/slider/slider-constants.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}slider`;
+const attributes = {
+    TYPE: 'type',
+    VALUE: 'value',
+    VALUE_START: 'value-start',
+    MIN: 'min',
+    MAX: 'max',
+    STEP: 'step',
+    DISABLED: 'disabled',
+    COLOR: 'color'
+};
+const selectors = {
+    ROOT: '.mdc-slider',
+    THUMB: '.mdc-slider__thumb[part=thumb],.mdc-slider__thumb[part=\'thumb-end\']',
+    THUMB_START: '.mdc-slider__thumb[part=\'thumb-start\']',
+    VALUE_INPUT: 'input[id=\'value-input\']',
+    VALUE_INPUT_START: 'input[id=\'value-input-start\']',
+    TRACK_CONTAINER: '.mdc-slider__track-container',
+    TRACK_ACTIVE_FILL: '.mdc-slider__track--active_fill'
+};
+const events = {
+    MDC_INPUT: 'MDCSlider:input',
+    MDC_CHANGE: 'MDCSlider:change',
+    FORGE_INPUT: 'forge-slider-input',
+    FORGE_CHANGE: 'forge-slider-change'
+};
+export const SLIDER_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    events
+};

package/esm/slider/slider.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { SliderType, ISliderChangeEventData, ISliderInputEventData } from './slider-constants';
+export interface ISliderComponent extends IBaseComponent {
+    type: SliderType;
+    value: number;
+    valueStart: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-slider': ISliderComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-slider-input': CustomEvent<ISliderInputEventData>;
+        'forge-slider-change': CustomEvent<ISliderChangeEventData>;
+    }
+}
+/**
+ * The custom element class behind the `<forge-slider>` component.
+ */
+export declare class SliderComponent extends BaseComponent implements ISliderComponent {
+    static get observedAttributes(): string[];
+    private _mdcSlider;
+    private _type;
+    private _value;
+    private _valueStart;
+    private _min;
+    private _max;
+    private _step;
+    private _disabled;
+    private _mdcSliderUpdateListener;
+    private _rootElement;
+    private _inputElement;
+    private _inputElementStart;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _setTemplate;
+    private _initializeTemplate;
+    private _initialize;
+    private _onSliderUpdate;
+    private _syncToSlider;
+    private _syncFromSlider;
+    private _applyMin;
+    private _applyMax;
+    private _applyStep;
+    private get _isRangeSlider();
+    /**
+     * Gets/sets the type of slider this is: `continuous` (default), `discrete`, `discrete-markers`
+     */
+    get type(): SliderType;
+    set type(value: SliderType);
+    /**
+     * Gets/sets the value of the slider.
+     */
+    get value(): number;
+    set value(value: number);
+    /**
+     * Gets/sets the start value of the slider (only applicable for range sliders).
+     */
+    get valueStart(): number;
+    set valueStart(value: number);
+    /**
+     * Gets/sets the minimum value for the slider.
+     */
+    get min(): number;
+    set min(value: number);
+    /**
+     * Gets/sets the maximum value for the slider.
+     */
+    get max(): number;
+    set max(value: number);
+    /**
+     * Gets/sets the step value for the slider when in discrete mode.
+     */
+    get step(): number;
+    set step(value: number);
+    /**
+     * Gets/sets the disabled state of the slider.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}

package/esm/slider/slider.js

@@ -0,0 +1,298 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { MDCSlider } from '@material/slider';
+import { CustomElement, coerceBoolean, coerceNumber, emitEvent, attachShadowTemplate, getShadowElement, isDefined, replaceShadowTemplate } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { SLIDER_CONSTANTS } from './slider-constants';
+const continuousTemplate = '<template><div class=\"mdc-slider\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
+const continuousRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
+const discreteTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
+const discreteMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" step=\"10\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
+const discreteRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
+const discreteRangeMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></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-slider__thumb{--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}.mdc-slider__thumb::after,.mdc-slider__thumb::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-slider__thumb::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-slider__thumb::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.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-slider__thumb.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-slider__thumb.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-slider__thumb.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-slider__thumb::after,.mdc-slider__thumb::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded::after,.mdc-slider__thumb.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-slider__thumb.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb::after,.mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:-webkit-box;display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left,50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-container-transform,translateX(-50%));transform:var(--slider-value-indicator-container-transform,translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1),-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);-webkit-box-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:flex;height:32px;padding:0 12px;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom;transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left,50%);position:absolute;right:var(--slider-value-indicator-caret-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-caret-transform,translateX(-50%));transform:var(--slider-value-indicator-caret-transform,translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1),-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:scale(1);transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{-webkit-transition:none;transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:-webkit-box;display:flex;height:48px;left:-24px;outline:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;-webkit-box-sizing:content-box;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:10px solid;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mdc-slider .mdc-slider__thumb-knob{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb::after,.mdc-slider .mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider .mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__tick-marks{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;-webkit-box-pack:justify;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:-webkit-transform 80ms ease;transition:-webkit-transform 80ms ease;transition:transform 80ms ease;transition:transform 80ms ease,-webkit-transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:none;transition:none}}.mdc-slider--disabled{opacity:.38;cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}:host{display:block}:host([hidden]){display:none}.mdc-slider.mdc-slider--disabled{cursor:not-allowed}.mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-theme-on-surface)}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-theme-on-surface)}';
+/**
+ * The custom element class behind the `<forge-slider>` component.
+ */
+let SliderComponent = class SliderComponent extends BaseComponent {
+    constructor() {
+        super();
+        // State
+        this._type = 'continuous';
+        this._value = 0;
+        this._valueStart = 0;
+        this._min = 0;
+        this._max = 100;
+        this._step = 0;
+        this._disabled = false;
+        this._mdcSliderUpdateListener = evt => this._onSliderUpdate(evt);
+    }
+    static get observedAttributes() {
+        return [
+            SLIDER_CONSTANTS.attributes.TYPE,
+            SLIDER_CONSTANTS.attributes.VALUE,
+            SLIDER_CONSTANTS.attributes.VALUE_START,
+            SLIDER_CONSTANTS.attributes.MAX,
+            SLIDER_CONSTANTS.attributes.MIN,
+            SLIDER_CONSTANTS.attributes.STEP,
+            SLIDER_CONSTANTS.attributes.DISABLED
+        ];
+    }
+    connectedCallback() {
+        this._initialize();
+    }
+    disconnectedCallback() {
+        if (this._mdcSlider) {
+            this._mdcSlider.destroy();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SLIDER_CONSTANTS.attributes.TYPE:
+                this.type = newValue;
+                break;
+            case SLIDER_CONSTANTS.attributes.VALUE:
+                this.value = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.VALUE_START:
+                this.valueStart = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.MIN:
+                this.min = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.MAX:
+                this.max = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.STEP:
+                this.step = coerceNumber(newValue);
+                break;
+            case SLIDER_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+        }
+    }
+    _setTemplate(template) {
+        if (this.shadowRoot) {
+            replaceShadowTemplate(this, template, styles);
+        }
+        else {
+            attachShadowTemplate(this, template, styles);
+        }
+    }
+    _initializeTemplate() {
+        switch (this._type) {
+            case 'continuous':
+                this._setTemplate(continuousTemplate);
+                break;
+            case 'continuous-range':
+                this._setTemplate(continuousRangeTemplate);
+                break;
+            case 'discrete':
+                this._setTemplate(discreteTemplate);
+                break;
+            case 'discrete-markers':
+                this._setTemplate(discreteMarkersTemplate);
+                break;
+            case 'discrete-range':
+                this._setTemplate(discreteRangeTemplate);
+                break;
+            case 'discrete-range-markers':
+                this._setTemplate(discreteRangeMarkersTemplate);
+                break;
+            default:
+                throw new Error(`Invalid slider type provided: ${this._type}. Must be one of "continuous", "continuous-range", "discrete", "discrete-markers", "discrete-range", "discrete-range-markers".`);
+        }
+    }
+    _initialize() {
+        this._initializeTemplate();
+        this._rootElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.ROOT);
+        this._inputElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT);
+        this._inputElementStart = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT_START);
+        // We need to initialize MDCSlider in the next cycle after our template has been placed in the DOM
+        window.setTimeout(() => {
+            if (!this._rootElement) {
+                return;
+            }
+            if (this._mdcSlider) {
+                this._mdcSlider.destroy();
+            }
+            this._mdcSlider = new MDCSlider(this._rootElement);
+            this._syncToSlider();
+            this._mdcSlider.initialize();
+            this._rootElement.addEventListener(SLIDER_CONSTANTS.events.MDC_INPUT, this._mdcSliderUpdateListener);
+            this._rootElement.addEventListener(SLIDER_CONSTANTS.events.MDC_CHANGE, this._mdcSliderUpdateListener);
+        });
+    }
+    _onSliderUpdate(evt) {
+        evt.stopPropagation();
+        this._syncFromSlider();
+        const data = this._isRangeSlider ? { valueStart: this._valueStart, valueEnd: this._value } : { value: this._value };
+        const type = evt.type === SLIDER_CONSTANTS.events.MDC_CHANGE ? SLIDER_CONSTANTS.events.FORGE_CHANGE : SLIDER_CONSTANTS.events.FORGE_INPUT;
+        emitEvent(this, type, data);
+    }
+    _syncToSlider() {
+        this._mdcSlider.setValue(this._value);
+        if (this._isRangeSlider) {
+            this._mdcSlider.setValueStart(this._valueStart);
+        }
+        this._applyMin(this._min);
+        this._applyMax(this._max);
+        this._applyStep(this._step);
+        this._mdcSlider.setDisabled(this._disabled);
+    }
+    _syncFromSlider() {
+        this._value = this._mdcSlider.getValue();
+        if (this._isRangeSlider) {
+            this._valueStart = this._mdcSlider.getValueStart();
+        }
+        this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, this._value.toString());
+    }
+    _applyMin(min) {
+        var _a;
+        if (this._inputElement) {
+            this._inputElement.min = `${min}`;
+        }
+        if (this._inputElementStart) {
+            this._inputElementStart.min = `${min}`;
+        }
+        (_a = this._mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    }
+    _applyMax(max) {
+        var _a;
+        if (this._inputElement) {
+            this._inputElement.max = `${max}`;
+        }
+        if (this._inputElementStart) {
+            this._inputElementStart.max = `${max}`;
+        }
+        (_a = this._mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    }
+    _applyStep(step) {
+        var _a;
+        if (this._inputElement) {
+            this._inputElement.step = `${step}`;
+        }
+        if (this._inputElementStart) {
+            this._inputElementStart.step = `${step}`;
+        }
+        (_a = this._mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    }
+    get _isRangeSlider() {
+        return this._type.includes('range');
+    }
+    /**
+     * Gets/sets the type of slider this is: `continuous` (default), `discrete`, `discrete-markers`
+     */
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        this._type = value;
+        if (this.isConnected) {
+            this._initialize();
+        }
+    }
+    /**
+     * Gets/sets the value of the slider.
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            if (isNaN(value) || typeof value !== 'number') {
+                value = 0;
+            }
+            this._value = value;
+            if (this._mdcSlider) {
+                this._mdcSlider.setValue(value);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, isDefined(this._value) ? this._value.toString() : '');
+        }
+    }
+    /**
+     * Gets/sets the start value of the slider (only applicable for range sliders).
+     */
+    get valueStart() {
+        return this._valueStart;
+    }
+    set valueStart(value) {
+        if (this._valueStart !== value) {
+            this._valueStart = value;
+            if (this._mdcSlider) {
+                this._mdcSlider.setValueStart(value);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE_START, isDefined(this._valueStart) ? this._valueStart.toString() : '');
+        }
+    }
+    /**
+     * Gets/sets the minimum value for the slider.
+     */
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        if (this._min !== value) {
+            this._min = value;
+            if (this._mdcSlider) {
+                this._applyMin(this._min);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.MIN, isDefined(this._min) ? this._min.toString() : '');
+        }
+    }
+    /**
+     * Gets/sets the maximum value for the slider.
+     */
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        if (this._max !== value) {
+            this._max = value;
+            if (this._mdcSlider) {
+                this._applyMax(this._max);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.MAX, isDefined(this._max) ? this._max.toString() : '');
+        }
+    }
+    /**
+     * Gets/sets the step value for the slider when in discrete mode.
+     */
+    get step() {
+        return this._step;
+    }
+    set step(value) {
+        if (this._step !== value) {
+            this._step = value;
+            if (this._mdcSlider) {
+                this._applyStep(this._step);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.STEP, isDefined(this._step) ? this._step.toString() : '');
+        }
+    }
+    /**
+     * Gets/sets the disabled state of the slider.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            if (this._mdcSlider) {
+                this._mdcSlider.setDisabled(value);
+            }
+            this.setAttribute(SLIDER_CONSTANTS.attributes.DISABLED, isDefined(this._disabled) ? this._disabled.toString() : '');
+        }
+    }
+};
+SliderComponent = __decorate([
+    CustomElement({
+        name: SLIDER_CONSTANTS.elementName
+    })
+], SliderComponent);
+export { SliderComponent };

package/esm/stepper/core/stepper-utils.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IStepComponent } from '../step';
+import { IStepConfiguration, IStepperConfiguration, StepperLayoutAlign, StepperLayoutMode } from '../stepper/stepper-constants';
+export declare class StepperUtils {
+    /**
+     * Creates a step element using the provided configuration.
+     * @param {IStepConfiguration} step The step configuration
+     * @param {number} index The index of the step.
+     * @param {number} activeStepIndex The currently active step index.
+     * @param {boolean} linear Whether the stepper is in linear mode or not.
+     */
+    static createStepElement(step: IStepConfiguration, index: number, stepperConfig: IStepperConfiguration): IStepComponent;
+    /**
+     * Creates the step label element using the provided configuration.
+     * @param {IStepConfiguration} step The step configuration.
+     */
+    static createStepOptionalLabel(labelText: string): HTMLElement;
+    /**
+     * Sets the stepper to the provided linear state.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {boolean} isLinear Whether the stepper is in linear mode or not.
+     */
+    static setLinearState(stepperElement: HTMLElement, isLinear: boolean): void;
+    /**
+     * Sets the stepper to the provided label state.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {boolean} isAlternative Whether the stepper is in alternative mode or not.
+     */
+    static setAlternativeState(stepperElement: HTMLElement, isAlternative: boolean): void;
+    /**
+     * Sets the stepper layout mode.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {StepperLayoutMode} mode The layout mode.
+     */
+    static setLayoutMode(stepperElement: HTMLElement, mode: StepperLayoutMode): void;
+    /**
+     * Sets the stepper layout alignment.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {StepperLayoutAlign} mode The layout alignment.
+     */
+    static setLayoutAlign(stepperElement: HTMLElement, mode: StepperLayoutAlign): void;
+    /**
+     * Creates a stepper with all of its step elements.
+     * @param {IStepperConfiguration} stepperConfiguration The stepper configuration.
+     */
+    static createSteps(stepperConfiguration: IStepperConfiguration): IStepComponent[];
+}

package/esm/stepper/core/stepper-utils.js

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { STEP_CONSTANTS } from '../step';
+import { STEPPER_CONSTANTS } from '../stepper/stepper-constants';
+export class StepperUtils {
+    /**
+     * Creates a step element using the provided configuration.
+     * @param {IStepConfiguration} step The step configuration
+     * @param {number} index The index of the step.
+     * @param {number} activeStepIndex The currently active step index.
+     * @param {boolean} linear Whether the stepper is in linear mode or not.
+     */
+    static createStepElement(step, index, stepperConfig) {
+        const stepElement = document.createElement(STEP_CONSTANTS.elementName);
+        stepElement.index = index;
+        stepElement.completed = step.completed || false;
+        stepElement.editable = step.editable || false;
+        stepElement.selected = stepperConfig.selectedIndex === index;
+        stepElement.alternative = stepperConfig.alternative;
+        stepElement.error = step.error || false;
+        stepElement.disabled = step.disabled || false;
+        stepElement.vertical = step.vertical || false;
+        stepElement.ignoreUserExpansion = step.ignoreUserExpansion || false;
+        stepElement.expanded = step.expanded || false;
+        if (stepperConfig.linear && index > stepperConfig.selectedIndex) {
+            stepElement.tabIndex = -1;
+        }
+        stepElement.textContent = step.label;
+        if (step.optionalLabel) {
+            stepElement.appendChild(this.createStepOptionalLabel(step.optionalLabel));
+        }
+        return stepElement;
+    }
+    /**
+     * Creates the step label element using the provided configuration.
+     * @param {IStepConfiguration} step The step configuration.
+     */
+    static createStepOptionalLabel(labelText) {
+        const label = document.createElement('span');
+        label.slot = 'optional';
+        label.textContent = labelText || '';
+        return label;
+    }
+    /**
+     * Sets the stepper to the provided linear state.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {boolean} isLinear Whether the stepper is in linear mode or not.
+     */
+    static setLinearState(stepperElement, isLinear) {
+        let hasLinearClass = stepperElement.classList.contains(STEPPER_CONSTANTS.classes.LINEAR);
+        if (hasLinearClass && !isLinear) {
+            stepperElement.classList.remove(STEPPER_CONSTANTS.classes.LINEAR);
+            hasLinearClass = false;
+        }
+        if (!hasLinearClass && isLinear) {
+            stepperElement.classList.add(STEPPER_CONSTANTS.classes.LINEAR);
+        }
+    }
+    /**
+     * Sets the stepper to the provided label state.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {boolean} isAlternative Whether the stepper is in alternative mode or not.
+     */
+    static setAlternativeState(stepperElement, isAlternative) {
+        let hasAlternativeClass = stepperElement.classList.contains(STEPPER_CONSTANTS.classes.ALTERNATIVE);
+        if (hasAlternativeClass && !isAlternative) {
+            stepperElement.classList.remove(STEPPER_CONSTANTS.classes.ALTERNATIVE);
+            hasAlternativeClass = false;
+        }
+        if (!hasAlternativeClass && isAlternative) {
+            stepperElement.classList.add(STEPPER_CONSTANTS.classes.ALTERNATIVE);
+        }
+    }
+    /**
+     * Sets the stepper layout mode.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {StepperLayoutMode} mode The layout mode.
+     */
+    static setLayoutMode(stepperElement, mode) {
+        switch (mode) {
+            case 'clustered':
+                if (stepperElement.classList.contains(STEPPER_CONSTANTS.classes.FIXED)) {
+                    stepperElement.classList.remove(STEPPER_CONSTANTS.classes.FIXED);
+                }
+                stepperElement.classList.add(STEPPER_CONSTANTS.classes.CLUSTERED);
+                break;
+            case 'fixed':
+                if (stepperElement.classList.contains(STEPPER_CONSTANTS.classes.CLUSTERED)) {
+                    stepperElement.classList.remove(STEPPER_CONSTANTS.classes.CLUSTERED);
+                }
+                stepperElement.classList.add(STEPPER_CONSTANTS.classes.FIXED);
+                break;
+        }
+    }
+    /**
+     * Sets the stepper layout alignment.
+     * @param {HTMLElement} stepperElement The stepper element.
+     * @param {StepperLayoutAlign} mode The layout alignment.
+     */
+    static setLayoutAlign(stepperElement, mode) {
+        if (stepperElement.classList.contains(STEPPER_CONSTANTS.classes.ALIGN_LEFT)) {
+            stepperElement.classList.remove(STEPPER_CONSTANTS.classes.ALIGN_LEFT);
+        }
+        if (stepperElement.classList.contains(STEPPER_CONSTANTS.classes.ALIGN_CENTER)) {
+            stepperElement.classList.remove(STEPPER_CONSTANTS.classes.ALIGN_CENTER);
+        }
+        if (stepperElement.classList.contains(STEPPER_CONSTANTS.classes.ALIGN_RIGHT)) {
+            stepperElement.classList.remove(STEPPER_CONSTANTS.classes.ALIGN_RIGHT);
+        }
+        switch (mode) {
+            case 'left':
+                stepperElement.classList.add(STEPPER_CONSTANTS.classes.ALIGN_LEFT);
+                break;
+            case 'center':
+                stepperElement.classList.add(STEPPER_CONSTANTS.classes.ALIGN_CENTER);
+                break;
+            case 'right':
+                stepperElement.classList.add(STEPPER_CONSTANTS.classes.ALIGN_RIGHT);
+                break;
+        }
+    }
+    /**
+     * Creates a stepper with all of its step elements.
+     * @param {IStepperConfiguration} stepperConfiguration The stepper configuration.
+     */
+    static createSteps(stepperConfiguration) {
+        const steps = [];
+        stepperConfiguration.steps.forEach((step, index) => {
+            const stepElement = StepperUtils.createStepElement(step, index, stepperConfiguration);
+            steps.push(stepElement);
+        });
+        steps[0].setAttribute(STEP_CONSTANTS.attributes.FIRST, '');
+        steps[steps.length - 1].setAttribute(STEP_CONSTANTS.attributes.LAST, '');
+        return steps;
+    }
+}

package/esm/stepper/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './step';
+export * from './stepper';