@tylertech/forge 2.0.0

package/esm/expansion-panel/expansion-panel-foundation.js

@@ -0,0 +1,151 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { debounce } from '@tylertech/forge-core';
+import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
+export class ExpansionPanelFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._open = false;
+        this._useAnimations = true;
+        this._orientation = EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_VERTICAL;
+        this._isInitialized = false;
+        this._clickListener = debounce((evt) => this._onClick(evt), EXPANSION_PANEL_CONSTANTS.numbers.CLICK_DEBOUNCE_THRESHOLD, true);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._headerSlotChangeListener = (evt) => this._onHeaderSlotChanged(evt);
+    }
+    initialize() {
+        this.connect();
+        this._adapter.initialize(this._open, this._orientation);
+        this._isInitialized = true;
+    }
+    connect() {
+        this._adapter.registerHeaderSlotListener(this._headerSlotChangeListener);
+        this._adapter.registerClickListener(this._clickListener);
+        this._adapter.registerKeydownListener(this._keydownListener);
+    }
+    disconnect() {
+        this._adapter.deregisterHeaderSlotListener(this._headerSlotChangeListener);
+        this._adapter.deregisterClickListener(this._clickListener);
+        this._adapter.deregisterKeydownListener(this._keydownListener);
+    }
+    setOpenImmediate(open) {
+        if (open) {
+            this._openPanel(false);
+        }
+        else {
+            this._closePanel(false);
+        }
+    }
+    _applyOpen(value) {
+        if (!this._isInitialized) {
+            this._open = value;
+            return;
+        }
+        if (value) {
+            if (this._openCallback) {
+                Promise.resolve(this._openCallback())
+                    .then(() => {
+                    this._open = value;
+                    this._openPanel(this._useAnimations);
+                })
+                    .catch(() => { });
+            }
+            else {
+                this._open = value;
+                this._openPanel(this._useAnimations);
+            }
+        }
+        else {
+            if (this._closeCallback) {
+                Promise.resolve(this._closeCallback())
+                    .then(() => {
+                    this._open = value;
+                    this._closePanel(this._useAnimations);
+                })
+                    .catch(() => { });
+            }
+            else {
+                this._open = value;
+                this._closePanel(this._useAnimations);
+            }
+        }
+    }
+    /** Controls the open state of the panel. */
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._applyOpen(value);
+        }
+    }
+    get openCallback() {
+        return this._openCallback;
+    }
+    set openCallback(callback) {
+        this._openCallback = callback;
+    }
+    get closeCallback() {
+        return this._closeCallback;
+    }
+    set closeCallback(callback) {
+        this._closeCallback = callback;
+    }
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        this._orientation = value;
+    }
+    get useAnimations() {
+        return this._useAnimations;
+    }
+    set useAnimations(value) {
+        if (this._useAnimations !== !!value) {
+            this._useAnimations = !!value;
+            this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS, `${this._useAnimations}`);
+        }
+    }
+    /**
+     * Handles click events on the header element.
+     * @param {MouseEvent} evt The click event.
+     */
+    _onClick(evt) {
+        evt.stopPropagation();
+        this._toggle();
+        this._emitEvent();
+    }
+    /**
+     * Handles keydown events on the header.
+     * @param {KeyboardEvent} evt The keydown event
+     */
+    _onKeydown(evt) {
+        evt.stopPropagation();
+        if (evt.key === 'Space' || evt.key === 'Enter' || evt.keyCode === 32 || evt.keyCode === 13) {
+            evt.preventDefault();
+            this._toggle();
+            this._emitEvent();
+        }
+    }
+    _emitEvent() {
+        this._adapter.emitHostEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, this._open);
+    }
+    _toggle() {
+        this.open = !this.open;
+    }
+    _openPanel(animate) {
+        this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, '');
+        this._adapter.setOpenState(true, this._orientation, animate);
+    }
+    _closePanel(animate) {
+        this._adapter.removeHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN);
+        this._adapter.setOpenState(false, this._orientation, animate);
+    }
+    _onHeaderSlotChanged(evt) {
+        this._adapter.setHeaderVisibility(!!evt.target.assignedNodes().length);
+    }
+}

package/esm/expansion-panel/expansion-panel.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IExpansionPanelComponent extends IBaseComponent {
+    open: boolean;
+    useAnimations: boolean;
+    openCallback: () => void | Promise<void>;
+    closeCallback: () => void | Promise<void>;
+    orientation: string;
+    toggle(): void;
+    setOpenImmediate(open: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-expansion-panel': IExpansionPanelComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-expansion-panel-toggle': CustomEvent<boolean>;
+    }
+}
+/**
+ * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
+ */
+export declare class ExpansionPanelComponent extends BaseComponent implements IExpansionPanelComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    initializedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
+    /** Controls the open state of the panel. */
+    open: boolean;
+    /**
+     * Sets the function to call when the panel wants to open.
+     * The function must return a promise which can be resolved to
+     * open the panel or rejected which cancels the panel open.
+     */
+    openCallback: () => void | Promise<void>;
+    /**
+     * Sets the function to call when the panel wants to close.
+     * The function must return a promise which can be resolved to
+     * close the panel or rejected which cancels the panel close.
+     */
+    closeCallback: () => void | Promise<void>;
+    /**
+     * Sets the orientation of the panel expansion.
+     * Valid values are 'vertical' (default) or 'horizontal'.
+     */
+    orientation: string;
+    /** Gets/sets if animations are used in the expand/collapse transition. */
+    useAnimations: boolean;
+    /** Toggles the collapsed state. */
+    toggle(): void;
+    /** Forces the expansion panel to expand/collapse without transition animations. */
+    setOpenImmediate(open: boolean): void;
+}

package/esm/expansion-panel/expansion-panel.js

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { ExpansionPanelAdapter } from './expansion-panel-adapter';
+import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
+import { ExpansionPanelFoundation } from './expansion-panel-foundation';
+const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" role=\"button\" aria-controls=\"content\" aria-expanded=\"false\" part=\"header\"><slot name=\"header\"></slot></div><div id=\"content\" role=\"group\" class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
+const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-expansion-panel__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}:host{display:block}:host([hidden]){display:none}';
+/**
+ * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
+ */
+let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
+            EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION,
+            EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
+        ];
+    }
+    initializedCallback() {
+        this._foundation.initialize();
+    }
+    connectedCallback() {
+        this._foundation.connect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case EXPANSION_PANEL_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION:
+                this.orientation = newValue;
+                break;
+            case EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS:
+                this.useAnimations = coerceBoolean(newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    /** Toggles the collapsed state. */
+    toggle() {
+        this.open = !this.open;
+    }
+    /** Forces the expansion panel to expand/collapse without transition animations. */
+    setOpenImmediate(open) {
+        this._foundation.setOpenImmediate(open);
+    }
+};
+__decorate([
+    FoundationProperty()
+], ExpansionPanelComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], ExpansionPanelComponent.prototype, "openCallback", void 0);
+__decorate([
+    FoundationProperty()
+], ExpansionPanelComponent.prototype, "closeCallback", void 0);
+__decorate([
+    FoundationProperty()
+], ExpansionPanelComponent.prototype, "orientation", void 0);
+__decorate([
+    FoundationProperty()
+], ExpansionPanelComponent.prototype, "useAnimations", void 0);
+ExpansionPanelComponent = __decorate([
+    CustomElement({
+        name: EXPANSION_PANEL_CONSTANTS.elementName
+    })
+], ExpansionPanelComponent);
+export { ExpansionPanelComponent };

package/esm/expansion-panel/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './expansion-panel-adapter';
+export * from './expansion-panel-constants';
+export * from './expansion-panel-foundation';
+export * from './expansion-panel';
+export declare function defineExpansionPanelComponent(): void;

package/esm/expansion-panel/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ExpansionPanelComponent } from './expansion-panel';
+export * from './expansion-panel-adapter';
+export * from './expansion-panel-constants';
+export * from './expansion-panel-foundation';
+export * from './expansion-panel';
+export function defineExpansionPanelComponent() {
+    defineCustomElement(ExpansionPanelComponent);
+}

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

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IFontInfo } from '@tylertech/forge-core';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IFloatingLabel } from '../floating-label/floating-label';
+import { IFieldComponent } from './field';
+export interface IFieldAdapter extends IBaseAdapter {
+    setRootClass(classes: string | string[]): void;
+    removeRootClass(classes: string | string[]): void;
+    addInputListener(type: string, listener: (evt: Event) => void): void;
+    removeInputListener(type: string, listener: (evt: Event) => void): void;
+    setInputClass(className: string): void;
+    removeInputClass(className: string): void;
+    addLabelSlotListener(listener: (evt: Event) => void): void;
+    removeLabelSlotListener(listener: (evt: Event) => void): void;
+    setLabelClass(name: string): void;
+    removeLabelClass(name: string): void;
+    addLeadingSlotListener(listener: (evt: Event) => void): void;
+    removeLeadingSlotListener(listener: (evt: Event) => void): void;
+    addTrailingSlotListener(listener: (evt: Event) => void): void;
+    removeTrailingSlotListener(listener: (evt: Event) => void): void;
+    addAddonEndSlotListener(listener: (evt: Event) => void): void;
+    removeAddonEndSlotListener(listener: (evt: Event) => void): void;
+    hasAddonEndNodes(): boolean;
+    hasLabel(): boolean;
+    hasLeadingNodes(): boolean;
+    hasPlaceholder(): boolean;
+    hasTrailingNodes(): boolean;
+    inputHasFocus(): boolean;
+    inputHasValue(): boolean;
+    fieldHasValue(): boolean;
+    isDisabled(): boolean;
+    isReadonly(): boolean;
+    getLabelFontMetrics(): IFontInfo;
+    getLabelWidth(fontSize: number, fontFamily: string): number;
+    initialize(required: boolean, rootSelector: string): void;
+    initializeFloatingLabel(): IFloatingLabel;
+    ensureLabelOrder(): void;
+    ensureSlottedLabel(): void;
+    destroy(): void;
+    setValueChangedListener(context: any, listener: (value: any) => void): void;
+    destroyValueChangeListener(): void;
+    detectLabel(required: boolean): void;
+    setRoomy(isRoomy: boolean): void;
+    setDense(isDense: boolean): void;
+    setInputAttributeObserver(listener: (name: string, value: string | null) => void): void;
+}
+export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implements IFieldAdapter {
+    protected _rootElement: HTMLElement;
+    protected _labelSlot: HTMLSlotElement;
+    protected _leadingSlot: HTMLSlotElement;
+    protected _trailingSlot: HTMLSlotElement;
+    protected _addonEndSlot: HTMLSlotElement;
+    protected _labelElement: HTMLLabelElement;
+    protected _inputElement: HTMLInputElement;
+    protected _inputMutationObserver: MutationObserver;
+    protected _valueChangeListeners: Array<() => void>;
+    constructor(component: IFieldComponent);
+    initialize(required: boolean, rootSelector: string): void;
+    destroy(): void;
+    hasLabel(): boolean;
+    ensureSlottedLabel(): void;
+    ensureLabelOrder(): void;
+    addLabelSlotListener(listener: (evt: Event) => void): void;
+    removeLabelSlotListener(listener: (evt: Event) => void): void;
+    addLeadingSlotListener(listener: (evt: Event) => void): void;
+    removeLeadingSlotListener(listener: (evt: Event) => void): void;
+    addTrailingSlotListener(listener: (evt: Event) => void): void;
+    removeTrailingSlotListener(listener: (evt: Event) => void): void;
+    addAddonEndSlotListener(listener: (evt: Event) => void): void;
+    removeAddonEndSlotListener(listener: (evt: Event) => void): void;
+    addInputListener(type: string, listener: (evt: Event) => void): void;
+    removeInputListener(type: string, listener: (evt: Event) => void): void;
+    setValueChangedListener(context: any, listener: (value: any) => void): void;
+    destroyValueChangeListener(): void;
+    detectLabel(required: boolean): void;
+    initializeFloatingLabel(): IFloatingLabel;
+    inputHasValue(): boolean;
+    fieldHasValue(): boolean;
+    hasPlaceholder(): boolean;
+    inputHasFocus(): boolean;
+    setLabelClass(name: string): void;
+    removeLabelClass(name: string): void;
+    setRoomy(isRoomy: boolean): void;
+    setDense(isDense: boolean): void;
+    hasLeadingNodes(): boolean;
+    hasTrailingNodes(): boolean;
+    hasAddonEndNodes(): boolean;
+    setInputClass(className: string): void;
+    removeInputClass(className: string): void;
+    setRootClass(classes: string | string[]): void;
+    removeRootClass(classes: string | string[]): void;
+    setInputAttributeObserver(listener: (name: string, value: string | null) => void): void;
+    isDisabled(): boolean;
+    isReadonly(): boolean;
+    getLabelWidth(fontSize: number, fontFamily: string): number;
+    getLabelFontMetrics(): IFontInfo;
+}

package/esm/field/field-adapter.js

@@ -0,0 +1,184 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, calculateFontWidth, getShadowElement, listenOwnProperty, Platform, removeClass, getActiveElement, createElementAttributeObserver, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { FloatingLabel } from '../floating-label/floating-label';
+import { FIELD_CONSTANTS } from './field-constants';
+export class FieldAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._valueChangeListeners = [];
+    }
+    initialize(required, rootSelector) {
+        this._rootElement = getShadowElement(this._component, rootSelector);
+        this._labelSlot = getShadowElement(this._component, 'slot[name=label]');
+        this._leadingSlot = getShadowElement(this._component, 'slot[name=leading]');
+        this._trailingSlot = getShadowElement(this._component, 'slot[name=trailing]');
+        this._addonEndSlot = getShadowElement(this._component, 'slot[name=addon-end]');
+        this._inputElement = this._component.querySelector('input:not([type=checkbox]):not([type=radio])');
+        this.detectLabel(required);
+    }
+    destroy() {
+        if (this._inputMutationObserver) {
+            this._inputMutationObserver.disconnect();
+        }
+    }
+    hasLabel() {
+        return !!this._labelElement;
+    }
+    ensureSlottedLabel() {
+        this._labelElement.slot = 'label';
+    }
+    ensureLabelOrder() {
+        if (this._labelElement) {
+            const children = Array.from(this._component.children);
+            if (children.length > 1 && children.indexOf(this._labelElement) < children.indexOf(this._inputElement)) {
+                this._component.appendChild(this._labelElement);
+            }
+        }
+    }
+    addLabelSlotListener(listener) {
+        this._labelSlot.addEventListener('slotchange', listener);
+    }
+    removeLabelSlotListener(listener) {
+        if (this._labelSlot) {
+            this._labelSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addLeadingSlotListener(listener) {
+        this._leadingSlot.addEventListener('slotchange', listener);
+    }
+    removeLeadingSlotListener(listener) {
+        if (this._leadingSlot) {
+            this._leadingSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addTrailingSlotListener(listener) {
+        this._trailingSlot.addEventListener('slotchange', listener);
+    }
+    removeTrailingSlotListener(listener) {
+        if (this._trailingSlot) {
+            this._trailingSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addAddonEndSlotListener(listener) {
+        this._addonEndSlot.addEventListener('slotchange', listener);
+    }
+    removeAddonEndSlotListener(listener) {
+        if (this._addonEndSlot) {
+            this._addonEndSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addInputListener(type, listener) {
+        this._inputElement.addEventListener(type, listener);
+    }
+    removeInputListener(type, listener) {
+        if (this._inputElement) {
+            this._inputElement.removeEventListener(type, listener);
+        }
+    }
+    setValueChangedListener(context, listener) {
+        this.destroyValueChangeListener();
+        const destroyListener = listenOwnProperty(context, this._inputElement, 'value', listener);
+        this._valueChangeListeners.push(destroyListener);
+    }
+    destroyValueChangeListener() {
+        this._valueChangeListeners.forEach(cb => cb());
+    }
+    detectLabel(required) {
+        this._labelElement = this._component.querySelector('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 && this._labelElement && !this._labelElement.innerText.endsWith('*')) {
+            const asterisk = document.createElement('span');
+            asterisk.style.color = 'var(--mdc-theme-error)';
+            asterisk.style.marginLeft = '1px';
+            asterisk.textContent = '*';
+            this._labelElement.appendChild(asterisk);
+        }
+    }
+    initializeFloatingLabel() {
+        return new FloatingLabel(this._labelElement);
+    }
+    inputHasValue() {
+        return this._inputElement.value ? this._inputElement.value.trim().length > 0 : false;
+    }
+    // An overrideable method for more generic field values where input.value is not the value.
+    fieldHasValue() {
+        return this.inputHasValue();
+    }
+    hasPlaceholder() {
+        return this._inputElement.placeholder ? this._inputElement.placeholder.trim().length > 0 : false;
+    }
+    inputHasFocus() {
+        return this._inputElement === getActiveElement();
+    }
+    setLabelClass(name) {
+        if (this._labelElement) {
+            this._labelElement.classList.add(name);
+        }
+    }
+    removeLabelClass(name) {
+        if (this._labelElement) {
+            this._labelElement.classList.remove(name);
+        }
+    }
+    setRoomy(isRoomy) {
+        toggleClass(this._rootElement, isRoomy, FIELD_CONSTANTS.classes.ROOMY);
+    }
+    setDense(isDense) {
+        toggleClass(this._rootElement, isDense, FIELD_CONSTANTS.classes.DENSE);
+    }
+    hasLeadingNodes() {
+        if (!this._leadingSlot) {
+            return false;
+        }
+        return this._leadingSlot.assignedNodes().length > 0;
+    }
+    hasTrailingNodes() {
+        if (!this._trailingSlot) {
+            return false;
+        }
+        return this._trailingSlot.assignedNodes().length > 0;
+    }
+    hasAddonEndNodes() {
+        if (!this._addonEndSlot) {
+            return false;
+        }
+        return this._addonEndSlot.assignedNodes().length > 0;
+    }
+    setInputClass(className) {
+        this._inputElement.classList.add(className);
+    }
+    removeInputClass(className) {
+        this._inputElement.classList.remove(className);
+    }
+    setRootClass(classes) {
+        addClass(classes, this._rootElement);
+    }
+    removeRootClass(classes) {
+        removeClass(classes, this._rootElement);
+    }
+    setInputAttributeObserver(listener) {
+        this._inputMutationObserver = createElementAttributeObserver(this._inputElement, listener, FIELD_CONSTANTS.observedInputAttributes);
+    }
+    isDisabled() {
+        return this._inputElement.hasAttribute('disabled');
+    }
+    isReadonly() {
+        return this._inputElement.hasAttribute('readonly');
+    }
+    getLabelWidth(fontSize, fontFamily) {
+        return calculateFontWidth(this._labelElement.innerText, { fontSize, fontFamily });
+    }
+    getLabelFontMetrics() {
+        const style = getComputedStyle(this._labelElement);
+        return {
+            fontSize: parseInt(style.fontSize || '16', 10),
+            fontFamily: style.fontFamily || 'Roboto'
+        };
+    }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const FIELD_CONSTANTS: {
+    attributes: {
+        DENSITY: string;
+        FLOAT_LABEL_TYPE: string;
+        SHAPE: string;
+        INVALID: string;
+        REQUIRED: string;
+        HOST_LABEL_FLOATING: string;
+    };
+    observedInputAttributes: string[];
+    classes: {
+        DISABLED: string;
+        READONLY: string;
+        INPUT_FOCUSED: string;
+        LEADING: string;
+        TRAILING: string;
+        ADDON_END: string;
+        ADDON_END_CONTAINER: string;
+        FOCUSED: string;
+        LABEL_FOCUSED: string;
+        SHAPE_ROUNDED: string;
+        INVALID: string;
+        REQUIRED: string;
+        DENSE: string;
+        ROOMY: string;
+        LABEL: string;
+    };
+};
+export declare type FieldDensityType = 'roomy' | 'default' | 'dense';
+export declare type FieldFloatLabelType = 'always' | 'auto';
+export declare type FieldShapeType = 'default' | 'rounded';

package/esm/field/field-constants.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+const attributes = {
+    DENSITY: 'density',
+    FLOAT_LABEL_TYPE: 'float-label-type',
+    SHAPE: 'shape',
+    INVALID: 'invalid',
+    REQUIRED: 'required',
+    HOST_LABEL_FLOATING: `forge-label-floating`
+};
+const observedInputAttributes = ['disabled', 'readonly', 'value', 'placeholder'];
+const classes = {
+    DISABLED: 'forge-field--disabled',
+    READONLY: 'forge-field--readonly',
+    INPUT_FOCUSED: 'forge-field__input--focused',
+    LEADING: 'forge-field--leading',
+    TRAILING: 'forge-field--trailing',
+    ADDON_END: 'forge-field--addon-end',
+    ADDON_END_CONTAINER: 'forge-field__addon-end-container',
+    FOCUSED: 'forge-field--focused',
+    LABEL_FOCUSED: 'forge-field__label--focused',
+    SHAPE_ROUNDED: 'forge-field--shape-rounded',
+    INVALID: 'forge-field--invalid',
+    REQUIRED: 'forge-field--required',
+    DENSE: 'forge-field--dense',
+    ROOMY: 'forge-field--roomy',
+    LABEL: 'forge-field--label'
+};
+export const FIELD_CONSTANTS = {
+    attributes,
+    observedInputAttributes,
+    classes
+};