@tylertech/forge 2.0.0

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

@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { MDCTabScroller } from '@material/tab-scroller';
+import { getShadowElement, removeClass, isFunction, getActiveElement, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
+import { TAB_CONSTANTS } from '../tab/tab-constants';
+export class TabBarAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._tabs = [];
+        this._rootElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.ROOT);
+        this._tabScrollElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER);
+        this._tabScrollAreaElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER_AREA);
+        this._tabScrollContentElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.TAB_SCROLLER_CONTENT);
+        this._defaultSlotElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.DEFAULT_SLOT);
+        this._prevButtonContainerElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.PREV_BUTTON_CONTAINER);
+        this._prevButtonElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.PREV_BUTTON);
+        this._nextButtonContainerElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.NEXT_BUTTON_CONTAINER);
+        this._nextButtonElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.NEXT_BUTTON);
+    }
+    initializeTabs(activeTabIndex, stretch) {
+        this._tabs = this._getTabs();
+        if (!this._tabs.length) {
+            return;
+        }
+        this._tabs.forEach(tab => {
+            tab.active = false;
+            tab.stretch = stretch;
+        });
+        // Set the initial active tab
+        if (activeTabIndex >= 0 && activeTabIndex < this._tabs.length) {
+            this._tabs[activeTabIndex].active = true;
+        }
+        else {
+            this.ensureFocusableTab();
+        }
+    }
+    initializeTabScroller() {
+        this._tabScroller = new MDCTabScroller(this._tabScrollElement);
+    }
+    initializeAccessibility() {
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'tablist');
+        }
+    }
+    destroyTabScroller() {
+        if (this._tabScroller) {
+            this._tabScroller.destroy();
+        }
+    }
+    addTabChangeListener(listener) {
+        this._defaultSlotElement.addEventListener('slotchange', listener);
+    }
+    removeTabChangeListener(listener) {
+        this._defaultSlotElement.removeEventListener('slotchange', listener);
+    }
+    addScrollListener(listener) {
+        this._tabScrollAreaElement.addEventListener('scroll', listener);
+    }
+    getTabIndex(tab) {
+        return this._tabs.indexOf(tab);
+    }
+    getTabCount() {
+        return this._tabs.length;
+    }
+    activateTab(index, previousTabBounds) {
+        const tab = this._getTabByIndex(index);
+        if (tab) {
+            tab.activate(previousTabBounds);
+        }
+    }
+    deactivateTab(index) {
+        const tab = this._getTabByIndex(index);
+        if (tab) {
+            tab.deactivate();
+        }
+    }
+    syncTabIndex(index) {
+        const tabs = this._getTabs();
+        const activeTab = tabs[index];
+        tabs.filter(t => t !== activeTab)
+            .forEach(t => t.setTabIndex(-1));
+    }
+    getTabBounds(index) {
+        const tab = this._getTabByIndex(index);
+        if (tab) {
+            return tab.computeIndicatorBounds();
+        }
+        return undefined;
+    }
+    setUnderline(value) {
+        toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.UNDERLINED);
+    }
+    setStacked(value) {
+        toggleClass(this._rootElement, value, TAB_BAR_CONSTANTS.classes.STACKED);
+    }
+    scrollTo(scrollX) {
+        if (this._tabScroller) {
+            this._tabScroller.scrollTo(scrollX);
+        }
+    }
+    getScrollContentWidth() {
+        return this._tabScroller ? this._tabScroller.getScrollContentWidth() : 0;
+    }
+    getScrollPosition() {
+        return this._tabScroller ? this._tabScroller.getScrollPosition() : 0;
+    }
+    getOffsetWidth() {
+        return this._tabScrollElement.offsetWidth;
+    }
+    getTabDimensionsAtIndex(index) {
+        const tab = this._getTabByIndex(index);
+        if (tab) {
+            return tab.computeDimensions();
+        }
+        return {
+            rootLeft: 0,
+            rootRight: 0,
+            contentLeft: 0,
+            contentRight: 0
+        };
+    }
+    incrementScroll(scrollXIncrement) {
+        if (this._tabScroller) {
+            this._tabScroller.incrementScroll(scrollXIncrement);
+        }
+    }
+    isScrolled() {
+        const position = this._tabScrollAreaElement.scrollLeft;
+        return position > 0;
+    }
+    isScrolledEnd() {
+        const position = Math.round(this._tabScrollAreaElement.scrollLeft);
+        const scrollWidth = Math.round(this._tabScrollContentElement.scrollWidth - this._tabScrollElement.offsetWidth);
+        return position >= scrollWidth;
+    }
+    getFocusedTabIndex() {
+        const activeElement = getActiveElement();
+        return this._tabs.findIndex(tab => {
+            if (tab === activeElement) {
+                return true;
+            }
+            return !!tab.shadowRoot.contains(activeElement);
+        });
+    }
+    focusTabAtIndex(index) {
+        const tab = this._getTabByIndex(index);
+        if (tab) {
+            return tab.focus();
+        }
+    }
+    setLayoutMode(value) {
+        const isFixed = value === 'fixed';
+        toggleClass(this._rootElement, isFixed, TAB_BAR_CONSTANTS.classes.FIXED);
+        this._tabs.forEach(tab => tab.stretch = isFixed);
+    }
+    setLayoutAlign(value) {
+        removeClass([
+            TAB_BAR_CONSTANTS.classes.ALIGN_CENTER,
+            TAB_BAR_CONSTANTS.classes.ALIGN_END
+        ], this._rootElement);
+        switch (value) {
+            case 'center':
+                this._rootElement.classList.add(TAB_BAR_CONSTANTS.classes.ALIGN_CENTER);
+                break;
+            case 'end':
+                this._rootElement.classList.add(TAB_BAR_CONSTANTS.classes.ALIGN_END);
+                break;
+        }
+    }
+    setPreviousButtonVisibility(value) {
+        if (value) {
+            this._prevButtonContainerElement.style.removeProperty('display');
+        }
+        else {
+            this._prevButtonContainerElement.style.display = 'none';
+        }
+    }
+    setPreviousButtonEnabled(value) {
+        this._prevButtonElement.disabled = !value;
+    }
+    setNextButtonVisibility(value) {
+        if (value) {
+            this._nextButtonContainerElement.style.removeProperty('display');
+        }
+        else {
+            this._nextButtonContainerElement.style.display = 'none';
+        }
+    }
+    setNextButtonEnabled(value) {
+        this._nextButtonElement.disabled = !value;
+    }
+    addScrollPreviousListener(type, listener) {
+        this._prevButtonElement.addEventListener(type, listener);
+    }
+    addScrollNextListener(type, listener) {
+        this._nextButtonElement.addEventListener(type, listener);
+    }
+    isTabDisabled(index) {
+        const tab = this._getTabByIndex(index);
+        return tab ? tab.disabled : true;
+    }
+    ensureFocusableTab() {
+        const tabs = this._getTabs();
+        const hasActiveTab = tabs.some(tab => tab.active);
+        if (!hasActiveTab && tabs.length) {
+            const firstTab = tabs[0];
+            if (isFunction(firstTab.setTabIndex)) {
+                tabs[0].setTabIndex(0);
+            }
+        }
+    }
+    _getTabs() {
+        return Array.from(this._component.querySelectorAll(TAB_CONSTANTS.elementName));
+    }
+    _getTabByIndex(index) {
+        return this._tabs[index];
+    }
+}

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

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const TAB_BAR_CONSTANTS: {
+    attributes: {
+        ACTIVE_TAB: string;
+        LAYOUT_MODE: string;
+        LAYOUT_ALIGN: string;
+        UNDERLINE: string;
+        AUTO_ACTIVATE: string;
+        STACKED: string;
+        SCROLL_BUTTONS: string;
+        FORCE_SCROLL_BUTTONS: string;
+    };
+    elementName: "forge-tab-bar";
+    classes: {
+        UNDERLINED: string;
+        ALIGN_CENTER: string;
+        ALIGN_END: string;
+        FIXED: string;
+        STACKED: string;
+    };
+    selectors: {
+        ROOT: string;
+        TAB_SCROLLER: string;
+        TAB_SCROLLER_AREA: string;
+        TAB_SCROLLER_CONTENT: string;
+        PREV_BUTTON_CONTAINER: string;
+        PREV_BUTTON: string;
+        NEXT_BUTTON_CONTAINER: string;
+        NEXT_BUTTON: string;
+    };
+    events: {
+        ACTIVATE: string;
+    };
+    strings: {
+        ARROW_LEFT_KEY: string;
+        ARROW_RIGHT_KEY: string;
+        END_KEY: string;
+        ENTER_KEY: string;
+        HOME_KEY: string;
+        SPACE_KEY: string;
+    };
+    numbers: {
+        ARROW_LEFT_KEYCODE: number;
+        ARROW_RIGHT_KEYCODE: number;
+        END_KEYCODE: number;
+        ENTER_KEYCODE: number;
+        EXTRA_SCROLL_AMOUNT: number;
+        HOME_KEYCODE: number;
+        SPACE_KEYCODE: number;
+    };
+};
+export interface ITabBarActivateEventData {
+    index: number;
+}
+export declare type TabBarLayoutMode = 'fixed' | 'clustered';
+export declare type TabBarLayoutAlign = 'start' | 'center' | 'end';
+export declare const ACCEPTABLE_KEYS: string[];
+export declare const KEYCODE_MAP: {
+    [x: number]: string;
+};

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}tab-bar`;
+const attributes = {
+    ACTIVE_TAB: 'active-tab',
+    LAYOUT_MODE: 'layout-mode',
+    LAYOUT_ALIGN: 'layout-align',
+    UNDERLINE: 'underline',
+    AUTO_ACTIVATE: 'auto-activate',
+    STACKED: 'stacked',
+    SCROLL_BUTTONS: 'scroll-buttons',
+    FORCE_SCROLL_BUTTONS: 'force-scroll-buttons'
+};
+const classes = {
+    UNDERLINED: 'forge-tab-bar--underlined',
+    ALIGN_CENTER: 'forge-tab-bar--align-center',
+    ALIGN_END: 'forge-tab-bar--align-end',
+    FIXED: 'forge-tab-bar--fixed',
+    STACKED: 'forge-tab-bar--stacked'
+};
+const selectors = {
+    ROOT: '.forge-tab-bar',
+    TAB_SCROLLER: '.mdc-tab-scroller',
+    TAB_SCROLLER_AREA: '.mdc-tab-scroller__scroll-area',
+    TAB_SCROLLER_CONTENT: '.mdc-tab-scroller__scroll-content',
+    PREV_BUTTON_CONTAINER: '.forge-tab-bar__scroll-prev-container',
+    PREV_BUTTON: '#scroll-prev-btn',
+    NEXT_BUTTON_CONTAINER: '.forge-tab-bar__scroll-next-container',
+    NEXT_BUTTON: '#scroll-next-btn'
+};
+const events = {
+    ACTIVATE: `${elementName}-activate`
+};
+const strings = {
+    ARROW_LEFT_KEY: 'ArrowLeft',
+    ARROW_RIGHT_KEY: 'ArrowRight',
+    END_KEY: 'End',
+    ENTER_KEY: 'Enter',
+    HOME_KEY: 'Home',
+    SPACE_KEY: 'Space'
+};
+const numbers = {
+    ARROW_LEFT_KEYCODE: 37,
+    ARROW_RIGHT_KEYCODE: 39,
+    END_KEYCODE: 35,
+    ENTER_KEYCODE: 13,
+    EXTRA_SCROLL_AMOUNT: 20,
+    HOME_KEYCODE: 36,
+    SPACE_KEYCODE: 32
+};
+export const TAB_BAR_CONSTANTS = {
+    attributes,
+    elementName,
+    classes,
+    selectors,
+    events,
+    strings,
+    numbers
+};
+export const ACCEPTABLE_KEYS = [
+    strings.ARROW_LEFT_KEY,
+    strings.ARROW_RIGHT_KEY,
+    strings.END_KEY,
+    strings.HOME_KEY,
+    strings.ENTER_KEY,
+    strings.SPACE_KEY
+];
+export const KEYCODE_MAP = {
+    [numbers.ARROW_LEFT_KEYCODE]: strings.ARROW_LEFT_KEY,
+    [numbers.ARROW_RIGHT_KEYCODE]: strings.ARROW_RIGHT_KEY,
+    [numbers.END_KEYCODE]: strings.END_KEY,
+    [numbers.HOME_KEYCODE]: strings.HOME_KEY,
+    [numbers.ENTER_KEYCODE]: strings.ENTER_KEY,
+    [numbers.SPACE_KEYCODE]: strings.SPACE_KEY
+};

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ITabBarAdapter } from './tab-bar-adapter';
+import { TabBarLayoutMode, TabBarLayoutAlign } from './tab-bar-constants';
+export interface ITabBarFoundation extends ICustomElementFoundation {
+    activeTab: number;
+    layoutMode: TabBarLayoutMode;
+    layoutAlign: TabBarLayoutAlign;
+    underline: boolean;
+    autoActivate: boolean;
+    stacked: boolean;
+    scrollButtons: boolean;
+    forceScrollButtons: boolean;
+    activateTab(index: number): void;
+    scrollIntoView(index: number): void;
+}
+export declare class TabBarFoundation implements ITabBarFoundation {
+    private _adapter;
+    private _isInitialized;
+    private _activeTab;
+    private _layoutMode;
+    private _layoutAlign;
+    private _underline;
+    private _autoActivate;
+    private _stacked;
+    private _scrollButtons;
+    private _forceScrollButtons;
+    private _tabsChangedListener;
+    private _tabInteractedListener;
+    private _keydownListener;
+    private _scrollPrevClickListener;
+    private _scrollPrevMousedownListener;
+    private _scrollNextClickListener;
+    private _scrollNextMousedownListener;
+    private _scrollListener;
+    constructor(_adapter: ITabBarAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _onTabsChanged;
+    private _onTabInteracted;
+    private _onKeydown;
+    private _onScrollPrevious;
+    private _onScrollNext;
+    private _onScroll;
+    private _syncScrollButtons;
+    /**
+     * 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
+     */
+    private _findAdjacentTabIndexClosestToEdge;
+    /**
+     * 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
+     */
+    private _calculateScrollIncrement;
+    /**
+     * 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
+     */
+    private _determineTargetFromKey;
+    private _isScrollable;
+    private _getKeyFromEvent;
+    private _isActivationKey;
+    private _indexIsInRange;
+    activateTab(index: number): void;
+    scrollIntoView(index: number): void;
+    /** Gets and sets the active tab index. */
+    get activeTab(): number;
+    set activeTab(value: number);
+    private get _isFixed();
+    get layoutMode(): TabBarLayoutMode;
+    set layoutMode(value: TabBarLayoutMode);
+    get layoutAlign(): TabBarLayoutAlign;
+    set layoutAlign(value: TabBarLayoutAlign);
+    get underline(): boolean;
+    set underline(value: boolean);
+    get stacked(): boolean;
+    set stacked(value: boolean);
+    get scrollButtons(): boolean;
+    set scrollButtons(value: boolean);
+    get forceScrollButtons(): boolean;
+    set forceScrollButtons(value: boolean);
+    get autoActivate(): boolean;
+    set autoActivate(value: boolean);
+}