@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

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

@@ -7,26 +7,26 @@ export declare const TAB_CONSTANTS: {
     elementName: "forge-tab";
     attributes: {
         DISABLED: string;
-        ACTIVE: string;
-        STRETCH: string;
+        SELECTED: string;
+        VERTICAL: string;
+        STACKED: string;
+        SECONDARY: string;
+        INVERTED: string;
     };
     selectors: {
-        BUTTON: string;
         RIPPLE: string;
         INDICATOR: string;
-        CONTENT: string;
-        DEFAULT_SLOT: string;
     };
     classes: {
-        ACTIVE: string;
+        SELECTED: string;
     };
     events: {
-        INTERACTED: string;
+        SELECT: string;
+    };
+    strings: {
+        EASING: string;
+    };
+    numbers: {
+        ANIMATION_DURATION: number;
     };
 };
-export interface ITabDimensions {
-    rootLeft: number;
-    rootRight: number;
-    contentLeft: number;
-    contentRight: number;
-}

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

@@ -7,26 +7,34 @@ import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}tab`;
 const attributes = {
     DISABLED: 'disabled',
-    ACTIVE: 'active',
-    STRETCH: 'stretch'
+    SELECTED: 'selected',
+    VERTICAL: 'vertical',
+    STACKED: 'stacked',
+    SECONDARY: 'secondary',
+    INVERTED: 'inverted'
 };
 const selectors = {
-    BUTTON: 'button.forge-tab',
-    RIPPLE: '.forge-tab__ripple',
-    INDICATOR: '.mdc-tab-indicator',
-    CONTENT: '.forge-tab__content',
-    DEFAULT_SLOT: 'slot:not([name])'
+    RIPPLE: '.ripple-surface',
+    INDICATOR: '.indicator'
 };
 const classes = {
-    ACTIVE: 'forge-tab--active'
+    SELECTED: 'selected'
 };
 const events = {
-    INTERACTED: `${elementName}-interacted`
+    SELECT: `${elementName}-select`
+};
+const strings = {
+    EASING: 'cubic-bezier(0.4, 0, 0.2, 1)'
+};
+const numbers = {
+    ANIMATION_DURATION: 250
 };
 export const TAB_CONSTANTS = {
     elementName,
     attributes,
     selectors,
     classes,
-    events
+    events,
+    strings,
+    numbers
 };

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

@@ -5,39 +5,40 @@
  */
 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;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }
 export declare class TabFoundation implements ITabFoundation {
     private _adapter;
+    private _selected;
     private _disabled;
-    private _active;
-    private _stretch;
+    private _vertical;
+    private _stacked;
+    private _secondary;
+    private _inverted;
     private _clickListener;
+    private _keydownListener;
     constructor(_adapter: ITabAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _onClick;
-    private _setActive;
-    activate(previousIndicatorClientRect?: DOMRect): void;
-    deactivate(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    computeDimensions(): ITabDimensions;
-    focus(): void;
-    setTabIndex(value: number): void;
+    private _onKeydown;
+    private _dispatchSelectEvent;
     get disabled(): boolean;
     set disabled(value: boolean);
-    get active(): boolean;
-    set active(value: boolean);
-    get stretch(): boolean;
-    set stretch(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    get stacked(): boolean;
+    set stacked(value: boolean);
+    get secondary(): boolean;
+    set secondary(value: boolean);
+    get inverted(): boolean;
+    set inverted(value: boolean);
 }

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

@@ -7,65 +7,42 @@ import { TAB_CONSTANTS } from './tab-constants';
 export class TabFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        // State
+        this._selected = false;
         this._disabled = false;
-        this._active = false;
-        this._stretch = false;
-        this._clickListener = (evt) => this._onClick(evt);
+        this._vertical = false;
+        this._stacked = false;
+        this._secondary = false;
+        this._inverted = false;
+        this._clickListener = () => this._onClick();
+        this._keydownListener = (evt) => this._onKeydown(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);
+        this._adapter.addInteractionListener('click', this._clickListener);
+        this._adapter.addInteractionListener('keydown', this._keydownListener);
+    }
+    destroy() {
+        this._adapter.destroy();
+    }
+    _onClick() {
+        if (this._disabled || this._selected) {
+            return;
         }
+        this._dispatchSelectEvent();
     }
-    _setActive(isActive, previousIndicatorClientRect) {
-        this._active = isActive;
-        this._adapter.setActive(this._active);
-        if (this._active) {
-            this._adapter.activateIndicator(previousIndicatorClientRect);
+    _onKeydown(evt) {
+        if (this._disabled || this._selected) {
+            return;
         }
-        else {
-            this._adapter.deactivateIndicator();
+        const isSelectionKey = evt.key === ' ' || evt.key === 'Enter';
+        if (isSelectionKey) {
+            evt.preventDefault();
+            this._dispatchSelectEvent();
         }
     }
-    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);
+    _dispatchSelectEvent() {
+        this._adapter.emitHostEvent(TAB_CONSTANTS.events.SELECT, { bubbles: true, composed: true });
     }
     get disabled() {
         return this._disabled;
@@ -77,22 +54,51 @@ export class TabFoundation {
             this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    get active() {
-        return this._active;
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._adapter.setSelected(this._selected);
+            this._adapter.animateSelected();
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.SELECTED, this._selected);
+        }
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(value) {
+        if (this._vertical !== value) {
+            this._vertical = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.VERTICAL, this._vertical);
+        }
+    }
+    get stacked() {
+        return this._stacked;
+    }
+    set stacked(value) {
+        if (this._stacked !== value) {
+            this._stacked = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.STACKED, this._stacked);
+        }
+    }
+    get secondary() {
+        return this._secondary;
     }
-    set active(value) {
-        if (this._active !== value) {
-            this._setActive(value);
-            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.ACTIVE, this._active);
+    set secondary(value) {
+        if (this._secondary !== value) {
+            this._secondary = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.SECONDARY, this._secondary);
         }
     }
-    get stretch() {
-        return this._stretch;
+    get inverted() {
+        return this._inverted;
     }
-    set stretch(value) {
-        if (this._stretch !== value) {
-            this._stretch = value;
-            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.STRETCH, this._stretch);
+    set inverted(value) {
+        if (this._inverted !== value) {
+            this._inverted = value;
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.INVERTED, this._inverted);
         }
     }
 }

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ForgeRippleCapableSurface, ForgeRipple } from '../../ripple';
+export declare class TabRipple implements ForgeRippleCapableSurface {
+    private _surfaceElement;
+    private _buttonElement;
+    rippleInstance: ForgeRipple | undefined;
+    constructor(_surfaceElement: HTMLElement, _buttonElement: HTMLButtonElement);
+    destroy(): void;
+    emulateFocus(): void;
+    get root(): Element;
+    get unbounded(): boolean;
+    get disabled(): boolean;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
+export class TabRipple {
+    constructor(_surfaceElement, _buttonElement) {
+        this._surfaceElement = _surfaceElement;
+        this._buttonElement = _buttonElement;
+        const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { registerInteractionHandler: (evtType, handler) => this._buttonElement.addEventListener(evtType, handler, { passive: true }), deregisterInteractionHandler: (evtType, handler) => this._buttonElement.removeEventListener(evtType, handler, { passive: true }), isSurfaceActive: () => this._buttonElement.matches(':active'), isUnbounded: () => this.unbounded, addClass: (className) => this._surfaceElement.classList.add(className), removeClass: (className) => this._surfaceElement.classList.remove(className), updateCssVariable: (varName, value) => this._surfaceElement.style.setProperty(varName, value) });
+        const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
+        this.rippleInstance = new ForgeRipple(this._buttonElement, rippleFoundation);
+    }
+    destroy() {
+        var _a;
+        (_a = this.rippleInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.rippleInstance = undefined;
+    }
+    emulateFocus() {
+        var _a;
+        (_a = this.rippleInstance) === null || _a === void 0 ? void 0 : _a.handleFocus();
+    }
+    get root() {
+        return this._buttonElement;
+    }
+    get unbounded() {
+        return false;
+    }
+    get disabled() {
+        return this._buttonElement.disabled;
+    }
+}

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

@@ -3,30 +3,70 @@
  * Copyright 2023 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;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-tab': ITabComponent;
     }
     interface HTMLElementEventMap {
-        'forge-tab-interacted': CustomEvent<void>;
+        'forge-tab-select': CustomEvent<void>;
     }
 }
 /**
- * The web component class behind the `<forge-tab>` custom element.
- *
  * @tag forge-tab
+ *
+ * @property {boolean} disabled - The disabled state of the tab.
+ * @property {boolean} selected - The selected state of the tab.
+ * @property {boolean} vertical - Controls whether the tab is vertical or horizontal.
+ * @property {boolean} stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @property {boolean} secondary - Controls whether the tab is styled as secondary tab navigation.
+ * @property {boolean} inverted - Controls whether the tab indicator is rendered on the opposite side of the tab.
+ *
+ * @attribute disabled - The disabled state of the tab.
+ * @attribute selected - The selected state of the tab.
+ * @attribute vertical - Controls whether the tab is vertical or horizontal.
+ * @attribute stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
+ * @attribute secondary - Controls whether the tab is styled as secondary tab navigation.
+ *
+ * @event forge-tab-select - Dispatched when the tab is selected.
+ *
+ * @cssproperty --forge-tab-indicator-color - The color of the tab indicator. Defaults to the primary theme.
+ * @cssproperty --forge-tab-indicator-height - The height of the tab indicator.
+ * @cssproperty --forge-tab-indicator-shape - The shape of the tab indicator.
+ * @cssproperty --forge-tab-container-color - The color of the tab container. Defaults to the surface theme.
+ * @cssproperty --forge-tab-height - The height of the tab.
+ * @cssproperty --forge-tab-shape - The shape of the tab.
+ * @cssproperty --forge-tab-disabled-opacity - The opacity of the tab when disabled.
+ * @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-icon-color - The color of the icon when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-icon-size - The size of the icon.
+ * @cssproperty --forge-tab-focus-icon-color - The color of the icon when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-icon-color - The color of the icon when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-icon-color - The color of the icon. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-icon-color - The color of the icon when the tab is pressed. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-active-focus-label-text-color - The color of the label text when the tab is active and focused. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-hover-label-text-color - The color of the label text when the tab is active and hovered. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-label-text-color - The color of the label text when the tab is active. Defaults to the primary theme.
+ * @cssproperty --forge-tab-active-pressed-label-text-color - The color of the label text when the tab is active and pressed. Defaults to the primary theme.
+ * @cssproperty --forge-tab-focus-label-text-color - The color of the label text when the tab is focused. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-hover-label-text-color - The color of the label text when the tab is hovered. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-label-text-color - The color of the label text. Defaults to the text-on-background theme.
+ * @cssproperty --forge-tab-pressed-label-text-color - The color of the label text when the tab is pressed. Defaults to the text-on-background theme.
+ *
+ * @csspart container - The tab container.
+ * @csspart content - The tab content container.
+ * @csspart label - The tab label container.
+ * @csspart indicator - The tab active indicator.
  */
 export declare class TabComponent extends BaseComponent implements ITabComponent {
     static get observedAttributes(): string[];
@@ -36,12 +76,9 @@ export declare class TabComponent extends BaseComponent implements ITabComponent
     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;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }