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

package/{styles/focus-indicator/_configuration.scss → esm/radio/radio/radio-component-delegate.d.ts}

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

package/{styles/list/list/_configuration.scss → esm/radio/radio/radio-component-delegate.js}

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

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+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;
+    };
+};
+/**
+ * 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,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+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'
+};
+export const RADIO_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    events
+};
+/**
+ * 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);
+}

package/esm/radio/radio/radio-foundation.js

@@ -0,0 +1,199 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { task } from '../../core/utils/event-utils';
+import { RADIO_CONSTANTS } from './radio-constants';
+export class RadioFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        // State
+        this._checked = false;
+        this._defaultChecked = false;
+        this._value = 'on';
+        this._disabled = false;
+        this._required = false;
+        this._readonly = false;
+        this._dense = false;
+        this._labelPosition = 'end';
+        this._focusListener = () => this._handleFocus();
+        this._blurListener = () => this._handleBlur();
+        this._clickListener = (evt) => this._handleClick(evt);
+        this._keydownListener = (evt) => this._handleKeydown(evt);
+        this._keyupListener = (evt) => this._handleKeyup(evt);
+    }
+    initialize() {
+        this._adapter.addHostListener('focus', this._focusListener);
+        this._adapter.addHostListener('blur', this._blurListener);
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+        this._adapter.addHostListener('keyup', this._keyupListener);
+    }
+    // Public methods
+    tryCheck() {
+        this._checked = true;
+        if (!this._dispatchEvents()) {
+            this._checked = false;
+            return false;
+        }
+        this._adapter.setChecked(this._checked, this._value);
+        this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.CHECKED, this._checked);
+        return true;
+    }
+    // Event handlers
+    _handleFocus() {
+        if (!this._checked) {
+            this._adapter.setUncheckedRadioGroupFocus('focus');
+        }
+    }
+    _handleBlur() {
+        if (!this._checked) {
+            this._adapter.setUncheckedRadioGroupFocus('blur');
+        }
+    }
+    _handleClick(evt) {
+        this._activate(evt);
+    }
+    _handleKeydown(evt) {
+        switch (evt.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                evt.preventDefault();
+                this._adapter.focusNext();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                evt.preventDefault();
+                this._adapter.focusPrevious();
+                break;
+            case ' ':
+                // Prevent the spacebar from scrolling the page
+                evt.preventDefault();
+                break;
+        }
+    }
+    _handleKeyup(evt) {
+        if (evt.key === ' ') {
+            this._activate(evt);
+        }
+    }
+    /**
+     * Checks the radio button if it is not disabled or readonly. Exits early if the activating
+     * event is cancelled.
+     */
+    async _activate(evt) {
+        if (this._checked || this._disabled || this._readonly) {
+            return;
+        }
+        // Wait a task to allow the event to propagate to user code.
+        await task();
+        if (evt.defaultPrevented) {
+            return;
+        }
+        this._checked = true;
+        if (!this._dispatchEvents()) {
+            this._checked = false;
+            return;
+        }
+        this._adapter.setChecked(this._checked, this._value);
+        this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.CHECKED, this._checked);
+    }
+    /**
+     * Dispatches change and input events.
+     *
+     * @returns {boolean} - Returns true if neither event was cancelled.
+     */
+    _dispatchEvents() {
+        // Emit both change and input events per the spec.
+        const changeEvent = new Event(RADIO_CONSTANTS.events.CHANGE, { bubbles: true, cancelable: true });
+        const inputEvent = new Event(RADIO_CONSTANTS.events.INPUT, { bubbles: true, cancelable: true, composed: true });
+        this._adapter.dispatchHostEvent(new Event(RADIO_CONSTANTS.events.CHANGE, { bubbles: true, cancelable: true }));
+        this._adapter.dispatchHostEvent(new Event(RADIO_CONSTANTS.events.INPUT, { bubbles: true, cancelable: true, composed: true }));
+        return !(changeEvent.defaultPrevented || inputEvent.defaultPrevented);
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        if (this._checked !== value) {
+            this._checked = value;
+            this._adapter.setChecked(this._checked, this._value);
+            this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.CHECKED, this._checked);
+        }
+    }
+    get defaultChecked() {
+        return this._defaultChecked;
+    }
+    set defaultChecked(value) {
+        if (this._defaultChecked !== value) {
+            this._defaultChecked = value;
+            this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.DEFAULT_CHECKED, this._defaultChecked);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._adapter.setHostAttribute(RADIO_CONSTANTS.attributes.VALUE, this._value);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            // Attempt to set disabled, restore if unsuccessful
+            if (this._adapter.trySetDisabled(this._disabled)) {
+                this._adapter.disableStateLayer(this._disabled || this._readonly);
+                this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.DISABLED, this._disabled);
+            }
+            else {
+                this._disabled = !this._disabled;
+            }
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required !== value) {
+            this._required = value;
+            this._adapter.setRequired(this._required);
+            this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.REQUIRED, this._required);
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this._adapter.setReadonly(this._readonly);
+            this._adapter.disableStateLayer(this._disabled || this._readonly);
+            this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.READONLY, this._readonly);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.toggleHostAttribute(RADIO_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    get labelPosition() {
+        return this._labelPosition;
+    }
+    set labelPosition(value) {
+        if (this._labelPosition !== value) {
+            this._labelPosition = value;
+            this._adapter.setLabelPosition(this._labelPosition);
+            this._adapter.setHostAttribute(RADIO_CONSTANTS.attributes.LABEL_POSITION, this._labelPosition);
+        }
+    }
+}

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

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getFormState, getFormValue } from '../../constants';
+import { BaseComponent } from '../../core/base/base-component';
+import { IWithFocusable } from '../../core/mixins/focus/with-focusable';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { FormValue } from '../../core/utils/form-utils';
+import { RadioLabelPosition, RadioState, tryCheck } from './radio-constants';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IRadioComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
+    checked: boolean;
+    defaultChecked: boolean;
+    required: boolean;
+    dense: boolean;
+    labelPosition: RadioLabelPosition;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-radio': IRadioComponent;
+    }
+}
+declare const BaseRadioClass: import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
+/**
+ * @tag forge-radio
+ *
+ * @summary The Forge Radio component is used to create a form input where only one out of a set of
+ * values should be selected.
+ *
+ * @property {boolean} checked - Indicates whether the radio button is checked.
+ * @property {boolean} defaultChecked - Indicates whether the radio button is checked by default.
+ * @property {string} value - The value of the radio button when submitted.
+ * @property {boolean} dense - Indicates whether the radio button should be displayed in a dense layout.
+ * @property {boolean} disabled - Indicates whether the radio button is disabled.
+ * @property {boolean} required - Indicates whether the radio button is required.
+ * @property {boolean} readonly - Indicates whether the radio button is read-only.
+ * @property {RadioLabelPosition} labelPosition - The position of the radio button's label.
+ *
+ * @attribute {boolean} checked - Indicates whether the radio button is checked.
+ * @attribute {boolean} default-checked - Indicates whether the radio button is checked by default.
+ * @attribute {string} value - The value of the radio button when submitted.
+ * @attribute {boolean} dense - Indicates whether the radio button should be displayed in a dense layout.
+ * @attribute {boolean} disabled - Indicates whether the radio button is disabled.
+ * @attribute {boolean} required - Indicates whether the radio button is required.
+ * @attribute {boolean} readonly - Indicates whether the radio button is read-only.
+ * @attribute {RadioLabelPosition} label-position - The position of the radio button's label.
+ *
+ * @cssproperty --forge-radio-primary-color - The primary color of the radio button when checked.
+ * @cssproperty --forge-radio-inactive-color - The color of the radio button when unchecked.
+ * @cssproperty --forge-radio-size - The size of the radio button in the inline and block directions.
+ * @cssproperty --forge-radio-width - The width of the radio button.
+ * @cssproperty --forge-radio-height - The height of the radio button.
+ * @cssproperty --forge-radio-border-width - The width of the radio button's border.
+ * @cssproperty --forge-radio-unchecked-border-color - The color of the radio button's border when unchecked.
+ * @cssproperty --forge-radio-checked-border-color - The color of the radio button's border when checked.
+ * @cssproperty --forge-radio-background - The background of the radio button.
+ * @cssproperty --forge-radio-shape - The shape of the radio button.
+ * @cssproperty --forge-radio-mark-size - The size of the radio button's mark in the inline and block directions.
+ * @cssproperty --forge-radio-mark-width - The width of the radio button's mark.
+ * @cssproperty --forge-radio-mark-height - The height of the radio button's mark.
+ * @cssproperty --forge-radio-mark-unchecked-color - The color of the radio button's mark when unchecked.
+ * @cssproperty --forge-radio-mark-checked-color - The color of the radio button's mark when checked.
+ * @cssproperty --forge-radio-mark-unchecked-background - The background of the radio button's mark when unchecked.
+ * @cssproperty --forge-radio-mark-checked-background - The background of the radio button's mark when checked.
+ * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
+ * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
+ * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
+ * @cssproperty --forge-radio-state-layer-size - The size of the radio button's state layer in the inline and block directions.
+ * @cssproperty --forge-radio-state-layer-width - The width of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-height - The height of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-unchecked-color - The color of the radio button's state layer when unchecked.
+ * @cssproperty --forge-radio-state-layer-checked-color - The color of the radio button's state layer when checked.
+ * @cssproperty --forge-radio-state-layer-shape - The shape of the radio button's state layer.
+ * @cssproperty --forge-radio-state-layer-dense-size - The size of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-state-layer-dense-width - The width of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-state-layer-dense-height - The height of the radio button's state layer when dense.
+ * @cssproperty --forge-radio-disabled-opacity - The opacity of the radio button when disabled.
+ * @cssproperty --forge-radio-animation-duration - The duration of the radio button's animations.
+ * @cssproperty --forge-radio-animation-timing-function - The timing function of the radio button's animations.
+ * @cssproperty --forge-radio-animation-delay - The delay of the radio button's animations.
+ *
+ * @csspart radio - Styles the radio's root element.
+ * @csspart background - Styles the border and background of the radio.
+ * @csspart focus-indicator - Styles the focus indicator of the radio.
+ * @csspart state-layer - Styles the state layer of the radio.
+ *
+ * @slot - This is a default/unnamed slot for the label text.
+ */
+export declare class RadioComponent extends BaseRadioClass implements IRadioComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    [getFormValue](): FormValue | null;
+    [getFormState](): RadioState;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: RadioState): void;
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+    checked: boolean;
+    defaultChecked: boolean;
+    value: string;
+    dense: boolean;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    labelPosition: RadioLabelPosition;
+    [tryCheck](): boolean;
+}
+export {};