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

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

@@ -11,9 +11,14 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    redispatchEvent(event: Event, options?: {
+        bubbles?: boolean;
+        cancelable?: boolean;
+        composed?: boolean;
+    }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
-    removeHostListener(event: string, callback: (event: Event) => void): void;
+    removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
     addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
@@ -21,6 +26,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
     getScreenWidth(): number;
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
+    focusHost(options?: FocusOptions): void;
 }
 export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     protected _component: T;
@@ -30,6 +36,11 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    redispatchEvent(event: Event, options?: {
+        bubbles?: boolean;
+        cancelable?: boolean;
+        composed?: boolean;
+    }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
     toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
@@ -41,5 +52,6 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
     getScreenWidth(): number;
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
+    focusHost(options?: FocusOptions): void;
     get isConnected(): boolean;
 }

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

@@ -23,6 +23,20 @@ export class BaseAdapter {
     toggleHostAttribute(name, hasAttribute, value) {
         toggleAttribute(this._component, hasAttribute, name, value);
     }
+    redispatchEvent(event, options) {
+        var _a, _b, _c, _d;
+        const isFromLightDom = !(((_a = event.target) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot);
+        if (event.bubbles && (event.composed || isFromLightDom)) {
+            event.stopPropagation();
+        }
+        const eventCopy = Object.assign(Object.assign({}, event), { bubbles: (_b = options === null || options === void 0 ? void 0 : options.bubbles) !== null && _b !== void 0 ? _b : event.bubbles, cancelable: (_c = options === null || options === void 0 ? void 0 : options.cancelable) !== null && _c !== void 0 ? _c : event.cancelable, composed: (_d = options === null || options === void 0 ? void 0 : options.composed) !== null && _d !== void 0 ? _d : event.composed });
+        const newEvent = Reflect.construct(event.constructor, [event.type, eventCopy]);
+        const isCancelled = !this._component.dispatchEvent(newEvent);
+        if (isCancelled) {
+            event.preventDefault();
+        }
+        return !isCancelled;
+    }
     emitHostEvent(type, data = null, bubble = true, cancelable) {
         return emitEvent(this._component, type, data, bubble, cancelable);
     }
@@ -61,6 +75,9 @@ export class BaseAdapter {
     removeBodyAttribute(name) {
         document.body.removeAttribute(name);
     }
+    focusHost(options) {
+        HTMLElement.prototype.focus.call(this._component, options);
+    }
     get isConnected() {
         return this._component.isConnected;
     }

package/esm/core/base/base-component.d.ts

@@ -5,43 +5,5 @@
  */
 export interface IBaseComponent extends HTMLElement {
 }
-/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export declare abstract class BaseComponent extends HTMLElement implements IBaseComponent {
 }
-export interface IBaseFormComponent<T = string> extends IBaseComponent {
-    disabled: boolean;
-    required: boolean;
-    name: string;
-    readonly form: HTMLFormElement | null;
-    readonly labels: NodeList;
-    readonly validity: ValidityState;
-    readonly validationMessage: string;
-    readonly willValidate: boolean;
-    readonly internals: ElementInternals;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    setCustomValidity(error: string): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
-    formDisabledCallback(isDisabled: boolean): void;
-}
-/** Any form associated Custom HTML element. */
-export declare abstract class BaseFormComponent<T = string> extends BaseComponent implements IBaseFormComponent<T> {
-    abstract disabled: boolean;
-    abstract required: boolean;
-    abstract name: string;
-    abstract get form(): HTMLFormElement | null;
-    abstract get labels(): NodeList;
-    abstract get validity(): ValidityState;
-    abstract get validationMessage(): string;
-    abstract get willValidate(): boolean;
-    abstract get internals(): ElementInternals;
-    abstract setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
-    abstract checkValidity(): boolean;
-    abstract reportValidity(): boolean;
-    abstract setCustomValidity(error: string): void;
-    abstract formResetCallback(): void;
-    abstract formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
-    abstract formDisabledCallback(isDisabled: boolean): void;
-}

package/esm/core/base/base-component.js

@@ -3,9 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export class BaseComponent extends HTMLElement {
 }
-/** Any form associated Custom HTML element. */
-export class BaseFormComponent extends BaseComponent {
-}

package/esm/core/base/base-focusable-component.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @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/labs/behaviors/focusable.ts)
+ */
+import { isFocusable, MixinBase, MixinReturn } from '../../constants';
+import { BaseComponent, IBaseComponent } from './base-component';
+/**
+ * An element that can enable and disable `tabindex` focusability.
+ */
+export interface IBaseFocusableComponent extends IBaseComponent {
+    /**
+     * Whether or not the element can be focused. Defaults to true. Set to false
+     * to disable focusing (unless a user has set a `tabindex`).
+     */
+    [isFocusable]: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+/**
+ * Mixes in focusable functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithFocusable<T extends MixinBase<BaseComponent>>(base: T): MixinReturn<T, IBaseFocusableComponent>;
+declare const BaseFocusableComponent_base: MixinReturn<typeof BaseComponent, IBaseFocusableComponent>;
+/**
+ * Provides focusable functionality for an element.
+ *
+ * Elements can enable and disable their focusability with the `isFocusable`
+ * symbol property. **Use this instead of changing `tabIndex` directly.**
+ *
+ * This will preserve externally-set tabindices. If an element sets `tabindex="-1"`,
+ * but a user sets `tabindex="0"`, it will still be focusable.
+ *
+ * To remove user overrides and restore focus control to the element, remove the `tabindex` attribute.
+ */
+export declare abstract class BaseFocusableComponent extends BaseFocusableComponent_base implements IBaseFocusableComponent {
+}
+export {};

package/esm/core/base/base-focusable-component.js

@@ -0,0 +1,90 @@
+/**
+ * @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/labs/behaviors/focusable.ts)
+ */
+import { isFocusable } from '../../constants';
+import { BaseComponent } from './base-component';
+const _privateIsFocusable = Symbol('privateIsFocusable');
+const _externalTabIndex = Symbol('externalTabIndex');
+const _isUpdatingTabIndex = Symbol('isUpdatingTabIndex');
+const _updateTabIndex = Symbol('updateTabIndex');
+/**
+ * Mixes in focusable functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export function WithFocusable(base) {
+    var _a, _b, _c;
+    class FocusableComponent extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = false;
+            this[_b] = null; // Allows for external tabIndex to be stored when internal tabIndex is set to -1
+            this[_c] = false; // Allows for internal tabIndex to be set without triggering attributeChangedCallback
+        }
+        get [isFocusable]() {
+            return this[_privateIsFocusable];
+        }
+        /**
+         * Whether or not the element can be focused.
+         *
+         * Set this from inheriting components **instead** of directly manipulating `tabIndex`.
+         */
+        set [isFocusable](value) {
+            if (this[isFocusable] === value) {
+                return;
+            }
+            this[_privateIsFocusable] = value;
+            this[_updateTabIndex]();
+        }
+        connectedCallback() {
+            // This must be set in the connectedCallback to avoid sprouting a tabindex attribute on the host from the ctor
+            this[isFocusable] = true;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name !== 'tabindex' || this[_isUpdatingTabIndex]) {
+                return;
+            }
+            if (!this.hasAttribute('tabindex')) {
+                // User removed the attribute, can now use internal tabIndex
+                this[_externalTabIndex] = null;
+                this[_updateTabIndex]();
+                return;
+            }
+            this[_externalTabIndex] = this.tabIndex;
+        }
+        [(_a = _privateIsFocusable, _b = _externalTabIndex, _c = _isUpdatingTabIndex, _updateTabIndex)]() {
+            var _d;
+            const internalTabIndex = this[isFocusable] ? 0 : -1;
+            const computedTabIndex = (_d = this[_externalTabIndex]) !== null && _d !== void 0 ? _d : internalTabIndex;
+            // const computedTabIndex = internalTabIndex === 0 ? this[_externalTabIndex] ?? internalTabIndex : internalTabIndex;
+            this[_isUpdatingTabIndex] = true;
+            this.tabIndex = computedTabIndex;
+            this[_isUpdatingTabIndex] = false;
+        }
+    }
+    return FocusableComponent;
+}
+/**
+ * Provides focusable functionality for an element.
+ *
+ * Elements can enable and disable their focusability with the `isFocusable`
+ * symbol property. **Use this instead of changing `tabIndex` directly.**
+ *
+ * This will preserve externally-set tabindices. If an element sets `tabindex="-1"`,
+ * but a user sets `tabindex="0"`, it will still be focusable.
+ *
+ * To remove user overrides and restore focus control to the element, remove the `tabindex` attribute.
+ */
+export class BaseFocusableComponent extends WithFocusable(BaseComponent) {
+}

package/esm/core/base/base-form-component.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../constants';
+import { BaseComponent, IBaseComponent } from './base-component';
+import { IBaseFocusableComponent } from './base-focusable-component';
+export interface IBaseFormComponent<T = string> extends IBaseComponent {
+    value: T;
+    disabled: boolean;
+    readonly: boolean;
+    name: string;
+    readonly form: HTMLFormElement | null;
+    readonly labels: NodeList;
+    readonly [internals]: ElementInternals;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown, reason: 'restore' | 'autocomplete'): void;
+    formDisabledCallback(isDisabled: boolean): void;
+}
+/**
+ * Any form associated Custom HTML element.
+ */
+export declare abstract class BaseFormComponent<T = string> extends BaseComponent implements IBaseFormComponent<T> {
+    static formAssociated: boolean;
+    abstract value: T;
+    abstract disabled: boolean;
+    abstract readonly: boolean;
+    abstract name: string;
+    abstract get form(): HTMLFormElement | null;
+    abstract get labels(): NodeList;
+    abstract get [internals](): ElementInternals;
+    abstract formResetCallback(): void;
+    abstract formStateRestoreCallback(state: unknown, reason: 'restore' | 'autocomplete'): void;
+    abstract formDisabledCallback(isDisabled: boolean): void;
+}
+export interface IBaseFocusableFormComponent<T = string> extends IBaseFormComponent<T>, IBaseFocusableComponent {
+}
+declare const BaseFocusableFormComponent_base: import("../../constants").MixinReturn<typeof BaseFormComponent, IBaseFocusableComponent>;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export declare abstract class BaseFocusableFormComponent<T = string> extends BaseFocusableFormComponent_base<T> implements IBaseFocusableFormComponent<T> {
+}
+export {};

package/esm/core/base/base-form-component.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../constants';
+import { BaseComponent } from './base-component';
+import { WithFocusable } from './base-focusable-component';
+/**
+ * Any form associated Custom HTML element.
+ */
+export class BaseFormComponent extends BaseComponent {
+}
+BaseFormComponent.formAssociated = true;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export class BaseFocusableFormComponent extends WithFocusable(BaseFormComponent) {
+}

package/esm/core/base/base-nullable-form-component.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseFocusableComponent } from './base-focusable-component';
+import { BaseFormComponent, IBaseFormComponent } from './base-form-component';
+export interface IBaseNullableFormComponent<T = string> extends IBaseFormComponent<T> {
+    required: boolean;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+}
+export declare abstract class BaseNullableFormComponent<T = string> extends BaseFormComponent<T> {
+    abstract required: boolean;
+    abstract get validity(): ValidityState;
+    abstract get validationMessage(): string;
+    abstract get willValidate(): boolean;
+    protected _hasCustomValidityError: boolean;
+    abstract checkValidity(): boolean;
+    abstract reportValidity(): boolean;
+    abstract setCustomValidity(error: string): void;
+}
+export interface IBaseFocusableNullableFormComponent<T = string> extends IBaseFormComponent<T>, IBaseFocusableComponent {
+}
+declare const BaseFocusableNullableFormComponent_base: import("../..").MixinReturn<typeof BaseFormComponent, IBaseFocusableComponent>;
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export declare abstract class BaseFocusableNullableFormComponent<T = string> extends BaseFocusableNullableFormComponent_base<T> implements IBaseFocusableNullableFormComponent<T> {
+}
+export {};

package/esm/core/base/base-nullable-form-component.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { WithFocusable } from './base-focusable-component';
+import { BaseFormComponent } from './base-form-component';
+export class BaseNullableFormComponent extends BaseFormComponent {
+    constructor() {
+        super(...arguments);
+        // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+        // Replace with this.internals.validity.customError when resolved.
+        this._hasCustomValidityError = false;
+    }
+}
+/**
+ * Any form associated Custom HTML element that focus on the host element.
+ */
+export class BaseFocusableNullableFormComponent extends WithFocusable(BaseFormComponent) {
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Detects if the browser supports the `popover` attribute.
+ * @returns {boolean}
+ */
+export declare function supportsPopover(): boolean;

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Detects if the browser supports the `popover` attribute.
+ * @returns {boolean}
+ */
+export function supportsPopover() {
+    return HTMLElement.prototype.hasOwnProperty('popover');
+}

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

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './a11y-utils';
 export * from './date-utils';
 export * from './event-utils';
+export * from './feature-detection';
+export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';
 export * from './utils';

package/esm/core/utils/index.js

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './a11y-utils';
 export * from './date-utils';
 export * from './event-utils';
+export * from './feature-detection';
+export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';
 export * from './utils';

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

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * A callback function for handling forwarded attributes.
+ */
+export type AttributeForwardingCallback = (name: string, value: string | null, part: string | null) => void;
+/**
+ * ARIA attributes capable of being reflected to a shadow element.
+ */
+export declare const REFLECTIVE_ARIA_ATTRIBUTES: string[];
+/**
+ * ARIA attributes typically useful for input elements.
+ */
+export declare const INPUT_ARIA_ATTRIBUTES: string[];
+/**
+ * Property names relevant to input elements.
+ */
+export declare const INPUT_PROPERTIES: (keyof HTMLInputElement)[];
+/**
+ * Attributes for buttons when used within a form.
+ */
+export declare const BUTTON_FORM_ATTRIBUTES: string[];
+/**
+ * Gets an array of attribute names prefixed by a part name and colon.
+ * @param part The part name of a shadow element.
+ * @param attributes An array of attribute names to prefix.
+ * @returns An array of prefixed attribute name strings.
+ */
+export declare function getPartPrefixedAttributes(part: string, attributes: string[]): string[];
+/**
+ * Observes a configured array of attributes set on a source element and forwards them to a
+ * callback function.
+ * @param from The element to forward attributes from.
+ * @param attributes Forwarded attributes.
+ * @param callback A function to handle forwarded attributes.
+ * @returns A `MutationObserver`.
+ */
+export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback): MutationObserver;
+/**
+ * Clones attributes from one element to another.
+ * @param from The source element to clone attributes from.
+ * @param to The target element to clone attributes to.
+ * @param attributes The list of attributes to clone.
+ */
+export declare function cloneAttributes(from: HTMLElement, to: HTMLElement, attributes: string[]): void;
+/**
+ * Clones properties from one element to another.
+ * @param from The source element to clone properties from.
+ * @param to The target element to clone properties to.
+ * @param attributes The list of properties to clone.
+ */
+export declare function cloneProperties<T, K extends keyof T>(from: T, to: T, properties: K[]): void;
+/**
+ * Clones the validation message of one input element to another.
+ * @param from The source input element to clone the validation message from.
+ * @param to The target input element to clone the validation message to.
+ */
+export declare function cloneValidationMessage(from: HTMLInputElement, to: HTMLInputElement): void;
+/**
+ * A utility class for switching between elements.
+ */
+export declare class SlottedElementAdapter<T extends HTMLElement = HTMLElement> {
+    private _el;
+    private _attachCallback;
+    /**
+     * Returns the element associated with this adapter.
+     */
+    get el(): T;
+    /**
+     * Clones the specified attributes from one element to another.
+     *
+     * @param from - The element to clone attributes from.
+     * @param to - The element to clone attributes to.
+     * @param attributes - The names of the attributes to clone.
+     */
+    static cloneAttributes(from: HTMLElement, to: HTMLElement, attributes: string[]): void;
+    /**
+     * Clones the input specific properties from one element to another.
+     *
+     * @param from - The element to clone properties from.
+     * @param to - The element to clone properties to.
+     */
+    static cloneProperties(from: HTMLElement, to: HTMLElement, properties: (keyof HTMLElement)[]): void;
+    /**
+     * Clones the validation message from one element to another.
+     *
+     * @param from - The element to clone the validation message from.
+     * @param to - The element to clone the validation message to.
+     */
+    static cloneValidationMessage(from: HTMLElement, to: HTMLElement): void;
+    /**
+     * Initializes the adapter with an initial element and attach callback.
+     *
+     * @param el - The element to associate with the adapter.
+     * @param attachCallback - The callback to invoke when attaching the element.
+     */
+    initialize(el: T, attachCallback: (newEl: T, oldEl: T) => void): void;
+    /**
+     * Replaces the attached element.
+     *
+     * @param el - The new element to attach.
+     */
+    attachElement(el: T): void;
+}