@tylertech/forge 3.13.1 → 3.14.0-dev.0

package/esm/icon/icon.d.ts

@@ -1,50 +1,28 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IconUrlBuilder, IconExternalType, IconTheme } from './icon-constants';
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { PropertyValues } from 'lit';
+import { IBaseComponent } from '../core/base/base-component.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { IconExternalType, IconTheme, IconUrlBuilder } from './icon-constants.js';
 export interface IIconProperties {
-    name: string | undefined;
-    src: string | undefined;
+    name?: string;
+    src?: string;
     lazy: boolean;
     external: boolean;
     /** @deprecated This will be removed in a future version. */
     externalType: IconExternalType;
-    externalUrlBuilder: IconUrlBuilder;
-    theme: IconTheme;
-    viewbox: string;
+    externalUrlBuilder?: IconUrlBuilder;
+    theme?: IconTheme;
+    viewbox?: string;
 }
+/** @deprecated - This will be removed in the future. Please switch to using IconComponent. */
 export interface IIconComponent extends IIconProperties, IBaseComponent {
     layout(): void;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'forge-icon': IIconComponent;
-    }
-}
 /**
  * @tag forge-icon
  *
  * @summary Icons are used to represent information visually. The icon component is a wrapper around SVG icons that are registered in the icon registry.
  *
- * @property {string} name - The name of the icon to render.
- * @property {string} src - Provides the ability to set the SVG string content directly.
- * @property {boolean} [lazy=false] - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
- * @property {boolean} [external=false] - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
- * @property {IconExternalType} [externalType="all"] - **(Deprecated)** The type of icon to load externally. Possible values: "all" (default), "standard", "extended", "custom".
- * @property {IconUrlBuilder} externalUrlBuilder - A callback that can be provided to generate a URL that will be used to fetch an SVG icon.
- * @property {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
- * @property {IconTheme} theme - The theme to apply to the icon.
- *
- * @attribute {string} name - The name of the icon to render.
- * @attribute {string} src - Provides the ability to set the SVG string content directly.
- * @attribute {boolean} [lazy=false] - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
- * @attribute {boolean} [external=false] - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
- * @attribute {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
- * @attribute {IconTheme} theme - The theme to apply to the icon.
- *
  * @cssproperty --forge-icon-color - The color of the icon.
  * @cssproperty --forge-icon-size - The size of the icon. Defaults to the font-size of the context it is placed in.
  * @cssproperty --forge-icon-width - The width of the icon.
@@ -55,47 +33,62 @@ declare global {
  *
  * @cssclass forge-icon - The icon element.
  */
-export declare class IconComponent extends BaseComponent implements IIconComponent {
-    static get observedAttributes(): string[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+export declare class IconComponent extends BaseLitElement implements IIconComponent {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: "forge-icon";
     /**
-     * The name of the icon within the icon registry to be used.
+     * The name of the icon to render.
+     * @attribute
      */
-    name: string | undefined;
+    set name(value: string | undefined);
+    get name(): string | undefined;
     /**
      * Provides the ability to set the SVG string content directly.
+     * @attribute
      */
-    src: string | undefined;
+    src?: string;
     /**
-     * Controls whether the icon will be loaded dynamically when it comes into view. False by default.
+     * Controls whether the icon will be loaded dynamically when it comes into view.
+     * @default false
+     * @attribute
      */
     lazy: boolean;
     /**
-     * Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't defined in the registry.
+     * Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+     * @default false
+     * @attribute
      */
     external: boolean;
     /**
-     * The type of icon to load externally. Possible values: "standard", "extended", "custom".
-     * @deprecated This will be removed in a future version.
-     * @attribute external-type
+     * **(Deprecated)** The type of icon to load externally. Possible values: "all" (default), "standard", "extended", "custom".
+     * @default "all"
+     * @attribute
+     * @deprecated The icon libraries are no longer split into separate types.
      */
-    externalType: IconExternalType;
+    set externalType(value: IconExternalType);
+    get externalType(): IconExternalType;
     /**
      * A callback that can be provided to generate a URL that will be used to fetch an SVG icon.
-     * @attribute external-url-builder
      */
-    externalUrlBuilder: IconUrlBuilder;
+    externalUrlBuilder?: IconUrlBuilder;
     /**
      * A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
+     * @attribute
      */
-    viewbox: string;
-    theme: IconTheme;
+    viewbox?: string;
     /**
-     * Forces a reload of the icon.
+     * The theme to apply to the icon.
+     * @attribute
      */
+    theme?: IconTheme;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     layout(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-icon': IIconComponent;
+    }
+}

package/esm/icon/icon.js

@@ -1,37 +1,25 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { customElement, attachShadowTemplate, coreProperty, coerceBoolean } from '@tylertech/forge-core';
-import { IconAdapter } from './icon-adapter';
-import { IconCore } from './icon-core';
-import { ICON_CONSTANTS } from './icon-constants';
-import { BaseComponent } from '../core/base/base-component';
-const template = '<template></template>';
-const styles = ':host{--_icon-color:var(--forge-icon-color, currentColor);--_icon-size:var(--forge-icon-size, 1em);--_icon-width:var(--forge-icon-width, var(--_icon-size));--_icon-height:var(--forge-icon-height, var(--_icon-size));--_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5))}:host{display:inline-block;box-sizing:content-box;contain:content;font-size:var(--_icon-font-size)}:host([hidden]){display:none}svg{width:var(--_icon-width);height:var(--_icon-height);display:block;fill:var(--_icon-color);stroke:var(--_icon-color);stroke-width:0}:host([theme=primary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=secondary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-secondary, #ffc107))}:host([theme=tertiary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=success]){--_icon-color:var(--forge-icon-color, var(--forge-theme-success, #2e7d32))}:host([theme=error]){--_icon-color:var(--forge-icon-color, var(--forge-theme-error, #b00020))}:host([theme=warning]){--_icon-color:var(--forge-icon-color, var(--forge-theme-warning, #d14900))}:host([theme=text-medium]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=text-low]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)))}';
+
+import { __decorate } from 'tslib';
+import { CUSTOM_ELEMENT_NAME_PROPERTY, isDefined } from '@tylertech/forge-core';
+import { unsafeCSS } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { ICON_CONSTANTS } from './icon-constants.js';
+import { IconRegistry } from './icon-registry.js';
+import { sanitizeExternalType, createSanitizedSvg, awaitIconDefinition, fetchIconContent, getCachedIcon, removeIconListener } from './icon-utils.js';
+import styles from './icon.scss.js';
+
+var _a;
 /**
  * @tag forge-icon
  *
  * @summary Icons are used to represent information visually. The icon component is a wrapper around SVG icons that are registered in the icon registry.
  *
- * @property {string} name - The name of the icon to render.
- * @property {string} src - Provides the ability to set the SVG string content directly.
- * @property {boolean} [lazy=false] - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
- * @property {boolean} [external=false] - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
- * @property {IconExternalType} [externalType="all"] - **(Deprecated)** The type of icon to load externally. Possible values: "all" (default), "standard", "extended", "custom".
- * @property {IconUrlBuilder} externalUrlBuilder - A callback that can be provided to generate a URL that will be used to fetch an SVG icon.
- * @property {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
- * @property {IconTheme} theme - The theme to apply to the icon.
- *
- * @attribute {string} name - The name of the icon to render.
- * @attribute {string} src - Provides the ability to set the SVG string content directly.
- * @attribute {boolean} [lazy=false] - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
- * @attribute {boolean} [external=false] - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
- * @attribute {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
- * @attribute {IconTheme} theme - The theme to apply to the icon.
- *
  * @cssproperty --forge-icon-color - The color of the icon.
  * @cssproperty --forge-icon-size - The size of the icon. Defaults to the font-size of the context it is placed in.
  * @cssproperty --forge-icon-width - The width of the icon.
@@ -42,80 +30,259 @@ const styles = ':host{--_icon-color:var(--forge-icon-color, currentColor);--_ico
  *
  * @cssclass forge-icon - The icon element.
  */
-let IconComponent = class IconComponent extends BaseComponent {
-    static get observedAttributes() {
-        return Object.values(ICON_CONSTANTS.observedAttributes);
-    }
+let IconComponent = class IconComponent extends BaseLitElement {
     constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._core = new IconCore(new IconAdapter(this));
+        super(...arguments);
+        /**
+         * Controls whether the icon will be loaded dynamically when it comes into view.
+         * @default false
+         * @attribute
+         */
+        this.lazy = false;
+        /**
+         * Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+         * @default false
+         * @attribute
+         */
+        this.external = false;
+        this.#externalType = 'all';
     }
-    connectedCallback() {
-        this._core.initialize();
-    }
-    disconnectedCallback() {
-        this._core.destroy();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case ICON_CONSTANTS.observedAttributes.NAME:
-                this.name = newValue;
-                break;
-            case ICON_CONSTANTS.observedAttributes.SRC:
-                this.src = newValue;
-                break;
-            case ICON_CONSTANTS.observedAttributes.LAZY:
-                this.lazy = coerceBoolean(newValue);
-                break;
-            case ICON_CONSTANTS.observedAttributes.EXTERNAL:
-                this.external = coerceBoolean(newValue);
-                break;
-            case ICON_CONSTANTS.observedAttributes.EXTERNAL_TYPE:
-                this.externalType = newValue;
-                break;
-            case ICON_CONSTANTS.observedAttributes.VIEWBOX:
-                this.viewbox = newValue;
-                break;
-            case ICON_CONSTANTS.observedAttributes.THEME:
-                this.theme = newValue;
-                break;
+    static { _a = CUSTOM_ELEMENT_NAME_PROPERTY; }
+    static { this.styles = unsafeCSS(styles); }
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_a] = ICON_CONSTANTS.elementName; }
+    // TODO: Remove attribute reflection
+    // TODO: Clarify types -- do any of these truly allow undefined values? Should the documentation reflect that?
+    /**
+     * The name of the icon to render.
+     * @attribute
+     */
+    set name(value) {
+        if (isDefined(value)) {
+            this.#name = value?.replace(/\s+/, '');
+        }
+        else {
+            this.#name = undefined;
         }
     }
+    get name() {
+        return this.#name;
+    }
+    #name;
     /**
-     * Forces a reload of the icon.
+     * **(Deprecated)** The type of icon to load externally. Possible values: "all" (default), "standard", "extended", "custom".
+     * @default "all"
+     * @attribute
+     * @deprecated The icon libraries are no longer split into separate types.
      */
+    set externalType(value) {
+        this.#externalType = sanitizeExternalType(value);
+    }
+    get externalType() {
+        return this.#externalType;
+    }
+    #externalType;
+    #applyTimer;
+    #visibilityObserver;
+    #registrationListener;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#visibilityObserver?.disconnect();
+        this.#tryRemoveRegistrationListener(this.name);
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('name') || changedProperties.has('external')) {
+            this.#tryRemoveRegistrationListener(changedProperties.get('name') ?? this.name);
+        }
+        const applyOnProps = ['name', 'src', 'lazy', 'external', 'externalType', 'externalUrlBuilder'];
+        if (applyOnProps.some(prop => changedProperties.has(prop))) {
+            this.#safeApplyIcon();
+        }
+        if (changedProperties.has('viewbox')) {
+            this.#setViewBox(this.viewbox);
+        }
+    }
+    //
+    // Public Methods
+    //
     layout() {
-        this._core.layout();
+        if (this.isConnected) {
+            this.#applyIcon();
+        }
+    }
+    //
+    // Retrieval and Rendering
+    //
+    #applyIcon() {
+        if (this.lazy && !!window.IntersectionObserver) {
+            this.#initVisibilityObserver();
+        }
+        else {
+            this.#loadIcon();
+        }
+    }
+    #safeApplyIcon() {
+        if (this.isConnected) {
+            this.#clearIconQueue();
+            this.#queueIconUpdate();
+        }
+    }
+    #clearIconQueue() {
+        if (this.#applyTimer) {
+            clearTimeout(this.#applyTimer);
+            this.#applyTimer = undefined;
+        }
+    }
+    #queueIconUpdate() {
+        this.#applyTimer = window.setTimeout(() => {
+            this.#applyTimer = undefined;
+            this.#applyIcon();
+        });
+    }
+    async #loadIcon() {
+        try {
+            if (this.src) {
+                // We were provided direct icon source content so just set that
+                const node = createSanitizedSvg(this.src, this.viewbox);
+                this.#setContent(node);
+            }
+            else if (this.name) {
+                // Let's attempt to get our icon from the registry
+                const descriptor = this.#tryGetIcon(this.name);
+                // Short circuit here if we already have the node from a previous usage
+                if (descriptor?.node) {
+                    return this.#setContent(descriptor.node);
+                }
+                let svgEl = null;
+                if (!descriptor) {
+                    if (!this.external) {
+                        // We attach a listener to the registry to let us know when the icon is registered
+                        this.#registrationListener = () => this.#applyIcon();
+                        awaitIconDefinition(this.name, this.#registrationListener);
+                        // For now, we render nothing...
+                        return this.#setContent(null);
+                    }
+                    // We don't have a registry icon, so let's try the network to fetch it
+                    if (!this.externalType) {
+                        this.externalType = 'standard';
+                    }
+                    const url = this.#getExternalUrl(this.name, this.externalType);
+                    if (url) {
+                        const content = await fetchIconContent(url, this.name);
+                        if (content) {
+                            svgEl = createSanitizedSvg(content, this.viewbox);
+                        }
+                    }
+                }
+                else if (descriptor.raw) {
+                    svgEl = createSanitizedSvg(descriptor.raw, this.viewbox);
+                }
+                if (svgEl) {
+                    if (!descriptor?.node) {
+                        // Store the node for future use to improve performance
+                        IconRegistry.setNode(this.name, svgEl);
+                    }
+                    this.#setContent(svgEl);
+                }
+            }
+            else {
+                this.#setContent(null);
+            }
+        }
+        catch (e) {
+            this.#setContent(null);
+            throw e;
+        }
+    }
+    #tryGetIcon(key) {
+        return getCachedIcon(key);
+    }
+    #setContent(svgElement) {
+        const shadowRoot = this.shadowRoot;
+        shadowRoot.querySelectorAll(':not(style)').forEach(child => child.remove());
+        const clone = svgElement?.cloneNode(true);
+        if (!clone) {
+            return;
+        }
+        if (this.viewbox) {
+            clone.setAttribute('viewBox', this.viewbox);
+        }
+        clone.part = 'svg';
+        clone.setAttribute('aria-hidden', 'true');
+        shadowRoot.appendChild(clone);
+    }
+    #setViewBox(viewbox) {
+        const svgElement = this.shadowRoot?.querySelector('svg');
+        if (viewbox) {
+            return svgElement?.setAttribute('viewBox', viewbox);
+        }
+        svgElement?.removeAttribute('viewBox');
+    }
+    //
+    // Lazy Loading
+    //
+    #initVisibilityObserver() {
+        this.#visibilityObserver = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                this.#destroyVisibilityObserver();
+                this.#loadIcon();
+            }
+        }, { rootMargin: `${ICON_CONSTANTS.numbers.LAZY_ROOT_MARGIN}px` });
+        this.#visibilityObserver.observe(this);
+    }
+    //
+    // External
+    //
+    #getExternalUrl(name, type) {
+        if (typeof this.externalUrlBuilder === 'function') {
+            return this.externalUrlBuilder(name, type);
+        }
+        const setName = sanitizeExternalType(this.externalType);
+        if (['standard', 'extended', 'custom'].includes(setName)) {
+            return `${ICON_CONSTANTS.strings.DEFAULT_NETWORK_BASE_URL}/${setName}/${name}.svg`;
+        }
+        return `${ICON_CONSTANTS.strings.ALL_NETWORK_BASE_URL}/${name}.svg`;
+    }
+    //
+    // Teardown Logic
+    //
+    #tryRemoveRegistrationListener(key) {
+        if (key && this.#registrationListener) {
+            removeIconListener(key, this.#registrationListener);
+            this.#registrationListener = undefined;
+        }
+    }
+    #destroyVisibilityObserver() {
+        this.#visibilityObserver?.disconnect();
+        this.#visibilityObserver = undefined;
     }
 };
 __decorate([
-    coreProperty()
-], IconComponent.prototype, "name", void 0);
+    property({ reflect: true })
+], IconComponent.prototype, "name", null);
 __decorate([
-    coreProperty()
+    property({ reflect: true })
 ], IconComponent.prototype, "src", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], IconComponent.prototype, "lazy", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], IconComponent.prototype, "external", void 0);
 __decorate([
-    coreProperty()
-], IconComponent.prototype, "externalType", void 0);
+    property({ attribute: 'external-type', reflect: true })
+], IconComponent.prototype, "externalType", null);
 __decorate([
-    coreProperty()
+    property({ attribute: false })
 ], IconComponent.prototype, "externalUrlBuilder", void 0);
 __decorate([
-    coreProperty()
+    property({ reflect: true })
 ], IconComponent.prototype, "viewbox", void 0);
 __decorate([
-    coreProperty()
+    property({ reflect: true })
 ], IconComponent.prototype, "theme", void 0);
 IconComponent = __decorate([
-    customElement({
-        name: ICON_CONSTANTS.elementName
-    })
+    customElement(ICON_CONSTANTS.elementName)
 ], IconComponent);
+
 export { IconComponent };

package/esm/icon/icon.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{--_icon-color:var(--forge-icon-color, currentColor);--_icon-size:var(--forge-icon-size, 1em);--_icon-width:var(--forge-icon-width, var(--_icon-size));--_icon-height:var(--forge-icon-height, var(--_icon-size));--_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5))}:host{display:inline-block;box-sizing:content-box;contain:content;font-size:var(--_icon-font-size)}:host([hidden]){display:none}svg{width:var(--_icon-width);height:var(--_icon-height);display:block;fill:var(--_icon-color);stroke:var(--_icon-color);stroke-width:0}:host([theme=primary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=secondary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-secondary, #ffc107))}:host([theme=tertiary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=success]){--_icon-color:var(--forge-icon-color, var(--forge-theme-success, #2e7d32))}:host([theme=error]){--_icon-color:var(--forge-icon-color, var(--forge-theme-error, #b00020))}:host([theme=warning]){--_icon-color:var(--forge-icon-color, var(--forge-theme-warning, #d14900))}:host([theme=text-medium]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=text-low]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)))}";
+
+export { styles as default };

package/esm/icon/index.d.ts

@@ -1,13 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './icon-adapter';
-export * from './icon-constants';
-export * from './icon-core';
-export * from './icon-registry';
-export * from './icon-utils';
-export * from './icon';
-export * from './icon-component-delegate';
+export * from './icon-constants.js';
+export * from './icon-registry.js';
+export * from './icon-utils.js';
+export * from './icon.js';
+export * from './icon-component-delegate.js';
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/icon'`). */
 export declare function defineIconComponent(): void;

package/esm/icon/index.js

@@ -1,17 +1,19 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { IconComponent } from './icon';
-export * from './icon-adapter';
-export * from './icon-constants';
-export * from './icon-core';
-export * from './icon-registry';
-export * from './icon-utils';
-export * from './icon';
-export * from './icon-component-delegate';
-export function defineIconComponent() {
+import { IconComponent } from './icon.js';
+export { ICON_CONSTANTS, ICON_REGISTRY_KEY } from './icon-constants.js';
+export { IconRegistry } from './icon-registry.js';
+export { awaitIconDefinition, createSanitizedSvg, fetchIconContent, getCachedIcon, removeIconListener, sanitizeExternalType } from './icon-utils.js';
+export { IconComponentDelegate } from './icon-component-delegate.js';
+
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/icon'`). */
+function defineIconComponent() {
     defineCustomElement(IconComponent);
 }
+
+export { IconComponent, defineIconComponent };

package/esm/icon-button/icon-button-adapter.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
-import { IIconButtonComponent } from './icon-button';
+import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter.js';
+import { IIconButtonComponent } from './icon-button.js';
 export interface IIconButtonAdapter extends IBaseButtonAdapter<IIconButtonComponent> {
 }
 export declare class IconButtonAdapter extends BaseButtonAdapter<IIconButtonComponent> implements IIconButtonAdapter {

package/esm/icon-button/icon-button-adapter.js

@@ -1,11 +1,15 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { BaseButtonAdapter } from '../button/base/base-button-adapter';
-export class IconButtonAdapter extends BaseButtonAdapter {
+
+import { BaseButtonAdapter } from '../button/base/base-button-adapter.js';
+
+class IconButtonAdapter extends BaseButtonAdapter {
     constructor(component) {
         super(component);
     }
 }
+
+export { IconButtonAdapter };

package/esm/icon-button/icon-button-component-delegate.d.ts

@@ -1,12 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IconExternalType, IIconComponent } from '../icon';
-import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
-import { IIconButtonComponent } from './icon-button';
-import { TooltipPlacement } from '../tooltip/tooltip-constants';
+import { IconExternalType, IIconComponent } from '../icon/index.js';
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate.js';
+import { IIconButtonComponent } from './icon-button.js';
+import { TooltipPlacement } from '../tooltip/tooltip-constants.js';
 export type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
 export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     iconName?: string;

package/esm/icon-button/icon-button-component-delegate.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { addClass } from '@tylertech/forge-core';
-import { ICON_CONSTANTS } from '../icon';
-import { ICON_CLASS_NAME } from '../constants';
-import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
-import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
-export class IconButtonComponentDelegate extends BaseComponentDelegate {
+import '../icon/index.js';
+import { ICON_CLASS_NAME } from '../constants.js';
+import { BaseComponentDelegate } from '../core/delegates/base-component-delegate.js';
+import { ICON_BUTTON_CONSTANTS } from './icon-button-constants.js';
+import { ICON_CONSTANTS } from '../icon/icon-constants.js';
+
+class IconButtonComponentDelegate extends BaseComponentDelegate {
     constructor(config) {
         super(config);
     }
@@ -74,3 +77,5 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         this._element.addEventListener('blur', evt => listener(evt));
     }
 }
+
+export { IconButtonComponentDelegate };