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

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,88 @@
  * 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.
+ *
+ * @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.
  */
-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;
 }