@tylertech/forge 3.0.0-next.13 → 3.0.0-next.15

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
 };

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation, IBaseButtonFoundation } from '../button/base/base-button-foundation';
+import { ButtonTheme } from '../button/button-constants';
+import { IFloatingActionButtonAdapter } from './floating-action-button-adapter';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
+export interface IFloatingActionButtonFoundation extends IBaseButtonFoundation {
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
+}
+export declare class FloatingActionButtonFoundation extends BaseButtonFoundation<IFloatingActionButtonAdapter> implements IFloatingActionButtonFoundation {
+    private _theme;
+    private _density;
+    private _elevation;
+    constructor(adapter: IFloatingActionButtonAdapter);
+    destroy(): void;
+    get theme(): ButtonTheme;
+    set theme(value: ButtonTheme);
+    get density(): FloatingActionButtonDensity;
+    set density(value: FloatingActionButtonDensity);
+    get elevation(): FloatingActionButtonElevation;
+    set elevation(value: FloatingActionButtonElevation);
+}

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation } from '../button/base/base-button-foundation';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+export class FloatingActionButtonFoundation extends BaseButtonFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._theme = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        this._density = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+        this._elevation = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+    }
+    destroy() {
+        this._adapter.destroy();
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            const hasAttr = this._theme !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.THEME, hasAttr, this._theme);
+        }
+    }
+    get density() {
+        return this._density;
+    }
+    set density(value) {
+        if (this._density !== value) {
+            this._density = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+            const hasAttr = this._density !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.DENSITY, hasAttr, this._density);
+        }
+    }
+    get elevation() {
+        return this._elevation;
+    }
+    set elevation(value) {
+        if (this._elevation !== value) {
+            this._elevation = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+            const hasAttr = this._elevation !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.ELEVATION, hasAttr, this._elevation);
+        }
+    }
+}

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

@@ -3,11 +3,14 @@
  * Copyright 2023 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;
+import { ButtonTheme } from '../button';
+import { BaseButton, IBaseButton } from '../button/base/base-button';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
+import { FloatingActionButtonFoundation } from './floating-action-button-foundation';
+export interface IFloatingActionButtonComponent extends IBaseButton {
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -15,30 +18,88 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-fab>` element.
- *
  * @tag forge-fab
+ *
+ * @summary Floating action buttons are used to represent the most important action on a page.
+ *
+ * @property {ButtonTheme} theme - Sets the theme of the button.
+ * @property {FloatingActionButtonDensity} density - Sets the density of the button.
+ * @property {FloatingActionButtonElevation} elevation - Sets the elevation of the button.
+ * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @property {boolean} disabled - Whether or not the button is disabled.
+ * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
+ * @property {string} name - The name of the button.
+ * @property {string} value - The form value of the button.
+ * @property {boolean} dense - Whether or not the button is dense.
+ * @property {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @property {string} href - The href of the anchor.
+ * @property {string} target - The target of the anchor.
+ * @property {string} download - The download of the anchor.
+ * @property {string} rel - The rel of the anchor.
+ * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
+ *
+ * @attribute {string} theme - Sets the theme of the button.
+ * @attribute {string} density - Sets the density of the button.
+ * @attribute {string} elevation - Sets the elevation of the button.
+ * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @attribute {boolean} disabled - Whether or not the button is disabled.
+ * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
+ * @attribute {string} name - The name of the button.
+ * @attribute {string} value - The form value of the button.
+ * @attribute {boolean} dense - Whether or not the button is dense.
+ * @attribute {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @attribute {string} href - The href of the anchor.
+ * @attribute {string} target - The target of the anchor.
+ * @attribute {string} download - The download of the anchor.
+ * @attribute {string} rel - The rel of the anchor.
+ *
+ * @fires click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-fab-background-display - The display property.
+ * @cssproperty --forge-fab-gap - The gap between the icon and the label.
+ * @cssproperty --forge-fab-background - The background color.
+ * @cssproperty --forge-fab-color - The text color.
+ * @cssproperty --forge-fab-size - The height and min-width of the button.
+ * @cssproperty --forge-fab-padding - The inline padding of the button.
+ * @cssproperty --forge-fab-shadow - The box shadow of the button.
+ * @cssproperty --forge-fab-hover-shadow - The box shadow of the button when hovered.
+ * @cssproperty --forge-fab-active-shadow - The box shadow of the button when active.
+ * @cssproperty --forge-fab-lowered-shadow - The box shadow of the button when lowered.
+ * @cssproperty --forge-fab-lowered-hover-shadow - The box shadow of the button when lowered and hovered.
+ * @cssproperty --forge-fab-lowered-active-shadow - The box shadow of the button when lowered and active.
+ * @cssproperty --forge-fab-transition-duration - The transition duration.
+ * @cssproperty --forge-fab-transition-timing - The transition timing function.
+ * @cssproperty --forge-fab-shape - The border radius of the button.
+ * @cssproperty --forge-fab-shape-start-start - The start-start border radius.
+ * @cssproperty --forge-fab-shape-start-end - The start-end border radius.
+ * @cssproperty --forge-fab-shape-end-start - The end-start border radius.
+ * @cssproperty --forge-fab-shape-end-end - The end-end border radius.
+ * @cssproperty --forge-fab-extended-padding - The inline padding of the extended button.
+ * @cssproperty --forge-fab-extended-min-width - The min-width of the extended button.
+ * @cssproperty --forge-fab-density-small-size - The height and min-width of the small density button.
+ * @cssproperty --forge-fab-density-medium-size - The height and min-width of the medium density (default) button.
+ * @cssproperty --forge-fab-density-large-size - The height and min-width of the large density button.
+ * @cssproperty --forge-fab-disabled-cursor - The cursor when disabled.
+ * @cssproperty --forge-fab-disabled-background - The background color when disabled.
+ * @cssproperty --forge-fab-disabled-color - The text color when disabled.
+ * @cssproperty --forge-fab-disabled-opacity - The opacity when disabled.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - This is a default/unnamed slot. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.
+ * @slot start - An element to logically render at the start of the button content.
+ * @slot label - Reserved specifically for label text. This forces the button into extended mode.
+ * @slot end - An element to logically render at the end of the button content.
  */
-export declare class FloatingActionButton extends BaseComponent implements IFloatingActionButtonComponent {
+export declare class FloatingActionButtonComponent extends BaseButton<FloatingActionButtonFoundation> implements IFloatingActionButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _isExtended;
-    private _isMini;
-    private _isExited;
-    private _buttonElement;
+    protected readonly _foundation: FloatingActionButtonFoundation;
     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;
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
 }