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

package/esm/checkbox/checkbox-adapter.js

@@ -3,225 +3,143 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, getShadowElement, removeClass } from '@tylertech/forge-core';
-import { createUserInteractionListener } from '../core';
-import { BaseAdapter } from '../core/base/base-adapter';
-import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
+import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { internals } from '../constants';
+import { BaseAdapter, INPUT_PROPERTIES, SlottedElementAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } 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);
-    }
-    // ForgeRippleCapableSurface
-    get root() {
-        return this._rootElement;
-    }
-    get unbounded() {
-        return true;
-    }
-    get disabled() {
-        return this.isDisabled();
+        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() {
-        this._configureElements();
-        this._attachInternalInputListeners();
-        this._deferRippleInitialization();
-    }
-    async _deferRippleInitialization() {
-        const { userInteraction, destroy } = createUserInteractionListener(this._rootElement);
-        this._destroyUserInteractionListener = destroy;
-        const { type } = await userInteraction;
-        this._destroyUserInteractionListener = undefined;
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
-        }
-    }
-    setDense(value) {
-        var _a;
-        if (value) {
-            this._setHostAttribute(CHECKBOX_CONSTANTS.attributes.DENSE);
-            this.setRootClass(CHECKBOX_CONSTANTS.classes.CHECKBOX_DENSE);
+        const slottedInput = this._component.querySelector(CHECKBOX_CONSTANTS.selectors.SLOTTED_INPUT);
+        if (slottedInput) {
+            slottedInput.slot = 'input';
+            this._switchInput(slottedInput, this._inputElement);
         }
         else {
-            this._removeHostAttribute(CHECKBOX_CONSTANTS.attributes.DENSE);
-            this.removeRootClass(CHECKBOX_CONSTANTS.classes.CHECKBOX_DENSE);
+            this._initializeForwardObserver(this._inputElement);
         }
-        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.layout();
-    }
-    isAttachedToDOM() {
-        return Boolean(this._component.parentNode);
-    }
-    _configureElements() {
-        this._inputElement = this._component.querySelector(CHECKBOX_CONSTANTS.selectors.INPUT);
-        this._wrapperElement = getShadowElement(this._component, CHECKBOX_CONSTANTS.selectors.WRAPPER);
-        this._rootElement = getShadowElement(this._component, CHECKBOX_CONSTANTS.selectors.ROOT);
-        this._labelElement = this._component.querySelector(CHECKBOX_CONSTANTS.selectors.LABEL);
-        if (this._labelElement) {
-            this._labelElement.setAttribute(CHECKBOX_CONSTANTS.attributes.SLOT, CHECKBOX_CONSTANTS.selectors.LABEL);
-        }
-        if (this._inputElement) {
-            this._inputElement.setAttribute(CHECKBOX_CONSTANTS.attributes.SLOT, CHECKBOX_CONSTANTS.selectors.INPUT);
-        }
-        addClass(CHECKBOX_CONSTANTS.classes.UPGRADED, this._rootElement);
+        this._observeInput(slottedInput !== null && slottedInput !== void 0 ? slottedInput : this._inputElement);
     }
-    _setHostAttribute(name, value = '') {
-        this._component.setAttribute(name, value);
+    setChecked(value) {
+        this._activeInputElement.checked = value;
     }
-    _removeHostAttribute(name) {
-        this._component.removeAttribute(name);
+    setDefaultChecked(value) {
+        this._activeInputElement.toggleAttribute('checked', value);
     }
-    disconnect() {
-        if (this._labelElement) {
-            this._labelElement.removeAttribute(CHECKBOX_CONSTANTS.attributes.SLOT);
-        }
-        if (this._inputElement) {
-            this._inputElement.removeAttribute(CHECKBOX_CONSTANTS.attributes.SLOT);
-        }
-        if (this._inputMutationObserver) {
-            this._inputMutationObserver.disconnect();
-        }
-        this._detachInternalInputListeners();
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-            this._destroyUserInteractionListener = undefined;
-        }
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-    }
-    setRootClass(classes) {
-        if (this._rootElement) {
-            addClass(classes, this._rootElement);
-        }
+    setIndeterminate(value) {
+        this._activeInputElement.indeterminate = value;
     }
-    removeRootClass(classes) {
-        if (this._rootElement) {
-            removeClass(classes, this._rootElement);
-        }
-    }
-    setWrapperClass(classes) {
-        if (this._wrapperElement) {
-            addClass(classes, this._wrapperElement);
-        }
-    }
-    removeWrapperClass(classes) {
-        if (this._wrapperElement) {
-            removeClass(classes, this._wrapperElement);
-        }
+    setValue(value) {
+        this._activeInputElement.value = value;
     }
-    setNativeAttribute(qualifiedName, value) {
-        this._inputElement.setAttribute(qualifiedName, value);
+    setDisabled(value) {
+        this._activeInputElement.disabled = value;
+        this._stateLayerElement.disabled = value;
     }
-    isDisabled() {
-        return this._inputElement.disabled;
+    setRequired(value) {
+        this._activeInputElement.required = value;
     }
-    isChecked() {
-        return this._inputElement && this._inputElement.checked;
+    setReadonly(value) {
+        this._activeInputElement.readOnly = value;
+        toggleAttribute(this._activeInputElement, value, 'aria-readonly', value.toString());
+        this._stateLayerElement.disabled = value;
     }
-    isIndeterminate() {
-        return this._inputElement && this._inputElement.indeterminate;
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'start') {
+            this._rootElement.prepend(this._labelElement);
+        }
+        else {
+            this._rootElement.append(this._labelElement);
+        }
     }
-    removeNativeAttribute(qualifiedName) {
-        this._inputElement.removeAttribute(qualifiedName);
+    addRootListener(event, callback) {
+        this._rootElement.addEventListener(event, callback);
     }
-    installPropertyChangeHooks(callback) {
-        const nativeCb = this._inputElement;
-        const cbProto = Object.getPrototypeOf(nativeCb);
-        CHECKBOX_CONSTANTS.CB_PROTO_PROPS.forEach(controlState => {
-            const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
-            // We have to check for this descriptor, since some browsers (Safari) don't support its return.
-            // See: https://bugs.webkit.org/show_bug.cgi?id=49739
-            if (!this._validDescriptor(desc)) {
-                return;
-            }
-            // Type cast is needed for compatibility with Closure Compiler.
-            const nativeGetter = desc.get;
-            if (desc) {
-                const nativeCbDesc = {
-                    configurable: desc.configurable,
-                    enumerable: desc.enumerable,
-                    get: nativeGetter,
-                    set: (state) => {
-                        var _a;
-                        (_a = desc.set) === null || _a === void 0 ? void 0 : _a.call(nativeCb, state);
-                        callback();
-                    }
-                };
-                Object.defineProperty(nativeCb, controlState, nativeCbDesc);
-            }
-        });
+    addInputSlotListener(callback) {
+        this._inputSlotElement.addEventListener('slotchange', callback);
     }
-    listen(qualifiedName, callback, onRoot = false) {
-        if (onRoot) {
-            this._rootElement.addEventListener(qualifiedName, callback);
+    detectInputElement() {
+        const inputElement = this._inputSlotElement.assignedElements()[0];
+        if (inputElement) {
+            this._inputAdapter.attachElement(inputElement);
         }
         else {
-            this._inputElement.addEventListener(qualifiedName, callback);
+            this._inputAdapter.attachElement(this._inputElement);
         }
     }
-    unlisten(qualifiedName, callback, onRoot = false) {
-        if (!this._inputElement) {
-            return;
+    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) {
+            data.append(this._component.name, value);
         }
-        if (onRoot) {
-            this._rootElement.removeEventListener(qualifiedName, callback);
+        this._component.setFormValue(data, state);
+    }
+    syncValidity(hasCustomValidityError) {
+        if (hasCustomValidityError) {
+            this._activeInputElement.setCustomValidity(this._component[internals].validationMessage);
         }
         else {
-            this._inputElement.removeEventListener(qualifiedName, callback);
+            this._activeInputElement.setCustomValidity('');
         }
+        this._component[internals].setValidity(this._activeInputElement.validity, this._activeInputElement.validationMessage, this._activeInputElement);
     }
-    uninstallPropertyChangeHooks() {
-        if (!this._inputElement) {
-            return;
-        }
-        const nativeCb = this._inputElement;
-        const cbProto = Object.getPrototypeOf(nativeCb);
-        CHECKBOX_CONSTANTS.CB_PROTO_PROPS.forEach(controlState => {
-            const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
-            if (!this._validDescriptor(desc)) {
+    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;
             }
-            Object.defineProperty(nativeCb, controlState, desc);
+            // Otherwise forward the attribute to the element.
+            toggleAttribute(el, !!value, name, value !== null && value !== void 0 ? value : undefined);
         });
     }
-    setInputAttributeObserver(listener) {
-        this._inputMutationObserver = new MutationObserver(mutations => {
-            for (const mutation of mutations) {
-                if (mutation.attributeName) {
-                    listener(mutation.attributeName, this._inputElement.getAttribute(mutation.attributeName));
-                }
-            }
-        });
-        this._inputMutationObserver.observe(this._inputElement, {
-            attributes: true,
-            attributeFilter: ['disabled', 'checked']
+    _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();
         });
     }
-    _validDescriptor(inputPropDesc) {
-        return !!inputPropDesc && typeof inputPropDesc.set === 'function';
-    }
-    _attachInternalInputListeners() {
-        this._inputFocusHandler = () => this._handleInputFocusListener();
-        this._inputBlurHandler = () => this._handleInputBlurListener();
-        this._inputElement.addEventListener('focus', this._inputFocusHandler);
-        this._inputElement.addEventListener('blur', this._inputBlurHandler);
-    }
-    _detachInternalInputListeners() {
-        removeEventListener('focus', this._inputFocusHandler);
-        removeEventListener('blur', this._inputBlurHandler);
-    }
-    _handleInputFocusListener() {
-        addClass(CHECKBOX_CONSTANTS.classes.FOCUSED, this._rootElement);
-    }
-    _handleInputBlurListener() {
-        removeClass(CHECKBOX_CONSTANTS.classes.FOCUSED, this._rootElement);
-    }
-    _createRipple() {
-        const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { deregisterInteractionHandler: (evtType, handler) => this._inputElement.removeEventListener(evtType, handler, { passive: true }), isSurfaceActive: () => this._inputElement.matches(':active'), isUnbounded: () => Boolean(this.unbounded), registerInteractionHandler: (evtType, handler) => this._inputElement.addEventListener(evtType, handler, { passive: true }), isSurfaceDisabled: () => this._inputElement.disabled, addClass: (className) => addClass(className, this._rootElement), removeClass: (className) => removeClass(className, this._rootElement), updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value) });
-        const ripple = new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
-        return ripple;
-    }
 }

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

@@ -6,32 +6,41 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ICheckboxComponent } from './checkbox';
+import { CheckboxLabelPosition } from './checkbox-constants';
 export type CheckboxComponentDelegateProps = Partial<ICheckboxComponent>;
 export interface ICheckboxComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;
-    checked?: boolean;
 }
 export interface ICheckboxComponentDelegateConfig extends IBaseComponentDelegateConfig<ICheckboxComponent, ICheckboxComponentDelegateOptions> {
 }
 export declare class CheckboxComponentDelegate extends FormFieldComponentDelegate<ICheckboxComponent, ICheckboxComponentDelegateOptions> {
-    private _inputElement;
-    private _labelElement?;
     constructor(config?: ICheckboxComponentDelegateConfig);
-    get value(): boolean;
-    set value(value: boolean);
+    get value(): string;
+    set value(value: string);
     get checked(): boolean;
     set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get inputElement(): HTMLInputElement;
-    get labelElement(): HTMLLabelElement | undefined;
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get labelPosition(): CheckboxLabelPosition;
+    set labelPosition(value: CheckboxLabelPosition);
     onChange(listener: (value: boolean) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     setLabel(text: string | null): void;
+    toggle(force?: boolean): void;
     protected _build(): ICheckboxComponent;
     protected _configure(): void;
-    private _createLabel;
-    private _buildInputElement;
 }

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

@@ -10,83 +10,90 @@ export class CheckboxComponentDelegate extends FormFieldComponentDelegate {
         super(config);
     }
     get value() {
-        return this.checked;
+        return this._element.value;
     }
     set value(value) {
-        this.checked = value;
+        this._element.value = value;
     }
     get checked() {
-        return this._inputElement.checked;
+        return this._element.checked;
     }
     set checked(value) {
-        this._inputElement.checked = value;
+        this._element.checked = value;
+    }
+    get defaultChecked() {
+        return this._element.defaultChecked;
+    }
+    set defaultChecked(value) {
+        this._element.defaultChecked = value;
     }
     get disabled() {
-        return this._inputElement.disabled;
+        return this._element.disabled;
     }
     set disabled(value) {
-        this._inputElement.disabled = value;
+        this._element.disabled = value;
+    }
+    get indeterminate() {
+        return this._element.indeterminate;
+    }
+    set indeterminate(value) {
+        this._element.indeterminate = value;
+    }
+    get dense() {
+        return this._element.dense;
+    }
+    set dense(value) {
+        this._element.dense = value;
+    }
+    get required() {
+        return this._element.required;
+    }
+    set required(value) {
+        this._element.required = value;
+    }
+    get readonly() {
+        return this._element.readonly;
+    }
+    set readonly(value) {
+        this._element.readonly = value;
+    }
+    get name() {
+        return this._element.name;
     }
-    get inputElement() {
-        return this._inputElement;
+    set name(value) {
+        this._element.name = value;
     }
-    get labelElement() {
-        return this._labelElement;
+    get labelPosition() {
+        return this._element.labelPosition;
+    }
+    set labelPosition(value) {
+        this._element.labelPosition = value;
     }
     onChange(listener) {
-        this._inputElement.addEventListener('change', evt => listener(evt.target.checked));
+        this._element.addEventListener('change', evt => listener(evt.target.checked));
     }
     onFocus(listener) {
-        this._inputElement.addEventListener('focus', evt => listener(evt));
+        this._element.addEventListener('focus', evt => listener(evt));
     }
     onBlur(listener) {
-        this._inputElement.addEventListener('blur', evt => listener(evt));
+        this._element.addEventListener('blur', evt => listener(evt));
     }
     setLabel(text) {
-        if (text) {
-            if (this._labelElement) {
-                this._labelElement.textContent = text;
-            }
-            else {
-                this._createLabel(text);
-            }
-        }
-        else if (this._labelElement) {
-            this._element.removeChild(this._labelElement);
-            this._labelElement = undefined;
-        }
+        this._element.innerText = text !== null && text !== void 0 ? text : '';
+    }
+    toggle(force) {
+        this._element.toggle(force);
     }
     _build() {
-        const checkbox = document.createElement(CHECKBOX_CONSTANTS.elementName);
-        this._inputElement = this._buildInputElement();
-        checkbox.appendChild(this._inputElement);
-        return checkbox;
+        return document.createElement(CHECKBOX_CONSTANTS.elementName);
     }
     _configure() {
-        var _a;
-        if (typeof ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.label) === 'string') {
-            this._createLabel(this._config.options.label);
-        }
-    }
-    _createLabel(text) {
-        var _a;
-        this._labelElement = document.createElement('label');
-        this._labelElement.textContent = text;
-        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
-            this._labelElement.setAttribute('for', this._config.options.id);
-        }
-        this._element.appendChild(this._labelElement);
-    }
-    _buildInputElement() {
         var _a, _b;
-        const inputElement = document.createElement('input');
-        inputElement.type = 'checkbox';
-        if (((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.checked) !== undefined) {
-            inputElement.checked = this._config.options.checked;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
+            this._element.id = this._config.options.id;
         }
-        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.id) {
-            inputElement.id = this._config.options.id;
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) {
+            this._element.innerText = this._config.options.label;
         }
-        return inputElement;
     }
 }

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

@@ -3,70 +3,28 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export declare const strings: {
-    ARIA_CHECKED_ATTR: string;
-    ARIA_CHECKED_INDETERMINATE_VALUE: string;
-    DATA_INDETERMINATE_ATTR: string;
-    NATIVE_CONTROL_SELECTOR: string;
-    TRANSITION_STATE_CHECKED: string;
-    TRANSITION_STATE_INDETERMINATE: string;
-    TRANSITION_STATE_INIT: string;
-    TRANSITION_STATE_UNCHECKED: string;
-};
-export declare const numbers: {
-    ANIM_END_LATCH_MS: number;
-};
 export declare const CHECKBOX_CONSTANTS: {
     elementName: "forge-checkbox";
-    classes: {
-        CONTAINER: string;
-        ROOT: string;
-        CHECKBOX: string;
-        CHECKBOX_DENSE: string;
-        ANIM_CHECKED_INDETERMINATE: string;
-        ANIM_CHECKED_UNCHECKED: string;
-        ANIM_INDETERMINATE_CHECKED: string;
-        ANIM_INDETERMINATE_UNCHECKED: string;
-        ANIM_UNCHECKED_CHECKED: string;
-        ANIM_UNCHECKED_INDETERMINATE: string;
-        BACKGROUND: string;
-        CHECKMARK: string;
-        CHECKMARK_PATH: string;
-        DISABLED: string;
-        WRAPPER_DISABLED: string;
-        MIXEDMARK: string;
-        SELECTED: string;
-        UPGRADED: string;
-        CHECKED: string;
-        INDETERMINATE: string;
-        FOCUSED: string;
-        ENABLED: string;
-    };
     selectors: {
+        ROOT: string;
         INPUT: string;
         LABEL: string;
-        ROOT: string;
-        WRAPPER: string;
+        INPUT_SLOT: string;
+        STATE_LAYER: string;
+        SLOTTED_INPUT: string;
     };
     attributes: {
-        DENSE: string;
         CHECKED: string;
-        SLOT: string;
-        DISABLED: string;
+        DEFAULT_CHECKED: string;
         INDETERMINATE: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        LABEL_POSITION: string;
     };
-    strings: {
-        ARIA_CHECKED_ATTR: string;
-        ARIA_CHECKED_INDETERMINATE_VALUE: string;
-        DATA_INDETERMINATE_ATTR: string;
-        NATIVE_CONTROL_SELECTOR: string;
-        TRANSITION_STATE_CHECKED: string;
-        TRANSITION_STATE_INDETERMINATE: string;
-        TRANSITION_STATE_INIT: string;
-        TRANSITION_STATE_UNCHECKED: string;
-    };
-    CB_PROTO_PROPS: string[];
-    numbers: {
-        ANIM_END_LATCH_MS: number;
-    };
+    forwardedAttributes: string[];
 };
+export type CheckboxState = 'checked' | 'unchecked' | 'checked-indeterminate' | 'unchecked-indeterminate';
+export type CheckboxLabelPosition = 'start' | 'end';