@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/esm/core/utils/a11y-utils.d.ts

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+ * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/internal/aria/aria.ts)
+ */
+/**
+ * Reflective ARIA property name types.
+ */
+export type ARIAProperty = Exclude<keyof ARIAMixin, 'role'>;
+/**
+ * Reflective ARIA attributes.
+ */
+export type ARIAAttribute = `${ARIAPropertyToAttribute<ARIAProperty>}` | 'role';
+/**
+ * Reflective ARIA properties.
+ */
+export declare const ARIA_PROPERTIES: ARIAProperty[];
+/**
+ * ARIA role values.
+ */
+export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
+/**
+ * Strictly typed ARIA properties.
+ */
+export interface ARIAMixinStrict extends ARIAMixin {
+    ariaAtomic: 'true' | 'false' | null;
+    ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
+    ariaBusy: 'true' | 'false' | null;
+    ariaChecked: 'true' | 'false' | null;
+    ariaColCount: `${number}` | null;
+    ariaColIndex: `${number}` | null;
+    ariaColSpan: `${number}` | null;
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null;
+    ariaDisabled: 'true' | 'false' | null;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
+    ariaHidden: 'true' | 'false' | null;
+    ariaInvalid: 'true' | 'false' | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: `${number}` | null;
+    ariaLive: 'assertive' | 'off' | 'polite' | null;
+    ariaModal: 'true' | 'false' | null;
+    ariaMultiLine: 'true' | 'false' | null;
+    ariaMultiSelectable: 'true' | 'false' | null;
+    ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: `${number}` | null;
+    ariaPressed: 'true' | 'false' | null;
+    ariaReadOnly: 'true' | 'false' | null;
+    ariaRequired: 'true' | 'false' | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: `${number}` | null;
+    ariaRowIndex: `${number}` | null;
+    ariaRowSpan: `${number}` | null;
+    ariaSelected: 'true' | 'false' | null;
+    ariaSetSize: `${number}` | null;
+    ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;
+    ariaValueMax: `${number}` | null;
+    ariaValueMin: `${number}` | null;
+    ariaValueNow: `${number}` | null;
+    ariaValueText: string | null;
+    role: ARIARole | null;
+}
+/**
+ * The ARIA attribute corresponding to a given ARIA property.
+ */
+export type ARIAPropertyToAttribute<K extends string> = K extends `aria${infer Suffix}Element${infer OptS}` ? `aria-${Lowercase<Suffix>}` : K extends `aria${infer Suffix}` ? `aria-${Lowercase<Suffix>}` : K;
+/**
+ * Gets the ARIA attribute corresponding to a given ARIA property.
+ *
+ * @param property An ARIA mixin property.
+ * @returns An ARIA attribute name.
+ */
+export declare function ariaPropertyToAttribute<K extends ARIAProperty | 'role'>(property: K): string;
+/**
+ * Gets the ARIA property corresponding to a given ARIA attribute.
+ *
+ * @param attribute An ARIA attribute name.
+ * @returns An ARIA mixin property.
+ */
+export declare function ariaAttributeToProperty<K extends ARIAAttribute | 'role'>(attribute: K): ARIAProperty;
+export type DefaultAriaOptions = {
+    setAttribute?: boolean;
+};
+/**
+ * Applies default ARIA to an element through ElementInternals if supported. Otherwise, ARIA
+ * attributes are set directly on the element and stored in additional `data-default-*` attributes
+ * for restoration in case attributes are overwritten during the element's lifecycle.
+ *
+ * This fallback is needed for browsers that don't support ARIA in ElementInternals, such as most
+ * recent versions of Firefox.
+ *
+ * Because new attributes may be sprouted on the element, it is necessary to call this after the
+ * element has been connected to the DOM.
+ *
+ * @param element - The element to set up ARIA attributes for.
+ * @param internals - The ElementInternals object to use for setting ARIA attributes if supported.
+ * @param properties - An object containing ARIA properties and their values to set as defaults.
+ * @param options - A `DefaultAriaOptions` object.
+ *
+ * @example
+ * class ButtonComponent extends BaseComponent {
+ *  public readonly internals: ElementInternals;
+ *
+ *  constructor() {
+ *   super();
+ *   this.internals = this.attachInternals();
+ *  }
+ *
+ *  public connectedCallback(): void {
+ *    setDefaultAria(this, this.internals, {
+ *     role: 'button'
+ *    });
+ *   }
+ * }
+ */
+export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;

package/esm/core/utils/a11y-utils.js

@@ -0,0 +1,169 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+ * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/internal/aria/aria.ts)
+ */
+import { toggleAttribute } from '@tylertech/forge-core';
+import { supportsElementInternalsAria } from './feature-detection';
+/**
+ * Reflective ARIA properties.
+ */
+export const ARIA_PROPERTIES = [
+    'ariaAtomic',
+    'ariaAutoComplete',
+    'ariaBusy',
+    'ariaChecked',
+    'ariaColCount',
+    'ariaColIndex',
+    'ariaColSpan',
+    'ariaCurrent',
+    'ariaDisabled',
+    'ariaExpanded',
+    'ariaHasPopup',
+    'ariaHidden',
+    'ariaInvalid',
+    'ariaKeyShortcuts',
+    'ariaLabel',
+    'ariaLevel',
+    'ariaLive',
+    'ariaModal',
+    'ariaMultiLine',
+    'ariaMultiSelectable',
+    'ariaOrientation',
+    'ariaPlaceholder',
+    'ariaPosInSet',
+    'ariaPressed',
+    'ariaReadOnly',
+    'ariaRequired',
+    'ariaRoleDescription',
+    'ariaRowCount',
+    'ariaRowIndex',
+    'ariaRowSpan',
+    'ariaSelected',
+    'ariaSetSize',
+    'ariaSort',
+    'ariaValueMax',
+    'ariaValueMin',
+    'ariaValueNow',
+    'ariaValueText'
+];
+/**
+ * An object mapping all ARIA attributes to their corresponding properties.
+ *
+ * This is required because the property name cannot be reliably inferred from the attribute name.
+ */
+const ARIA_ATTRIBUTES_TO_PROPERTIES = {
+    'aria-atomic': 'ariaAtomic',
+    'aria-autocomplete': 'ariaAutoComplete',
+    'aria-busy': 'ariaBusy',
+    'aria-checked': 'ariaChecked',
+    'aria-colcount': 'ariaColCount',
+    'aria-colindex': 'ariaColIndex',
+    'aria-colindextext': 'ariaColIndexText',
+    'aria-colspan': 'ariaColSpan',
+    'aria-current': 'ariaCurrent',
+    'aria-disabled': 'ariaDisabled',
+    'aria-expanded': 'ariaExpanded',
+    'aria-haspopup': 'ariaHasPopup',
+    'aria-hidden': 'ariaHidden',
+    'aria-invalid': 'ariaInvalid',
+    'aria-keyshortcuts': 'ariaKeyShortcuts',
+    'aria-label': 'ariaLabel',
+    'aria-level': 'ariaLevel',
+    'aria-live': 'ariaLive',
+    'aria-modal': 'ariaModal',
+    'aria-multiline': 'ariaMultiLine',
+    'aria-multiselectable': 'ariaMultiSelectable',
+    'aria-orientation': 'ariaOrientation',
+    'aria-placeholder': 'ariaPlaceholder',
+    'aria-posinset': 'ariaPosInSet',
+    'aria-pressed': 'ariaPressed',
+    'aria-readonly': 'ariaReadOnly',
+    'aria-required': 'ariaRequired',
+    'aria-roledescription': 'ariaRoleDescription',
+    'aria-rowcount': 'ariaRowCount',
+    'aria-rowindex': 'ariaRowIndex',
+    'aria-rowindextext': 'ariaRowIndexText',
+    'aria-rowspan': 'ariaRowSpan',
+    'aria-selected': 'ariaSelected',
+    'aria-setsize': 'ariaSetSize',
+    'aria-sort': 'ariaSort',
+    'aria-valuemax': 'ariaValueMax',
+    'aria-valuemin': 'ariaValueMin',
+    'aria-valuenow': 'ariaValueNow',
+    'aria-valuetext': 'ariaValueText',
+    'role': 'role'
+};
+/**
+ * Gets the ARIA attribute corresponding to a given ARIA property.
+ *
+ * @param property An ARIA mixin property.
+ * @returns An ARIA attribute name.
+ */
+export function ariaPropertyToAttribute(property) {
+    return property
+        .replace('aria', 'aria-')
+        // IDREF attributes also include an "Element" or "Elements" suffix
+        .replace(/Elements?/g, '')
+        .toLowerCase();
+}
+/**
+ * Gets the ARIA property corresponding to a given ARIA attribute.
+ *
+ * @param attribute An ARIA attribute name.
+ * @returns An ARIA mixin property.
+ */
+export function ariaAttributeToProperty(attribute) {
+    return ARIA_ATTRIBUTES_TO_PROPERTIES[attribute];
+}
+/**
+ * Applies default ARIA to an element through ElementInternals if supported. Otherwise, ARIA
+ * attributes are set directly on the element and stored in additional `data-default-*` attributes
+ * for restoration in case attributes are overwritten during the element's lifecycle.
+ *
+ * This fallback is needed for browsers that don't support ARIA in ElementInternals, such as most
+ * recent versions of Firefox.
+ *
+ * Because new attributes may be sprouted on the element, it is necessary to call this after the
+ * element has been connected to the DOM.
+ *
+ * @param element - The element to set up ARIA attributes for.
+ * @param internals - The ElementInternals object to use for setting ARIA attributes if supported.
+ * @param properties - An object containing ARIA properties and their values to set as defaults.
+ * @param options - A `DefaultAriaOptions` object.
+ *
+ * @example
+ * class ButtonComponent extends BaseComponent {
+ *  public readonly internals: ElementInternals;
+ *
+ *  constructor() {
+ *   super();
+ *   this.internals = this.attachInternals();
+ *  }
+ *
+ *  public connectedCallback(): void {
+ *    setDefaultAria(this, this.internals, {
+ *     role: 'button'
+ *    });
+ *   }
+ * }
+ */
+export function setDefaultAria(element, internals, properties, { setAttribute } = { setAttribute: true }) {
+    Object.entries(properties).forEach(([key, value]) => {
+        if (supportsElementInternalsAria()) {
+            internals[key] = value;
+        }
+        const attribute = ariaPropertyToAttribute(key);
+        if (setAttribute || !element.hasAttribute(attribute)) {
+            toggleAttribute(element, value != null, attribute, value);
+        }
+    });
+}

package/esm/core/utils/deferred.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export declare class Deferred<T = void> {
+    /**
+     * The promise to be resolved or rejected.
+     */
+    readonly promise: Promise<T>;
+    private _resolveFn;
+    private _rejectFn;
+    constructor();
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param: T): void;
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason?: any): void;
+}

package/esm/core/utils/deferred.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this._resolveFn = resolve;
+            this._rejectFn = reject;
+        });
+    }
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param) {
+        this._resolveFn(param);
+    }
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason) {
+        this._rejectFn(reason);
+    }
+}

package/esm/core/utils/dismissible-stack.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const tryDismiss: unique symbol;
+export interface IDismissibleStackState<T = string> {
+    [key: string]: T;
+}
+export interface IDismissible {
+    [tryDismiss](state?: IDismissibleStackState): boolean;
+}
+export declare class DismissibleStack<T extends IDismissible> {
+    private _deferredDismiss;
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing(): Promise<void>;
+    /**
+     * A set of all elements that are currently eligible for dismissal.
+     *
+     * Typically used when a user is force dismissing an element, such as when they click
+     * an element that triggered it to open.
+     */
+    private _dismissibleElements;
+    /**
+     * A map of all elements that are requesting to be dismissed, and the state that they
+     * are requesting to dismiss with.
+     *
+     * This is used to queue up dismiss requests so that we can wait for all other elements
+     * to dispatch their dismiss events, typically used with light dismiss.
+     */
+    private _elementsRequestingDismiss;
+    private constructor();
+    static get instance(): DismissibleStack<IDismissible>;
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    dismiss(el: T, state: IDismissibleStackState): Promise<void>;
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    requestDismiss(el: T, dismissState: IDismissibleStackState): Promise<void>;
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el: T): void;
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el: T): void;
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el: T): boolean;
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el: T): boolean;
+}

package/esm/core/utils/dismissible-stack.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { Deferred } from './deferred';
+import { task } from './event-utils';
+// The symbol to use for the tryDismiss method on dismissible elements
+export const tryDismiss = Symbol('tryDismiss');
+// The key to use for storing the dismissible stack on the window object
+const DISMISSIBLE_STACK_INSTANCE_KEY = Symbol('forgeDismissibleStack');
+export class DismissibleStack {
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing() {
+        var _a, _b;
+        return (_b = (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    constructor() {
+        /**
+         * A set of all elements that are currently eligible for dismissal.
+         *
+         * Typically used when a user is force dismissing an element, such as when they click
+         * an element that triggered it to open.
+         */
+        this._dismissibleElements = new Set();
+        /**
+         * A map of all elements that are requesting to be dismissed, and the state that they
+         * are requesting to dismiss with.
+         *
+         * This is used to queue up dismiss requests so that we can wait for all other elements
+         * to dispatch their dismiss events, typically used with light dismiss.
+         */
+        this._elementsRequestingDismiss = new Map();
+    }
+    static get instance() {
+        // We store our instance on the window object so that it can be shared across multiple
+        // instances of Forge components
+        if (!window[DISMISSIBLE_STACK_INSTANCE_KEY]) {
+            window[DISMISSIBLE_STACK_INSTANCE_KEY] = new DismissibleStack();
+        }
+        return window[DISMISSIBLE_STACK_INSTANCE_KEY];
+    }
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    async dismiss(el, state) {
+        const elements = Array.from(this._dismissibleElements);
+        const elementsAfter = elements.slice(elements.indexOf(el)).reverse();
+        for (const element of elementsAfter) {
+            if (!element[tryDismiss](state)) {
+                break;
+            }
+        }
+    }
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    async requestDismiss(el, dismissState) {
+        var _a;
+        if (!this._deferredDismiss) {
+            this._deferredDismiss = new Deferred();
+        }
+        this._elementsRequestingDismiss.set(el, dismissState);
+        // Wait for all other element to finish queuing their dismiss events
+        await task();
+        // The first element to call this method will handle attempting to dismiss the rest of
+        // elements, and will clear the queue when it is done. All other subsequent elements will
+        // just return here if called within the same task.
+        if (!this.isRequestingLightDismiss(el)) {
+            return;
+        }
+        // Get all elements that are requesting to be dismissed, and reverse the order so that
+        // we can attempt to dismiss them in a top-down order (most recently opened first)
+        const elements = Array.from(this._elementsRequestingDismiss).reverse();
+        // Clear all elements from the stack since we are don't need references to them anymore
+        this._elementsRequestingDismiss.clear();
+        // Attempt to dismiss each element in the queue (most recently opened first), if any of
+        // them are prevented, stop trying to dismiss the rest
+        try {
+            for (const [element, state] of elements) {
+                if (!element[tryDismiss](state)) {
+                    break;
+                }
+            }
+        }
+        finally {
+            (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.resolve();
+            this._deferredDismiss = undefined;
+        }
+    }
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el) {
+        this._dismissibleElements.add(el);
+    }
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el) {
+        this._dismissibleElements.delete(el);
+        this._elementsRequestingDismiss.delete(el);
+    }
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el) {
+        return this._dismissibleElements.has(el);
+    }
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el) {
+        return this._elementsRequestingDismiss.has(el);
+    }
+}

package/esm/core/utils/event-utils.d.ts

@@ -11,3 +11,4 @@
  */
 export declare function proxyShadowScrollEvent(shadowEl: Node, proxyEl: Node): () => void;
 export declare function eventIncludesArrowKey(evt: KeyboardEvent): boolean;
+export declare function task(): Promise<void>;

package/esm/core/utils/event-utils.js

@@ -17,3 +17,6 @@ export function proxyShadowScrollEvent(shadowEl, proxyEl) {
 export function eventIncludesArrowKey(evt) {
     return evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'ArrowUp' || evt.key === 'ArrowDown';
 }
+export function task() {
+    return new Promise(resolve => setTimeout(resolve));
+}

package/esm/core/utils/feature-detection.d.ts

@@ -8,3 +8,16 @@
  * @returns {boolean}
  */
 export declare function supportsPopover(): boolean;
+/**
+ * Detects if the browser supports ARIA properties in Element Internals.
+ *
+ * This currently always returns false because tooling is not yet able able to detect properties
+ * set on Element Internals.
+ * @returns {boolean}
+ */
+export declare function supportsElementInternalsAria(): boolean;
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export declare function supportsHover(): boolean;

package/esm/core/utils/feature-detection.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Platform } from '@tylertech/forge-core';
 /**
  * Detects if the browser supports the `popover` attribute.
  * @returns {boolean}
@@ -10,3 +11,23 @@
 export function supportsPopover() {
     return HTMLElement.prototype.hasOwnProperty('popover');
 }
+/**
+ * Detects if the browser supports ARIA properties in Element Internals.
+ *
+ * This currently always returns false because tooling is not yet able able to detect properties
+ * set on Element Internals.
+ * @returns {boolean}
+ */
+export function supportsElementInternalsAria() {
+    return ElementInternals.prototype.hasOwnProperty('role');
+}
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export function supportsHover() {
+    // TODO: hover media query is not working in CI headless chrome, so we are using the Platform.isMobile flag for now.
+    //       This should be reverted once we switch to using puppeteer or playwright for testing in CI.
+    // return window.matchMedia('(hover: hover)').matches;
+    return !Platform.isMobile;
+}

package/esm/core/utils/form-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export type FormValue = File | string | FormData;
+export type FormRestoreState = File | string | FormData | Array<[string, FormDataEntryValue]>;
+export type FormRestoreReason = 'restore' | 'autocomplete';
+export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'select' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type InputValidationProp = keyof InputValidationProps;
+export type ValidityStateFlag = Exclude<keyof ValidityState, 'valid'>;
+export interface InputValidationProps {
+    checked: boolean | null;
+    disabled: boolean | null;
+    max: number | null;
+    maxLength: number | null;
+    min: number | null;
+    minLength: number | null;
+    multiple: boolean | null;
+    pattern: string | null;
+    required: boolean | null;
+    step: number | null;
+    value: string | null;
+}

package/{styles/checkbox/_configuration.scss → esm/core/utils/form-utils.js}

@@ -3,8 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './token-utils' as *;
-
-@mixin configuration {
-  @include tokens;
-}
+export {};

package/esm/core/utils/index.d.ts

@@ -6,6 +6,7 @@
 export * from './date-utils';
 export * from './event-utils';
 export * from './feature-detection';
+export * from './form-utils';
 export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';