@tylertech/forge 2.0.0

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseAdapter, BaseAdapter } from '../../core/base/base-adapter';
+import { ITabComponent } from './tab';
+export interface ITabAdapter extends IBaseAdapter {
+    initialize(): void;
+    initializeIndicator(): void;
+    destroyIndicator(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
+    deactivateIndicator(): void;
+    initializeRipple(): void;
+    destroyRipple(): void;
+    addButtonListener(type: string, listener: (evt: Event) => void): void;
+    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    setDisabled(value: boolean): void;
+    setActive(value: boolean): void;
+    getOffsetLeft(): number;
+    getOffsetWidth(): number;
+    getContentOffsetLeft(): number;
+    getContentOffsetWidth(): number;
+    focus(): void;
+    setTabIndex(value: number): void;
+}
+export declare class TabAdapter extends BaseAdapter<ITabComponent> implements ITabAdapter {
+    private _buttonElement;
+    private _content;
+    private _rippleElement;
+    private _rippleInstance;
+    private _tabIndicatorElement;
+    private _tabIndicator;
+    constructor(component: ITabComponent);
+    initialize(): void;
+    initializeRipple(): void;
+    destroyRipple(): void;
+    initializeIndicator(): void;
+    destroyIndicator(): void;
+    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
+    deactivateIndicator(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    addButtonListener(type: string, listener: (evt: Event) => void): void;
+    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    setDisabled(value: boolean): void;
+    setActive(value: boolean): void;
+    getOffsetLeft(): number;
+    getOffsetWidth(): number;
+    getContentOffsetLeft(): number;
+    getContentOffsetWidth(): number;
+    focus(): void;
+    setTabIndex(value: number): void;
+}

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

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleClass } from '@tylertech/forge-core';
+import { MDCTabIndicator } from '@material/tab-indicator';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { TAB_CONSTANTS } from './tab-constants';
+import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
+class TabRippleSurface {
+    constructor(_root) {
+        this._root = _root;
+    }
+    get root() {
+        return this._root;
+    }
+    get unbounded() {
+        return false;
+    }
+    get disabled() {
+        return this._root.disabled;
+    }
+}
+export class TabAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._buttonElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.BUTTON);
+        this._content = getShadowElement(this._component, TAB_CONSTANTS.selectors.CONTENT);
+        this._rippleElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.RIPPLE);
+        this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
+    }
+    initialize() {
+        this._component.setAttribute('role', 'tab');
+    }
+    initializeRipple() {
+        const rippleCapableSurface = new TabRippleSurface(this._buttonElement);
+        const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(rippleCapableSurface)), { addClass: (className) => this._rippleElement.classList.add(className), removeClass: (className) => this._rippleElement.classList.remove(className), updateCssVariable: (varName, value) => this._rippleElement.style.setProperty(varName, value) });
+        const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
+        this._rippleInstance = new ForgeRipple(this._buttonElement, rippleFoundation);
+    }
+    destroyRipple() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+        }
+    }
+    initializeIndicator() {
+        this._tabIndicator = new MDCTabIndicator(this._tabIndicatorElement);
+    }
+    destroyIndicator() {
+        if (this._tabIndicator) {
+            this._tabIndicator.destroy();
+            this._tabIndicator = undefined;
+        }
+    }
+    activateIndicator(previousIndicatorClientRect) {
+        if (this._tabIndicator) {
+            this._tabIndicator.activate(previousIndicatorClientRect);
+        }
+    }
+    deactivateIndicator() {
+        if (this._tabIndicator) {
+            this._tabIndicator.deactivate();
+        }
+    }
+    computeIndicatorBounds() {
+        return this._tabIndicator ? this._tabIndicator.computeContentClientRect() : undefined;
+    }
+    addButtonListener(type, listener) {
+        this._buttonElement.addEventListener(type, listener);
+    }
+    removeButtonListener(type, listener) {
+        this._buttonElement.removeEventListener(type, listener);
+    }
+    setDisabled(value) {
+        this._buttonElement.disabled = value;
+        this.setTabIndex(!value ? 0 : -1);
+        this._component.setAttribute('aria-disabled', value.toString());
+    }
+    setActive(value) {
+        toggleClass(this._buttonElement, value, TAB_CONSTANTS.classes.ACTIVE);
+        this.setTabIndex(value ? 0 : -1);
+        this._component.setAttribute('aria-selected', value.toString());
+    }
+    getOffsetLeft() {
+        return this._buttonElement.offsetLeft;
+    }
+    getOffsetWidth() {
+        return this._buttonElement.offsetWidth;
+    }
+    getContentOffsetLeft() {
+        return this._content.offsetLeft;
+    }
+    getContentOffsetWidth() {
+        return this._content.offsetWidth;
+    }
+    focus() {
+        this._buttonElement.focus();
+    }
+    setTabIndex(value) {
+        this._buttonElement.tabIndex = value;
+    }
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const TAB_CONSTANTS: {
+    elementName: "forge-tab";
+    attributes: {
+        DISABLED: string;
+        ACTIVE: string;
+        STRETCH: string;
+    };
+    selectors: {
+        BUTTON: string;
+        RIPPLE: string;
+        INDICATOR: string;
+        CONTENT: string;
+        DEFAULT_SLOT: string;
+    };
+    classes: {
+        ACTIVE: string;
+    };
+    events: {
+        INTERACTED: string;
+    };
+};
+export interface ITabDimensions {
+    rootLeft: number;
+    rootRight: number;
+    contentLeft: number;
+    contentRight: number;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}tab`;
+const attributes = {
+    DISABLED: 'disabled',
+    ACTIVE: 'active',
+    STRETCH: 'stretch'
+};
+const selectors = {
+    BUTTON: 'button.forge-tab',
+    RIPPLE: '.forge-tab__ripple',
+    INDICATOR: '.mdc-tab-indicator',
+    CONTENT: '.forge-tab__content',
+    DEFAULT_SLOT: 'slot:not([name])'
+};
+const classes = {
+    ACTIVE: 'forge-tab--active'
+};
+const events = {
+    INTERACTED: `${elementName}-interacted`
+};
+export const TAB_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    classes,
+    events
+};

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ITabAdapter } from './tab-adapter';
+import { ITabDimensions } from './tab-constants';
+export interface ITabFoundation extends ICustomElementFoundation {
+    disabled: boolean;
+    active: boolean;
+    stretch: boolean;
+    activate(previousIndicatorClientRect?: DOMRect): void;
+    deactivate(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    computeDimensions(): ITabDimensions;
+    focus(): void;
+    setTabIndex(value: number): void;
+}
+export declare class TabFoundation implements ITabFoundation {
+    private _adapter;
+    private _disabled;
+    private _active;
+    private _stretch;
+    private _clickListener;
+    constructor(_adapter: ITabAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _onClick;
+    private _setActive;
+    activate(previousIndicatorClientRect?: DOMRect): void;
+    deactivate(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    computeDimensions(): ITabDimensions;
+    focus(): void;
+    setTabIndex(value: number): void;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get active(): boolean;
+    set active(value: boolean);
+    get stretch(): boolean;
+    set stretch(value: boolean);
+}

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

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { TAB_CONSTANTS } from './tab-constants';
+export class TabFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._disabled = false;
+        this._active = false;
+        this._stretch = false;
+        this._clickListener = (evt) => this._onClick(evt);
+    }
+    initialize() {
+        this._adapter.initialize();
+        this._adapter.initializeRipple();
+        this._adapter.initializeIndicator();
+        this._adapter.setDisabled(this._disabled);
+        this._setActive(this._active);
+        this._adapter.addButtonListener('click', this._clickListener);
+    }
+    disconnect() {
+        this._adapter.destroyRipple();
+        this._adapter.destroyIndicator();
+        this._adapter.removeButtonListener('click', this._clickListener);
+    }
+    _onClick(evt) {
+        if (!this._active) {
+            this._adapter.emitHostEvent(TAB_CONSTANTS.events.INTERACTED, undefined, true);
+        }
+    }
+    _setActive(isActive, previousIndicatorClientRect) {
+        this._active = isActive;
+        this._adapter.setActive(this._active);
+        if (this._active) {
+            this._adapter.activateIndicator(previousIndicatorClientRect);
+        }
+        else {
+            this._adapter.deactivateIndicator();
+        }
+    }
+    activate(previousIndicatorClientRect) {
+        this._setActive(true, previousIndicatorClientRect);
+    }
+    deactivate() {
+        this._setActive(false);
+    }
+    computeIndicatorBounds() {
+        return this._adapter.computeIndicatorBounds();
+    }
+    computeDimensions() {
+        const rootWidth = this._adapter.getOffsetWidth();
+        const rootLeft = this._adapter.getOffsetLeft();
+        const contentWidth = this._adapter.getContentOffsetWidth();
+        const contentLeft = this._adapter.getContentOffsetLeft();
+        return {
+            contentLeft: rootLeft + contentLeft,
+            contentRight: rootLeft + contentLeft + contentWidth,
+            rootLeft,
+            rootRight: rootLeft + rootWidth
+        };
+    }
+    focus() {
+        this._adapter.focus();
+    }
+    setTabIndex(value) {
+        this._adapter.setTabIndex(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        if (this._active !== value) {
+            this._setActive(value);
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.ACTIVE, this._active);
+        }
+    }
+    get stretch() {
+        return this._stretch;
+    }
+    set stretch(value) {
+        if (this._stretch !== value) {
+            this._stretch = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.STRETCH, this._stretch);
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ITabDimensions } from './tab-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+export interface ITabComponent extends IBaseComponent {
+    disabled: boolean;
+    active: boolean;
+    stretch: boolean;
+    activate(previousIndicatorClientRect?: DOMRect): void;
+    deactivate(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    computeDimensions(): ITabDimensions;
+    setTabIndex(value: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-tab': ITabComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-tab-interacted': CustomEvent<void>;
+    }
+}
+export declare class TabComponent extends BaseComponent implements ITabComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    disabled: boolean;
+    active: boolean;
+    stretch: boolean;
+    activate(previousIndicatorClientRect?: DOMRect): void;
+    deactivate(): void;
+    computeIndicatorBounds(): DOMRect | undefined;
+    computeDimensions(): ITabDimensions;
+    focus(): void;
+    setTabIndex(value: number): void;
+}

package/esm/tabs/tab/tab.js

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { TabAdapter } from './tab-adapter';
+import { TabFoundation } from './tab-foundation';
+import { TAB_CONSTANTS } from './tab-constants';
+import { BaseComponent } from '../../core/base/base-component';
+const template = '<template><button class=\"forge-tab\" type=\"button\" part=\"button\"><slot name=\"top\"></slot><span class=\"forge-tab__content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"forge-tab__text\" part=\"text\"><slot></slot></span><slot name=\"trailing\"></slot></span><span class=\"mdc-tab-indicator\" part=\"indicator-container\"><span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" part=\"indicator\"></span> </span><span class=\"forge-tab__ripple\" part=\"ripple-container\"></span></button></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)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#ffc107;color:var(--mdc-theme-secondary,#ffc107)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:-webkit-box;display:flex;position:absolute;top:0;left:0;-webkit-box-pack:center;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{-webkit-transform-origin:left;transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__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-indicator--no-transition .mdc-tab-indicator__content{-webkit-transition:none;transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{-webkit-transition:150ms opacity linear;transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{-webkit-transition-delay:0.1s;transition-delay:0.1s}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));position:relative;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1;flex:1 0 auto;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:0;background:0 0;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;padding-right:24px;padding-left:24px;height:100%;width:100%}.forge-tab:disabled{color:rgba(0,0,0,.12);color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12));cursor:not-allowed;pointer-events:none}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=top]){padding-top:8px}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=top]),.forge-tab ::slotted([slot=trailing]){-webkit-transition:150ms color linear;transition:150ms color linear;fill:currentColor;width:24px;height:24px;font-size:24px;z-index:2}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){padding:0 8px}.forge-tab__content{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:inherit;pointer-events:none}.forge-tab__text{-webkit-transition:150ms color linear;transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.forge-tab--active{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-tab--active ::slotted([slot=leading]),.forge-tab--active ::slotted([slot=top]),.forge-tab--active ::slotted([slot=trailing]){-webkit-transition-delay:0.1s;transition-delay:0.1s}.forge-tab__ripple{--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:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.forge-tab__ripple::after,.forge-tab__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-tab__ripple::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-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-tab__ripple.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-tab__ripple.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-tab__ripple.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-tab__ripple.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-tab__ripple.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-tab__ripple::after,.forge-tab__ripple::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-tab__ripple.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-tab__ripple::after,.forge-tab__ripple::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-tab__ripple.mdc-ripple-surface--hover::before,.forge-tab__ripple:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-tab__ripple.mdc-ripple-upgraded--background-focused::before,.forge-tab__ripple:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-tab__ripple:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-tab__ripple:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block}:host([hidden]){display:none}:host([stretch]){-webkit-box-flex:1;flex:1}:host([theme=primary]){--mdc-theme-primary:var(--mdc-theme-primary, $defaultValue)}:host([theme=primary]) .forge-tab.forge-tab--active{color:#3f51b5}:host([theme=secondary]){--mdc-theme-primary:var(--mdc-theme-secondary, $defaultValue)}:host([theme=secondary]) .forge-tab.forge-tab--active{color:#ffc107}:host([theme=warning]){--mdc-theme-primary:var(--mdc-theme-warning, $defaultValue)}:host([theme=warning]) .forge-tab.forge-tab--active{color:#d14900}:host([theme=success]){--mdc-theme-primary:var(--mdc-theme-success, $defaultValue)}:host([theme=success]) .forge-tab.forge-tab--active{color:#2e7d32}:host([theme=danger]){--mdc-theme-primary:var(--mdc-theme-danger, $defaultValue)}:host([theme=danger]) .forge-tab.forge-tab--active{color:#b00020}:host([theme=info]){--mdc-theme-primary:var(--mdc-theme-info, $defaultValue)}:host([theme=info]) .forge-tab.forge-tab--active{color:#424242}';
+let TabComponent = class TabComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TabFoundation(new TabAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            TAB_CONSTANTS.attributes.DISABLED,
+            TAB_CONSTANTS.attributes.ACTIVE,
+            TAB_CONSTANTS.attributes.STRETCH
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case TAB_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case TAB_CONSTANTS.attributes.ACTIVE:
+                this.active = coerceBoolean(newValue);
+                break;
+            case TAB_CONSTANTS.attributes.STRETCH:
+                this.stretch = coerceBoolean(newValue);
+                break;
+        }
+    }
+    activate(previousIndicatorClientRect) {
+        this._foundation.activate(previousIndicatorClientRect);
+    }
+    deactivate() {
+        this._foundation.deactivate();
+    }
+    computeIndicatorBounds() {
+        return this._foundation.computeIndicatorBounds();
+    }
+    computeDimensions() {
+        return this._foundation.computeDimensions();
+    }
+    focus() {
+        this._foundation.focus();
+    }
+    setTabIndex(value) {
+        this._foundation.setTabIndex(value);
+    }
+};
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "active", void 0);
+__decorate([
+    FoundationProperty()
+], TabComponent.prototype, "stretch", void 0);
+TabComponent = __decorate([
+    CustomElement({
+        name: TAB_CONSTANTS.elementName
+    })
+], TabComponent);
+export { TabComponent };

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

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

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

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

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

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseAdapter, BaseAdapter } from '../../core/base/base-adapter';
+import { ITabBarComponent } from './tab-bar';
+import { TabBarLayoutMode, TabBarLayoutAlign } from './tab-bar-constants';
+import { ITabComponent } from '../tab/tab';
+import { ITabDimensions } from '../tab/tab-constants';
+export interface ITabBarAdapter extends IBaseAdapter {
+    initializeTabs(activeTabIndex: number, stretch: boolean): void;
+    initializeTabScroller(): void;
+    initializeAccessibility(): void;
+    destroyTabScroller(): void;
+    addTabChangeListener(listener: (evt: Event) => void): void;
+    removeTabChangeListener(listener: (evt: Event) => void): void;
+    addScrollListener(listener: (evt: Event) => void): void;
+    getTabIndex(tab: ITabComponent): number;
+    getTabCount(): number;
+    activateTab(index: number, previousTabBounds?: DOMRect): void;
+    deactivateTab(index: number): void;
+    syncTabIndex(index: number): void;
+    getTabBounds(index: number): DOMRect | undefined;
+    setUnderline(value: boolean): void;
+    setStacked(value: boolean): void;
+    scrollTo(scrollX: number): void;
+    getScrollContentWidth(): number;
+    getScrollPosition(): number;
+    getOffsetWidth(): number;
+    getTabDimensionsAtIndex(index: number): ITabDimensions;
+    incrementScroll(scrollXIncrement: number): void;
+    isScrolled(): boolean;
+    isScrolledEnd(): boolean;
+    getFocusedTabIndex(): number;
+    focusTabAtIndex(index: number): void;
+    setLayoutMode(value: TabBarLayoutMode): void;
+    setLayoutAlign(value: TabBarLayoutAlign): void;
+    setPreviousButtonVisibility(value: boolean): void;
+    setPreviousButtonEnabled(value: boolean): void;
+    setNextButtonVisibility(value: boolean): void;
+    setNextButtonEnabled(value: boolean): void;
+    addScrollPreviousListener(type: string, listener: (evt: MouseEvent) => void): void;
+    addScrollNextListener(type: string, listener: (evt: MouseEvent) => void): void;
+    isTabDisabled(index: number): boolean;
+    ensureFocusableTab(): void;
+}
+export declare class TabBarAdapter extends BaseAdapter<ITabBarComponent> implements ITabBarAdapter {
+    private _rootElement;
+    private _defaultSlotElement;
+    private _tabScrollElement;
+    private _tabScrollAreaElement;
+    private _tabScrollContentElement;
+    private _tabScroller;
+    private _tabs;
+    private _prevButtonContainerElement;
+    private _nextButtonContainerElement;
+    private _prevButtonElement;
+    private _nextButtonElement;
+    constructor(component: ITabBarComponent);
+    initializeTabs(activeTabIndex: number, stretch: boolean): void;
+    initializeTabScroller(): void;
+    initializeAccessibility(): void;
+    destroyTabScroller(): void;
+    addTabChangeListener(listener: (evt: Event) => void): void;
+    removeTabChangeListener(listener: (evt: Event) => void): void;
+    addScrollListener(listener: (evt: Event) => void): void;
+    getTabIndex(tab: ITabComponent): number;
+    getTabCount(): number;
+    activateTab(index: number, previousTabBounds?: DOMRect): void;
+    deactivateTab(index: number): void;
+    syncTabIndex(index: number): void;
+    getTabBounds(index: number): DOMRect | undefined;
+    setUnderline(value: boolean): void;
+    setStacked(value: boolean): void;
+    scrollTo(scrollX: number): void;
+    getScrollContentWidth(): number;
+    getScrollPosition(): number;
+    getOffsetWidth(): number;
+    getTabDimensionsAtIndex(index: number): ITabDimensions;
+    incrementScroll(scrollXIncrement: number): void;
+    isScrolled(): boolean;
+    isScrolledEnd(): boolean;
+    getFocusedTabIndex(): number;
+    focusTabAtIndex(index: number): void;
+    setLayoutMode(value: TabBarLayoutMode): void;
+    setLayoutAlign(value: TabBarLayoutAlign): void;
+    setPreviousButtonVisibility(value: boolean): void;
+    setPreviousButtonEnabled(value: boolean): void;
+    setNextButtonVisibility(value: boolean): void;
+    setNextButtonEnabled(value: boolean): void;
+    addScrollPreviousListener(type: string, listener: (evt: MouseEvent) => void): void;
+    addScrollNextListener(type: string, listener: (evt: MouseEvent) => void): void;
+    isTabDisabled(index: number): boolean;
+    ensureFocusableTab(): void;
+    private _getTabs;
+    private _getTabByIndex;
+}