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

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);
+}

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

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
+export class BaseButtonFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._type = 'button'; // We default our buttons to the "button" type instead of "submit" as that is more common
+        this._disabled = false;
+        this._popoverIcon = false;
+        this._anchor = false;
+        this._href = '';
+        this._target = '';
+        this._download = '';
+        this._rel = '';
+        this._dense = false;
+        this._clickListener = (evt) => this._onClick(evt);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._anchorFocusListener = () => this._adapter.focusHost(); // Always ensure our host is focused when the anchor is focused
+        this._adapter.addHostListener('keydown', this._keydownListener);
+    }
+    initialize() {
+        this._adapter.initialize();
+        if (this._anchor) {
+            // When we're in anchor mode, we swap to us an `<a>` internally as the root. Since the `<a>`
+            // element is interactive by default, we can remove our click listener since the anchor will
+            // take over the default interaction handling
+            this._adapter.addAnchorEventListener('focus', this._anchorFocusListener);
+        }
+        else {
+            // When we're in button mode, we need to handle the click event on the host element
+            this._adapter.addHostListener('click', this._clickListener);
+        }
+    }
+    /**
+     * Handles overriding the the `click()` method on the HTMLElement instance
+     */
+    click({ animateStateLayer = false } = {}) {
+        if (this._disabled) {
+            return;
+        }
+        if (this._anchor) {
+            this._adapter.clickAnchor();
+        }
+        else {
+            this._adapter.clickHost();
+        }
+        if (animateStateLayer) {
+            this._adapter.animateStateLayer();
+        }
+    }
+    proxyLabel(label) {
+        this._adapter.proxyLabel(label);
+    }
+    async _onClick(evt) {
+        const isFormType = this._type === 'submit' || this._type === 'reset';
+        // Custom elements do not work with the popover* attributes by default so we need to manually
+        // manage the popover functionality for now...
+        if (!isFormType && this._adapter.hasPopoverTarget()) {
+            const isOpen = this._adapter.managePopover();
+            // If the popover was opened successfully we can stop here since there is no need to
+            // handle any other scenarios
+            if (isOpen) {
+                return;
+            }
+        }
+        // Wait a cycle to allow the click event to propagate
+        await new Promise(resolve => setTimeout(resolve));
+        // We allow for our click event to bubble first before we handle it in case the developer
+        // wants to prevent the default behavior
+        if (evt.defaultPrevented || this._disabled) {
+            return;
+        }
+        // For button types of submit or reset, we need to manually submit or reset the form
+        // since the click event doesn't do that for us with custom elements
+        if (isFormType) {
+            this._adapter.clickFormButton(this._type);
+        }
+    }
+    /**
+     * Handle keydown events on the host element to manually trigger click events.
+     */
+    async _onKeydown(evt) {
+        // Handle the special case for the space key (when not an anchor) to avoid
+        // scrolling when triggered
+        if (evt.key === ' ' && !this._anchor) {
+            evt.preventDefault();
+            this.click();
+            return;
+        }
+        // Wait a cycle for the keydown event to propagate
+        await new Promise(resolve => setTimeout(resolve));
+        if (evt.defaultPrevented || this._disabled) {
+            return;
+        }
+        if (evt.key === 'Enter') {
+            if (this._anchor) {
+                this._adapter.clickAnchor();
+            }
+            else {
+                this.click();
+            }
+        }
+    }
+    _toggleAnchor() {
+        if (this._anchor) {
+            this._adapter.initializeAnchor();
+            this._manageAnchorListeners();
+            this.disabled = false; // Anchor elements are always enabled
+        }
+        else {
+            this._adapter.removeAnchor();
+            this._manageAnchorListeners();
+        }
+    }
+    _manageAnchorListeners() {
+        if (this._anchor) {
+            this._adapter.removeHostListener('click', this._clickListener);
+            this._adapter.addAnchorEventListener('focus', this._anchorFocusListener);
+        }
+        else {
+            this._adapter.addHostListener('click', this._clickListener);
+            this._adapter.removeAnchorEventListener('focus', this._anchorFocusListener);
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(type) {
+        if (this._type !== type) {
+            this._type = type;
+            this._adapter.setHostAttribute(BASE_BUTTON_CONSTANTS.attributes.TYPE, type);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        // If we're in anchor mode, we need to ensure that the anchor is always enabled
+        if (this._anchor) {
+            if (this._disabled) {
+                this._adapter.syncDisabled(false);
+            }
+            value = false;
+        }
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DISABLED, value);
+        }
+    }
+    get popoverIcon() {
+        return this._popoverIcon;
+    }
+    set popoverIcon(value) {
+        value = Boolean(value);
+        if (this._popoverIcon !== value) {
+            this._popoverIcon = value;
+            this._adapter.toggleDefaultPopoverIcon(this._popoverIcon);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.POPOVER_ICON, value);
+        }
+    }
+    /**
+     * Anchor properties
+     */
+    get anchor() {
+        return this._anchor;
+    }
+    set anchor(value) {
+        value = Boolean(value);
+        if (this._anchor !== value) {
+            this._anchor = value;
+            this._toggleAnchor();
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.ANCHOR, value);
+        }
+    }
+    get href() {
+        return this._href;
+    }
+    set href(value) {
+        value = (value !== null && value !== void 0 ? value : '').trim();
+        if (this._href !== value) {
+            this._href = value;
+            this.anchor = this._href.length > 0;
+            if (this._anchor) {
+                this._adapter.setAnchorHref(this._href);
+            }
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.HREF, !!this._href, this._href);
+        }
+    }
+    get target() {
+        return this._target;
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value !== null && value !== void 0 ? value : '_self';
+            this._adapter.setAnchorTarget(value);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.TARGET, !!this._target, this._target);
+        }
+    }
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        if (this._download !== value) {
+            this._download = value;
+            this._adapter.setAnchorDownload(this._download);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DOWNLOAD, !!this._download, this._download);
+        }
+    }
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        if (this._rel !== value) {
+            this._rel = value;
+            this._adapter.setAnchorRel(this._rel);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.REL, !!this._rel, this._rel);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        value = Boolean(value);
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DENSE, value);
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
+import { internals } from '../../constants';
+import { IBaseComponent } from '../../core/base/base-component';
+import { IBaseButtonAdapter } from './base-button-adapter';
+import { ButtonType } from './base-button-constants';
+import { BaseButtonFoundation } from './base-button-foundation';
+import { ILabelAware } from '../../label/label-aware';
+export interface IBaseButton extends IBaseComponent {
+    type: ButtonType;
+    disabled: boolean;
+    popoverIcon: boolean;
+    name: string;
+    value: string;
+    dense: boolean;
+    anchor: boolean;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    form: HTMLFormElement | null;
+}
+export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseFocusableComponent implements IBaseButton, ILabelAware {
+    static readonly formAssociated = true;
+    [internals]: ElementInternals;
+    protected abstract _foundation: T;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+    get form(): HTMLFormElement | null;
+    get name(): string;
+    set name(name: string);
+    get value(): string;
+    set value(value: string);
+    type: ButtonType;
+    disabled: boolean;
+    popoverIcon: boolean;
+    anchor: boolean;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    dense: boolean;
+    click(): void;
+}