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

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

@@ -3,101 +3,58 @@
  * Copyright 2023 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 { BaseAdapter, IBaseAdapter } from '../core/base';
+import { IFocusIndicatorComponent } from '../focus-indicator';
+import { FieldLabelPosition } from './base/base-field-constants';
 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;
-    isLabelFloating(): boolean;
-    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(target?: EventTarget | null): boolean;
-    inputHasValue(): boolean;
-    fieldHasValue(): boolean;
-    isDisabled(): boolean;
-    isReadonly(): boolean;
-    getLabelFontMetrics(): IFontInfo;
-    getLabelWidth(fontSize: number, fontFamily: string): number;
-    initialize(rootSelector: string): void;
-    initializeFloatingLabel(): IFloatingLabel;
-    ensureLabelOrder(): void;
-    ensureSlottedLabel(): void;
-    destroy(): void;
-    setValueChangedListener(context: any, listener: (value: any) => void): void;
-    destroyValueChangeListener(): void;
-    detectLabel(): void;
-    setRoomy(isRoomy: boolean): void;
-    setDense(isDense: boolean): void;
-    setInputAttributeObserver(listener: (name: string, value: string | null) => void): void;
+    readonly focusIndicator: IFocusIndicatorComponent;
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    addPopoverIconClickListener(listener: EventListener): void;
+    removePopoverIconClickListener(listener: EventListener): void;
+    attachResizeContainer(): void;
+    removeResizeContainer(): void;
+    setLabelPosition(value: FieldLabelPosition): void;
+    setFloatingLabel(value: boolean, skipAnimation?: boolean): void;
+    handleSlotChange(slot: HTMLSlotElement): 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>;
+    private readonly _rootElement;
+    private readonly _containerElement;
+    private readonly _labelElement;
+    private readonly _popoverIconElement;
+    private readonly _focusIndicatorElement;
+    private get _resizeContainerElement();
+    get focusIndicator(): IFocusIndicatorComponent;
     constructor(component: IFieldComponent);
-    initialize(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(): void;
-    initializeFloatingLabel(): IFloatingLabel;
-    inputHasValue(): boolean;
-    fieldHasValue(): boolean;
-    hasPlaceholder(): boolean;
-    inputHasFocus(target?: EventTarget | null): boolean;
-    setLabelClass(name: string): void;
-    removeLabelClass(name: string): void;
-    isLabelFloating(): boolean;
-    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;
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    addPopoverIconClickListener(listener: EventListener): void;
+    removePopoverIconClickListener(listener: EventListener): void;
+    /**
+     * Wraps the container's children in a resizable div.
+     */
+    attachResizeContainer(): void;
+    /**
+     * Removes the resize container while retaining its children as direct children of the container.
+     */
+    removeResizeContainer(): void;
+    /**
+     * Moves the label to the start or end of the root element, ensuring that the DOM order matches
+     * the visual order.
+     */
+    setLabelPosition(value: FieldLabelPosition): void;
+    /**
+     * Adds or removes animation classes on the root element.
+     */
+    setFloatingLabel(value: boolean, skipAnimation?: boolean): void;
+    /**
+     * Adds or removes a class from the root element indicating whether the slot has any assigned
+     * nodes.
+     */
+    handleSlotChange(slot: HTMLSlotElement): void;
+    /**
+     * Gets `<label>` and `<forge-label>` elements from the default slot and assigns them to the
+     * 'label' slot.
+     */
+    private _trySlotLabel;
 }

package/esm/field/field-adapter.js

@@ -3,176 +3,136 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, calculateFontWidth, getShadowElement, listenOwnProperty, removeClass, getActiveElement, createElementAttributeObserver, toggleClass } from '@tylertech/forge-core';
-import { BaseAdapter } from '../core/base/base-adapter';
-import { FloatingLabel } from '../floating-label/floating-label';
+import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
+import { unwrapElements, wrapElements } from '../core';
+import { BaseAdapter } from '../core/base';
+import { FOCUS_INDICATOR_CONSTANTS } from '../focus-indicator';
 import { FIELD_CONSTANTS } from './field-constants';
 export class FieldAdapter extends BaseAdapter {
-    constructor(component) {
-        super(component);
-        this._valueChangeListeners = [];
-    }
-    initialize(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();
-    }
-    destroy() {
-        if (this._inputMutationObserver) {
-            this._inputMutationObserver.disconnect();
-        }
-    }
-    hasLabel() {
-        return !!this._labelElement;
+    get _resizeContainerElement() {
+        return this._containerElement.querySelector(FIELD_CONSTANTS.selectors.RESIZE_CONTAINER);
     }
-    ensureSlottedLabel() {
-        this._labelElement.slot = 'label';
+    get focusIndicator() {
+        return this._focusIndicatorElement;
     }
-    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);
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, FIELD_CONSTANTS.selectors.ROOT);
+        this._containerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.CONTAINER);
+        this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL);
+        this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON);
+        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
+    }
+    addRootListener(name, listener) {
+        this._rootElement.addEventListener(name, listener);
+    }
+    addPopoverIconClickListener(listener) {
+        this._popoverIconElement.addEventListener('click', listener);
+    }
+    removePopoverIconClickListener(listener) {
+        this._popoverIconElement.removeEventListener('click', listener);
+    }
+    /**
+     * Wraps the container's children in a resizable div.
+     */
+    attachResizeContainer() {
+        // Return if a resize container is already attached
+        if (this._resizeContainerElement) {
+            return;
         }
-    }
-    addLeadingSlotListener(listener) {
-        this._leadingSlot.addEventListener('slotchange', listener);
-    }
-    removeLeadingSlotListener(listener) {
-        if (this._leadingSlot) {
-            this._leadingSlot.removeEventListener('slotchange', listener);
+        const resizeContainer = document.createElement('div');
+        resizeContainer.classList.add(FIELD_CONSTANTS.classes.RESIZE_CONTAINER);
+        const childElements = Array.from(this._containerElement.children);
+        wrapElements(childElements, resizeContainer, [FOCUS_INDICATOR_CONSTANTS.elementName]);
+    }
+    /**
+     * Removes the resize container while retaining its children as direct children of the container.
+     */
+    removeResizeContainer() {
+        const resizeContainerElement = this._resizeContainerElement;
+        if (resizeContainerElement) {
+            unwrapElements(resizeContainerElement);
         }
     }
-    addTrailingSlotListener(listener) {
-        this._trailingSlot.addEventListener('slotchange', listener);
-    }
-    removeTrailingSlotListener(listener) {
-        if (this._trailingSlot) {
-            this._trailingSlot.removeEventListener('slotchange', listener);
+    /**
+     * Moves the label to the start or end of the root element, ensuring that the DOM order matches
+     * the visual order.
+     */
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'inline-end') {
+            this._rootElement.append(this._labelElement);
         }
-    }
-    addAddonEndSlotListener(listener) {
-        this._addonEndSlot.addEventListener('slotchange', listener);
-    }
-    removeAddonEndSlotListener(listener) {
-        if (this._addonEndSlot) {
-            this._addonEndSlot.removeEventListener('slotchange', listener);
+        else if (value === 'inset') {
+            const resizeContainerElement = this._resizeContainerElement;
+            if (resizeContainerElement) {
+                resizeContainerElement.prepend(this._labelElement);
+                return;
+            }
+            this._containerElement.prepend(this._labelElement);
         }
-    }
-    addInputListener(type, listener) {
-        this._inputElement.addEventListener(type, listener);
-    }
-    removeInputListener(type, listener) {
-        if (this._inputElement) {
-            this._inputElement.removeEventListener(type, listener);
+        else {
+            this._rootElement.prepend(this._labelElement);
         }
     }
-    setValueChangedListener(context, listener) {
-        this.destroyValueChangeListener();
-        const destroyListener = listenOwnProperty(context, this._inputElement, 'value', listener);
-        this._valueChangeListeners.push(destroyListener);
-    }
-    destroyValueChangeListener() {
-        this._valueChangeListeners.forEach(cb => cb());
-    }
-    detectLabel() {
-        this._labelElement = this._component.querySelector('label');
-    }
-    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(target) {
-        return this._inputElement === target || this._inputElement === getActiveElement(this._component.ownerDocument);
-    }
-    setLabelClass(name) {
-        if (this._labelElement) {
-            this._labelElement.classList.add(name);
+    /**
+     * Adds or removes animation classes on the root element.
+     */
+    setFloatingLabel(value, skipAnimation = false) {
+        if (skipAnimation) {
+            return;
         }
-    }
-    removeLabelClass(name) {
-        if (this._labelElement) {
-            this._labelElement.classList.remove(name);
+        const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT;
+        const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL;
+        const animationEndListener = (evt) => {
+            if (evt.animationName === animationName) {
+                removeClass(className, this._rootElement);
+                this._rootElement.removeEventListener('animationend', animationEndListener);
+            }
+        };
+        addClass(className, this._rootElement);
+        this._rootElement.addEventListener('animationend', animationEndListener);
+    }
+    /**
+     * Adds or removes a class from the root element indicating whether the slot has any assigned
+     * nodes.
+     */
+    handleSlotChange(slot) {
+        if (slot.name === '') {
+            this._trySlotLabel(slot);
+            return;
         }
-    }
-    isLabelFloating() {
-        return this._component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-    }
-    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;
+        // Ensure that the slot belongs to the field
+        while (slot.assignedSlot) {
+            slot = slot.assignedSlot;
         }
-        return this._leadingSlot.assignedNodes().length > 0;
-    }
-    hasTrailingNodes() {
-        if (!this._trailingSlot) {
-            return false;
+        if (!slot) {
+            return;
         }
-        return this._trailingSlot.assignedNodes().length > 0;
-    }
-    hasAddonEndNodes() {
-        if (!this._addonEndSlot) {
-            return false;
+        const classMap = {
+            label: FIELD_CONSTANTS.classes.HAS_LABEL,
+            start: FIELD_CONSTANTS.classes.HAS_START,
+            end: FIELD_CONSTANTS.classes.HAS_END,
+            accessory: FIELD_CONSTANTS.classes.HAS_ACCESSORY,
+            'support-text-start': FIELD_CONSTANTS.classes.HAS_SUPPORT_START,
+            'support-text-end': FIELD_CONSTANTS.classes.HAS_SUPPORT_END
+        };
+        if (slot.name in classMap) {
+            toggleClass(this._rootElement, !!slot.assignedNodes({ flatten: true }).length, classMap[slot.name]);
         }
-        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'
-        };
+    /**
+     * Gets `<label>` and `<forge-label>` elements from the default slot and assigns them to the
+     * 'label' slot.
+     */
+    _trySlotLabel(slot) {
+        const elements = slot.assignedElements({ flatten: true });
+        const labels = elements.filter(el => el.matches(FIELD_CONSTANTS.selectors.LABEL_ELEMENTS));
+        labels.forEach(label => {
+            if (label.slot) {
+                return;
+            }
+            label.slot = 'label';
+        });
     }
 }

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

@@ -4,44 +4,96 @@
  * License: Apache-2.0
  */
 export declare const FIELD_CONSTANTS: {
-    attributes: {
-        DENSITY: string;
-        FLOAT_LABEL_TYPE: string;
-        SHAPE: string;
+    elementName: "forge-field";
+    observedAttributes: {
+        POPOVER_EXPANDED: string;
+        MULTILINE: string;
+        FOCUS_INDICATOR_ALLOW_FOCUS: string;
+        FOCUS_INDICATOR_FOCUS_MODE: string;
+        LABEL_POSITION: string;
+        LABEL_ALIGNMENT: string;
         INVALID: string;
         REQUIRED: string;
-        HOST_LABEL_FLOATING: string;
-    };
-    observedAttributes: {
-        DENSITY: string;
-        FLOAT_LABEL_TYPE: string;
+        OPTIONAL: string;
+        DISABLED: string;
+        FLOAT_LABEL: string;
+        VARIANT: string;
+        THEME: string;
         SHAPE: string;
+        DENSITY: string;
+        DENSE: string;
+        POPOVER_ICON: string;
+        SUPPORT_TEXT_INSET: string;
+    };
+    attributes: {
+        MULTI_INPUT_SEPARATOR: string;
+        POPOVER_EXPANDED: string;
+        MULTILINE: string;
+        FOCUS_INDICATOR_ALLOW_FOCUS: string;
+        FOCUS_INDICATOR_FOCUS_MODE: string;
+        LABEL_POSITION: string;
+        LABEL_ALIGNMENT: string;
         INVALID: string;
         REQUIRED: string;
-        HOST_LABEL_FLOATING: string;
+        OPTIONAL: string;
+        DISABLED: string;
+        FLOAT_LABEL: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
+        DENSE: string;
+        POPOVER_ICON: string;
+        SUPPORT_TEXT_INSET: string;
+    };
+    classes: {
+        FLOATING_IN: string;
+        FLOATING_OUT: string;
+        HAS_LABEL: string;
+        HAS_START: string;
+        HAS_END: string;
+        HAS_ACCESSORY: string;
+        HAS_SUPPORT_START: string;
+        HAS_SUPPORT_END: string;
+        RESIZE_CONTAINER: string;
     };
-    observedInputAttributes: string[];
     selectors: {
-        INPUT: string;
+        ROOT: string;
+        CONTAINER: string;
+        LABEL: string;
+        POPOVER_ICON: string;
+        RESIZE_CONTAINER: string;
+        LABEL_ELEMENTS: string;
+        POPOVER_TARGET: 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;
+    parts: {
+        ROOT: string;
         LABEL: string;
+        CONTAINER: string;
+        START: string;
+        INPUT: string;
+        POPOVER_ICON: string;
+        END: string;
+        ACCESSORY: string;
+        SUPPORT_TEXT: string;
+        SUPPORT_TEXT_START: string;
+        SUPPORT_TEXT_END: string;
+        FOCUS_INDICATOR: string;
+    };
+    events: {
+        POPOVER_ICON_CLICK: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: import("./base/base-field-constants").FieldVariant;
+        DEFAULT_THEME: import("./base/base-field-constants").FieldTheme;
+        DEFAULT_SHAPE: import("./base/base-field-constants").FieldShape;
+        DEFAULT_DENSITY: import("./base/base-field-constants").FieldDensity;
+        DEFAULT_LABEL_POSITION: import("./base/base-field-constants").FieldLabelPosition;
+        DEFAULT_LABEL_ALIGNMENT: import("./base/base-field-constants").FieldLabelAlignment;
+        DEFAULT_SUPPORT_TEXT_INSET: import("./base/base-field-constants").FieldSupportTextInset;
+    };
+    animations: {
+        FLOAT_IN_LABEL: string;
+        FLOAT_OUT_LABEL: string;
     };
 };
-export type FieldDensityType = 'roomy' | 'default' | 'dense';
-export type FieldFloatLabelType = 'always' | 'auto';
-export type FieldShapeType = 'default' | 'rounded';

package/esm/field/field-constants.js

@@ -3,40 +3,62 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { LABEL_CONSTANTS } from '../label';
+import { BASE_FIELD_CONSTANTS } from './base/base-field-constants';
+const elementName = `${COMPONENT_NAME_PREFIX}field`;
+const observedAttributes = Object.assign(Object.assign({}, BASE_FIELD_CONSTANTS.observedAttributes), { POPOVER_EXPANDED: 'popover-expanded', MULTILINE: 'multiline', FOCUS_INDICATOR_ALLOW_FOCUS: 'focus-indicator-allow-focus', FOCUS_INDICATOR_FOCUS_MODE: 'focus-indicator-focus-mode' });
+const attributes = Object.assign(Object.assign({}, observedAttributes), { MULTI_INPUT_SEPARATOR: 'data-forge-multi-input-separator' });
+const classes = {
+    FLOATING_IN: 'forge-field--floating-in',
+    FLOATING_OUT: 'forge-field--floating-out',
+    HAS_LABEL: 'forge-field--has-label',
+    HAS_START: 'forge-field--has-start',
+    HAS_END: 'forge-field--has-end',
+    HAS_ACCESSORY: 'forge-field--has-accessory',
+    HAS_SUPPORT_START: 'forge-field--has-support-text-start',
+    HAS_SUPPORT_END: 'forge-field--has-support-text-end',
+    RESIZE_CONTAINER: 'resize-container'
+};
 const selectors = {
-    INPUT: 'input,textarea'
+    ROOT: '#root',
+    CONTAINER: '#container',
+    LABEL: '#label',
+    POPOVER_ICON: '#popover-icon',
+    RESIZE_CONTAINER: `.${classes.RESIZE_CONTAINER}`,
+    LABEL_ELEMENTS: `:where(label, ${LABEL_CONSTANTS.elementName})`,
+    POPOVER_TARGET: '.popover-target'
 };
-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'
+const parts = {
+    ROOT: 'root',
+    LABEL: 'label',
+    CONTAINER: 'container',
+    START: 'start',
+    INPUT: 'input',
+    POPOVER_ICON: 'popover-icon',
+    END: 'end',
+    ACCESSORY: 'accessory',
+    SUPPORT_TEXT: 'support-text',
+    SUPPORT_TEXT_START: 'support-text-start',
+    SUPPORT_TEXT_END: 'support-text-end',
+    FOCUS_INDICATOR: 'focus-indicator'
 };
-const observedAttributes = {
-    DENSITY: 'density',
-    FLOAT_LABEL_TYPE: 'float-label-type',
-    SHAPE: 'shape',
-    INVALID: 'invalid',
-    REQUIRED: 'required',
-    HOST_LABEL_FLOATING: `forge-label-floating`
+const events = {
+    POPOVER_ICON_CLICK: `${elementName}-popover-icon-click`
+};
+const defaults = Object.assign({}, BASE_FIELD_CONSTANTS.defaults);
+const animations = {
+    FLOAT_IN_LABEL: 'float-in-label-animation',
+    FLOAT_OUT_LABEL: 'float-out-label-animation'
 };
-const attributes = Object.assign({}, observedAttributes);
 export const FIELD_CONSTANTS = {
-    attributes,
+    elementName,
     observedAttributes,
-    observedInputAttributes,
+    attributes,
+    classes,
     selectors,
-    classes
+    parts,
+    events,
+    defaults,
+    animations
 };