@tylertech/forge 2.0.0

package/esm/tabs/tab-bar/tab-bar-foundation.js

@@ -0,0 +1,385 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { Platform, isNumber } from '@tylertech/forge-core';
+import { TAB_BAR_CONSTANTS, ACCEPTABLE_KEYS, KEYCODE_MAP } from './tab-bar-constants';
+import { TAB_CONSTANTS } from '../tab/tab-constants';
+export class TabBarFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._isInitialized = false;
+        this._activeTab = -1;
+        this._layoutMode = 'fixed';
+        this._layoutAlign = 'start';
+        this._underline = false;
+        this._autoActivate = false;
+        this._stacked = false;
+        this._scrollButtons = true;
+        this._forceScrollButtons = false;
+        this._tabsChangedListener = evt => this._onTabsChanged(evt);
+        this._tabInteractedListener = evt => this._onTabInteracted(evt);
+        this._keydownListener = evt => this._onKeydown(evt);
+        this._scrollPrevClickListener = evt => this._onScrollPrevious(evt);
+        this._scrollPrevMousedownListener = evt => evt.preventDefault();
+        this._scrollNextClickListener = evt => this._onScrollNext(evt);
+        this._scrollNextMousedownListener = evt => evt.preventDefault();
+        this._scrollListener = evt => this._onScroll(evt);
+    }
+    initialize() {
+        this._adapter.initializeTabs(this._activeTab, this._isFixed);
+        this._adapter.initializeTabScroller();
+        this._adapter.initializeAccessibility();
+        this._adapter.addTabChangeListener(this._tabsChangedListener);
+        this._adapter.addScrollPreviousListener('click', this._scrollPrevClickListener);
+        this._adapter.addScrollPreviousListener('mousedown', this._scrollPrevMousedownListener);
+        this._adapter.addScrollNextListener('click', this._scrollNextClickListener);
+        this._adapter.addScrollNextListener('mousedown', this._scrollNextMousedownListener);
+        this._adapter.addHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+        this._adapter.addScrollListener(this._scrollListener);
+        this._adapter.setUnderline(this._underline);
+        this._adapter.setLayoutMode(this._layoutMode);
+        this._adapter.setLayoutAlign(this._layoutAlign);
+        window.requestAnimationFrame(() => {
+            this._syncScrollButtons();
+            this._adapter.ensureFocusableTab();
+        });
+        this._isInitialized = true;
+    }
+    disconnect() {
+        this._adapter.destroyTabScroller();
+        this._adapter.removeTabChangeListener(this._tabsChangedListener);
+        this._adapter.removeHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
+        this._adapter.removeHostListener('keydown', this._keydownListener);
+        this._isInitialized = false;
+    }
+    _onTabsChanged(evt) {
+        this._adapter.initializeTabs(this._activeTab, this._isFixed);
+        this._adapter.ensureFocusableTab();
+        // We need to wait a full cycle to scroll the active tab into view
+        window.setTimeout(() => {
+            window.requestAnimationFrame(() => {
+                this.scrollIntoView(this._activeTab);
+                this._syncScrollButtons();
+            });
+        });
+    }
+    _onTabInteracted(evt) {
+        const activatedTab = evt.target;
+        const activatedTabIndex = this._adapter.getTabIndex(activatedTab);
+        // Check if the event and requested tab index is valid
+        const isTabEvent = activatedTab.tagName.toLowerCase() === TAB_CONSTANTS.elementName;
+        const isValidTabIndex = activatedTabIndex !== this._activeTab && this._indexIsInRange(activatedTabIndex);
+        if (!isTabEvent || !isValidTabIndex) {
+            return;
+        }
+        // Emit the activate event
+        const activateEventData = { index: activatedTabIndex };
+        const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+        // Check if listener prevented default on the activate event, and stop now if so
+        if (!canActivate) {
+            return;
+        }
+        this.activateTab(activatedTabIndex);
+        this._adapter.focusTabAtIndex(activatedTabIndex);
+    }
+    _onKeydown(evt) {
+        const key = this._getKeyFromEvent(evt);
+        // Early exit if the event key isn't one of the keyboard navigation keys
+        if (!key) {
+            return;
+        }
+        // Prevent default behavior for movement keys, but not for activation keys, since :active is used to apply ripple
+        if (!this._isActivationKey(key)) {
+            evt.preventDefault();
+        }
+        if (this._autoActivate) {
+            if (this._isActivationKey(key)) {
+                return;
+            }
+            const index = this._determineTargetFromKey(this._activeTab, key);
+            if (this._activeTab === index) {
+                return;
+            }
+            const activateEventData = { index };
+            const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+            if (canActivate) {
+                this.activateTab(index);
+                this._adapter.focusTabAtIndex(index);
+            }
+        }
+        else {
+            const focusedTabIndex = this._adapter.getFocusedTabIndex();
+            if (focusedTabIndex === -1) {
+                return;
+            }
+            if (this._isActivationKey(key)) {
+                const activateEventData = { index: focusedTabIndex };
+                const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
+                if (canActivate) {
+                    this.activateTab(focusedTabIndex);
+                }
+            }
+            else {
+                const index = this._determineTargetFromKey(focusedTabIndex, key);
+                if (focusedTabIndex === index) {
+                    return;
+                }
+                this._adapter.focusTabAtIndex(index);
+                this.scrollIntoView(index);
+            }
+        }
+    }
+    _onScrollPrevious(evt) {
+        const scrollAmount = -this._adapter.getOffsetWidth();
+        this._adapter.incrementScroll(scrollAmount);
+        this._syncScrollButtons();
+    }
+    _onScrollNext(evt) {
+        const scrollAmount = this._adapter.getOffsetWidth();
+        this._adapter.incrementScroll(scrollAmount);
+        this._syncScrollButtons();
+    }
+    _onScroll(evt) {
+        this._syncScrollButtons();
+    }
+    _syncScrollButtons() {
+        const isScrollable = this._isScrollable();
+        this._adapter.setPreviousButtonVisibility(isScrollable);
+        this._adapter.setNextButtonVisibility(isScrollable);
+        if (isScrollable) {
+            this._adapter.setPreviousButtonEnabled(this._adapter.isScrolled());
+            this._adapter.setNextButtonEnabled(!this._adapter.isScrolledEnd());
+        }
+    }
+    /**
+     * Determines the index of the adjacent tab closest to either edge of the Tab Bar
+     * @param index The index of the tab
+     * @param tabDimensions The dimensions of the tab
+     * @param scrollPosition The current scroll position
+     * @param barWidth The width of the tab bar
+     */
+    _findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+        const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+        const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+        const relativeRootDelta = relativeRootLeft + relativeRootRight;
+        const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+        const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+        if (leftEdgeIsCloser) {
+            return index - 1;
+        }
+        if (rightEdgeIsCloser) {
+            return index + 1;
+        }
+        return -1;
+    }
+    /**
+     * Calculates the scroll increment that will make the tab at the given index visible
+     * @param index The index of the tab
+     * @param nextIndex The index of the next tab
+     * @param scrollPosition The current scroll position
+     * @param barWidth The width of the tab-bar
+     */
+    _calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+        const nextTabDimensions = this._adapter.getTabDimensionsAtIndex(nextIndex);
+        const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+        const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+        const leftIncrement = relativeContentRight - TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
+        const rightIncrement = relativeContentLeft + TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
+        if (nextIndex < index) {
+            return Math.min(leftIncrement, 0);
+        }
+        return Math.max(rightIncrement, 0);
+    }
+    /**
+     * Private method for determining the index of the destination tab based on what key was pressed
+     * @param origin The original index from which to determine the destination
+     * @param key The name of the key
+     */
+    _determineTargetFromKey(origin, key, nextIndex) {
+        if (origin === nextIndex) {
+            return origin;
+        }
+        const maxIndex = this._adapter.getTabCount() - 1;
+        const shouldGoToEnd = key === TAB_BAR_CONSTANTS.strings.END_KEY;
+        const shouldDecrement = key === TAB_BAR_CONSTANTS.strings.ARROW_LEFT_KEY;
+        const shouldIncrement = key === TAB_BAR_CONSTANTS.strings.ARROW_RIGHT_KEY;
+        let index = nextIndex !== undefined ? nextIndex : origin;
+        if (shouldGoToEnd) {
+            index = maxIndex;
+        }
+        else if (shouldDecrement) {
+            index -= 1;
+        }
+        else if (shouldIncrement) {
+            index += 1;
+        }
+        else {
+            index = 0;
+        }
+        if (index < 0) {
+            index = maxIndex;
+        }
+        else if (index > maxIndex) {
+            index = 0;
+        }
+        // If this tab is disabled, then we'll try again...
+        if (this._adapter.isTabDisabled(index)) {
+            return this._determineTargetFromKey(origin, key, index);
+        }
+        return index;
+    }
+    _isScrollable() {
+        return this._forceScrollButtons ||
+            (this._scrollButtons &&
+                !Platform.isMobile &&
+                !this._isFixed &&
+                this._adapter.getScrollContentWidth() > this._adapter.getOffsetWidth());
+    }
+    _getKeyFromEvent(evt) {
+        if (ACCEPTABLE_KEYS.includes(evt.key)) {
+            return evt.key;
+        }
+        return KEYCODE_MAP[evt.keyCode];
+    }
+    _isActivationKey(key) {
+        return key === TAB_BAR_CONSTANTS.strings.SPACE_KEY || key === TAB_BAR_CONSTANTS.strings.ENTER_KEY;
+    }
+    _indexIsInRange(index) {
+        return index >= 0 && index < this._adapter.getTabCount();
+    }
+    activateTab(index) {
+        if (!isNumber(index)) {
+            index = -1;
+        }
+        // If we have a currently selected tab we need to deactivate that now
+        if (this._activeTab !== -1) {
+            this._adapter.deactivateTab(this._activeTab);
+        }
+        // Activate the requested tab
+        const previousTabBounds = this._adapter.getTabBounds(this._activeTab);
+        this._adapter.activateTab(index, previousTabBounds);
+        this._adapter.syncTabIndex(index);
+        this._adapter.ensureFocusableTab();
+        this.scrollIntoView(index);
+        this._activeTab = index;
+        this._syncScrollButtons();
+        this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
+    }
+    scrollIntoView(index) {
+        if (!this._indexIsInRange(index)) {
+            return;
+        }
+        if (index === 0) {
+            return this._adapter.scrollTo(0);
+        }
+        if (index === this._adapter.getTabCount() - 1) {
+            return this._adapter.scrollTo(this._adapter.getScrollContentWidth());
+        }
+        const scrollPosition = this._adapter.getScrollPosition();
+        const barWidth = this._adapter.getOffsetWidth();
+        const tabDimensions = this._adapter.getTabDimensionsAtIndex(index);
+        const nextIndex = this._findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+        if (!this._indexIsInRange(nextIndex)) {
+            return;
+        }
+        const scrollIncrement = this._calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+        this._adapter.incrementScroll(scrollIncrement);
+    }
+    /** Gets and sets the active tab index. */
+    get activeTab() {
+        return this._activeTab;
+    }
+    set activeTab(value) {
+        if (this._activeTab !== value) {
+            if (!this._isInitialized) {
+                this._activeTab = value;
+                this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
+            }
+            else {
+                this.activateTab(value);
+            }
+        }
+    }
+    get _isFixed() {
+        return this._layoutMode === 'fixed';
+    }
+    get layoutMode() {
+        return this._layoutMode;
+    }
+    set layoutMode(value) {
+        if (this._layoutMode !== value) {
+            this._layoutMode = value;
+            this._adapter.setLayoutMode(this._layoutMode);
+            this._syncScrollButtons();
+        }
+    }
+    get layoutAlign() {
+        return this._layoutAlign;
+    }
+    set layoutAlign(value) {
+        if (this._layoutAlign !== value) {
+            this._layoutAlign = value;
+            this._adapter.setLayoutAlign(this._layoutAlign);
+        }
+    }
+    get underline() {
+        return this._underline;
+    }
+    set underline(value) {
+        if (this._underline !== value) {
+            this._underline = value;
+            this._adapter.setUnderline(this._underline);
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.UNDERLINE, this._underline);
+        }
+    }
+    get stacked() {
+        return this._stacked;
+    }
+    set stacked(value) {
+        if (this._stacked !== value) {
+            this._stacked = value;
+            this._adapter.setStacked(this._stacked);
+            if (this._stacked) {
+                this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
+            }
+            else {
+                this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
+            }
+        }
+    }
+    get scrollButtons() {
+        return this._scrollButtons;
+    }
+    set scrollButtons(value) {
+        if (this._scrollButtons !== value) {
+            this._scrollButtons = value;
+            this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS, this._scrollButtons.toString());
+            if (this._isInitialized) {
+                this._syncScrollButtons();
+            }
+        }
+    }
+    get forceScrollButtons() {
+        return this._forceScrollButtons;
+    }
+    set forceScrollButtons(value) {
+        if (this._forceScrollButtons !== value) {
+            this._forceScrollButtons = value;
+            if (this._isInitialized) {
+                this._syncScrollButtons();
+            }
+        }
+    }
+    get autoActivate() {
+        return this._autoActivate;
+    }
+    set autoActivate(value) {
+        if (this._autoActivate !== value) {
+            this._autoActivate = value;
+            this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE, this._autoActivate.toString());
+        }
+    }
+}

package/esm/tabs/tab-bar/tab-bar.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { TabBarLayoutMode, TabBarLayoutAlign, ITabBarActivateEventData } from './tab-bar-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+export interface ITabBarComponent extends IBaseComponent {
+    activeTab: number;
+    layoutMode: TabBarLayoutMode;
+    layoutAlign: TabBarLayoutAlign;
+    underline: boolean;
+    autoActivate: boolean;
+    stacked: boolean;
+    scrollButtons: boolean;
+    forceScrollButtons: boolean;
+    activateTab(index: number): void;
+    scrollTabIntoView(index: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-tab-bar': ITabBarComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-tab-bar-activate': CustomEvent<ITabBarActivateEventData>;
+    }
+}
+/**
+ * The custom element class behind the `<forge-tab-bar>` element.
+ */
+export declare class TabBarComponent extends BaseComponent implements ITabBarComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Gets and sets the active tab index. */
+    activeTab: number;
+    /** Gets/sets the layout mode that controls how the tabs are sized and rendered. */
+    layoutMode: TabBarLayoutMode;
+    /** Gets/sets the layout alignment. Only pertains to non-full width layout modes. */
+    layoutAlign: TabBarLayoutAlign;
+    /** Gets/sets whether the component displays an underline or not. Default is `false`. */
+    underline: boolean;
+    /** Gets/sets whether tabs are auto-activated when using arrow keys. Default is `true` */
+    autoActivate: boolean;
+    /** Gets/sets whether the tabs are displayed with as their stacked variant. Default is `false`. */
+    stacked: boolean;
+    /** Gets/sets whether the scroll buttons can be displayed or not. Default is `true`. The component handles visibility automatically. */
+    scrollButtons: boolean;
+    /** Gets/sets whether the scroll buttons are visible indefinitely or not. Default is `false`. */
+    forceScrollButtons: boolean;
+    /**
+     * Activates the tab at the given index.
+     * @param index The index of the tab.
+     */
+    activateTab(index: number): void;
+    /**
+     * Scrolls the tab at the given index into view.
+     * @param index The index of the tab.
+     */
+    scrollTabIntoView(index: number): void;
+}

package/esm/tabs/tab-bar/tab-bar.js

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceNumber, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight } from '@tylertech/tyler-icons/standard';
+import { TabComponent } from '../tab/tab';
+import { IconButtonComponent } from '../../icon-button';
+import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
+import { TabBarFoundation } from './tab-bar-foundation';
+import { TabBarAdapter } from './tab-bar-adapter';
+import { IconComponent, IconRegistry } from '../../icon';
+import { BaseComponent } from '../../core/base/base-component';
+const template = '<template><div class=\"forge-tab-bar\" part=\"root\"><div class=\"forge-tab-bar__scroll-prev-container\" part=\"previous-container\"><forge-icon-button part=\"previous-button\"><button type=\"button\" tabindex=\"-1\" aria-label=\"Scroll left\" id=\"scroll-prev-btn\" part=\"previous-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-button-icon\"></forge-icon></button></forge-icon-button></div><div class=\"mdc-tab-scroller\" part=\"tab-scroller\"><div class=\"mdc-tab-scroller__scroll-area\" part=\"scroll-area\"><div class=\"mdc-tab-scroller__scroll-content\" part=\"scroll-content\"><slot></slot></div></div></div><div class=\"forge-tab-bar__scroll-next-container\" part=\"next-container\"><forge-icon-button part=\"next-button\"><button type=\"button\" tabindex=\"-1\" aria-label=\"Scroll right\" id=\"scroll-next-btn\" part=\"next-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-button-icon\"></forge-icon></button></forge-icon-button></div></div></template>';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-button{--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}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::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-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.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-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.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-icon-button.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-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.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%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{-webkit-transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms -webkit-transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1);transition:250ms transform cubic-bezier(.4, 0, .2, 1),250ms -webkit-transform cubic-bezier(.4, 0, .2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:-webkit-box;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0 auto;-webkit-transform:none;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{-webkit-box-pack:start;justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.forge-tab-bar{height:48px;height:var(--forge-tab-bar-height,48px);display:-webkit-box;display:flex;position:relative}.forge-tab-bar--underlined::after{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);content:\"\";border-bottom-width:1px;border-bottom-style:solid;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;position:absolute;bottom:0;left:0;right:0}.forge-tab-bar--align-center .mdc-tab-scroller__scroll-content{-webkit-box-pack:center;justify-content:center}.forge-tab-bar--align-end .mdc-tab-scroller__scroll-content{-webkit-box-pack:end;justify-content:flex-end}.forge-tab-bar--stacked{height:72px;height:var(--forge-tab-bar-height,72px);-webkit-box-align:center;align-items:center}.forge-tab-bar--stacked .mdc-tab-scroller{height:100%}.mdc-tab-scroller{z-index:1;width:100%}.mdc-tab-scroller__scroll-area{height:100%;overflow-x:auto;scrollbar-width:none}:host{display:block;overflow:hidden}:host([hidden]){display:none}';
+/**
+ * The custom element class behind the `<forge-tab-bar>` element.
+ */
+let TabBarComponent = class TabBarComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TabBarFoundation(new TabBarAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB,
+            TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE,
+            TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN,
+            TAB_BAR_CONSTANTS.attributes.UNDERLINE,
+            TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE,
+            TAB_BAR_CONSTANTS.attributes.STACKED,
+            TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS,
+            TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB:
+                this.activeTab = coerceNumber(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.LAYOUT_MODE:
+                this.layoutMode = newValue;
+                break;
+            case TAB_BAR_CONSTANTS.attributes.LAYOUT_ALIGN:
+                this.layoutAlign = newValue;
+                break;
+            case TAB_BAR_CONSTANTS.attributes.UNDERLINE:
+                this.underline = coerceBoolean(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE:
+                this.autoActivate = coerceBoolean(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.STACKED:
+                this.stacked = coerceBoolean(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS:
+                this.scrollButtons = coerceBoolean(newValue);
+                break;
+            case TAB_BAR_CONSTANTS.attributes.FORCE_SCROLL_BUTTONS:
+                this.forceScrollButtons = coerceBoolean(newValue);
+                break;
+        }
+    }
+    /**
+     * Activates the tab at the given index.
+     * @param index The index of the tab.
+     */
+    activateTab(index) {
+        this._foundation.activateTab(index);
+    }
+    /**
+     * Scrolls the tab at the given index into view.
+     * @param index The index of the tab.
+     */
+    scrollTabIntoView(index) {
+        this._foundation.scrollIntoView(index);
+    }
+};
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "activeTab", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "layoutMode", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "layoutAlign", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "underline", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "autoActivate", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "stacked", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "scrollButtons", void 0);
+__decorate([
+    FoundationProperty()
+], TabBarComponent.prototype, "forceScrollButtons", void 0);
+TabBarComponent = __decorate([
+    CustomElement({
+        name: TAB_BAR_CONSTANTS.elementName,
+        dependencies: [
+            TabComponent,
+            IconButtonComponent,
+            IconComponent
+        ]
+    })
+], TabBarComponent);
+export { TabBarComponent };

package/esm/text-field/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './text-field-adapter';
+export * from './text-field-component-delegate';
+export * from './text-field-constants';
+export * from './text-field-foundation';
+export * from './text-field';
+export declare function defineTextFieldComponent(): void;

package/esm/text-field/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { TextFieldComponent } from './text-field';
+export * from './text-field-adapter';
+export * from './text-field-component-delegate';
+export * from './text-field-constants';
+export * from './text-field-foundation';
+export * from './text-field';
+export function defineTextFieldComponent() {
+    defineCustomElement(TextFieldComponent);
+}

package/esm/text-field/text-field-adapter.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ITextFieldComponent } from './text-field';
+import { FieldAdapter, IFieldAdapter } from '../field/field-adapter';
+export interface ITextFieldAdapter extends IFieldAdapter {
+    detectTextarea(): void;
+}
+export declare class TextFieldAdapter extends FieldAdapter implements ITextFieldAdapter {
+    protected _inputElements: Array<HTMLInputElement | HTMLTextAreaElement>;
+    protected _inputMutationObserverInstances: MutationObserver[];
+    constructor(component: ITextFieldComponent);
+    initialize(required: boolean): void;
+    destroy(): void;
+    detectTextarea(): void;
+    ensureLabelOrder(): void;
+    addInputListener(type: string, listener: (evt: Event) => void): void;
+    removeInputListener(type: string, listener: (evt: Event) => void): void;
+    setValueChangedListener(context: any, listener: (value: any) => void): void;
+    inputHasValue(): boolean;
+    hasPlaceholder(): boolean;
+    inputHasFocus(): boolean;
+    setInputClass(className: string): void;
+    removeInputClass(className: string): void;
+    setInputAttributeObserver(listener: (name: string, value: string) => void): void;
+    isDisabled(): boolean;
+    isReadonly(): boolean;
+    protected _inputsSome(action: (input: HTMLInputElement) => boolean): boolean;
+    protected _applyToInputs(action: (input: HTMLInputElement, index: number) => void): void;
+    protected _handleMultiInputs(): void;
+    private _createSeperatorElement;
+}