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

package/esm/radio/core/radio-group-manager.js

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getValidationMessage, internals, isFocusable, setDefaultAria } from '../../constants';
+import { task } from '../../core/utils/event-utils';
+import { RADIO_CONSTANTS, tryCheck } from '../radio';
+/**
+ * A class for coordinating the states of radio components within a radio group.
+ */
+export class RadioGroupManager {
+    /**
+     * Returns an array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     * If the given IRadioComponent does not have an associated form element, it searches the root
+     * node for all IRadioComponents with the same name.
+     * If the given IRadioComponent has an associated form element, it gets all RadioComponents with
+     * the same name from the form element.
+     *
+     * @param el - The IRadioComponent to get the radio group for.
+     * @returns An array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     */
+    static getRadioGroup(el) {
+        // If there's no name, it's not part of a radio group
+        if (!el.name) {
+            return [el];
+        }
+        // If there's no associated form element search the root node
+        if (!el.form) {
+            const root = el.getRootNode();
+            const namedRadios = root.querySelectorAll(`${RADIO_CONSTANTS.elementName}[name=${el.name}]`);
+            return Array.from(namedRadios).filter(radio => !radio.form);
+        }
+        // When there is a form element, get all RadioComponents with the same name
+        const formRadios = el.form.elements.namedItem(el.name);
+        if (formRadios && Object.prototype.isPrototypeOf.call(RadioNodeList.prototype, formRadios)) {
+            return Array.from(formRadios)
+                .filter((radio) => radio.matches(RADIO_CONSTANTS.elementName));
+        }
+        return [el];
+    }
+    /**
+     * Sets the validity of a radio group.
+     * If no radio is selected in the group and selection is required, it sets the validity to
+     * `valueMissing`.
+     *
+     * @param el A radio component within the group to set the validity for.
+     */
+    static setRadioGroupValidity(el) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        const invalid = RadioGroupManager._selectionIsRequired(group);
+        group.forEach(radio => {
+            const validationMessage = radio[getValidationMessage]({
+                required: invalid,
+                checked: radio.checked
+            });
+            radio[internals].setValidity({ valueMissing: invalid }, validationMessage);
+            radio[setDefaultAria]({ 'ariaInvalid': invalid ? 'true' : 'false' }, { overwrite: true });
+        });
+    }
+    /**
+     * Sets the selected radio in a radio group.
+     *
+     * @param el - The radio component to set as selected.
+     */
+    static setSelectedRadioInGroup(el) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        group.forEach(radio => radio.checked = radio === el);
+    }
+    /**
+     * Focuses the next radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusNextRadioInGroup(el) {
+        RadioGroupManager._updateRadioGroupFocus(el, 1);
+    }
+    /**
+     * Focuses the previous radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusPreviousRadioInGroup(el) {
+        RadioGroupManager._updateRadioGroupFocus(el, -1);
+    }
+    /**
+     * Adds or removes each radio in a radio group from the tab order. When no radio is selected and
+     * focus is not in the group, all radios are added to the tab order. Otherwise only the selected
+     * radio is added to the tab order.
+     *
+     * @param el - The focused or blurred radio component.
+     * @param event - The event type (`'focus'` or `'blur'`).
+     */
+    static setUncheckedRadioGroupFocus(el, event) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        if (event === 'focus') {
+            group.forEach(radio => radio[isFocusable] = radio === el);
+            return;
+        }
+        if (!el.checked || group[0] === el || group[group.length - 1] === el) {
+            group.forEach(radio => radio[isFocusable] = true);
+        }
+    }
+    /**
+     * Resets a radio group to . This will run once each radio has a chance to
+     * update.
+     *
+     * @param el - The radio component requesting the reset.
+     * @returns A promise that resolves when the reset logic is complete.
+     */
+    static async requestRadioGroupReset(el) {
+        this._radiosRequestingReset.add(el);
+        // Wait for any other radios in the group to request a reset. The reset logic should only run
+        // once per group
+        await task();
+        // If the radio has been removed from the set, its group has already been reset and we can
+        // skip it
+        if (!this._radiosRequestingReset.has(el)) {
+            return;
+        }
+        const group = RadioGroupManager.getRadioGroup(el);
+        let checkedRadio = null;
+        // The first loop removes each radio in the group from the set and stores the radio that should
+        // be checked, if any
+        group.forEach(radio => {
+            this._radiosRequestingReset.delete(radio);
+            if (radio.defaultChecked) {
+                checkedRadio = radio;
+            }
+        });
+        // The second loop sets the checked radio and sets each radio to be focusable if there is a no
+        // selection, or only the selected radio if there is
+        group.forEach(radio => {
+            radio.checked = radio === checkedRadio;
+            radio[isFocusable] = !checkedRadio || radio.checked;
+        });
+    }
+    /**
+     * Updates the focus and selection of a radio group based on the currently focused radio and the
+     * direction of the focus change.
+     *
+     * @param el - The currently focused radio element.
+     * @param increment - The direction of the focus change. 1 for forward, -1 for backward.
+     */
+    static _updateRadioGroupFocus(el, increment) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        // Get the next enabled and writable radio in the group
+        let index = group.indexOf(el);
+        let nextRadio = group[index];
+        do {
+            index += increment;
+            if (index < 0) {
+                index = group.length - 1;
+            }
+            else if (index >= group.length) {
+                index = 0;
+            }
+            nextRadio = group[index];
+            if (nextRadio === el) {
+                return;
+            }
+        } while (nextRadio.disabled || nextRadio.readonly);
+        // Attempt to check the next radio, return if the event is cancelled
+        if (!nextRadio[tryCheck]()) {
+            return;
+        }
+        // Add the next radio to the tab order, and focus it
+        nextRadio[isFocusable] = true;
+        nextRadio.focus();
+        // Remove every other radio from the tab order and deselect it
+        group.forEach(radio => {
+            if (radio === nextRadio) {
+                return;
+            }
+            radio[isFocusable] = false;
+            radio.checked = false;
+        });
+    }
+    /**
+     * Determines if a radio selection is required within a group.
+     *
+     * @param group - The radio components within a group.
+     * @returns True if the radio selection is required, false otherwise.
+     */
+    static _selectionIsRequired(group) {
+        let required = false;
+        let selection = false;
+        group.forEach(radio => {
+            if (radio.required) {
+                required = true;
+            }
+            if (radio.checked) {
+                selection = true;
+            }
+        });
+        return required && !selection;
+    }
+}
+RadioGroupManager._radiosRequestingReset = new WeakSet();

package/esm/radio/index.d.ts

@@ -3,6 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './radio-constants';
 export * from './radio';
-export declare function defineRadioComponent(): void;
+export * from './radio-group';

package/esm/radio/index.js

@@ -3,10 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { RadioComponent } from './radio';
-export * from './radio-constants';
 export * from './radio';
-export function defineRadioComponent() {
-    defineCustomElement(RadioComponent);
-}
+export * from './radio-group';

package/esm/radio/radio/index.d.ts

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

package/esm/radio/radio/index.js

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

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/';
+import { IRadioComponent } from './radio';
+import { RadioLabelPosition } from './radio-constants';
+export interface IRadioAdapter extends IBaseAdapter {
+    setChecked(checked: boolean, value: string): void;
+    trySetDisabled(value: boolean): boolean;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    setLabelPosition(value: RadioLabelPosition): void;
+    disableStateLayer(value: boolean): void;
+    setUncheckedRadioGroupFocus(event: 'focus' | 'blur'): void;
+    focusNext(): void;
+    focusPrevious(): void;
+}
+export declare class RadioAdapter extends BaseAdapter<IRadioComponent> implements IRadioAdapter {
+    private readonly _rootElement;
+    private readonly _labelElement;
+    private readonly _stateLayerElement;
+    constructor(component: IRadioComponent);
+    setChecked(checked: boolean, value: string): void;
+    /**
+     * Attempts to set the disabled state of the radio. If the radio is in a disabled radio group, it
+     * can't be enabled.
+     *
+     * @param value Whether the radio should be disabled.
+     * @returns Whether the disabled state was set.
+     */
+    trySetDisabled(value: boolean): boolean;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    disableStateLayer(value: boolean): void;
+    setLabelPosition(value: RadioLabelPosition): void;
+    setUncheckedRadioGroupFocus(event: 'focus' | 'blur'): void;
+    focusNext(): void;
+    focusPrevious(): void;
+}

package/esm/radio/radio/radio-adapter.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { internals, isFocusable, setDefaultAria } from '../../constants';
+import { BaseAdapter } from '../../core/base/';
+import { RadioGroupManager } from '../core/radio-group-manager';
+import { RADIO_CONSTANTS } from './radio-constants';
+export class RadioAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, RADIO_CONSTANTS.selectors.ROOT);
+        this._labelElement = getShadowElement(component, RADIO_CONSTANTS.selectors.LABEL);
+        this._stateLayerElement = getShadowElement(component, RADIO_CONSTANTS.selectors.STATE_LAYER);
+    }
+    setChecked(checked, value) {
+        this._component[setDefaultAria]({
+            ariaChecked: checked ? 'true' : 'false'
+        }, { overwrite: true });
+        if (checked) {
+            RadioGroupManager.setSelectedRadioInGroup(this._component);
+        }
+        // Update the form value, state, and validity
+        const formValue = checked ? value : null;
+        const formState = checked ? 'checked' : 'unchecked';
+        this._component[internals].setFormValue(formValue, formState);
+        RadioGroupManager.setRadioGroupValidity(this._component);
+    }
+    /**
+     * Attempts to set the disabled state of the radio. If the radio is in a disabled radio group, it
+     * can't be enabled.
+     *
+     * @param value Whether the radio should be disabled.
+     * @returns Whether the disabled state was set.
+     */
+    trySetDisabled(value) {
+        const group = this._component.closest('forge-radio-group');
+        if (!value && group && group.disabled) {
+            return false;
+        }
+        this._component[setDefaultAria]({
+            ariaDisabled: value ? 'true' : 'false'
+        }, { overwrite: true });
+        this._component[isFocusable] = !value;
+        return true;
+    }
+    setRequired(value) {
+        this._component[setDefaultAria]({
+            ariaRequired: value ? 'true' : 'false'
+        }, { overwrite: true });
+        RadioGroupManager.setRadioGroupValidity(this._component);
+    }
+    setReadonly(value) {
+        this._component[setDefaultAria]({
+            ariaDisabled: value ? 'true' : 'false'
+        }, { overwrite: true });
+    }
+    disableStateLayer(value) {
+        this._stateLayerElement.disabled = value;
+    }
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'start') {
+            this._rootElement.prepend(this._labelElement);
+        }
+        else {
+            this._rootElement.append(this._labelElement);
+        }
+    }
+    setUncheckedRadioGroupFocus(event) {
+        RadioGroupManager.setUncheckedRadioGroupFocus(this._component, event);
+    }
+    focusNext() {
+        RadioGroupManager.focusNextRadioInGroup(this._component);
+    }
+    focusPrevious() {
+        RadioGroupManager.focusPreviousRadioInGroup(this._component);
+    }
+}

package/esm/radio/radio/radio-component-delegate.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/esm/radio/radio/radio-component-delegate.js

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+// TODO: implement the radio delegate

package/esm/radio/radio/radio-constants.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ARIAAttribute } from '../../core/utils/a11y-utils';
+export declare const RADIO_CONSTANTS: {
+    elementName: "forge-radio";
+    attributes: {
+        CHECKED: string;
+        DEFAULT_CHECKED: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        LABEL_POSITION: string;
+        TABINDEX: string;
+    };
+    selectors: {
+        ROOT: string;
+        LABEL: string;
+        STATE_LAYER: string;
+    };
+    events: {
+        CHANGE: string;
+        INPUT: string;
+    };
+    observedAriaAttributes: ARIAAttribute[];
+};
+/**
+ * This symbol is used to attempt to check a radio while navigating between its siblings in a
+ * group. It differs from simply setting `checked` in that it causes the input/change events to
+ * emit and returns `false` if either was prevented. The radio group manager can then prevent a
+ * change in focus and selection state.
+ */
+export declare const tryCheck: unique symbol;
+export type RadioState = 'checked' | 'unchecked';
+export type RadioLabelPosition = 'start' | 'end';

package/esm/radio/radio/radio-constants.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+import { supportsElementInternalsAria } from '../../core/utils/feature-detection';
+const elementName = `${COMPONENT_NAME_PREFIX}radio`;
+const attributes = {
+    CHECKED: 'checked',
+    DEFAULT_CHECKED: 'default-checked',
+    VALUE: 'value',
+    DENSE: 'dense',
+    DISABLED: 'disabled',
+    REQUIRED: 'required',
+    READONLY: 'readonly',
+    LABEL_POSITION: 'label-position',
+    TABINDEX: 'tabindex'
+};
+const selectors = {
+    ROOT: '.forge-radio',
+    LABEL: '#label',
+    STATE_LAYER: 'forge-state-layer'
+};
+const events = {
+    CHANGE: 'change',
+    INPUT: 'input'
+};
+const observedAriaAttributes = supportsElementInternalsAria()
+    ? []
+    : [
+        'role',
+        'aria-checked',
+        'aria-disabled',
+        'aria-invalid',
+        'aria-label',
+        'aria-readonly',
+        'aria-required'
+    ];
+export const RADIO_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    events,
+    observedAriaAttributes
+};
+/**
+ * This symbol is used to attempt to check a radio while navigating between its siblings in a
+ * group. It differs from simply setting `checked` in that it causes the input/change events to
+ * emit and returns `false` if either was prevented. The radio group manager can then prevent a
+ * change in focus and selection state.
+ */
+export const tryCheck = Symbol('tryCheck');

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

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IRadioAdapter } from './radio-adapter';
+import { RadioLabelPosition } from './radio-constants';
+export interface IRadioFoundation extends ICustomElementFoundation {
+    checked: boolean;
+    defaultChecked: boolean;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    dense: boolean;
+    labelPosition: RadioLabelPosition;
+    tryCheck(): boolean;
+}
+export declare class RadioFoundation implements IRadioFoundation {
+    private _adapter;
+    private _checked;
+    private _defaultChecked;
+    private _value;
+    private _disabled;
+    private _required;
+    private _readonly;
+    private _dense;
+    private _labelPosition;
+    private readonly _focusListener;
+    private readonly _blurListener;
+    private readonly _clickListener;
+    private readonly _keydownListener;
+    private readonly _keyupListener;
+    constructor(_adapter: IRadioAdapter);
+    initialize(): void;
+    tryCheck(): boolean;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+    private _handleKeydown;
+    private _handleKeyup;
+    /**
+     * Checks the radio button if it is not disabled or readonly. Exits early if the activating
+     * event is cancelled.
+     */
+    private _activate;
+    /**
+     * Dispatches change and input events.
+     *
+     * @returns {boolean} - Returns true if neither event was cancelled.
+     */
+    private _dispatchEvents;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get labelPosition(): RadioLabelPosition;
+    set labelPosition(value: RadioLabelPosition);
+}