@tylertech/forge 2.0.0

package/esm/quantity-field/quantity-field-adapter.js

@@ -0,0 +1,225 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter } from '../core/base/base-adapter';
+import { getShadowElement, Platform } from '@tylertech/forge-core';
+import { QUANTITY_FIELD_CONSTANTS } from './quantity-field-constants';
+export class QuantityFieldAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, QUANTITY_FIELD_CONSTANTS.selectors.ROOT);
+        this._incrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON_SLOT);
+        this._decrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON_SLOT);
+    }
+    addRootClass(name) {
+        this._rootElement.classList.add(name);
+    }
+    removeRootClass(name) {
+        this._rootElement.classList.remove(name);
+    }
+    inputHasAttribute(name) {
+        if (!this.inputElement) {
+            return false;
+        }
+        return this.inputElement.hasAttribute(name);
+    }
+    addIncrementButtonSlotListener(listener) {
+        this._incrementButtonSlot.addEventListener('slotchange', listener);
+    }
+    removeIncrementButtonSlotListener(listener) {
+        if (this._incrementButtonSlot) {
+            this._incrementButtonSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addDecrementButtonSlotListener(listener) {
+        this._decrementButtonSlot.addEventListener('slotchange', listener);
+    }
+    removeDecrementButtonSlotListener(listener) {
+        if (this._decrementButtonSlot) {
+            this._decrementButtonSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addTextFieldAttribute(name, value = '') {
+        if (this._textFieldComponent) {
+            this._textFieldComponent.setAttribute(name, value);
+        }
+    }
+    removeTextFieldAttribute(name) {
+        if (this._textFieldComponent) {
+            this._textFieldComponent.removeAttribute(name);
+        }
+    }
+    addIncrementEventListener(event, callback) {
+        this._incrementButtonElement.addEventListener(event, callback);
+    }
+    removeIncrementEventListener(event, callback) {
+        if (this._incrementButtonElement) {
+            this._incrementButtonElement.removeEventListener(event, callback);
+        }
+    }
+    addDecrementEventListener(event, callback) {
+        this._decrementButtonElement.addEventListener(event, callback);
+    }
+    removeDecrementEventListener(event, callback) {
+        if (this._decrementButtonElement) {
+            this._decrementButtonElement.removeEventListener(event, callback);
+        }
+    }
+    addIncrementButtonAttribute(name, value = '') {
+        this._incrementButtonElement.setAttribute(name, value);
+    }
+    removeIncrementButtonAttribute(name) {
+        this._incrementButtonElement.removeAttribute(name);
+    }
+    addDecrementButtonAttribute(name, value = '') {
+        this._decrementButtonElement.setAttribute(name, value);
+    }
+    removeDecrementButtonAttribute(name) {
+        this._decrementButtonElement.removeAttribute(name);
+    }
+    setLabelAsRequired(required) {
+        const labelElement = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.LABEL);
+        // Due to a Safari bug with ::slotted::after selectors, we need to manually append the required "asterisk" to the label text
+        // https://bugs.webkit.org/show_bug.cgi?id=178237
+        if (required && Platform.WEBKIT && labelElement && !labelElement.innerText.endsWith('*')) {
+            const asterisk = document.createElement('span');
+            asterisk.style.color = 'var(--mdc-theme-error)';
+            asterisk.style.marginLeft = '1px';
+            asterisk.textContent = '*';
+            labelElement.appendChild(asterisk);
+        }
+    }
+    increment() {
+        const input = this.inputElement;
+        if (!input) {
+            return;
+        }
+        const curValue = +input.value;
+        const precision = this._calcPrecision(this._inputStep);
+        let newValue = parseFloat((curValue + this._inputStep).toFixed(precision));
+        if (!!this._inputMax && this._inputMax < newValue) {
+            newValue = this._inputMax;
+        }
+        this._setInputValue(newValue);
+    }
+    decrement() {
+        const input = this.inputElement;
+        if (!input) {
+            return;
+        }
+        const curValue = +input.value;
+        const precision = this._calcPrecision(this._inputStep);
+        let newValue = parseFloat((curValue - this._inputStep).toFixed(precision));
+        if (!!this._inputMin && this._inputMin > newValue) {
+            newValue = this._inputMin;
+        }
+        this._setInputValue(newValue);
+    }
+    addInputDisabledAttributeChangeListener(callback) {
+        this._setupInputDisabledAttributeMutationObserver(callback);
+    }
+    removeInputDisabledAttributeChangeListener() {
+        this._cleanupInputDisabledAttributeMutationObserver();
+    }
+    _setInputValue(value) {
+        if (!this.inputElement) {
+            return;
+        }
+        this.inputElement.value = `${value}`;
+        this.inputElement.dispatchEvent(new Event('input'));
+        this.inputElement.dispatchEvent(new Event('change'));
+    }
+    _isNullOrUndefinedOrEmpty(value) {
+        return value === null || value === undefined || value === '';
+    }
+    _setupInputDisabledAttributeMutationObserver(callback) {
+        if (!this.inputElement) {
+            return;
+        }
+        this._cleanupInputDisabledAttributeMutationObserver();
+        const mutationCallback = (mutationRecords) => this._inputDisabledAttributeMutationCallback(mutationRecords, callback);
+        this._inputAttributeMutationObserver = new MutationObserver(mutationCallback);
+        const mutationOptions = {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: [QUANTITY_FIELD_CONSTANTS.attributes.DISABLED]
+        };
+        this._inputAttributeMutationObserver.observe(this.inputElement, mutationOptions);
+    }
+    _cleanupInputDisabledAttributeMutationObserver() {
+        if (this._inputAttributeMutationObserver) {
+            this._inputAttributeMutationObserver.disconnect();
+            delete this._inputAttributeMutationObserver;
+        }
+    }
+    _inputDisabledAttributeMutationCallback(mutationRecords, callback) {
+        for (const mutationRecord of mutationRecords) {
+            // Skip:
+            //   - Non-attribute mutations.
+            //   - Mutations without an attribute name.
+            //   - Mutations without a matching attribute name.
+            //   - Mutations that did not change the attribute value.
+            if (mutationRecord.type !== 'attributes'
+                || !mutationRecord.attributeName
+                || mutationRecord.attributeName !== QUANTITY_FIELD_CONSTANTS.attributes.DISABLED
+                || mutationRecord.target[mutationRecord.attributeName] === mutationRecord.oldValue) {
+                continue;
+            }
+            callback();
+        }
+    }
+    get _incrementButtonElement() {
+        if (!this._incrementButton) {
+            this._incrementButton = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON);
+        }
+        return this._incrementButton;
+    }
+    get _decrementButtonElement() {
+        if (!this._decrementButton) {
+            this._decrementButton = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON);
+        }
+        return this._decrementButton;
+    }
+    get _textFieldComponent() {
+        if (!this._textField) {
+            this._textField = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.TEXT_FIELD);
+        }
+        return this._textField;
+    }
+    get inputElement() {
+        if (!this._inputElement) {
+            this._inputElement = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INPUT);
+        }
+        return this._inputElement;
+    }
+    get _inputStep() {
+        const input = this.inputElement;
+        if (!input || this._isNullOrUndefinedOrEmpty(input.step)) {
+            return 1;
+        }
+        return +input.step;
+    }
+    get _inputMax() {
+        const input = this.inputElement;
+        if (!input || this._isNullOrUndefinedOrEmpty(input.max)) {
+            return null;
+        }
+        return +input.max;
+    }
+    get _inputMin() {
+        const input = this.inputElement;
+        if (!input || this._isNullOrUndefinedOrEmpty(input.min)) {
+            return null;
+        }
+        return +input.min;
+    }
+    _calcPrecision(value) {
+        const strVal = String(value);
+        if (strVal.includes('.')) {
+            return strVal.split('.')[1].length;
+        }
+        return 0;
+    }
+}

package/esm/quantity-field/quantity-field-component-delegate.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
+import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
+import { ITextFieldComponentDelegateConfig } from '../text-field/text-field-component-delegate';
+import { IQuantityFieldComponent } from './quantity-field';
+export declare type QuantityFieldComponentDelegateProps = Partial<IQuantityFieldComponent>;
+export interface IQuantityFieldComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    id?: string;
+    label?: string;
+    value?: string;
+    step?: string;
+    helperText?: string;
+    textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;
+}
+export interface IQuantityFieldComponentDelegateConfig extends IBaseComponentDelegateConfig<IQuantityFieldComponent, IQuantityFieldComponentDelegateOptions> {
+}
+export declare class QuantityFieldComponentDelegate extends FormFieldComponentDelegate<IQuantityFieldComponent, IQuantityFieldComponentDelegateOptions> {
+    private _textFieldDelegate;
+    private _labelElement;
+    private _helperTextElement;
+    constructor(config?: IQuantityFieldComponentDelegateConfig);
+    protected _build(): IQuantityFieldComponent;
+    protected _configure(): void;
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get inputElement(): HTMLInputElement;
+    get labelElement(): HTMLLabelElement | undefined;
+    onChange(listener: (value: string) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+    private _attachTextField;
+    setLabel(text: string | null): void;
+    setHelperText(text: string | null): void;
+    private _createLabel;
+    private _attachButton;
+}

package/esm/quantity-field/quantity-field-component-delegate.js

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
+import { IconButtonComponentDelegate } from '../icon-button';
+import { TextFieldComponentDelegate } from '../text-field/text-field-component-delegate';
+import { QUANTITY_FIELD_CONSTANTS } from './quantity-field-constants';
+import { tylIconRemoveCircleOutline, tylIconControlPoint } from '@tylertech/tyler-icons/standard';
+import { IconRegistry } from '../icon';
+export class QuantityFieldComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+        IconRegistry.define([tylIconRemoveCircleOutline, tylIconControlPoint]);
+    }
+    _build() {
+        const quantityField = document.createElement(QUANTITY_FIELD_CONSTANTS.elementName);
+        this._attachButton(quantityField, tylIconRemoveCircleOutline.name, 'decrement-button');
+        this._attachTextField(quantityField);
+        this._attachButton(quantityField, tylIconControlPoint.name, 'increment-button');
+        return quantityField;
+    }
+    _configure() {
+        var _a, _b, _c, _d, _e;
+        this.inputElement.value = (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '0';
+        this.inputElement.style.textAlign = 'center';
+        this.inputElement.style.width = '64px';
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.helperText) {
+            this.setHelperText(this._config.options.helperText);
+        }
+        if (typeof ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.label) === 'string') {
+            this._createLabel(this._config.options.label);
+        }
+        if (((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.step) !== undefined) {
+            this.inputElement.step = this._config.options.step;
+        }
+    }
+    get value() {
+        return this._textFieldDelegate.inputElement.value;
+    }
+    set value(value) {
+        this._textFieldDelegate.inputElement.value = value;
+    }
+    get disabled() {
+        return this._textFieldDelegate.inputElement.disabled;
+    }
+    set disabled(value) {
+        this._textFieldDelegate.inputElement.disabled = value;
+    }
+    get invalid() {
+        return this._element.invalid || false;
+    }
+    set invalid(value) {
+        this._element.invalid = value;
+    }
+    get inputElement() {
+        return this._textFieldDelegate.inputElement;
+    }
+    get labelElement() {
+        return this._labelElement;
+    }
+    onChange(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('input', evt => listener(evt.target.value));
+    }
+    onFocus(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('blur', evt => listener(evt));
+    }
+    _attachTextField(quantityField) {
+        var _a, _b, _c, _d, _e;
+        const textFieldConfig = {
+            props: Object.assign({}, (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.textFieldDelegateConfig) === null || _b === void 0 ? void 0 : _b.props),
+            options: Object.assign(Object.assign({}, (_d = (_c = this._config.options) === null || _c === void 0 ? void 0 : _c.textFieldDelegateConfig) === null || _d === void 0 ? void 0 : _d.options), { id: (_e = this._config.options) === null || _e === void 0 ? void 0 : _e.id, type: 'number' })
+        };
+        this._textFieldDelegate = new TextFieldComponentDelegate(textFieldConfig);
+        quantityField.appendChild(this._textFieldDelegate.element);
+    }
+    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;
+        }
+    }
+    setHelperText(text) {
+        if (text) {
+            if (!this._helperTextElement) {
+                this._helperTextElement = document.createElement('span');
+                this._helperTextElement.slot = 'helper-text';
+                this._element.appendChild(this._helperTextElement);
+            }
+            this._helperTextElement.textContent = text;
+        }
+        else if (this._helperTextElement) {
+            this._element.removeChild(this._helperTextElement);
+            this._helperTextElement = undefined;
+        }
+    }
+    _createLabel(text) {
+        var _a;
+        this._labelElement = document.createElement('label');
+        this._labelElement.textContent = text;
+        this._labelElement.slot = 'label';
+        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);
+    }
+    _attachButton(parent, iconName, slot) {
+        const iconButtonDelegate = new IconButtonComponentDelegate({
+            options: {
+                iconName,
+                parent,
+                attributes: { slot }
+            }
+        });
+        return iconButtonDelegate;
+    }
+}

package/esm/quantity-field/quantity-field-constants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const QUANTITY_FIELD_CONSTANTS: {
+    elementName: "forge-quantity-field";
+    classes: {
+        ROOT: string;
+        INVALID: string;
+        REQUIRED: string;
+    };
+    slots: {
+        INCREMENT_BUTTON: string;
+        DECREMENT_BUTTON: string;
+        LABEL: string;
+        HELPER_TEXT: string;
+    };
+    selectors: {
+        ROOT: string;
+        INCREMENT_BUTTON_SLOT: string;
+        DECREMENT_BUTTON_SLOT: string;
+        INCREMENT_BUTTON: string;
+        DECREMENT_BUTTON: string;
+        TEXT_FIELD: string;
+        INPUT: string;
+        LABEL: string;
+        HELPER_TEXT: string;
+    };
+    attributes: {
+        INVALID: string;
+        REQUIRED: string;
+        DISABLED: string;
+    };
+};

package/esm/quantity-field/quantity-field-constants.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}quantity-field`;
+const attributes = {
+    INVALID: 'invalid',
+    REQUIRED: 'required',
+    DISABLED: 'disabled'
+};
+const classes = {
+    ROOT: 'forge-quantity-field',
+    INVALID: 'forge-quantity-field--invalid',
+    REQUIRED: 'forge-quantity-field--required'
+};
+const slots = {
+    INCREMENT_BUTTON: 'increment-button',
+    DECREMENT_BUTTON: 'decrement-button',
+    LABEL: 'label',
+    HELPER_TEXT: 'helper-text'
+};
+const selectors = {
+    ROOT: `.${classes.ROOT}`,
+    INCREMENT_BUTTON_SLOT: `slot[name=${slots.INCREMENT_BUTTON}]`,
+    DECREMENT_BUTTON_SLOT: `slot[name=${slots.DECREMENT_BUTTON}]`,
+    INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}] button, button[slot=${slots.INCREMENT_BUTTON}]`,
+    DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}] button, button[slot=${slots.DECREMENT_BUTTON}]`,
+    TEXT_FIELD: 'forge-text-field',
+    INPUT: 'input[type=number]',
+    LABEL: `[slot=${slots.LABEL}]`,
+    HELPER_TEXT: `[slot=${slots.HELPER_TEXT}]`
+};
+export const QUANTITY_FIELD_CONSTANTS = {
+    elementName,
+    classes,
+    slots,
+    selectors,
+    attributes
+};

package/esm/quantity-field/quantity-field-foundation.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IQuantityFieldAdapter } from './quantity-field-adapter';
+export interface IQuantityFieldFoundation extends ICustomElementFoundation {
+    required: boolean;
+    invalid: boolean;
+}
+export declare class QuantityFieldFoundation implements IQuantityFieldFoundation {
+    private _adapter;
+    private _required;
+    private _invalid;
+    private _incrementButtonSlotChanged;
+    private _decrementButtonSlotChanged;
+    private _incrementValue;
+    private _decrementValue;
+    constructor(_adapter: IQuantityFieldAdapter);
+    connect(): void;
+    disconnect(): void;
+    private _onIncrementButtonSlotChanged;
+    private _onDecrementButtonSlotChanged;
+    private _addIncrementEventListener;
+    private _addDecrementEventListener;
+    private _removeIncrementEventListener;
+    private _removeDecrementEventListener;
+    private _removeIncrementButtonSlotListener;
+    private _removeDecrementButtonSlotListener;
+    private _syncDisabledStateOfButtons;
+    get required(): boolean;
+    set required(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+}

package/esm/quantity-field/quantity-field-foundation.js

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { QUANTITY_FIELD_CONSTANTS } from './quantity-field-constants';
+export class QuantityFieldFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._incrementValue = () => this._adapter.increment();
+        this._decrementValue = () => this._adapter.decrement();
+        this._incrementButtonSlotChanged = () => this._onIncrementButtonSlotChanged();
+        this._decrementButtonSlotChanged = () => this._onDecrementButtonSlotChanged();
+        this._adapter.addIncrementButtonSlotListener(this._incrementButtonSlotChanged);
+        this._adapter.addDecrementButtonSlotListener(this._decrementButtonSlotChanged);
+    }
+    connect() {
+        this._adapter.addInputDisabledAttributeChangeListener(() => this._syncDisabledStateOfButtons());
+        this._syncDisabledStateOfButtons();
+    }
+    disconnect() {
+        this._removeIncrementEventListener();
+        this._removeDecrementEventListener();
+        this._removeIncrementButtonSlotListener();
+        this._removeDecrementButtonSlotListener();
+        this._adapter.removeInputDisabledAttributeChangeListener();
+    }
+    _onIncrementButtonSlotChanged() {
+        this._addIncrementEventListener();
+    }
+    _onDecrementButtonSlotChanged() {
+        this._addDecrementEventListener();
+    }
+    _addIncrementEventListener() {
+        this._adapter.addIncrementEventListener('click', this._incrementValue);
+    }
+    _addDecrementEventListener() {
+        this._adapter.addDecrementEventListener('click', this._decrementValue);
+    }
+    _removeIncrementEventListener() {
+        this._adapter.removeIncrementEventListener('click', this._incrementValue);
+    }
+    _removeDecrementEventListener() {
+        this._adapter.removeDecrementEventListener('click', this._decrementValue);
+    }
+    _removeIncrementButtonSlotListener() {
+        this._adapter.removeIncrementButtonSlotListener(this._incrementButtonSlotChanged);
+    }
+    _removeDecrementButtonSlotListener() {
+        this._adapter.removeDecrementButtonSlotListener(this._decrementButtonSlotChanged);
+    }
+    _syncDisabledStateOfButtons() {
+        const isDisabled = this._adapter.inputHasAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+        if (isDisabled) {
+            this._adapter.addDecrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+            this._adapter.addIncrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+        }
+        else {
+            this._adapter.removeIncrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+            this._adapter.removeDecrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required === value) {
+            return;
+        }
+        this._required = value;
+        if (this._required) {
+            this._adapter.setHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED);
+            this._adapter.addRootClass(QUANTITY_FIELD_CONSTANTS.classes.REQUIRED);
+        }
+        else {
+            this._adapter.removeHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED);
+            this._adapter.removeRootClass(QUANTITY_FIELD_CONSTANTS.classes.REQUIRED);
+        }
+        this._adapter.setLabelAsRequired(this._required);
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        if (this._invalid === value) {
+            return;
+        }
+        this._invalid = value;
+        if (this._invalid) {
+            this._adapter.setHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+            this._adapter.addRootClass(QUANTITY_FIELD_CONSTANTS.classes.INVALID);
+            this._adapter.addTextFieldAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+        }
+        else {
+            this._adapter.removeHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+            this._adapter.removeRootClass(QUANTITY_FIELD_CONSTANTS.classes.INVALID);
+            this._adapter.removeTextFieldAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+        }
+    }
+}

package/esm/quantity-field/quantity-field.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IQuantityFieldComponent extends IBaseComponent {
+    invalid: boolean;
+    required: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-quantity-field': IQuantityFieldComponent;
+    }
+}
+export declare class QuantityFieldComponent extends BaseComponent implements IQuantityFieldComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _ensureElementsPresent;
+    private _requiredElementsPresent;
+    /** Gets/sets the invalid state. */
+    invalid: boolean;
+    /** Gets/sets the required state which controls the visibility of the asterisk in the label. */
+    required: boolean;
+}