@tylertech/forge 3.13.1 → 3.14.0-dev.0

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

@@ -1,38 +1,35 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ExpansionPanelAdapter } from './expansion-panel-adapter';
-import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants';
-import { ExpansionPanelCore } from './expansion-panel-core';
-const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"content hidden\" part=\"content\"><div class=\"inner\"><slot></slot></div></div></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;opacity:0;transform:translate3d(0,0,0);backface-visibility:hidden}.content .inner{display:grid;grid-template-rows:1fr}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{transition:none}}:host(:not([open])) .inner{overflow:hidden}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{transition:none}';
+
+import { __decorate } from 'tslib';
+import { CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, randomChars } from '@tylertech/forge-core';
+import { unsafeCSS, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state, queryAssignedElements, customElement } from 'lit/decorators.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import '../core/index.js';
+import '../open-icon/index.js';
+import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants.js';
+import { ExpansionPanelTriggerController } from './expansion-panel-trigger-controller.js';
+import styles from './expansion-panel.scss.js';
+import { OPEN_ICON_CONSTANTS } from '../open-icon/open-icon-constants.js';
+import { toggleState } from '../core/utils/utils.js';
+
+var _a, _b;
 /**
  * @tag forge-expansion-panel
  *
  * @summary Expansion panels provide progressive disclosure of content.
  *
- * @property {boolean} [open=false] - Whether the panel is open or closed.
- * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
- * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
- * @property {string} trigger - The id of the button that the expansion panel should be toggled by.
- * @property {HTMLElement | null} triggerElement - The button that the expansion panel should be toggled by.
- * @property {string} openIcon - The id of the `<forge-open-icon>` that the expansion panel should toggle.
- * @property {IOpenIconComponent | null} openIconElement - The `<forge-open-icon>` that the expansion panel should toggle.
- *
- * @attribute {boolean} [open=false] - Whether the panel is open or closed.
- * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
- * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
- * @attribute {string} [trigger] - The id of the button that the expansion panel should be toggled by.
- * @attribute {string} [open-icon] - The id of the `<forge-open-icon>` that the expansion panel should toggle.
- *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
  *
+ * @state open - Applied when the panel is open.
+ * @state horizontal - Applied when the orientation is horizontal.
+ *
  * @cssproperty --forge-expansion-panel-animation-duration - The duration of the open/close animation.
  * @cssproperty --forge-expansion-panel-animation-easing - The easing function of the open/close animation.
  *
@@ -47,83 +44,323 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansio
  * @slot - The content of the panel.
  * @slot header - The header of the panel. This is deprecated, prefer using the trigger property instead, or manually associating a button with the panel.
  */
-let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
-    static get observedAttributes() {
-        return Object.values(EXPANSION_PANEL_CONSTANTS.observedAttributes);
+let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseLitElement {
+    static { this.styles = unsafeCSS(styles); }
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_a] = EXPANSION_PANEL_CONSTANTS.elementName; }
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_b] = []; }
+    #internals;
+    get #slottedOpenIconElement() {
+        return this.querySelector(OPEN_ICON_CONSTANTS.elementName);
+    }
+    /**
+     * TODO: The unmigrated code synced with *all* possible trigger elements
+     * whereas this syncs with just one utilizing a series of fallbacks.
+     * Determine which behavior is preferable.
+     * */
+    get #openIconElement() {
+        if (this.openIconElement) {
+            return this.openIconElement;
+        }
+        else if (this.openIcon) {
+            const openIconEl = this.#getOpenIconElementById(this.openIcon);
+            this.openIconElement = openIconEl;
+            return this.openIconElement;
+        }
+        const triggerOpenIcon = this.#triggerController.openIcon;
+        if (triggerOpenIcon) {
+            return triggerOpenIcon;
+        }
+        return this.#slottedOpenIconElement ?? null;
+    }
+    get #slottedContentId() {
+        return this._slottedContentElements[0]?.id ?? '';
+    }
+    set #slottedContentId(value) {
+        if (this._slottedContentElements[0]) {
+            this._slottedContentElements[0].id = value;
+        }
     }
+    #triggerController;
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles);
-        this._core = new ExpansionPanelCore(new ExpansionPanelAdapter(this));
+        // TODO: remove attribute reflection
+        /**
+         * Whether the panel is open or closed.
+         * @default false
+         * @attribute
+         */
+        this.open = false;
+        /**
+         * The orientation of the panel.
+         * @default 'vertical'
+         * @attribute
+         */
+        this.orientation = 'vertical';
+        /**
+         * The type of animation to use when opening/closing the panel.
+         * @default 'default'
+         * @attribute {animation-type}
+         */
+        this.animationType = 'default';
+        /**
+         * The id of the button that the expansion panel should be toggled by.
+         * @attribute
+         */
+        this.trigger = '';
+        /**
+         * The button that the expansion panel should be toggled by.
+         */
+        this.triggerElement = null;
+        /**
+         * The id of the `<forge-open-icon>` that the expansion panel should toggle.
+         * @attribute {open-icon}
+         */
+        this.openIcon = '';
+        /**
+         * The `<forge-open-icon>` that the expansion panel should toggle.
+         */
+        this.openIconElement = null;
+        /**
+         * The expansion panel's name. Expansion panels that share the same name form an accordion group where only one panel may be open at a time.
+         * @attribute
+         */
+        this.name = '';
+        this._isAnimating = false;
+        this.#triggerController = new ExpansionPanelTriggerController(this, {
+            clickHandler: this.#handleClick.bind(this),
+            keydownHandler: this.#handleKeyDown.bind(this),
+            keyupHandler: this.#handleKeyUp.bind(this)
+        });
+        this.#internals = this.attachInternals();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('open')) {
+            this.#handleOpen();
+        }
+        if (changedProperties.has('open') || changedProperties.has('openIconElement')) {
+            this.#tryToggleOpenIcon();
+        }
+        if (changedProperties.has('openIcon')) {
+            this.openIconElement = this.#getOpenIconElementById(this.openIcon);
+        }
+        if (changedProperties.has('orientation')) {
+            toggleState(this.#internals, 'horizontal', this.orientation === 'horizontal');
+        }
+        if (changedProperties.has('name')) {
+            this.#tryCloseLinkedPanels();
+        }
     }
     connectedCallback() {
-        this._core.initialize();
+        super.connectedCallback();
+        this.#setContentId();
     }
     disconnectedCallback() {
-        this._core.destroy();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN:
-                this.open = coerceBoolean(newValue);
-                break;
-            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ORIENTATION:
-                this.orientation = newValue;
-                break;
-            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE:
-                this.animationType = newValue;
-                break;
-            case EXPANSION_PANEL_CONSTANTS.observedAttributes.TRIGGER:
-                this.trigger = newValue;
-                break;
-            case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN_ICON:
-                this.openIcon = newValue;
-                break;
-        }
+        super.disconnectedCallback();
+        this.openIconElement = null;
     }
-    /**
-     * Toggles the open state of the panel.
-     */
+    render() {
+        return html `
+      <div class="forge-expansion-panel" part="root">
+        <div
+          class="header"
+          part="header"
+          @click="${this.#handleClick.bind(this)}"
+          @keydown="${this.#handleKeyDown.bind(this)}"
+          @keyup="${this.#handleKeyUp.bind(this)}">
+          <slot name="header"></slot>
+        </div>
+        <div
+          class=${classMap({ content: true, 'no-animation': this.animationType === 'none' })}
+          hidden=${!this.open && !this._isAnimating ? 'until-found' : nothing}
+          part="content"
+          @beforematch="${this.#handleBeforeMatch.bind(this)}"
+          @transitionstart="${this.#handleTransitionStart.bind(this)}"
+          @transitionend="${this.#handleTransitionEnd.bind(this)}">
+          <div class=${classMap({ inner: true, animating: this._isAnimating })} @slotchange="${this.#handleContentSlotChange.bind(this)}">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    //
+    // Public Methods
+    //
     toggle() {
         this.open = !this.open;
     }
-    /**
-     * @internal
-     *
-     * Emulates a user toggle of the panel, by also dispatching the toggle event.
-     */
-    [emulateUserToggle](open) {
+    [(_a = CUSTOM_ELEMENT_NAME_PROPERTY, _b = CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, emulateUserToggle)](open) {
         if (this.open === open) {
             return;
         }
         this.open = open;
-        this._core.dispatchToggleEvent();
+        this.#dispatchToggleEvent();
+    }
+    //
+    // User Interaction Handlers
+    //
+    #handleClick(evt) {
+        this.#tryToggle(evt);
+    }
+    #handleKeyDown(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            evt.preventDefault();
+        }
+    }
+    #handleKeyUp(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            this.#tryToggle(evt);
+        }
+    }
+    #handleBeforeMatch() {
+        this[emulateUserToggle](true);
+    }
+    #tryToggle(evt) {
+        if (this.#canIgnoreEvent(evt)) {
+            return;
+        }
+        evt.stopPropagation();
+        this.toggle();
+        this.#dispatchToggleEvent();
+    }
+    #canIgnoreEvent(evt) {
+        return evt.composedPath().some(el => {
+            if (!(el instanceof HTMLElement)) {
+                return false;
+            }
+            return el.matches(EXPANSION_PANEL_CONSTANTS.selectors.IGNORE);
+        });
+    }
+    //
+    // Open and Animation Handlers
+    //
+    #handleOpen() {
+        // Only animate if this isn't the initial update cycle
+        this._isAnimating = this.animationType !== 'none' && this.hasUpdated;
+        toggleState(this.#internals, 'open', this.open);
+        this.#tryCloseLinkedPanels();
+    }
+    #handleTransitionStart(evt) {
+        if (evt.propertyName.startsWith('grid-template')) {
+            this.toggleAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPENING, true);
+        }
+    }
+    #handleTransitionEnd(evt) {
+        if (evt.propertyName.startsWith('grid-template')) {
+            this._isAnimating = false;
+            this.toggleAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPENING, false);
+            this.#dispatchAnimationCompleteEvent();
+        }
+    }
+    //
+    // Slot Change Handlers
+    //
+    #handleContentSlotChange() {
+        this.#setContentId();
+    }
+    #setContentId() {
+        if (!this.#slottedContentId) {
+            this.#slottedContentId = `forge-expansion-panel-content-${randomChars()}`;
+        }
+        this.#triggerController.setControls(this.#slottedContentId);
+    }
+    //
+    // Open Icon
+    //
+    #getOpenIconElementById(id) {
+        if (!id || !this.isConnected) {
+            return null;
+        }
+        const rootNode = this.getRootNode();
+        const el = rootNode.getElementById(id);
+        if (el?.tagName.toLocaleLowerCase() === OPEN_ICON_CONSTANTS.elementName) {
+            return el;
+        }
+        return null;
+    }
+    #tryToggleOpenIcon() {
+        const openIconEl = this.#openIconElement;
+        if (openIconEl) {
+            openIconEl.open = this.open;
+        }
+    }
+    //
+    // Event Dispatchers
+    //
+    #dispatchToggleEvent() {
+        const evt = new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, {
+            detail: this.open,
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(evt);
+    }
+    #dispatchAnimationCompleteEvent() {
+        const evt = new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.ANIMATION_COMPLETE, {
+            detail: this.open,
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(evt);
+    }
+    //
+    //  Linked Group
+    //
+    #getLinkedPanels() {
+        if (!this.name) {
+            return [];
+        }
+        const rootNode = this.getRootNode();
+        const selector = `${EXPANSION_PANEL_CONSTANTS.elementName}[name="${this.name}"]`;
+        const linkedPanels = Array.from(rootNode.querySelectorAll(selector)).filter(el => el !== this);
+        return linkedPanels;
+    }
+    #tryCloseLinkedPanels() {
+        if (!this.open) {
+            return;
+        }
+        const linkedPanels = this.#getLinkedPanels();
+        linkedPanels.forEach(panel => {
+            if (panel.open) {
+                panel[emulateUserToggle](false);
+            }
+        });
     }
 };
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], ExpansionPanelComponent.prototype, "open", void 0);
 __decorate([
-    coreProperty()
+    property({ type: String, reflect: true })
 ], ExpansionPanelComponent.prototype, "orientation", void 0);
 __decorate([
-    coreProperty()
+    property({ type: String, reflect: true, attribute: EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE })
 ], ExpansionPanelComponent.prototype, "animationType", void 0);
 __decorate([
-    coreProperty()
+    property({ type: String, reflect: true })
 ], ExpansionPanelComponent.prototype, "trigger", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Object })
 ], ExpansionPanelComponent.prototype, "triggerElement", void 0);
 __decorate([
-    coreProperty()
+    property({ type: String, reflect: true, attribute: EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN_ICON })
 ], ExpansionPanelComponent.prototype, "openIcon", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Object })
 ], ExpansionPanelComponent.prototype, "openIconElement", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ExpansionPanelComponent.prototype, "name", void 0);
+__decorate([
+    state()
+], ExpansionPanelComponent.prototype, "_isAnimating", void 0);
+__decorate([
+    queryAssignedElements()
+], ExpansionPanelComponent.prototype, "_slottedContentElements", void 0);
 ExpansionPanelComponent = __decorate([
-    customElement({
-        name: EXPANSION_PANEL_CONSTANTS.elementName
-    })
+    customElement(EXPANSION_PANEL_CONSTANTS.elementName)
 ], ExpansionPanelComponent);
+
 export { ExpansionPanelComponent };

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;opacity:0;transform:translate3d(0, 0, 0);backface-visibility:hidden}.content .inner{display:grid;grid-template-rows:1fr;overflow:unset}.content .inner.animating{overflow:hidden}@media(prefers-reduced-motion: reduce){.content{transition:none}}:host(:not(:state(open))) .inner{overflow:hidden}:host(:state(open)) .content{opacity:1}:host(:state(open):not(:state(horizontal))) .content{grid-template-rows:1fr}:host(:state(open):state(horizontal)) .content{grid-template-columns:1fr}:host(:state(horizontal)) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host(:state(horizontal)) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host .content.no-animation{transition:none}";
+
+export { styles as default };

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

@@ -1,10 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './expansion-panel-adapter';
-export * from './expansion-panel-constants';
-export * from './expansion-panel-core';
-export * from './expansion-panel';
+export * from './expansion-panel-constants.js';
+export * from './expansion-panel.js';
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/expansion-panel'`). */
 export declare function defineExpansionPanelComponent(): void;

package/esm/expansion-panel/index.js

@@ -1,14 +1,16 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright 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-core';
-export * from './expansion-panel';
-export function defineExpansionPanelComponent() {
+import { ExpansionPanelComponent } from './expansion-panel.js';
+export { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants.js';
+
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/expansion-panel'`). */
+function defineExpansionPanelComponent() {
     defineCustomElement(ExpansionPanelComponent);
 }
+
+export { ExpansionPanelComponent, defineExpansionPanelComponent };

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

@@ -1,11 +1,6 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { IFieldComponent } from '../field';
-import { IBaseField } from './base-field';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter.js';
+import { IFieldComponent } from '../field.js';
+import { IBaseField } from './base-field.js';
 export interface IBaseFieldAdapter extends IBaseAdapter {
     click(): void;
     applyLabel(value: string | null): void;

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

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { BaseAdapter } from '../../core/base/base-adapter';
-export class BaseFieldAdapter extends BaseAdapter {
+
+import { BaseAdapter } from '../../core/base/base-adapter.js';
+
+class BaseFieldAdapter extends BaseAdapter {
     setFieldProperty(name, value) {
         this._fieldElement[name] = value;
     }
@@ -12,3 +14,5 @@ export class BaseFieldAdapter extends BaseAdapter {
         this._fieldElement.floatLabelWithoutAnimation(value);
     }
 }
+
+export { BaseFieldAdapter };

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

@@ -1,9 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { Density, Theme } from '../../constants';
+import { Density, Theme } from '../../constants.js';
 export declare const BASE_FIELD_CONSTANTS: {
     observedAttributes: {
         LABEL_POSITION: string;

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 const observedAttributes = {
     LABEL_POSITION: 'label-position',
     LABEL_ALIGNMENT: 'label-alignment',
@@ -32,8 +33,10 @@ const defaults = {
     DEFAULT_LABEL_ALIGNMENT: 'default',
     DEFAULT_SUPPORT_TEXT_INSET: 'none'
 };
-export const BASE_FIELD_CONSTANTS = {
+const BASE_FIELD_CONSTANTS = {
     observedAttributes,
     attributes,
     defaults
 };
+
+export { BASE_FIELD_CONSTANTS };

package/esm/field/base/base-field-core.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IBaseFieldAdapter } from './base-field-adapter';
-import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants';
+import { IBaseFieldAdapter } from './base-field-adapter.js';
+import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants.js';
 export interface IBaseFieldCore {
     labelPosition: string;
     labelAlignment: string;

package/esm/field/base/base-field-core.js

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { BASE_FIELD_CONSTANTS } from './base-field-constants';
-export class BaseFieldCore {
+
+import { BASE_FIELD_CONSTANTS } from './base-field-constants.js';
+
+class BaseFieldCore {
     get _hasValue() {
         return this._adapter.hasValue;
     }
@@ -198,3 +200,5 @@ export class BaseFieldCore {
         }
     }
 }
+
+export { BaseFieldCore };

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

@@ -1,13 +1,8 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent } from '../../core/base/base-component';
-import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
-import { IBaseFieldAdapter } from './base-field-adapter';
-import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants';
-import { BaseFieldCore } from './base-field-core';
+import { BaseComponent } from '../../core/base/base-component.js';
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware.js';
+import { IBaseFieldAdapter } from './base-field-adapter.js';
+import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants.js';
+import { BaseFieldCore } from './base-field-core.js';
 export interface IBaseField extends IWithLabelAwareness {
     labelPosition: FieldLabelPosition;
     labelAlignment: FieldLabelAlignment;
@@ -26,7 +21,7 @@ export interface IBaseField extends IWithLabelAwareness {
     supportTextInset: FieldSupportTextInset;
     floatLabelWithoutAnimation(value: boolean): void;
 }
-declare const BaseField_base: import("../..").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & typeof BaseComponent;
+declare const BaseField_base: import("../../constants.js").AbstractConstructor<import("../../core/mixins/label/with-label-aware.js").WithLabelAwarenessContract> & typeof BaseComponent;
 /**
  * @property {FieldLabelPosition} [labelPosition="inset"] - The position of the label relative to the field.
  * @property {FieldLabelAlignment} [labelAlignment="start"] - The alignment of the label relative to the field.

package/esm/field/base/base-field.js

@@ -1,13 +1,15 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
+
+import { __decorate } from 'tslib';
 import { coerceBoolean, coreProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '../../core/base/base-component';
-import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
-import { BASE_FIELD_CONSTANTS } from './base-field-constants';
+import { BaseComponent } from '../../core/base/base-component.js';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware.js';
+import { BASE_FIELD_CONSTANTS } from './base-field-constants.js';
+
 /**
  * @property {FieldLabelPosition} [labelPosition="inset"] - The position of the label relative to the field.
  * @property {FieldLabelAlignment} [labelAlignment="start"] - The alignment of the label relative to the field.
@@ -103,7 +105,7 @@ import { BASE_FIELD_CONSTANTS } from './base-field-constants';
  * @slot support-text - Used for content that provides additional information about the field. Aligns to the inline start of the field.
  * @slot support-text-end - Used for content that provides additional information about the field. Aligns to the inline end of the field.
  */
-export class BaseField extends WithLabelAwareness(BaseComponent) {
+class BaseField extends WithLabelAwareness(BaseComponent) {
     static get observedAttributes() {
         return Object.values(BASE_FIELD_CONSTANTS.observedAttributes);
     }
@@ -215,3 +217,5 @@ __decorate([
 __decorate([
     coreProperty()
 ], BaseField.prototype, "supportTextInset", void 0);
+
+export { BaseField };