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

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

@@ -15,9 +15,6 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
     _build() {
         var _a;
         const component = document.createElement(ICON_BUTTON_CONSTANTS.elementName);
-        this._buttonElement = document.createElement('button');
-        this._buttonElement.type = 'button';
-        component.appendChild(this._buttonElement);
         if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.tooltip) {
             const tooltip = document.createElement('forge-tooltip');
             tooltip.textContent = this._config.options.tooltip;
@@ -32,17 +29,10 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         return this._iconElement;
     }
     get disabled() {
-        return !!this._buttonElement.disabled;
+        return !!this._element.disabled;
     }
     set disabled(value) {
-        this._buttonElement.disabled = value;
-    }
-    /** @deprecated Use buttonElement instead. */
-    get butttonElement() {
-        return this._buttonElement;
-    }
-    get buttonElement() {
-        return this._buttonElement;
+        this._element.disabled = value;
     }
     _configure() {
         this._configureIcon();
@@ -56,8 +46,8 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         switch (type) {
             case 'font':
                 const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
-                addClass(classes, this._buttonElement);
-                this._buttonElement.textContent = this._config.options.iconName;
+                addClass(classes, this._element);
+                this._element.textContent = this._config.options.iconName;
                 break;
             case 'component':
                 this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
@@ -71,17 +61,17 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
                 if (this._config.options.iconClass) {
                     addClass(this._config.options.iconClass, this._iconElement);
                 }
-                this._buttonElement.appendChild(this._iconElement);
+                this._element.appendChild(this._iconElement);
                 break;
         }
     }
     onClick(listener) {
-        this._buttonElement.addEventListener('click', listener);
+        this._element.addEventListener('click', listener);
     }
     onFocus(listener) {
-        this._buttonElement.addEventListener('focus', evt => listener(evt));
+        this._element.addEventListener('focus', evt => listener(evt));
     }
     onBlur(listener) {
-        this._buttonElement.addEventListener('blur', evt => listener(evt));
+        this._element.addEventListener('blur', evt => listener(evt));
     }
 }

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

@@ -3,28 +3,37 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Density, Theme } from '../constants';
 export declare const ICON_BUTTON_CONSTANTS: {
     elementName: "forge-icon-button";
-    attributes: {
+    observedAttributes: {
         TOGGLE: string;
-        IS_ON: string;
-        ICON_ON: string;
-        DENSE: string;
-        DENSITY_LEVEL: string;
-    };
-    selectors: {
-        BUTTON: string;
-        ICON: string;
+        ON: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
     };
-    classes: {
-        BUTTON: string;
-        BUTTON_ON: string;
-        BUTTON_DENSE: string;
-        ICON: string;
-        ICON_ON: string;
-        DENSITY: string[];
+    attributes: {
+        ARIA_PRESSED: string;
+        TOGGLE: string;
+        ON: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
     };
     events: {
-        CHANGE: string;
+        TOGGLE: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: IconButtonVariant;
+        DEFAULT_THEME: Theme;
+        DEFAULT_SHAPE: IconButtonShape;
+        DEFAULT_DENSITY: Density;
     };
 };
+export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';
+export type IconButtonTheme = Theme;
+export type IconButtonShape = 'circular' | 'squared';
+export type IconButtonDensity = Density;

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

@@ -5,39 +5,28 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
-const attributes = {
+const observedAttributes = {
     TOGGLE: 'toggle',
-    IS_ON: 'is-on',
-    ICON_ON: 'forge-icon-button-on',
-    DENSE: 'dense',
-    DENSITY_LEVEL: 'density-level'
-};
-const selectors = {
-    BUTTON: 'button, a',
-    ICON: 'i, span, svg, img, forge-icon'
-};
-const classes = {
-    BUTTON: 'forge-icon-button',
-    BUTTON_ON: 'forge-icon-button--on',
-    BUTTON_DENSE: 'forge-icon-button--dense',
-    ICON: 'forge-icon-button__icon',
-    ICON_ON: 'forge-icon-button__icon--on',
-    DENSITY: [
-        'forge-icon-button--dense-1',
-        'forge-icon-button--dense-2',
-        'forge-icon-button--dense-3',
-        'forge-icon-button--dense-4',
-        'forge-icon-button--dense-5',
-        'forge-icon-button--dense-6'
-    ]
+    ON: 'on',
+    VARIANT: 'variant',
+    THEME: 'theme',
+    SHAPE: 'shape',
+    DENSITY: 'density'
 };
+const attributes = Object.assign(Object.assign({}, observedAttributes), { ARIA_PRESSED: 'aria-pressed' });
 const events = {
-    CHANGE: `${elementName}-change`
+    TOGGLE: `${elementName}-toggle`
+};
+const defaults = {
+    DEFAULT_VARIANT: 'icon',
+    DEFAULT_THEME: 'primary',
+    DEFAULT_SHAPE: 'circular',
+    DEFAULT_DENSITY: 'large'
 };
 export const ICON_BUTTON_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    selectors,
-    classes,
-    events
+    events,
+    defaults
 };

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation, IBaseButtonFoundation } from '../button/base/base-button-foundation';
+import { IIconButtonAdapter } from './icon-button-adapter';
+import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
+export interface IIconButtonFoundation extends IBaseButtonFoundation {
+    toggle: boolean;
+    on: boolean;
+    variant: IconButtonVariant;
+    theme: IconButtonTheme;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
+}
+export declare class IconButtonFoundation extends BaseButtonFoundation<IIconButtonAdapter> implements IIconButtonFoundation {
+    private _toggle;
+    private _on;
+    private _variant;
+    private _theme;
+    private _shape;
+    private _density;
+    constructor(adapter: IIconButtonAdapter);
+    protected _onClick(evt: MouseEvent): Promise<void>;
+    private _onToggle;
+    get toggle(): boolean;
+    set toggle(value: boolean);
+    get on(): boolean;
+    set on(value: boolean);
+    get variant(): IconButtonVariant;
+    set variant(value: IconButtonVariant);
+    get theme(): IconButtonTheme;
+    set theme(value: IconButtonTheme);
+    get shape(): IconButtonShape;
+    set shape(value: IconButtonShape);
+    get density(): IconButtonDensity;
+    set density(value: IconButtonDensity);
+}

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

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation } from '../button/base/base-button-foundation';
+import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
+export class IconButtonFoundation extends BaseButtonFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._toggle = false;
+        this._on = false;
+        this._variant = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+        this._theme = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        this._shape = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
+        this._density = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+    }
+    async _onClick(evt) {
+        if (this._toggle) {
+            this._onToggle();
+        }
+        super._onClick(evt);
+    }
+    _onToggle() {
+        // Update internal state first so listeners can access the new state
+        const originalOn = this._on;
+        this._on = !this._on;
+        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.on, true, true);
+        this._on = originalOn;
+        if (cancelled) {
+            return;
+        }
+        this.on = !originalOn;
+    }
+    get toggle() {
+        return this._toggle;
+    }
+    set toggle(value) {
+        value = !!value;
+        if (this._toggle !== value) {
+            this._toggle = value;
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._on}`);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
+        }
+    }
+    get on() {
+        return this._on;
+    }
+    set on(value) {
+        value = !!value;
+        if (this._on !== value) {
+            this._on = value;
+            if (this._toggle) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._on}`);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED);
+            }
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._on);
+        }
+    }
+    get variant() {
+        return this._variant;
+    }
+    set variant(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+        if (this._variant !== value) {
+            this._variant = value;
+            if (this._variant !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.VARIANT, this._variant);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.VARIANT);
+            }
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        if (this._theme !== value) {
+            this._theme = value;
+            if (this._theme !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.THEME, this._theme);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.THEME);
+            }
+        }
+    }
+    get shape() {
+        return this._shape;
+    }
+    set shape(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
+        if (this._shape !== value) {
+            this._shape = value;
+            if (this._shape !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.SHAPE, this._shape);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.SHAPE);
+            }
+        }
+    }
+    get density() {
+        return this._density;
+    }
+    set density(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+        if (this._density !== value) {
+            this._density = value;
+            if (this._density !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY, this._density);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY);
+            }
+        }
+    }
+}

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

@@ -3,60 +3,139 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IIconButtonComponent extends IBaseComponent {
+import { BaseButton, IBaseButton } from '../button/base/base-button';
+import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
+import { IconButtonFoundation } from './icon-button-foundation';
+export interface IIconButtonComponent extends IBaseButton {
     toggle: boolean;
-    isOn: boolean;
-    dense: boolean;
-    densityLevel: number;
-    layout(): void;
+    on: boolean;
+    variant: IconButtonVariant;
+    theme: IconButtonTheme;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-icon-button': IIconButtonComponent;
     }
     interface HTMLElementEventMap {
-        'forge-icon-button-change': CustomEvent<boolean>;
+        'forge-icon-button-toggle': CustomEvent<boolean>;
     }
 }
 /**
- * The custom element class behind the `<forge-icon-button>` element.
- *
  * @tag forge-icon-button
+ *
+ * @summary Icons buttons are used to trigger an action or event.
+ *
+ * @property {boolean} toggle - Whether or not the icon button can be toggled.
+ * @property {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @property {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @property {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @property {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @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 {boolean} toggle - Whether or not the icon button can be toggled.
+ * @attribute {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @attribute {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @attribute {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @attribute {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @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.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ * @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
+ *
+ * @cssproperty --forge-icon-button-display - The display property of the button.
+ * @cssproperty --forge-icon-button-size - The height and min-width of the button.
+ * @cssproperty --forge-icon-button-gap - The gap between the icon content.
+ * @cssproperty --forge-icon-button-icon-color - The color of the icon.
+ * @cssproperty --forge-icon-button-background-color - The background color of the button.
+ * @cssproperty --forge-icon-button-icon-size - The size of the icon.
+ * @cssproperty --forge-icon-button-cursor - The cursor of the button.
+ * @cssproperty --forge-icon-button-padding - The inline padding of the button.
+ * @cssproperty --forge-icon-button-border - The border of the button.
+ * @cssproperty --forge-icon-button-shadow - The shadow of the button.
+ * @cssproperty --forge-icon-button-transition-duration - The transition duration of the button.
+ * @cssproperty --forge-icon-button-transition-timing - The transition timing of the button.
+ * @cssproperty --forge-icon-button-shape - The shape of the button.
+ * @cssproperty --forge-icon-button-shape-start-start - The start-start border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-start-end - The start-end border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-end-start - The end-start border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-end-end - The end-end border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-squared - The squared border-radius of the button.
+ * @cssproperty --forge-icon-button-outlined-border-width - The border width when in the outlined variant.
+ * @cssproperty --forge-icon-button-outlined-border-style - The border style when in the outlined variant.
+ * @cssproperty --forge-icon-button-outlined-border-color - The border color when in the outlined variant.
+ * @cssproperty --forge-icon-button-tonal-icon-color - The icon color when in the tonal variant.
+ * @cssproperty --forge-icon-button-tonal-background-color - The background color when in the tonal variant.
+ * @cssproperty --forge-icon-button-filled-icon-color - The icon color when in the filled variant.
+ * @cssproperty --forge-icon-button-filled-background-color - The background color when in the filled variant.
+ * @cssproperty --forge-icon-button-raised-shadow - The shadow when in the raised variant.
+ * @cssproperty --forge-icon-button-raised-hover-shadow - The shadow when in the raised variant and hovered.
+ * @cssproperty --forge-icon-button-raised-active-shadow - The shadow when in the raised variant and active.
+ * @cssproperty --forge-icon-button-raised-disabled-shadow - The shadow when in the raised variant and disabled.
+ * @cssproperty --forge-icon-button-density-small-size - The size of the button when in the small density.
+ * @cssproperty --forge-icon-button-density-small-padding - The padding of the button when in the small density.
+ * @cssproperty --forge-icon-button-density-small-icon-size - The size of the icon when in the small density.
+ * @cssproperty --forge-icon-button-density-medium-size - The size of the button when in the medium density.
+ * @cssproperty --forge-icon-button-density-medium-padding - The padding of the button when in the medium density.
+ * @cssproperty --forge-icon-button-density-large-size - The size of the button when in the large density.
+ * @cssproperty --forge-icon-button-toggle-on-icon-color - The color of the icon when in toggle mode and toggled on.
+ * @cssproperty --forge-icon-button-outlined-toggle-on-background-color - The background color when in the outlined variant and toggled on.
+ * @cssproperty --forge-icon-button-outlined-toggle-on-icon-color - The icon color when in the outlined variant and toggled on.
+ * @cssproperty --forge-icon-button-tonal-toggle-background-color - The background color when in the tonal variant and toggled.
+ * @cssproperty --forge-icon-button-tonal-toggle-on-background-color - The background color when in the tonal variant and toggled on.
+ * @cssproperty --forge-icon-button-tonal-toggle-on-icon-color - The icon color when in the tonal variant and toggled on.
+ * @cssproperty --forge-icon-button-filled-toggle-background-color - The background color when in the filled variant and toggled.
+ * @cssproperty --forge-icon-button-filled-toggle-icon-color - The icon color when in the filled variant and toggled.
+ * @cssproperty --forge-icon-button-filled-toggle-on-background-color - The background color when in the filled variant and toggled on.
+ * @cssproperty --forge-icon-button-filled-toggle-on-icon-color - The icon color when in the filled variant and toggled on.
+ * @cssproperty --forge-icon-button-disabled-cursor - The cursor when the button is disabled.
+ * @cssproperty --forge-icon-button-disabled-opacity - The opacity when the button is disabled.
+ * @cssproperty --forge-icon-button-popover-icon-padding - The padding of the popover icon.
+ * @cssproperty --forge-icon-button-focus-indicator-color - The color of the focus indicator.
+ *
+ * @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 for the icon.
+ * @slot on - The icon to show when in `toggle` mode when toggled "on".
+ * @slot start - Elements to logically render before the icon.
+ * @slot end - Elements to logically render after the icon.
+ * @slot badge - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).
  */
-export declare class IconButtonComponent extends BaseComponent implements IIconButtonComponent {
+export declare class IconButtonComponent extends BaseButton<IconButtonFoundation> implements IIconButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _buttonElement;
-    private _toggle;
-    private _isOn;
-    private _dense;
-    private _densityLevel;
-    private _toggleHandler;
-    private _destroyUserInteractionListener;
+    protected readonly _foundation: IconButtonFoundation;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets whether the button is togglable. */
-    get toggle(): boolean;
-    set toggle(value: boolean);
-    /** Gets/sets the toggled state of the icon button. Only applies when `toggle = true`. */
-    get isOn(): boolean;
-    set isOn(value: boolean);
-    /** Gets/sets whether the icon button is dense. */
-    get dense(): boolean;
-    set dense(value: boolean);
-    /** Controls the density level. 1 (least dense) to 6 (most dense). */
-    get densityLevel(): number;
-    set densityLevel(value: number);
-    private _initialize;
-    private _deferRippleInitialization;
-    private _createRipple;
-    private _toggleValue;
-    private _applyToggle;
-    private _applyDensity;
-    private _initializeToggle;
-    private _destroyToggle;
-    layout(): void;
+    toggle: boolean;
+    on: boolean;
+    theme: IconButtonTheme;
+    variant: IconButtonVariant;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
 }