@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/esm/button/base/base-button-adapter.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { IFocusIndicatorComponent } from '../../focus-indicator';
+import { IStateLayerComponent } from '../../state-layer';
+import { IBaseButton } from './base-button';
+export interface IBaseButtonAdapter extends IBaseAdapter {
+    initialize(): void;
+    initializeAnchor(): void;
+    removeAnchor(): void;
+    setAnchorHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(value: string): void;
+    setAnchorRel(value: string): void;
+    setDisabled(value: boolean): void;
+    syncDisabled(value: boolean): void;
+    clickAnchor(): void;
+    clickHost(): void;
+    clickFormButton(type: string): void;
+    addAnchorEventListener(type: string, listener: EventListener): void;
+    removeAnchorEventListener(type: string, listener: EventListener): void;
+    hasPopoverTarget(): boolean;
+    managePopover(): boolean;
+    toggleDefaultPopoverIcon(value: boolean): void;
+    animateStateLayer(): void;
+    proxyLabel(value: string | null): void;
+}
+export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton> implements IBaseButtonAdapter {
+    protected _rootElement: HTMLElement;
+    protected _anchorElement: HTMLAnchorElement | undefined;
+    protected _focusIndicatorElement: IFocusIndicatorComponent;
+    protected _stateLayerElement: IStateLayerComponent;
+    protected _endSlotElement: HTMLSlotElement;
+    private _labelAwareText?;
+    constructor(component: IBaseButton);
+    initialize(): void;
+    initializeAnchor(): void;
+    removeAnchor(): void;
+    setAnchorHref(href: string): void;
+    setAnchorTarget(target: string): void;
+    setAnchorDownload(value: string): void;
+    setAnchorRel(value: string): void;
+    setDisabled(value: boolean): void;
+    syncDisabled(value: boolean): void;
+    clickAnchor(): void;
+    clickHost(): void;
+    clickFormButton(type: string): void;
+    addAnchorEventListener(type: string, listener: EventListener): void;
+    removeAnchorEventListener(type: string, listener: EventListener): void;
+    hasPopoverTarget(): boolean;
+    /**
+     * We are emulating native behavior here since custom elements do not support integrating with the
+     * native popover element. This method will attempt to find the popover target element and handle
+     * its `popovertargetaction`
+     */
+    managePopover(): boolean;
+    toggleDefaultPopoverIcon(value: boolean): void;
+    animateStateLayer(): void;
+    proxyLabel(value: string | null): void;
+    private _locatePopoverTargetElement;
+    private _applyHostSemantics;
+    /**
+     * Our anchor element is the interactive element that will be used to trigger the click event when it is present.
+     *
+     * We use the <a> element as an overlay on top of all content to ensure that it provides the native functionality,
+     * while removing it from the accessibility tree and tab order so that it does not interfere with the host semantics.
+     */
+    private _createAnchorRootElement;
+}

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

@@ -0,0 +1,250 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer';
+import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
+import { BUTTON_FORM_ATTRIBUTES, cloneAttributes } from '../../core/utils/reflect-utils';
+import { internals, isFocusable } from '../../constants';
+import { supportsPopover } from '../../core/utils/feature-detection';
+export class BaseButtonAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(this._component, BASE_BUTTON_CONSTANTS.selectors.ROOT);
+        this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
+        this._endSlotElement = getShadowElement(this._component, BASE_BUTTON_CONSTANTS.selectors.END_SLOT);
+    }
+    initialize() {
+        this._applyHostSemantics();
+    }
+    initializeAnchor() {
+        this._anchorElement = this._createAnchorRootElement();
+        this._rootElement.insertAdjacentElement('afterend', this._anchorElement);
+        this._applyHostSemantics();
+    }
+    removeAnchor() {
+        var _a;
+        (_a = this._anchorElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this._anchorElement = undefined;
+        this._applyHostSemantics();
+    }
+    setAnchorHref(href) {
+        if (this._anchorElement) {
+            this._anchorElement.href = href;
+        }
+    }
+    setAnchorTarget(target) {
+        if (this._anchorElement) {
+            this._anchorElement.target = target;
+        }
+    }
+    setAnchorDownload(value) {
+        if (this._anchorElement) {
+            this._anchorElement.download = value;
+        }
+    }
+    setAnchorRel(value) {
+        if (this._anchorElement) {
+            this._anchorElement.rel = value;
+        }
+    }
+    setDisabled(value) {
+        if (this._anchorElement) {
+            return; // Cannot disable an anchor element
+        }
+        this.syncDisabled(value);
+    }
+    syncDisabled(value) {
+        if (value) {
+            this._focusIndicatorElement.remove();
+            this._stateLayerElement.remove();
+        }
+        else {
+            this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
+        }
+        this._component[isFocusable] = !value;
+        toggleAttribute(this._component, value, 'aria-disabled', 'true');
+    }
+    clickAnchor() {
+        var _a;
+        (_a = this._anchorElement) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    clickHost() {
+        // Calling click() on the prototype ensures we don't end up in an infinite
+        // recursion since the host overrides the HTMLElement.click() method
+        HTMLElement.prototype.click.call(this._component);
+    }
+    clickFormButton(type) {
+        var _a;
+        if (!this._component.form) {
+            return; // Nothing for us to do if there is no form element associated to us
+        }
+        if (type === 'submit') {
+            // We need to set the form value to the button value before submitting the form
+            this._component[internals].setFormValue(this._component.value);
+            // We don't use a real <button> since the host is the semantic button, so for
+            // the "submit" button type we need to create a temporary button and click it
+            // to trigger the form submission
+            const tempBtn = document.createElement('button');
+            tempBtn.type = type;
+            cloneAttributes(this._component, tempBtn, BUTTON_FORM_ATTRIBUTES);
+            // form.requestSubmit(submitter) does not work with form associated custom
+            // elements. This patches the dispatched submit event to add the correct `submitter`.
+            // See https://github.com/WICG/webcomponents/issues/814
+            this._component.form.addEventListener('submit', evt => {
+                Object.defineProperty(evt, 'submitter', {
+                    configurable: true,
+                    enumerable: true,
+                    get: () => this._component
+                });
+            }, { capture: true, once: true });
+            this._component.insertAdjacentElement('afterend', tempBtn);
+            tempBtn.click();
+            tempBtn.remove();
+        }
+        else if (type === 'reset') {
+            (_a = this._component.form) === null || _a === void 0 ? void 0 : _a.reset();
+        }
+    }
+    addAnchorEventListener(type, listener) {
+        this._rootElement.addEventListener(type, listener);
+    }
+    removeAnchorEventListener(type, listener) {
+        this._rootElement.removeEventListener(type, listener);
+    }
+    hasPopoverTarget() {
+        return this._component.hasAttribute('popovertarget') || !!this._component.popoverTargetElement;
+    }
+    /**
+     * We are emulating native behavior here since custom elements do not support integrating with the
+     * native popover element. This method will attempt to find the popover target element and handle
+     * its `popovertargetaction`
+     */
+    managePopover() {
+        if (this._component.form || !this.hasPopoverTarget() || !supportsPopover()) {
+            return false;
+        }
+        const popoverElement = this._locatePopoverTargetElement();
+        if (!popoverElement) {
+            return false;
+        }
+        const action = this._component.getAttribute('popovertargetaction') || 'toggle';
+        const isPopoverOpen = popoverElement.matches(':popover-open');
+        switch (action) {
+            case 'show':
+                if (!isPopoverOpen) {
+                    popoverElement.showPopover();
+                }
+                return true;
+            case 'hide':
+                if (isPopoverOpen) {
+                    popoverElement.hidePopover();
+                }
+                return false;
+            case 'toggle':
+            default:
+                const result = popoverElement.togglePopover();
+                // When the popover is open and is using an "auto" popover mode, we need to handle
+                // clicking ourselves again to close without re-opening the popover. We do this by
+                // adding a click listener to the component that will stop propagation of the event
+                // and then remove itself after the first click (or when the popover is closed externally).
+                if (result && popoverElement.popover !== 'manual') {
+                    const listener = evt => {
+                        evt.stopPropagation();
+                        // The popover will already be closed via pointer, but we need to ensure that
+                        // it closes via keyboard as well so we perform the following check regardless
+                        if (popoverElement.matches(':popover-open')) {
+                            popoverElement.hidePopover();
+                        }
+                    };
+                    this._component.addEventListener('click', listener, { capture: true, once: true });
+                    popoverElement.addEventListener('beforetoggle', async () => {
+                        await new Promise(resolve => setTimeout(resolve)); // Wait a cycle to allow the click event to propagate first
+                        this._component.removeEventListener('click', listener, { capture: true });
+                    }, { once: true });
+                }
+                return result;
+        }
+    }
+    toggleDefaultPopoverIcon(value) {
+        if (value) {
+            // We support a built-in "popover icon" for convenience that can be used to indicate that the button will show a popover
+            const hasIcon = this._endSlotElement.querySelector('forge-icon');
+            if (!hasIcon) {
+                const icon = document.createElement('forge-icon');
+                icon.classList.add(BASE_BUTTON_CONSTANTS.classes.POPOVER_ICON);
+                icon.name = tylIconArrowDropDown.name;
+                this._endSlotElement.append(icon);
+            }
+        }
+        else {
+            const icon = this._endSlotElement.querySelector('forge-icon');
+            icon === null || icon === void 0 ? void 0 : icon.remove();
+        }
+    }
+    animateStateLayer() {
+        var _a;
+        if (this._stateLayerElement.disabled) {
+            return;
+        }
+        (_a = this._stateLayerElement) === null || _a === void 0 ? void 0 : _a.playAnimation();
+    }
+    proxyLabel(value) {
+        var _a;
+        this._labelAwareText = value !== null && value !== void 0 ? value : undefined;
+        const hasAriaLabel = this._component.hasAttribute('aria-label') || !!this._labelAwareText;
+        toggleAttribute(this._component, hasAriaLabel, 'aria-label', (_a = this._component.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : this._labelAwareText);
+    }
+    _locatePopoverTargetElement() {
+        var _a;
+        let popoverElement = (_a = this._component.popoverTargetElement) !== null && _a !== void 0 ? _a : null;
+        if (!popoverElement) {
+            const rootNode = this._component.ownerDocument.getRootNode();
+            if (!rootNode) {
+                return null;
+            }
+            const targetId = this._component.getAttribute('popovertarget');
+            popoverElement = rootNode.querySelector(`#${targetId}`);
+        }
+        return popoverElement;
+    }
+    _applyHostSemantics() {
+        const role = this._component.getAttribute('role');
+        // Allow user provided roles to override our default role
+        if (!role || ['button', 'link'].includes(role)) {
+            // Set default role based on the existence of an anchor element
+            this._component.role = this._anchorElement ? 'link' : 'button';
+        }
+        this._component[isFocusable] = this._anchorElement || !this._component.disabled;
+    }
+    /**
+     * Our anchor element is the interactive element that will be used to trigger the click event when it is present.
+     *
+     * We use the <a> element as an overlay on top of all content to ensure that it provides the native functionality,
+     * while removing it from the accessibility tree and tab order so that it does not interfere with the host semantics.
+     */
+    _createAnchorRootElement() {
+        const a = document.createElement('a');
+        a.setAttribute('aria-hidden', 'true');
+        a.tabIndex = -1;
+        if (this._component.href) {
+            a.href = this._component.href;
+        }
+        if (this._component.target) {
+            a.target = this._component.target;
+        }
+        if (this._component.download) {
+            a.download = this._component.download;
+        }
+        if (this._component.rel) {
+            a.rel = this._component.rel;
+        }
+        return a;
+    }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BASE_BUTTON_CONSTANTS: {
+    observedAttributes: {
+        TYPE: string;
+        DISABLED: string;
+        POPOVER_ICON: string;
+        ANCHOR: string;
+        HREF: string;
+        TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
+        DENSE: string;
+        TABINDEX: string;
+    };
+    attributes: {
+        TYPE: string;
+        DISABLED: string;
+        POPOVER_ICON: string;
+        ANCHOR: string;
+        HREF: string;
+        TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
+        DENSE: string;
+        TABINDEX: string;
+    };
+    selectors: {
+        ROOT: string;
+        END_SLOT: string;
+    };
+    classes: {
+        ROOT: string;
+        POPOVER_ICON: string;
+    };
+};
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonTarget = '_blank' | '_self' | '_parent' | '_top';

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+const observedAttributes = {
+    TYPE: 'type',
+    DISABLED: 'disabled',
+    POPOVER_ICON: 'popover-icon',
+    ANCHOR: 'anchor',
+    HREF: 'href',
+    TARGET: 'target',
+    DOWNLOAD: 'download',
+    REL: 'rel',
+    DENSE: 'dense',
+    TABINDEX: 'tabindex'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    ROOT: 'forge-button',
+    POPOVER_ICON: 'forge-button__popover-icon'
+};
+const selectors = {
+    ROOT: '[part=root]',
+    END_SLOT: 'slot[name=end]'
+};
+export const BASE_BUTTON_CONSTANTS = {
+    observedAttributes,
+    attributes,
+    selectors,
+    classes
+};

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IBaseButtonAdapter } from './base-button-adapter';
+import { ButtonType } from './base-button-constants';
+export interface IBaseButtonFoundation extends ICustomElementFoundation {
+    type: ButtonType;
+    disabled: boolean;
+    popoverIcon: boolean;
+    anchor: boolean;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    dense: boolean;
+    click(options: {
+        animateStateLayer: boolean;
+    }): void;
+    proxyLabel(label: string | null): void;
+}
+export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> implements IBaseButtonFoundation {
+    protected _adapter: T;
+    private _type;
+    private _disabled;
+    private _popoverIcon;
+    private _anchor;
+    private _href;
+    private _target;
+    private _download;
+    private _rel;
+    private _dense;
+    private _clickListener;
+    private _keydownListener;
+    private _anchorFocusListener;
+    constructor(_adapter: T);
+    initialize(): void;
+    /**
+     * Handles overriding the the `click()` method on the HTMLElement instance
+     */
+    click({ animateStateLayer }?: {
+        animateStateLayer?: boolean | undefined;
+    }): void;
+    proxyLabel(label: string | null): void;
+    protected _onClick(evt: MouseEvent): Promise<void>;
+    /**
+     * Handle keydown events on the host element to manually trigger click events.
+     */
+    private _onKeydown;
+    private _toggleAnchor;
+    private _manageAnchorListeners;
+    get type(): ButtonType;
+    set type(type: ButtonType);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get popoverIcon(): boolean;
+    set popoverIcon(value: boolean);
+    /**
+     * Anchor properties
+     */
+    get anchor(): boolean;
+    set anchor(value: boolean);
+    get href(): string;
+    set href(value: string);
+    get target(): string;
+    set target(value: string);
+    get download(): string;
+    set download(value: string);
+    get rel(): string;
+    set rel(value: string);
+    get dense(): boolean;
+    set dense(value: boolean);
+}