@tylertech/forge 2.18.0 → 2.19.0

package/esm/button-area/button-area-adapter.js

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter, userInteractionListener } from '../core';
+import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+export class ButtonAreaAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.ROOT);
+        this._buttonSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.BUTTON_SLOT);
+    }
+    get root() {
+        return this._rootElement;
+    }
+    get unbounded() {
+        return false;
+    }
+    get disabled() {
+        return this.buttonIsDisabled();
+    }
+    setDisabled(value) {
+        var _a;
+        toggleClass(this._rootElement, value, BUTTON_AREA_CONSTANTS.classes.DISABLED);
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, value);
+    }
+    addListener(type, listener) {
+        this._rootElement.addEventListener(type, listener);
+    }
+    removeListener(type, listener) {
+        this._rootElement.removeEventListener(type, listener);
+    }
+    addSlotChangeListener(listener) {
+        this._buttonSlotElement.addEventListener('slotchange', listener);
+    }
+    removeSlotChangeListener(listener) {
+        this._buttonSlotElement.removeEventListener('slotchange', listener);
+    }
+    startButtonObserver(callback) {
+        if (this._buttonElement) {
+            this._buttonObserver = new MutationObserver(callback);
+            this._buttonObserver.observe(this._buttonElement, { attributeFilter: [BUTTON_AREA_CONSTANTS.attributes.DISABLED] });
+        }
+    }
+    stopButtonObserver() {
+        if (this._buttonObserver) {
+            this._buttonObserver.disconnect();
+            this._buttonObserver = undefined;
+        }
+    }
+    detectSlottedButton() {
+        this._buttonElement = this._buttonSlotElement.assignedElements()[0];
+    }
+    buttonIsDisabled() {
+        var _a, _b;
+        return (_b = (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : true;
+    }
+    requestDisabledButtonFrame() {
+        if (this._buttonElement) {
+            this._buttonElement.disabled = true;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            requestAnimationFrame(() => this._buttonElement.disabled = false);
+        }
+    }
+    async createRipple() {
+        if (!this._rippleInstance) {
+            const type = await this._userInteractionListener();
+            if (!this._rippleInstance) {
+                const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { isSurfaceActive: () => { var _a, _b; return this._rootElement.matches(':active') || ((_b = (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.matches(':active')) !== null && _b !== void 0 ? _b : false); }, isSurfaceDisabled: () => { var _a; return (_a = this.disabled) !== null && _a !== void 0 ? _a : true; }, isUnbounded: () => !!this.unbounded, registerInteractionHandler: (evtType, handler) => {
+                        var _a;
+                        if (this._isRootEvent(evtType)) {
+                            this._rootElement.addEventListener(evtType, handler, { passive: true });
+                        }
+                        else {
+                            (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener(evtType, handler, { passive: true });
+                        }
+                    }, deregisterInteractionHandler: (evtType, handler) => {
+                        var _a;
+                        if (this._isRootEvent(evtType)) {
+                            this._rootElement.removeEventListener(evtType, handler, { passive: true });
+                        }
+                        else {
+                            (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(evtType, handler, { passive: true });
+                        }
+                    }, addClass: (className) => addClass(className, this._rootElement), removeClass: (className) => removeClass(className, this._rootElement), updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value) });
+                this._rippleInstance = new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
+                if (type === 'focusin') {
+                    this._rippleInstance.handleFocus();
+                }
+            }
+        }
+        else {
+            this._rippleInstance.destroy();
+            this._rippleInstance = undefined;
+        }
+    }
+    _userInteractionListener() {
+        return userInteractionListener(this._rootElement);
+    }
+    _isRootEvent(evtType) {
+        return ['touchstart', 'pointerdown', 'mousedown'].includes(evtType);
+    }
+}

package/esm/button-area/button-area-constants.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BUTTON_AREA_CONSTANTS: {
+    elementName: string;
+    attributes: {
+        DISABLED: string;
+        IGNORE: string;
+        IGNORE_ALT: string;
+    };
+    ids: {
+        ROOT: string;
+        BUTTON_SLOT: string;
+    };
+    classes: {
+        DISABLED: string;
+    };
+    selectors: {
+        ROOT: string;
+        BUTTON_SLOT: string;
+    };
+};

package/esm/button-area/button-area-constants.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}button-area`;
+const attributes = {
+    DISABLED: 'disabled',
+    IGNORE: 'data-forge-ignore',
+    IGNORE_ALT: 'forge-ignore'
+};
+const ids = {
+    ROOT: 'root',
+    BUTTON_SLOT: 'button'
+};
+const classes = {
+    DISABLED: `forge-button-area--disabled`
+};
+const selectors = {
+    ROOT: `#${ids.ROOT}`,
+    BUTTON_SLOT: `slot[name=button]`
+};
+export const BUTTON_AREA_CONSTANTS = {
+    elementName,
+    attributes,
+    ids,
+    classes,
+    selectors
+};

package/esm/button-area/button-area-foundation.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IButtonAreaAdapter } from './button-area-adapter';
+export interface IButtonAreaFoundation extends ICustomElementFoundation {
+    disabled: boolean;
+}
+export declare class ButtonAreaFoundation implements IButtonAreaFoundation {
+    private _adapter;
+    private _disabled;
+    private _clickListener;
+    private _keydownListener;
+    private _pointerdownListener;
+    private _slotListener;
+    constructor(_adapter: IButtonAreaAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _handleClick;
+    private _handleKeydown;
+    private _handlePointerdown;
+    private _handleSlotChange;
+    private _handleButtonDisabled;
+    private _shouldIgnoreEvent;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}

package/esm/button-area/button-area-foundation.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getEventPath } from '@tylertech/forge-core';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+export class ButtonAreaFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._disabled = false;
+        this._clickListener = event => this._handleClick(event);
+        this._keydownListener = event => this._handleKeydown(event);
+        this._pointerdownListener = event => this._handlePointerdown(event);
+        this._slotListener = () => this._handleSlotChange();
+    }
+    initialize() {
+        this._adapter.addListener('click', this._clickListener);
+        this._adapter.addListener('keydown', this._keydownListener);
+        this._adapter.addListener('pointerdown', this._pointerdownListener);
+        this._adapter.addSlotChangeListener(this._slotListener);
+        this._adapter.createRipple();
+    }
+    disconnect() {
+        this._adapter.removeListener('click', this._clickListener);
+        this._adapter.removeSlotChangeListener(this._slotListener);
+        this._adapter.stopButtonObserver();
+    }
+    _handleClick(event) {
+        var _a;
+        // Prevent the click if disabled
+        if (this._disabled) {
+            event.stopPropagation();
+        }
+        // Prevent the click if a selection was made
+        const selectionType = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.type;
+        if (selectionType === 'Range') {
+            event.stopPropagation();
+        }
+        // Prevent the click if it originates from an ignored element
+        if (this._shouldIgnoreEvent(event)) {
+            event.stopPropagation();
+        }
+    }
+    _handleKeydown(event) {
+        if (event.key !== ' ' && event.key !== 'Enter') {
+            return;
+        }
+        // Prevent the keydown if it originates from an ignored element
+        if (this._shouldIgnoreEvent(event)) {
+            event.stopPropagation();
+        }
+    }
+    _handlePointerdown(event) {
+        if (this._disabled) {
+            return;
+        }
+        // Prevent the ripple animation when ignored children are clicked
+        if (this._shouldIgnoreEvent(event)) {
+            this._adapter.requestDisabledButtonFrame();
+        }
+    }
+    _handleSlotChange() {
+        // Clear old button-connected listeners
+        this._adapter.stopButtonObserver();
+        this._adapter.detectSlottedButton();
+        this._adapter.startButtonObserver(() => this._handleButtonDisabled());
+        // Match the component and button states if either is disabled
+        if (this._adapter.buttonIsDisabled()) {
+            this.disabled = true;
+        }
+        else if (this._disabled) {
+            this._adapter.setDisabled(true);
+        }
+    }
+    _handleButtonDisabled() {
+        this.disabled = this._adapter.buttonIsDisabled();
+    }
+    _shouldIgnoreEvent(event) {
+        const eventPath = getEventPath(event);
+        return eventPath.some(el => el.nodeType === 1 && (el.hasAttribute(BUTTON_AREA_CONSTANTS.attributes.IGNORE) || el.hasAttribute(BUTTON_AREA_CONSTANTS.attributes.IGNORE_ALT)));
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+}

package/esm/button-area/button-area.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElement } from '@tylertech/forge-core';
+export interface IButtonAreaComponent extends ICustomElement {
+    disabled: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-button-area': IButtonAreaComponent;
+    }
+}
+export declare class ButtonAreaComponent extends HTMLElement implements IButtonAreaComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Controls whether the component and associated button element are disabled. */
+    disabled: boolean;
+}

package/esm/button-area/button-area.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { ButtonAreaAdapter } from './button-area-adapter';
+import { ButtonAreaFoundation } from './button-area-foundation';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+import { RippleComponent } from '../ripple';
+const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"forge-button-area__button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot></slot></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-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)}.forge-button-area{overflow:hidden}.forge-button-area:not(.forge-button-area--disabled).forge-button-area{--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;cursor:pointer}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::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-button-area:not(.forge-button-area--disabled).forge-button-area::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.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-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.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-button-area:not(.forge-button-area--disabled).forge-button-area.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-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity, .16)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-button-area__button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{display:block}:host([hidden]){display:none}';
+let ButtonAreaComponent = class ButtonAreaComponent extends HTMLElement {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ButtonAreaFoundation(new ButtonAreaAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            BUTTON_AREA_CONSTANTS.attributes.DISABLED
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BUTTON_AREA_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], ButtonAreaComponent.prototype, "disabled", void 0);
+ButtonAreaComponent = __decorate([
+    CustomElement({
+        name: BUTTON_AREA_CONSTANTS.elementName,
+        dependencies: [
+            RippleComponent
+        ]
+    })
+], ButtonAreaComponent);
+export { ButtonAreaComponent };

package/esm/button-area/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './button-area-adapter';
+export * from './button-area-constants';
+export * from './button-area-foundation';
+export * from './button-area';
+export declare function defineButtonAreaComponent(): void;

package/esm/button-area/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ButtonAreaComponent } from './button-area';
+export * from './button-area-adapter';
+export * from './button-area-constants';
+export * from './button-area-foundation';
+export * from './button-area';
+export function defineButtonAreaComponent() {
+    defineCustomElement(ButtonAreaComponent);
+}

package/esm/expansion-panel/expansion-panel-adapter.d.ts

@@ -20,6 +20,7 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     private _headerElement;
     private _contentElement;
     private _headerSlotElement;
+    private _activeAnimationFrame;
     constructor(component: IExpansionPanelComponent);
     initialize(open: boolean, orientation?: string): void;
     setHeaderVisibility(visible: boolean): void;

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -98,8 +98,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             else {
                 this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
             }
-            window.requestAnimationFrame(() => {
-                window.requestAnimationFrame(() => {
+            this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                    this._activeAnimationFrame = undefined;
                     if (opening) {
                         if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                             this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
@@ -130,6 +131,10 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             });
         }
         else {
+            if (this._activeAnimationFrame) {
+                window.cancelAnimationFrame(this._activeAnimationFrame);
+                this._activeAnimationFrame = undefined;
+            }
             this._contentElement.style.removeProperty('transition');
             if (opening) {
                 if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {

package/esm/field/field-foundation.d.ts

@@ -51,6 +51,7 @@ export declare class FieldFoundation {
     protected _onTrailingSlotChanged(evt: Event): void;
     protected _onAddonEndSlotChanged(evt: Event): void;
     protected _initializeLabel(): void;
+    private _destroyFloatingLabel;
     protected _detectLeadingContent(): void;
     protected _detectTrailingContent(): void;
     protected _detectAddonEndContent(): void;

package/esm/field/field-foundation.js

@@ -85,10 +85,16 @@ export class FieldFoundation {
     }
     set density(value) {
         if (this._density !== value) {
+            const prevDensity = this._density;
             this._density = value;
             if (this._isInitialized) {
                 this._applyDensity();
-                this._initializeLabel();
+                if (this._density === 'dense') {
+                    this._destroyFloatingLabel({ cancelFloat: true });
+                }
+                else if (prevDensity === 'dense') {
+                    this._initializeLabel();
+                }
             }
             this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
         }
@@ -186,9 +192,8 @@ export class FieldFoundation {
         this._detectAddonEndContent();
     }
     _initializeLabel() {
-        if (this._floatingLabel) {
-            this._floatingLabel.destroy();
-        }
+        var _a;
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy();
         this._adapter.detectLabel();
         if (this._adapter.hasLabel() && this._density !== 'dense') {
             this._floatingLabel = this._adapter.initializeFloatingLabel();
@@ -197,11 +202,16 @@ export class FieldFoundation {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
         }
         else {
-            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
-            this._floatingLabel = undefined;
+            this._destroyFloatingLabel();
         }
     }
+    _destroyFloatingLabel({ cancelFloat = false } = {}) {
+        var _a;
+        this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy({ cancelFloat });
+        this._floatingLabel = undefined;
+    }
     _detectLeadingContent() {
         if (this._adapter.hasLeadingNodes()) {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);

package/esm/floating-label/floating-label-foundation.d.ts

@@ -7,9 +7,12 @@ import { IFloatingLabelAdapter } from './floating-label-adapter';
 export declare class FloatingLabelFoundation {
     protected _adapter: IFloatingLabelAdapter;
     private _floatAnimationEndHandler;
+    private _activeFrame;
     constructor(_adapter: IFloatingLabelAdapter);
     initialize(): void;
-    disconnect(): void;
+    disconnect({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     float(shouldFloat: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
     get isFloating(): boolean;

package/esm/floating-label/floating-label-foundation.js

@@ -18,7 +18,10 @@ export class FloatingLabelFoundation {
             this._adapter.addLabelListener('transitionend', this._floatAnimationEndHandler);
         }
     }
-    disconnect() {
+    disconnect({ cancelFloat = false } = {}) {
+        if (cancelFloat && this._activeFrame) {
+            window.cancelAnimationFrame(this._activeFrame);
+        }
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
@@ -32,9 +35,9 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
             }
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+            this._activeFrame = window.requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    if (alwaysFloat || this.isFloating) {
                         this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                     }
                     this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
@@ -46,8 +49,8 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                 this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    this._activeFrame = window.requestAnimationFrame(() => {
                         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
                     });
                 });

package/esm/floating-label/floating-label.d.ts

@@ -7,7 +7,9 @@ export interface IFloatingLabel {
     isFloating: boolean;
     float(float: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
-    destroy(): void;
+    destroy(opts?: {
+        cancelFloat?: boolean;
+    }): void;
 }
 export declare class FloatingLabel implements IFloatingLabel {
     private _labelElement;
@@ -15,7 +17,9 @@ export declare class FloatingLabel implements IFloatingLabel {
     constructor(_labelElement: HTMLLabelElement);
     /** Returns the current label floating state. */
     get isFloating(): boolean;
-    destroy(): void;
+    destroy({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     /**
      * Sets the floating state of the label element.
      * @param shouldFloat If true, sets the label to float, otherwise un-float.

package/esm/floating-label/floating-label.js

@@ -15,8 +15,8 @@ export class FloatingLabel {
     get isFloating() {
         return this._foundation.isFloating;
     }
-    destroy() {
-        this._foundation.disconnect();
+    destroy({ cancelFloat = false } = {}) {
+        this._foundation.disconnect({ cancelFloat });
         this._labelElement = undefined;
     }
     /**

package/esm/icon/icon-adapter.d.ts

@@ -6,7 +6,6 @@
 import { IIconComponent } from './icon';
 import { BaseAdapter, IBaseAdapter } from '../core';
 export interface IIconAdapter extends IBaseAdapter {
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;
@@ -15,7 +14,6 @@ export interface IIconAdapter extends IBaseAdapter {
 export declare class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAdapter {
     private _observer;
     constructor(component: IIconComponent);
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;

package/esm/icon/icon-adapter.js

@@ -9,11 +9,6 @@ export class IconAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
-    initialize() {
-        if (!this._component.hasAttribute('aria-hidden')) {
-            this._component.setAttribute('aria-hidden', 'true');
-        }
-    }
     canLazyLoad() {
         return !!window.IntersectionObserver;
     }
@@ -33,9 +28,13 @@ export class IconAdapter extends BaseAdapter {
         }
     }
     setContent(content) {
+        var _a;
         const shadowRoot = this._component.shadowRoot;
         const styleTag = shadowRoot.querySelector('style');
         shadowRoot.innerHTML = content;
+        if (content) {
+            (_a = shadowRoot.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
+        }
         if (styleTag) {
             shadowRoot.appendChild(styleTag);
         }

package/esm/icon/icon-foundation.js

@@ -13,7 +13,6 @@ export class IconFoundation {
         this._lazyListener = () => this._loadIcon();
     }
     initialize() {
-        this._adapter.initialize();
         this._applyIcon();
     }
     disconnect() {

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';