@tylertech/forge 2.0.0

package/esm/file-picker/file-picker.js

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { ButtonComponent } from '../button';
+import { BaseComponent } from '../core/base/base-component';
+import { FilePickerAdapter } from './file-picker-adapter';
+import { FILE_PICKER_CONSTANTS } from './file-picker-constants';
+import { FilePickerFoundation } from './file-picker-foundation';
+const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"forge-file-picker__primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"forge-file-picker__secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"forge-file-picker__input\" id=\"input\" part=\"input\"></form><div class=\"forge-file-picker__helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
+const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;height:auto;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker__helper-text::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.forge-file-picker[disabled]{background-color:#fafafa;background-color:var(--mdc-theme-background,#fafafa);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button>button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);background-color:rgba(63,81,181,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
+let FilePickerComponent = class FilePickerComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            FILE_PICKER_CONSTANTS.attributes.ACCEPT,
+            FILE_PICKER_CONSTANTS.attributes.MAX_SIZE,
+            FILE_PICKER_CONSTANTS.attributes.CAPTURE,
+            FILE_PICKER_CONSTANTS.attributes.MULTIPLE,
+            FILE_PICKER_CONSTANTS.attributes.DISABLED,
+            FILE_PICKER_CONSTANTS.attributes.COMPACT,
+            FILE_PICKER_CONSTANTS.attributes.BORDERLESS
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FILE_PICKER_CONSTANTS.attributes.ACCEPT:
+                this.accept = newValue;
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.MAX_SIZE:
+                this.maxSize = coerceNumber(newValue);
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.CAPTURE:
+                this.capture = newValue;
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.MULTIPLE:
+                this.multiple = coerceBoolean(newValue);
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.COMPACT:
+                this.compact = coerceBoolean(newValue);
+                break;
+            case FILE_PICKER_CONSTANTS.attributes.BORDERLESS:
+                this.borderless = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "accept", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "maxSize", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "capture", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "multiple", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "compact", void 0);
+__decorate([
+    FoundationProperty()
+], FilePickerComponent.prototype, "borderless", void 0);
+FilePickerComponent = __decorate([
+    CustomElement({
+        name: FILE_PICKER_CONSTANTS.elementName,
+        dependencies: [ButtonComponent]
+    })
+], FilePickerComponent);
+export { FilePickerComponent };

package/esm/file-picker/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './file-picker-adapter';
+export * from './file-picker-constants';
+export * from './file-picker-foundation';
+export * from './file-picker';
+export * from './file-picker-component-delegate';
+export declare function defineFilePickerComponent(): void;

package/esm/file-picker/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { FilePickerComponent } from './file-picker';
+export * from './file-picker-adapter';
+export * from './file-picker-constants';
+export * from './file-picker-foundation';
+export * from './file-picker';
+export * from './file-picker-component-delegate';
+export function defineFilePickerComponent() {
+    defineCustomElement(FilePickerComponent);
+}

package/esm/floating-action-button/floating-action-button-component-delegate.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
+import { IFloatingActionButtonComponent } from './floating-action-button';
+export declare type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
+export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
+    text?: string;
+}
+export interface IFloatingActionButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
+}
+export declare class FloatingActionButtonComponentDelegate extends BaseComponentDelegate<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
+    private _buttonElement?;
+    constructor(config?: IFloatingActionButtonComponentDelegateConfig);
+    destroy(): void;
+    protected _build(): IFloatingActionButtonComponent;
+    onClick(listener: (evt: MouseEvent) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+}

package/esm/floating-action-button/floating-action-button-component-delegate.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+export class FloatingActionButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    destroy() {
+        this._buttonElement = undefined;
+    }
+    _build() {
+        var _a, _b;
+        const component = document.createElement(FLOATING_ACTION_BUTTON_CONSTANTS.elementName);
+        this._buttonElement = document.createElement('button');
+        this._buttonElement.type = 'button';
+        this._buttonElement.textContent = (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '';
+        component.appendChild(this._buttonElement);
+        return component;
+    }
+    onClick(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', evt => listener(evt));
+    }
+}

package/esm/floating-action-button/floating-action-button-constants.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const FLOATING_ACTION_BUTTON_CONSTANTS: {
+    elementName: "forge-fab";
+    selectors: {
+        BUTTON: string;
+        ICON: string;
+        LABEL: string;
+    };
+    classes: {
+        BUTTON: string;
+        BUTTON_EXTENDED: string;
+        ICON: string;
+        LABEL: string;
+        BUTTON_MINI: string;
+        EXITED: string;
+        RIPPLE: string;
+    };
+    attributes: {
+        EXTENDED: string;
+        MINI: string;
+        EXITED: string;
+    };
+};

package/esm/floating-action-button/floating-action-button-constants.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}fab`;
+const selectors = {
+    BUTTON: 'button',
+    ICON: 'i,forge-icon,img,svg',
+    LABEL: 'span'
+};
+const classes = {
+    BUTTON: 'forge-fab',
+    BUTTON_EXTENDED: 'forge-fab--extended',
+    ICON: 'forge-fab__icon',
+    LABEL: 'forge-fab__label',
+    BUTTON_MINI: 'forge-fab--mini',
+    EXITED: 'forge-fab--exited',
+    RIPPLE: 'forge-fab__ripple'
+};
+const attributes = {
+    EXTENDED: 'extended',
+    MINI: 'mini',
+    EXITED: 'exited'
+};
+export const FLOATING_ACTION_BUTTON_CONSTANTS = {
+    elementName,
+    selectors,
+    classes,
+    attributes
+};

package/esm/floating-action-button/floating-action-button.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IFloatingActionButtonComponent extends IBaseComponent {
+    exited: boolean;
+    mini: boolean;
+    extended: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-fab': IFloatingActionButtonComponent;
+    }
+}
+/** The custom element class behind the `<forge-fab>` element. */
+export declare class FloatingActionButton extends BaseComponent implements IFloatingActionButtonComponent {
+    static get observedAttributes(): string[];
+    private _rippleInstance;
+    private _isExtended;
+    private _isMini;
+    private _isExited;
+    private _buttonElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _initialize;
+    private _sync;
+    /** Gets/sets the exited state. */
+    set exited(value: boolean);
+    get exited(): boolean;
+    /** Gets/sets the mini state. */
+    set mini(value: boolean);
+    get mini(): boolean;
+    /** Gets/sets the extended state. */
+    set extended(value: boolean);
+    get extended(): boolean;
+}

package/esm/floating-action-button/floating-action-button.js

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { coerceBoolean, CustomElement, ensureChildren, toggleClass } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { ForgeRipple } from '../ripple';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+/** The custom element class behind the `<forge-fab>` element. */
+let FloatingActionButton = class FloatingActionButton extends BaseComponent {
+    constructor() {
+        super();
+        this._isExtended = false;
+        this._isMini = false;
+        this._isExited = false;
+    }
+    static get observedAttributes() {
+        return [
+            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED,
+            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI,
+            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED
+        ];
+    }
+    connectedCallback() {
+        if (this.children.length) {
+            this._initialize();
+        }
+        else {
+            ensureChildren(this).then(() => this._initialize());
+        }
+    }
+    disconnectedCallback() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED:
+                this.exited = coerceBoolean(newValue);
+                break;
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI:
+                this.mini = coerceBoolean(newValue);
+                break;
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED:
+                this.extended = coerceBoolean(newValue);
+                break;
+        }
+    }
+    _initialize() {
+        // Make sure we have a button element
+        this._buttonElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.BUTTON);
+        if (!this._buttonElement) {
+            return;
+        }
+        this._buttonElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON);
+        const rippleElement = this._buttonElement.querySelector(`.${FLOATING_ACTION_BUTTON_CONSTANTS.classes.RIPPLE}`) || document.createElement('div');
+        rippleElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.RIPPLE);
+        this._buttonElement.insertAdjacentElement('afterbegin', rippleElement);
+        this._sync();
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+        }
+        this._rippleInstance = new ForgeRipple(this._buttonElement);
+    }
+    _sync() {
+        if (!this._buttonElement) {
+            return;
+        }
+        toggleClass(this._buttonElement, this._isExited, FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXITED);
+        toggleClass(this._buttonElement, this._isMini, FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON_MINI);
+        toggleClass(this._buttonElement, this._isExtended, FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON_EXTENDED);
+        // Check if we need to set the label class
+        const labelElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.LABEL);
+        if (labelElement) {
+            labelElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.LABEL);
+        }
+        // Check if we need to set the icon class
+        const iconElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.ICON);
+        if (iconElement) {
+            iconElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.ICON);
+            iconElement.setAttribute('aria-hidden', 'true');
+        }
+    }
+    /** Gets/sets the exited state. */
+    set exited(value) {
+        if (this._isExited !== value) {
+            this._isExited = value;
+            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED, this._isExited.toString());
+            this._sync();
+        }
+    }
+    get exited() {
+        return this._isExited;
+    }
+    /** Gets/sets the mini state. */
+    set mini(value) {
+        if (this._isMini !== value) {
+            this._isMini = value;
+            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI, this._isMini.toString());
+            this._sync();
+        }
+    }
+    get mini() {
+        return this._isMini;
+    }
+    /** Gets/sets the extended state. */
+    set extended(value) {
+        if (this._isExtended !== value) {
+            this._isExtended = value;
+            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED, this._isExtended.toString());
+            this._sync();
+        }
+    }
+    get extended() {
+        return this._isExtended;
+    }
+};
+FloatingActionButton = __decorate([
+    CustomElement({
+        name: FLOATING_ACTION_BUTTON_CONSTANTS.elementName
+    })
+], FloatingActionButton);
+export { FloatingActionButton };

package/esm/floating-action-button/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './floating-action-button-constants';
+export * from './floating-action-button';
+export * from './floating-action-button-component-delegate';
+export declare function defineFloatingActionButtonComponent(): void;

package/esm/floating-action-button/index.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { FloatingActionButton } from './floating-action-button';
+export * from './floating-action-button-constants';
+export * from './floating-action-button';
+export * from './floating-action-button-component-delegate';
+export function defineFloatingActionButtonComponent() {
+    defineCustomElement(FloatingActionButton);
+}

package/esm/floating-label/floating-label-adapter.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface IFloatingLabelAdapter {
+    addLabelClass(className: string): void;
+    removeLabelClass(className: string): void;
+    hasLabelClass(className: string): boolean;
+    getWidth(): number;
+    addLabelListener(type: string, listener: (evt: Event) => void): void;
+    removeLabelListener(type: string, listener: (evt: Event) => void): void;
+}
+export declare class FloatingLabelAdapter implements IFloatingLabelAdapter {
+    private _labelElement;
+    constructor(_labelElement: HTMLLabelElement);
+    addLabelClass(className: string): void;
+    removeLabelClass(className: string): void;
+    hasLabelClass(className: string): boolean;
+    getWidth(): number;
+    addLabelListener(type: string, listener: (evt: Event) => void): void;
+    removeLabelListener(type: string, listener: (evt: Event) => void): void;
+}

package/esm/floating-label/floating-label-adapter.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, calcSizeUnattached, removeClass } from '@tylertech/forge-core';
+export class FloatingLabelAdapter {
+    constructor(_labelElement) {
+        this._labelElement = _labelElement;
+    }
+    addLabelClass(className) {
+        addClass(className, this._labelElement);
+    }
+    removeLabelClass(className) {
+        removeClass(className, this._labelElement);
+    }
+    hasLabelClass(className) {
+        return this._labelElement.classList.contains(className);
+    }
+    getWidth() {
+        if (this._labelElement.offsetParent !== null) {
+            return this._labelElement.scrollWidth;
+        }
+        return calcSizeUnattached(this._labelElement).width;
+    }
+    addLabelListener(type, listener) {
+        this._labelElement.addEventListener(type, listener);
+    }
+    removeLabelListener(type, listener) {
+        this._labelElement.removeEventListener(type, listener);
+    }
+}

package/esm/floating-label/floating-label-constants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const FLOATING_LABEL_CONSTANTS: {
+    classes: {
+        FLOATING_LABEL: string;
+        FLOAT_ABOVE: string;
+        FLOAT_ABOVE_END_KEYFRAME: string;
+        UNFLOAT_ABOVE_START_KEYFRAME: string;
+    };
+};

package/esm/floating-label/floating-label-constants.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+const classes = {
+    FLOATING_LABEL: 'forge-floating-label',
+    FLOAT_ABOVE: 'forge-floating-label--float-above',
+    FLOAT_ABOVE_END_KEYFRAME: 'forge-floating-label--float-above-end-keyframe',
+    UNFLOAT_ABOVE_START_KEYFRAME: 'forge-floating-label--unfloat-above-start-keyframe'
+};
+export const FLOATING_LABEL_CONSTANTS = {
+    classes
+};

package/esm/floating-label/floating-label-foundation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IFloatingLabelAdapter } from './floating-label-adapter';
+export declare class FloatingLabelFoundation {
+    protected _adapter: IFloatingLabelAdapter;
+    private _floatAnimationEndHandler;
+    constructor(_adapter: IFloatingLabelAdapter);
+    initialize(): void;
+    disconnect(): void;
+    float(shouldFloat: boolean, alwaysFloat?: boolean): void;
+    getWidth(): number;
+    get isFloating(): boolean;
+    private _handleFloatAnimationEnd;
+}

package/esm/floating-label/floating-label-foundation.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FLOATING_LABEL_CONSTANTS } from './floating-label-constants';
+import { Platform } from '@tylertech/forge-core';
+export class FloatingLabelFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._floatAnimationEndHandler = () => this._handleFloatAnimationEnd();
+    }
+    initialize() {
+        this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
+        if (Platform.BLINK) {
+            // Chromium has a bug where the label renders blurry due to a scale transform
+            // so we only provide a fix for that when the Blink engine is used
+            this._adapter.addLabelListener('transitionend', this._floatAnimationEndHandler);
+        }
+    }
+    disconnect() {
+        this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
+        this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
+        this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
+        this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+        if (this._floatAnimationEndHandler) {
+            this._adapter.removeLabelListener('transitionend', this._floatAnimationEndHandler);
+        }
+    }
+    float(shouldFloat, alwaysFloat = false) {
+        if (shouldFloat) {
+            if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
+                this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+            }
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+                        this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
+                    }
+                    this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
+                });
+            });
+        }
+        else {
+            this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
+            if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
+                this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
+                this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+                    });
+                });
+            }
+        }
+    }
+    getWidth() {
+        return this._adapter.getWidth();
+    }
+    get isFloating() {
+        return this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
+    }
+    _handleFloatAnimationEnd() {
+        if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE) && !this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
+            this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
+        }
+        else if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
+            this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+        }
+    }
+}

package/esm/floating-label/floating-label.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface IFloatingLabel {
+    isFloating: boolean;
+    float(float: boolean, alwaysFloat?: boolean): void;
+    getWidth(): number;
+    destroy(): void;
+}
+export declare class FloatingLabel implements IFloatingLabel {
+    private _labelElement;
+    private _foundation;
+    constructor(_labelElement: HTMLLabelElement);
+    /** Returns the current label floating state. */
+    get isFloating(): boolean;
+    destroy(): void;
+    /**
+     * Sets the floating state of the label element.
+     * @param shouldFloat If true, sets the label to float, otherwise un-float.
+     * @param alwaysFloat If true, sets the label to always float, defaults to: `false`.
+     */
+    float(shouldFloat: boolean, alwaysFloat?: boolean): void;
+    /** Returns the scroll width of the label element. */
+    getWidth(): number;
+}