@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

package/esm/core/utils/reflect-utils.js

@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isDefined } from '@tylertech/forge-core';
+/**
+ * ARIA attributes capable of being reflected to a shadow element.
+ */
+export const REFLECTIVE_ARIA_ATTRIBUTES = [
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colspan',
+    'aria-current',
+    'aria-description',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-level',
+    'aria-live',
+    'aria-modal',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext'
+];
+/**
+ * ARIA attributes typically useful for input elements.
+ */
+export const INPUT_ARIA_ATTRIBUTES = [
+    'aria-autocomplete',
+    'aria-description',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label'
+];
+/**
+ * Property names relevant to input elements.
+ */
+export const INPUT_PROPERTIES = [
+    'checked',
+    'disabled',
+    'indeterminate',
+    'readOnly',
+    'required',
+    'value'
+];
+/**
+ * Attributes for buttons when used within a form.
+ */
+export const BUTTON_FORM_ATTRIBUTES = [
+    'name',
+    'value',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget'
+];
+/**
+ * Gets an array of attribute names prefixed by a part name and colon.
+ * @param part The part name of a shadow element.
+ * @param attributes An array of attribute names to prefix.
+ * @returns An array of prefixed attribute name strings.
+ */
+export function getPartPrefixedAttributes(part, attributes) {
+    return attributes.map(attr => `${part}:${attr}`);
+}
+/**
+ * Observes a configured array of attributes set on a source element and forwards them to a
+ * callback function.
+ * @param from The element to forward attributes from.
+ * @param attributes Forwarded attributes.
+ * @param callback A function to handle forwarded attributes.
+ * @returns A `MutationObserver`.
+ */
+export function forwardAttributes(from, attributes, callback) {
+    // Set the source element's role to presentation to prevent duplicated ARIA attributes being
+    // seen by assistive technology
+    if (attributes.some(attr => attr.toLowerCase().startsWith('aria-'))) {
+        from.setAttribute('role', 'presentation');
+    }
+    // Parses an attribute and sends it to the provided callback
+    const forwardAttribute = (name) => {
+        const nameParts = name.split(':');
+        const partName = nameParts.length === 2 ? nameParts[0] : null;
+        const attrName = nameParts.length === 2 ? nameParts[1] : nameParts[0];
+        const value = from.getAttribute(name);
+        callback.call({}, attrName, value, partName);
+    };
+    // First, forward any attributes already set on the source element
+    attributes.forEach(attr => forwardAttribute(attr));
+    // Forward new and changed attributes as needed
+    const observerConfig = { attributeFilter: attributes };
+    const observerCallback = mutationList => {
+        mutationList.forEach(mutation => forwardAttribute(mutation.attributeName));
+    };
+    const observer = new MutationObserver(observerCallback);
+    observer.observe(from, observerConfig);
+    return observer;
+}
+/**
+ * Clones attributes from one element to another.
+ * @param from The source element to clone attributes from.
+ * @param to The target element to clone attributes to.
+ * @param attributes The list of attributes to clone.
+ */
+export function cloneAttributes(from, to, attributes) {
+    attributes.forEach(attr => {
+        const value = from.getAttribute(attr);
+        if (value !== null) {
+            to.setAttribute(attr, value);
+        }
+    });
+}
+/**
+ * Clones properties from one element to another.
+ * @param from The source element to clone properties from.
+ * @param to The target element to clone properties to.
+ * @param attributes The list of properties to clone.
+ */
+export function cloneProperties(from, to, properties) {
+    properties.forEach(prop => {
+        const value = from[prop];
+        if (isDefined(value)) {
+            to[prop] = value;
+        }
+    });
+}
+/**
+ * Clones the validation message of one input element to another.
+ * @param from The source input element to clone the validation message from.
+ * @param to The target input element to clone the validation message to.
+ */
+export function cloneValidationMessage(from, to) {
+    const message = from.validationMessage;
+    if (message) {
+        to.setCustomValidity(message);
+    }
+}
+/**
+ * A utility class for switching between elements.
+ */
+export class SlottedElementAdapter {
+    /**
+     * Returns the element associated with this adapter.
+     */
+    get el() {
+        return this._el;
+    }
+    /**
+     * Clones the specified attributes from one element to another.
+     *
+     * @param from - The element to clone attributes from.
+     * @param to - The element to clone attributes to.
+     * @param attributes - The names of the attributes to clone.
+     */
+    static cloneAttributes(from, to, attributes) {
+        cloneAttributes(from, to, attributes);
+    }
+    /**
+     * Clones the input specific properties from one element to another.
+     *
+     * @param from - The element to clone properties from.
+     * @param to - The element to clone properties to.
+     */
+    static cloneProperties(from, to, properties) {
+        cloneProperties(from, to, properties);
+    }
+    /**
+     * Clones the validation message from one element to another.
+     *
+     * @param from - The element to clone the validation message from.
+     * @param to - The element to clone the validation message to.
+     */
+    static cloneValidationMessage(from, to) {
+        if (Object.hasOwnProperty.call(from, 'validationMessage') && Object.hasOwnProperty.call(to, 'validationMessage')) {
+            cloneValidationMessage(from, to);
+        }
+        else {
+            console.warn('cloneValidationMessage() requires both elements to be input elements.');
+        }
+    }
+    /**
+     * Initializes the adapter with an initial element and attach callback.
+     *
+     * @param el - The element to associate with the adapter.
+     * @param attachCallback - The callback to invoke when attaching the element.
+     */
+    initialize(el, attachCallback) {
+        this._attachCallback = attachCallback;
+        this._el = el;
+    }
+    /**
+     * Replaces the attached element.
+     *
+     * @param el - The new element to attach.
+     */
+    attachElement(el) {
+        this._attachCallback(el, this._el);
+        this._el = el;
+    }
+}

package/esm/core/utils/utils.d.ts

@@ -97,4 +97,4 @@ export declare function locateTargetHeuristic(element: HTMLElement, id?: string
  * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
  * @returns The new element.
  */
-export declare function replaceElement(oldElement: HTMLElement, newElement: HTMLElement, preserveChildren?: boolean): HTMLElement;
+export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLElement, newElement: T, preserveChildren?: boolean): T;

package/esm/date-picker/base/base-date-picker-utils.js

@@ -5,17 +5,14 @@
  */
 export function createToggleElement(iconName) {
     const iconButtonElement = document.createElement('forge-icon-button');
+    iconButtonElement.type = 'button';
+    iconButtonElement.tabIndex = -1;
+    iconButtonElement.setAttribute('aria-label', 'Toggle calendar');
     iconButtonElement.slot = 'trailing';
-    iconButtonElement.dense = true;
-    iconButtonElement.densityLevel = 3;
+    iconButtonElement.density = 'medium';
     iconButtonElement.style.marginRight = '4px';
-    const buttonElement = document.createElement('button');
-    buttonElement.type = 'button';
-    buttonElement.tabIndex = -1;
-    buttonElement.setAttribute('aria-label', 'Toggle calendar');
-    iconButtonElement.appendChild(buttonElement);
     const iconElement = document.createElement('forge-icon');
     iconElement.name = iconName;
-    buttonElement.appendChild(iconElement);
+    iconButtonElement.appendChild(iconElement);
     return iconButtonElement;
 }

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

@@ -12,6 +12,14 @@ export declare const FIELD_CONSTANTS: {
         REQUIRED: string;
         HOST_LABEL_FLOATING: string;
     };
+    observedAttributes: {
+        DENSITY: string;
+        FLOAT_LABEL_TYPE: string;
+        SHAPE: string;
+        INVALID: string;
+        REQUIRED: string;
+        HOST_LABEL_FLOATING: string;
+    };
     observedInputAttributes: string[];
     selectors: {
         INPUT: string;

package/esm/field/field-constants.js

@@ -3,14 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-const attributes = {
-    DENSITY: 'density',
-    FLOAT_LABEL_TYPE: 'float-label-type',
-    SHAPE: 'shape',
-    INVALID: 'invalid',
-    REQUIRED: 'required',
-    HOST_LABEL_FLOATING: `forge-label-floating`
-};
 const selectors = {
     INPUT: 'input,textarea'
 };
@@ -32,8 +24,18 @@ const classes = {
     ROOMY: 'forge-field--roomy',
     LABEL: 'forge-field--label'
 };
+const observedAttributes = {
+    DENSITY: 'density',
+    FLOAT_LABEL_TYPE: 'float-label-type',
+    SHAPE: 'shape',
+    INVALID: 'invalid',
+    REQUIRED: 'required',
+    HOST_LABEL_FLOATING: `forge-label-floating`
+};
+const attributes = Object.assign({}, observedAttributes);
 export const FIELD_CONSTANTS = {
     attributes,
+    observedAttributes,
     observedInputAttributes,
     selectors,
     classes

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

@@ -33,7 +33,7 @@ export class FilePickerComponentDelegate extends BaseComponentDelegate {
                     parent: this._element,
                     text: this._config.options.buttonText
                 },
-                props: { type: 'outlined' }
+                props: { variant: 'outlined' }
             });
         }
         if ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.helperText) {

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

@@ -11,7 +11,7 @@ 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 ::slotted([slot=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;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;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[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);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:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.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}';
+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 ::slotted([slot=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;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;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[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);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{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.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}';
 /**
  * The web component class behind the `<forge-file-picker>` custom element.
  *

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
+import { IFloatingActionButtonComponent } from './floating-action-button';
+export interface IFloatingActionButtonAdapter extends IBaseButtonAdapter {
+    destroy(): void;
+}
+export declare class FloatingActionButtonAdapter extends BaseButtonAdapter implements IFloatingActionButtonAdapter {
+    private _labelSlotElement;
+    private _extendedObserver;
+    constructor(component: IFloatingActionButtonComponent);
+    initialize(): void;
+    destroy(): void;
+    toggleDefaultPopoverIcon(value: boolean): void;
+    private _startExtendedWatcher;
+    private _detectExtendedState;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseButtonAdapter } from '../button/base/base-button-adapter';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+export class FloatingActionButtonAdapter extends BaseButtonAdapter {
+    constructor(component) {
+        super(component);
+        this._labelSlotElement = getShadowElement(this._component, FLOATING_ACTION_BUTTON_CONSTANTS.selectors.LABEL_SLOT);
+    }
+    initialize() {
+        super.initialize();
+        if (!this._extendedObserver) {
+            this._startExtendedWatcher();
+        }
+        this._detectExtendedState();
+    }
+    destroy() {
+        var _a;
+        (_a = this._extendedObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._extendedObserver = undefined;
+    }
+    toggleDefaultPopoverIcon(value) {
+        super.toggleDefaultPopoverIcon(value);
+        this._detectExtendedState();
+    }
+    _startExtendedWatcher() {
+        this._extendedObserver = new MutationObserver(() => this._detectExtendedState());
+        this._extendedObserver.observe(this._component, { childList: true, subtree: true, characterData: true });
+    }
+    _detectExtendedState() {
+        // If there are nodes in the "label" slot, then we always assume the extended state
+        const hasLabel = this._labelSlotElement.assignedNodes().length > 0;
+        if (hasLabel) {
+            this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+            return;
+        }
+        // Remove the extended class first so we can compare the width without it affecting the styles
+        this._rootElement.classList.remove(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+        // When the width is greater than the height, we assume the button is in the extended state
+        const isExtended = this._component.clientWidth > this._component.clientHeight;
+        if (isExtended) {
+            this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+        }
+    }
+}

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

@@ -3,19 +3,35 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
+import { IIconComponent } from '../icon/icon';
+import { IconExternalType } from '../icon/icon-constants';
 import { IFloatingActionButtonComponent } from './floating-action-button';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
 export type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
 export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
-    text?: string;
+    iconName?: string;
+    iconExternal?: boolean;
+    iconExternalType?: IconExternalType;
+    iconType?: 'font' | 'component';
+    iconClass?: string | string[];
+    label?: string;
+    theme?: Theme;
+    density?: FloatingActionButtonDensity;
+    elevation?: FloatingActionButtonElevation;
 }
 export interface IFloatingActionButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
 }
 export declare class FloatingActionButtonComponentDelegate extends BaseComponentDelegate<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
-    private _buttonElement?;
+    private _iconElement?;
     constructor(config?: IFloatingActionButtonComponentDelegateConfig);
-    destroy(): void;
     protected _build(): IFloatingActionButtonComponent;
+    protected _configure(): void;
+    private _configureIcon;
+    get iconElement(): IIconComponent | undefined;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     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

@@ -3,34 +3,82 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { addClass } from '@tylertech/forge-core';
+import { ICON_CLASS_NAME } from '../constants';
 import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
+import { ICON_CONSTANTS } from '../icon/icon-constants';
 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;
+        var _a, _b, _c, _d, _e;
         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);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.theme) {
+            component.theme = this._config.options.theme;
+        }
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.density) {
+            component.density = this._config.options.density;
+        }
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.elevation) {
+            component.elevation = this._config.options.elevation;
+        }
+        if ((_e = (_d = this._config.options) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e.trim().length) {
+            const span = document.createElement('span');
+            span.slot = 'label';
+            component.textContent = this._config.options.label;
+            component.appendChild(span);
+        }
         return component;
     }
+    _configure() {
+        this._configureIcon();
+    }
+    _configureIcon() {
+        var _a, _b;
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.iconName)) {
+            return;
+        }
+        const type = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.iconType) || 'component';
+        switch (type) {
+            case 'font':
+                const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
+                addClass(classes, this._element);
+                this._element.textContent = this._config.options.iconName;
+                break;
+            case 'component':
+                this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
+                this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconExternal !== undefined) {
+                    this._iconElement.external = !!this._config.options.iconExternal;
+                }
+                if (this._config.options.iconExternalType) {
+                    this._iconElement.externalType = this._config.options.iconExternalType;
+                }
+                if (this._config.options.iconClass) {
+                    addClass(this._config.options.iconClass, this._iconElement);
+                }
+                this._element.appendChild(this._iconElement);
+                break;
+        }
+    }
+    get iconElement() {
+        return this._iconElement;
+    }
+    get disabled() {
+        return !!this._element.disabled;
+    }
+    set disabled(value) {
+        this._element.disabled = value;
+    }
     onClick(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+        this._element.addEventListener('click', listener);
     }
     onFocus(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', evt => listener(evt));
+        this._element.addEventListener('focus', evt => listener(evt));
     }
     onBlur(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', evt => listener(evt));
+        this._element.addEventListener('blur', evt => listener(evt));
     }
 }

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

@@ -3,25 +3,30 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Density, Theme } from '../constants';
 export declare const FLOATING_ACTION_BUTTON_CONSTANTS: {
     elementName: "forge-fab";
+    observedAttributes: {
+        THEME: string;
+        DENSITY: string;
+        ELEVATION: string;
+    };
+    attributes: {
+        THEME: string;
+        DENSITY: string;
+        ELEVATION: string;
+    };
     selectors: {
-        BUTTON: string;
-        ICON: string;
-        LABEL: string;
+        LABEL_SLOT: 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;
+    };
+    defaults: {
+        DEFAULT_THEME: Theme;
+        DEFAULT_DENSITY: Density;
+        DEFAULT_ELEVATION: FloatingActionButtonElevation;
     };
 };
+export type FloatingActionButtonDensity = Density;
+export type FloatingActionButtonElevation = 'raised' | 'lowered';

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

@@ -5,28 +5,28 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}fab`;
+const observedAttributes = {
+    THEME: 'theme',
+    DENSITY: 'density',
+    ELEVATION: 'elevation'
+};
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
-    BUTTON: 'button, a',
-    ICON: 'i,forge-icon,img,svg',
-    LABEL: 'span'
+    LABEL_SLOT: 'slot[name=label]'
 };
 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'
+    EXTENDED: `${elementName}--extended`
 };
-const attributes = {
-    EXTENDED: 'extended',
-    MINI: 'mini',
-    EXITED: 'exited'
+const defaults = {
+    DEFAULT_THEME: 'secondary',
+    DEFAULT_DENSITY: 'medium',
+    DEFAULT_ELEVATION: 'raised'
 };
 export const FLOATING_ACTION_BUTTON_CONSTANTS = {
     elementName,
+    observedAttributes,
+    attributes,
     selectors,
     classes,
-    attributes
+    defaults
 };