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

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';

package/esm/checkbox/checkbox-constants.js

@@ -4,64 +4,31 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
+import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}checkbox`;
-const classes = {
-    CONTAINER: 'forge-checkbox-container',
-    ROOT: 'mdc-checkbox',
-    CHECKBOX: 'mdc-checkbox',
-    CHECKBOX_DENSE: 'forge-checkbox--dense',
-    ANIM_CHECKED_INDETERMINATE: 'mdc-checkbox--anim-checked-indeterminate',
-    ANIM_CHECKED_UNCHECKED: 'mdc-checkbox--anim-checked-unchecked',
-    ANIM_INDETERMINATE_CHECKED: 'mdc-checkbox--anim-indeterminate-checked',
-    ANIM_INDETERMINATE_UNCHECKED: 'mdc-checkbox--anim-indeterminate-unchecked',
-    ANIM_UNCHECKED_CHECKED: 'mdc-checkbox--anim-unchecked-checked',
-    ANIM_UNCHECKED_INDETERMINATE: 'mdc-checkbox--anim-unchecked-indeterminate',
-    BACKGROUND: 'mdc-checkbox__background',
-    CHECKMARK: 'mdc-checkbox__checkmark',
-    CHECKMARK_PATH: 'mdc-checkbox__checkmark-path',
-    DISABLED: 'mdc-checkbox--disabled',
-    WRAPPER_DISABLED: 'forge-checkbox-wrapper--disabled',
-    MIXEDMARK: 'mdc-checkbox__mixedmark',
-    SELECTED: 'mdc-checkbox--selected',
-    UPGRADED: 'mdc-checkbox--upgraded',
-    CHECKED: 'forge-checkbox--checked',
-    INDETERMINATE: 'forge-checkbox--indeterminate',
-    FOCUSED: 'forge-checkbox--focused',
-    ENABLED: 'forge-checkbox--enabled'
-};
-const selectors = {
-    INPUT: 'input',
-    LABEL: 'label',
-    ROOT: `.${classes.ROOT}`,
-    WRAPPER: '.forge-checkbox-wrapper'
-};
 const attributes = {
-    DENSE: 'dense',
     CHECKED: 'checked',
-    SLOT: 'slot',
+    DEFAULT_CHECKED: 'default-checked',
+    INDETERMINATE: 'indeterminate',
+    VALUE: 'value',
+    DENSE: 'dense',
     DISABLED: 'disabled',
-    INDETERMINATE: 'indeterminate'
-};
-export const strings = {
-    ARIA_CHECKED_ATTR: 'aria-checked',
-    ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',
-    DATA_INDETERMINATE_ATTR: 'data-indeterminate',
-    NATIVE_CONTROL_SELECTOR: '.mdc-checkbox__native-control',
-    TRANSITION_STATE_CHECKED: 'checked',
-    TRANSITION_STATE_INDETERMINATE: 'indeterminate',
-    TRANSITION_STATE_INIT: 'init',
-    TRANSITION_STATE_UNCHECKED: 'unchecked'
+    REQUIRED: 'required',
+    READONLY: 'readonly',
+    LABEL_POSITION: 'label-position'
 };
-const CB_PROTO_PROPS = ['checked', 'indeterminate', 'disabled'];
-export const numbers = {
-    ANIM_END_LATCH_MS: 250
+const selectors = {
+    ROOT: '.forge-checkbox',
+    INPUT: 'input',
+    LABEL: 'label',
+    INPUT_SLOT: 'slot[name=input]',
+    STATE_LAYER: 'forge-state-layer',
+    SLOTTED_INPUT: 'input[type=checkbox]'
 };
+const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const CHECKBOX_CONSTANTS = {
     elementName,
-    classes,
     selectors,
     attributes,
-    strings,
-    CB_PROTO_PROPS,
-    numbers
+    forwardedAttributes
 };

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

@@ -5,31 +5,61 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ICheckboxAdapter } from './checkbox-adapter';
+import { CheckboxLabelPosition } from './checkbox-constants';
 export interface ICheckboxFoundation extends ICustomElementFoundation {
+    checked: boolean;
+    defaultChecked: boolean;
+    indeterminate: boolean;
+    value: string;
     dense: boolean;
+    disabled: boolean;
+    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;
+    private _checked;
+    private _defaultChecked;
+    private _indeterminate;
+    private _value;
     private _dense;
-    private _currentCheckState;
-    private _currentAnimationClass;
-    private _animEndLatchTimer;
-    private _enableAnimationEndHandler;
-    private _handleChange;
-    private _inputAttributeChangedListener;
-    private _handleAnimationEnd;
+    private _disabled;
+    private _required;
+    private _readonly;
+    private _labelPosition;
+    private get _submittedValue();
+    private get _formState();
+    private readonly _changeListener;
+    private readonly _inputSlotListener;
     constructor(_adapter: ICheckboxAdapter);
-    disconnect(): void;
-    connect(): void;
+    initialize(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
+    syncValidity(hasCustomValidityError: boolean): void;
+    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _handleChange;
+    private _handleInputSlotChange;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    get value(): string;
+    set value(value: string);
     get dense(): boolean;
     set dense(value: boolean);
-    handleAnimationEnd(): void;
-    private _setDense;
-    private _determineCheckState;
-    private _updateAriaChecked;
-    private _handleInputChange;
-    private _transitionCheckState;
-    private _handleInputAttributeChange;
-    private _getTransitionAnimationClass;
-    private _updateCheckboxStateClasses;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get labelPosition(): CheckboxLabelPosition;
+    set labelPosition(value: CheckboxLabelPosition);
 }