@tylertech/forge 3.0.0-next.21 → 3.0.0-next.22

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

@@ -7,56 +7,22 @@ import { BaseAdapter, IBaseAdapter } from '../core';
 import { ICheckboxComponent } from './checkbox';
 import { CheckboxLabelPosition, CheckboxState } from './checkbox-constants';
 export interface ICheckboxAdapter extends IBaseAdapter {
-    initialize(): void;
     setChecked(value: boolean): void;
-    setDefaultChecked(value: boolean): void;
-    setIndeterminate(value: boolean): void;
-    setValue(value: string): void;
     setDisabled(value: boolean): void;
     setRequired(value: boolean): void;
     setReadonly(value: boolean): void;
     setLabelPosition(value: CheckboxLabelPosition): void;
-    addRootListener(event: string, callback: EventListener): void;
-    addInputSlotListener(callback: EventListener): void;
-    detectInputElement(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
     syncValue(value: string | null, state: CheckboxState): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> implements ICheckboxAdapter {
     private readonly _rootElement;
-    private readonly _inputElement;
     private readonly _labelElement;
-    private readonly _inputSlotElement;
     private readonly _stateLayerElement;
-    private readonly _inputAdapter;
-    private _forwardObserver?;
-    private _forwardedAriaLabel?;
-    private _labelElementText?;
-    private get _activeInputElement();
     constructor(component: ICheckboxComponent);
-    initialize(): void;
     setChecked(value: boolean): void;
-    setDefaultChecked(value: boolean): void;
-    setIndeterminate(value: boolean): void;
-    setValue(value: string): void;
     setDisabled(value: boolean): void;
     setRequired(value: boolean): void;
     setReadonly(value: boolean): void;
     setLabelPosition(value: CheckboxLabelPosition): void;
-    addRootListener(event: string, callback: EventListener): void;
-    addInputSlotListener(callback: EventListener): void;
-    detectInputElement(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
     syncValue(value: string | null, state: CheckboxState): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
-    private _initializeInput;
-    private _initializeForwardObserver;
-    private _setAriaLabel;
-    private _switchInput;
-    private _observeInput;
 }

package/esm/checkbox/checkbox-adapter.js

@@ -3,57 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
-import { internals } from '../constants';
-import { BaseAdapter, INPUT_PROPERTIES, SlottedElementAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } from '../core';
+import { getShadowElement } from '@tylertech/forge-core';
+import { isFocusable, setDefaultAria, setValidity } from '../constants';
+import { BaseAdapter } from '../core';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 export class CheckboxAdapter extends BaseAdapter {
-    get _activeInputElement() {
-        var _a;
-        return (_a = this._inputAdapter.el) !== null && _a !== void 0 ? _a : this._inputElement;
-    }
     constructor(component) {
         super(component);
         this._rootElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.ROOT);
-        this._inputElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.INPUT);
         this._labelElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.LABEL);
-        this._inputSlotElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.INPUT_SLOT);
         this._stateLayerElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.STATE_LAYER);
-        this._inputAdapter = new SlottedElementAdapter();
-    }
-    initialize() {
-        const slottedInput = this._component.querySelector(CHECKBOX_CONSTANTS.selectors.SLOTTED_INPUT);
-        if (slottedInput) {
-            slottedInput.slot = 'input';
-            this._switchInput(slottedInput, this._inputElement);
-        }
-        else {
-            this._initializeForwardObserver(this._inputElement);
-        }
-        this._observeInput(slottedInput !== null && slottedInput !== void 0 ? slottedInput : this._inputElement);
     }
     setChecked(value) {
-        this._activeInputElement.checked = value;
-    }
-    setDefaultChecked(value) {
-        this._activeInputElement.toggleAttribute('checked', value);
-    }
-    setIndeterminate(value) {
-        this._activeInputElement.indeterminate = value;
-    }
-    setValue(value) {
-        this._activeInputElement.value = value;
+        this._component[setValidity]();
+        this._component[setDefaultAria]({ ariaChecked: value ? 'true' : 'false' });
     }
     setDisabled(value) {
-        this._activeInputElement.disabled = value;
+        this._component[isFocusable] = !value;
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : 'false' });
         this._stateLayerElement.disabled = value;
     }
     setRequired(value) {
-        this._activeInputElement.required = value;
+        this._component[setValidity]();
+        this._component[setDefaultAria]({ ariaRequired: value ? 'true' : 'false' });
     }
     setReadonly(value) {
-        this._activeInputElement.readOnly = value;
-        toggleAttribute(this._activeInputElement, value, 'aria-readonly', value.toString());
+        this._component[setDefaultAria]({ ariaReadOnly: value ? 'true' : 'false' });
         this._stateLayerElement.disabled = value;
     }
     setLabelPosition(value) {
@@ -65,30 +40,6 @@ export class CheckboxAdapter extends BaseAdapter {
             this._rootElement.append(this._labelElement);
         }
     }
-    addRootListener(event, callback) {
-        this._rootElement.addEventListener(event, callback);
-    }
-    addInputSlotListener(callback) {
-        this._inputSlotElement.addEventListener('slotchange', callback);
-    }
-    detectInputElement() {
-        const inputElement = this._inputSlotElement.assignedElements()[0];
-        if (inputElement) {
-            this._inputAdapter.attachElement(inputElement);
-        }
-        else {
-            this._inputAdapter.attachElement(this._inputElement);
-        }
-    }
-    proxyClick() {
-        this._activeInputElement.click();
-        // TODO: use `{ focusVisble: false }` when supported.
-        this._activeInputElement.focus();
-    }
-    proxyLabel(value) {
-        this._labelElementText = value !== null && value !== void 0 ? value : undefined;
-        this._setAriaLabel();
-    }
     syncValue(value, state) {
         const data = value ? new FormData() : null;
         if (data && value) {
@@ -96,50 +47,4 @@ export class CheckboxAdapter extends BaseAdapter {
         }
         this._component.setFormValue(data, state);
     }
-    syncValidity(hasCustomValidityError) {
-        if (hasCustomValidityError) {
-            this._activeInputElement.setCustomValidity(this._component[internals].validationMessage);
-        }
-        else {
-            this._activeInputElement.setCustomValidity('');
-        }
-        this._component[internals].setValidity(this._activeInputElement.validity, this._activeInputElement.validationMessage, this._activeInputElement);
-    }
-    setValidity(flags, message) {
-        this._component[internals].setValidity(flags, message, this._activeInputElement);
-    }
-    _initializeInput() {
-        var _a;
-        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._initializeForwardObserver(this._activeInputElement);
-    }
-    _initializeForwardObserver(el) {
-        this._forwardObserver = forwardAttributes(this._component, CHECKBOX_CONSTANTS.forwardedAttributes, (name, value) => {
-            // Use the connected label element as a fallback if aria-label is removed. Store the value so
-            // it can be used to determine whether an updated label element should take effect.
-            if (name === 'aria-label') {
-                this._forwardedAriaLabel = value !== null && value !== void 0 ? value : undefined;
-                this._setAriaLabel();
-                return;
-            }
-            // Otherwise forward the attribute to the element.
-            toggleAttribute(el, !!value, name, value !== null && value !== void 0 ? value : undefined);
-        });
-    }
-    _setAriaLabel() {
-        var _a;
-        const hasAriaLabel = !!this._forwardedAriaLabel || !!this._labelElementText;
-        toggleAttribute(this._activeInputElement, hasAriaLabel, 'aria-label', (_a = this._forwardedAriaLabel) !== null && _a !== void 0 ? _a : this._labelElementText);
-    }
-    _switchInput(newEl, oldEl) {
-        cloneAttributes(oldEl, newEl, ['type', 'checked', 'aria-readonly']);
-        cloneProperties(oldEl, newEl, INPUT_PROPERTIES);
-        cloneValidationMessage(oldEl, newEl);
-    }
-    _observeInput(el = this._inputElement) {
-        this._inputAdapter.initialize(el, (newEl, oldEl) => {
-            this._switchInput(newEl, oldEl);
-            this._initializeInput();
-        });
-    }
 }

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

@@ -7,11 +7,20 @@ export declare const CHECKBOX_CONSTANTS: {
     elementName: "forge-checkbox";
     selectors: {
         ROOT: string;
-        INPUT: string;
         LABEL: string;
-        INPUT_SLOT: string;
         STATE_LAYER: string;
-        SLOTTED_INPUT: string;
+    };
+    observedAttributes: {
+        CHECKED: string;
+        DEFAULT_CHECKED: string;
+        INDETERMINATE: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        LABEL_POSITION: string;
+        TABINDEX: string;
     };
     attributes: {
         CHECKED: string;
@@ -23,8 +32,8 @@ export declare const CHECKBOX_CONSTANTS: {
         REQUIRED: string;
         READONLY: string;
         LABEL_POSITION: string;
+        TABINDEX: string;
     };
-    forwardedAttributes: string[];
 };
 export type CheckboxState = 'checked' | 'unchecked' | 'checked-indeterminate' | 'unchecked-indeterminate';
 export type CheckboxLabelPosition = 'start' | 'end';

package/esm/checkbox/checkbox-constants.js

@@ -4,9 +4,8 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}checkbox`;
-const attributes = {
+const observedAttributes = {
     CHECKED: 'checked',
     DEFAULT_CHECKED: 'default-checked',
     INDETERMINATE: 'indeterminate',
@@ -15,20 +14,18 @@ const attributes = {
     DISABLED: 'disabled',
     REQUIRED: 'required',
     READONLY: 'readonly',
-    LABEL_POSITION: 'label-position'
+    LABEL_POSITION: 'label-position',
+    TABINDEX: 'tabindex'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
     ROOT: '.forge-checkbox',
-    INPUT: 'input',
-    LABEL: 'label',
-    INPUT_SLOT: 'slot[name=input]',
-    STATE_LAYER: 'forge-state-layer',
-    SLOTTED_INPUT: 'input[type=checkbox]'
+    LABEL: '#label',
+    STATE_LAYER: 'forge-state-layer'
 };
-const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const CHECKBOX_CONSTANTS = {
     elementName,
     selectors,
-    attributes,
-    forwardedAttributes
+    observedAttributes,
+    attributes
 };

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

@@ -16,10 +16,6 @@ export interface ICheckboxFoundation extends ICustomElementFoundation {
     required: boolean;
     readonly: boolean;
     labelPosition: CheckboxLabelPosition;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class CheckboxFoundation implements ICheckboxFoundation {
     private _adapter;
@@ -34,16 +30,14 @@ export declare class CheckboxFoundation implements ICheckboxFoundation {
     private _labelPosition;
     private get _submittedValue();
     private get _formState();
-    private readonly _changeListener;
-    private readonly _inputSlotListener;
+    private readonly _clickListener;
+    private readonly _keydownListener;
+    private readonly _keyupListener;
     constructor(_adapter: ICheckboxAdapter);
     initialize(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _handleKeydown;
+    private _handleKeyup;
     private _handleChange;
-    private _handleInputSlotChange;
     get checked(): boolean;
     set checked(value: boolean);
     get defaultChecked(): boolean;

package/esm/checkbox/checkbox-foundation.js

@@ -29,54 +29,46 @@ export class CheckboxFoundation {
         this._required = false;
         this._readonly = false;
         this._labelPosition = 'end';
-        this._changeListener = (evt) => this._handleChange(evt);
-        this._inputSlotListener = () => this._handleInputSlotChange();
+        // Listeners
+        this._clickListener = (evt) => this._handleChange();
+        this._keydownListener = (evt) => this._handleKeydown(evt);
+        this._keyupListener = (evt) => this._handleKeyup(evt);
     }
     initialize() {
-        this._adapter.initialize();
-        this._adapter.addRootListener('change', this._changeListener);
-        this._adapter.addInputSlotListener(this._inputSlotListener);
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+        this._adapter.addHostListener('keyup', this._keyupListener);
         this._adapter.syncValue(this._submittedValue, this._formState);
     }
     ;
-    proxyClick() {
-        this._adapter.proxyClick();
-    }
-    proxyLabel(value) {
-        this._adapter.proxyLabel(value);
-    }
-    syncValidity(hasCustomValidityError) {
-        this._adapter.syncValidity(hasCustomValidityError);
+    _handleKeydown(evt) {
+        if (evt.key === ' ') {
+            evt.preventDefault();
+        }
     }
-    setValidity(flags, message) {
-        this._adapter.setValidity(flags, message);
+    _handleKeyup(evt) {
+        if (evt.key === ' ') {
+            this._handleChange();
+        }
     }
-    _handleChange(evt) {
-        if (this.readonly) {
-            this._adapter.setChecked(this._checked);
-            evt.stopPropagation();
+    _handleChange() {
+        if (this._readonly) {
             return;
         }
-        const target = evt.target;
         const oldValue = this._checked;
-        const newValue = target.checked;
-        this._checked = newValue;
-        const isCancelled = !this._adapter.redispatchEvent(evt, { cancelable: true });
-        if (isCancelled) {
-            this._checked = oldValue;
-            this._adapter.setChecked(this._checked);
+        const newValue = !this._checked;
+        // Call the public setter to ensure all the update logic is run
+        this.checked = newValue;
+        const event = new Event('change', { cancelable: true });
+        this._adapter.redispatchEvent(event);
+        if (event.defaultPrevented) {
+            this.checked = oldValue;
             return;
         }
-        this._adapter.syncValue(this._submittedValue, this._formState);
-        this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.CHECKED, this._checked);
         // Toggle inderminate off after a user action
         this._indeterminate = false;
-        this._adapter.setIndeterminate(this._indeterminate);
         this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.INDETERMINATE, this._indeterminate);
     }
-    _handleInputSlotChange() {
-        this._adapter.detectInputElement();
-    }
     get checked() {
         return this._checked;
     }
@@ -94,7 +86,6 @@ export class CheckboxFoundation {
     set defaultChecked(value) {
         if (this._defaultChecked !== value) {
             this._defaultChecked = value;
-            this._adapter.setDefaultChecked(this._defaultChecked);
             this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED, this._defaultChecked);
         }
     }
@@ -104,7 +95,6 @@ export class CheckboxFoundation {
     set indeterminate(value) {
         if (this._indeterminate !== value) {
             this._indeterminate = value;
-            this._adapter.setIndeterminate(this._indeterminate);
             this._adapter.syncValue(this._submittedValue, this._formState);
             this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.INDETERMINATE, this._indeterminate);
         }
@@ -115,7 +105,6 @@ export class CheckboxFoundation {
     set value(value) {
         if (this._value !== value) {
             this._value = value;
-            this._adapter.setValue(this._value);
             this._adapter.syncValue(this._submittedValue, this._formState);
             this._adapter.setHostAttribute(CHECKBOX_CONSTANTS.attributes.VALUE, this._value);
         }

package/esm/checkbox/checkbox.d.ts

@@ -3,24 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { internals } from '../constants';
-import { BaseNullableFormComponent, IBaseNullableFormComponent } from '../core/base/base-nullable-form-component';
-import { ILabelAware } from '../label/label-aware';
+import { getFormState, getFormValue, setValidity } from '../constants';
+import { BaseComponent, FormValue } from '../core';
+import { IWithFocusable } from '../core/mixins/focus/with-focusable';
+import { IWithFormAssociation } from '../core/mixins/form/with-form-associated';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IWithLabelAwareness } from '../core/mixins/label/with-label-aware';
 import { CheckboxLabelPosition, CheckboxState } from './checkbox-constants';
-export interface ICheckboxComponent extends IBaseNullableFormComponent, ILabelAware {
+export interface ICheckboxComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
+    value: string;
     checked: boolean;
     defaultChecked: boolean;
     indeterminate: boolean;
+    required: boolean;
     dense: boolean;
     labelPosition: CheckboxLabelPosition;
     toggle(force?: boolean): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
+    [setValidity](): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-checkbox': ICheckboxComponent;
     }
 }
+declare const BaseCheckboxClass: 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-checkbox
  *
@@ -63,7 +71,7 @@ declare global {
  * @cssproperty --forge-checkbox-border-width - The width of the checkbox border.
  * @cssproperty --forge-checkbox-state-layer-size - The inline and block size of the state layer.
  * @cssproperty --forge-checkbox-state-layer-dense-size - The inline and block size of the state layer when dense.
- * @cssproperty --forge-checkbox-background-color - The color of the checkbox background when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-background - The color of the checkbox background when unchecked and not indeterminate.
  * @cssproperty --forge-checkbox-width - The inline size of the checkbox.
  * @cssproperty --forge-checkbox-height - The block size of the checkbox.
  * @cssproperty --forge-checkbox-unchecked-border-width - The width of the checkbox border when unchecked and not indeterminate.
@@ -73,7 +81,7 @@ declare global {
  * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
  * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
  * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
- * @cssproperty --forge-checkbox-checked-background-color - The color of the checkbox background when checked or indeterminate.
+ * @cssproperty --forge-checkbox-checked-background - The color of the checkbox background when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-color - The color of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-icon-color - The color of the checkmark and indeterminate mark.
@@ -93,7 +101,7 @@ declare global {
  * @cssproperty --forge-checkbox-background-animation-timing - The timing function of the background animations.
  * @cssproperty --forge-checkbox-icon-animation-timing - The timing function of the checked and indeterminate icons animations.
  *
- * @csspart checkbox - Styles the checkbox container element.
+ * @csspart root - Styles the root element.
  * @csspart background - Styles the checkbox background element.
  * @csspart checkmark - Styles the checkmark element.
  * @csspart mixedmark - Styles the indeterminate mark element.
@@ -101,29 +109,20 @@ declare global {
  * @csspart state-layer - Styles the state layer element.
  * @csspart focus-indicator - Styles the focus indicator element.
  */
-export declare class CheckboxComponent extends BaseNullableFormComponent implements ICheckboxComponent {
+export declare class CheckboxComponent extends BaseCheckboxClass implements ICheckboxComponent {
     static get observedAttributes(): string[];
-    get name(): string;
-    set name(value: string);
-    get form(): HTMLFormElement | null;
-    get labels(): NodeList;
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    get willValidate(): boolean;
-    readonly [internals]: ElementInternals;
-    private _foundation;
+    private readonly _foundation;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    setCustomValidity(error: string): void;
+    [getFormValue](): FormValue | null;
+    [getFormState](): CheckboxState;
+    [setValidity](): void;
     formResetCallback(): void;
-    formStateRestoreCallback(state: CheckboxState, reason: 'restore' | 'autocomplete'): void;
-    formDisabledCallback(isDisabled: boolean): void;
+    formStateRestoreCallback(state: CheckboxState): void;
     labelClickedCallback(): void;
     labelChangedCallback(value: string | null): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
     checked: boolean;
     defaultChecked: boolean;
     indeterminate: boolean;
@@ -139,3 +138,4 @@ export declare class CheckboxComponent extends BaseNullableFormComponent impleme
      */
     toggle(force?: boolean): void;
 }
+export {};