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

package/esm/button/base/base-button.js

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
+import { internals } from '../../constants';
+import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
+export class BaseButton extends BaseFocusableComponent {
+    constructor() {
+        super();
+        this[internals] = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BASE_BUTTON_CONSTANTS.observedAttributes.TYPE:
+                this.type = newValue;
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.POPOVER_ICON:
+                this.popoverIcon = coerceBoolean(newValue);
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.ANCHOR:
+                this.anchor = coerceBoolean(newValue);
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.HREF:
+                this.href = newValue;
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.TARGET:
+                this.target = newValue;
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.DOWNLOAD:
+                this.download = newValue;
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.REL:
+                this.rel = newValue;
+                break;
+            case BASE_BUTTON_CONSTANTS.observedAttributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    labelClickedCallback() {
+        this._foundation.click({ animateStateLayer: true });
+    }
+    labelChangedCallback(value) {
+        this._foundation.proxyLabel(value);
+    }
+    get form() {
+        return this[internals].form;
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    get value() {
+        var _a;
+        return (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+    }
+    click() {
+        this._foundation.click({ animateStateLayer: true });
+    }
+}
+BaseButton.formAssociated = true;
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "type", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "popoverIcon", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "anchor", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "href", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "download", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "rel", void 0);
+__decorate([
+    FoundationProperty()
+], BaseButton.prototype, "dense", void 0);

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter, IBaseButtonAdapter } from './base/base-button-adapter';
+import { IButtonComponent } from './button';
+export interface IButtonAdapter extends IBaseButtonAdapter {
+    toggleStateLayer(value: boolean): void;
+}
+export declare class ButtonAdapter extends BaseButtonAdapter implements IButtonAdapter {
+    constructor(component: IButtonComponent);
+    toggleStateLayer(value: boolean): void;
+}

package/esm/button/button-adapter.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter } from './base/base-button-adapter';
+export class ButtonAdapter extends BaseButtonAdapter {
+    constructor(component) {
+        super(component);
+    }
+    toggleStateLayer(value) {
+        this._stateLayerElement.disabled = !value;
+    }
+}

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

@@ -4,19 +4,19 @@
  * License: Apache-2.0
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
+import { ButtonType } from './base/base-button-constants';
 import { IButtonComponent } from './button';
+import { ButtonVariant } from './button-constants';
 export type ButtonComponentDelegateProps = Partial<IButtonComponent>;
 export interface IButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
-    type?: 'button' | 'submit';
+    variant?: ButtonVariant;
+    type?: ButtonType;
     text?: string;
 }
 export interface IButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IButtonComponent, IButtonComponentDelegateOptions> {
 }
 export declare class ButtonComponentDelegate extends BaseComponentDelegate<IButtonComponent, IButtonComponentDelegateOptions> {
-    private _buttonElement?;
     constructor(config?: IButtonComponentDelegateConfig);
-    destroy(): void;
-    get buttonElement(): HTMLButtonElement | undefined;
     protected _build(): IButtonComponent;
     onClick(listener: (evt: MouseEvent) => void): void;
     onFocus(listener: (evt: Event) => void): void;

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

@@ -9,31 +9,27 @@ export class ButtonComponentDelegate extends BaseComponentDelegate {
     constructor(config) {
         super(config);
     }
-    destroy() {
-        this._buttonElement = undefined;
-    }
-    get buttonElement() {
-        return this._buttonElement;
-    }
     _build() {
-        var _a, _b;
+        var _a, _b, _c;
         const component = document.createElement(BUTTON_CONSTANTS.elementName);
-        this._buttonElement = document.createElement('button');
-        this._buttonElement.type = ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.type) || 'button';
-        this._buttonElement.textContent = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.text) || '';
-        component.appendChild(this._buttonElement);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.variant) {
+            component.variant = this._config.options.variant;
+        }
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.type) {
+            component.type = this._config.options.type;
+        }
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.text) {
+            component.textContent = this._config.options.text;
+        }
         return component;
     }
     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/button/button-constants.d.ts

@@ -3,27 +3,19 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export declare const ALLOWED_CHILDREN: string[];
+import { Theme } from '../constants';
 export declare const BUTTON_CONSTANTS: {
     elementName: "forge-button";
-    classes: {
-        BUTTON: string;
-        LABEL: string;
-        ICON: string;
-        BUTTON_RAISED: string;
-        BUTTON_UNELEVATED: string;
-        BUTTON_OUTLINED: string;
-        BUTTON_DENSE: string;
-        RIPPLE: string;
-    };
-    selectors: {
-        BUTTON: string;
-        LABEL: string;
-        ICON: string;
-        RIPPLE: string;
+    observedAttributes: {
+        VARIANT: string;
+        PILL: string;
+        THEME: string;
     };
     attributes: {
-        TYPE: string;
-        DISABLED: string;
+        VARIANT: string;
+        PILL: string;
+        THEME: string;
     };
 };
+export type ButtonVariant = 'text' | 'outlined' | 'tonal' | 'filled' | 'raised' | 'link';
+export type ButtonTheme = Theme;

package/esm/button/button-constants.js

@@ -5,30 +5,14 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}button`;
-export const ALLOWED_CHILDREN = ['button', 'a'];
-const classes = {
-    BUTTON: 'forge-button',
-    LABEL: 'forge-button__label',
-    ICON: 'forge-button__icon',
-    BUTTON_RAISED: 'forge-button--raised',
-    BUTTON_UNELEVATED: 'forge-button--unelevated',
-    BUTTON_OUTLINED: 'forge-button--outlined',
-    BUTTON_DENSE: 'forge-button--dense',
-    RIPPLE: 'forge-button__ripple'
-};
-const selectors = {
-    BUTTON: ALLOWED_CHILDREN.join(','),
-    LABEL: `span:not(.${classes.RIPPLE})`,
-    ICON: 'i,forge-icon,[data-forge-button-icon]',
-    RIPPLE: `.${classes.RIPPLE}`
-};
-const attributes = {
-    TYPE: 'type',
-    DISABLED: 'disabled'
+const observedAttributes = {
+    VARIANT: 'variant',
+    PILL: 'pill',
+    THEME: 'theme'
 };
+const attributes = Object.assign({}, observedAttributes);
 export const BUTTON_CONSTANTS = {
     elementName,
-    classes,
-    selectors,
+    observedAttributes,
     attributes
 };

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation, IBaseButtonFoundation } from './base/base-button-foundation';
+import { IButtonAdapter } from './button-adapter';
+import { ButtonTheme, ButtonVariant } from './button-constants';
+export interface IButtonFoundation extends IBaseButtonFoundation {
+    variant: ButtonVariant;
+    pill: boolean;
+    theme: ButtonTheme;
+}
+export declare class ButtonFoundation extends BaseButtonFoundation<IButtonAdapter> implements IButtonFoundation {
+    private _variant;
+    private _pill;
+    private _theme;
+    constructor(adapter: IButtonAdapter);
+    get variant(): ButtonVariant;
+    set variant(value: ButtonVariant);
+    get pill(): boolean;
+    set pill(value: boolean);
+    get theme(): ButtonTheme;
+    set theme(value: ButtonTheme);
+}

package/esm/button/button-foundation.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation } from './base/base-button-foundation';
+import { BUTTON_CONSTANTS } from './button-constants';
+export class ButtonFoundation extends BaseButtonFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._variant = 'text';
+        this._pill = false;
+        this._theme = 'primary';
+    }
+    get variant() {
+        return this._variant;
+    }
+    set variant(value) {
+        if (this._variant !== value) {
+            const previousVariant = this._variant;
+            this._variant = value;
+            if (this._variant === 'link') {
+                this._adapter.toggleStateLayer(false);
+            }
+            else if (previousVariant === 'link') {
+                this._adapter.toggleStateLayer(true);
+            }
+            this._adapter.setHostAttribute(BUTTON_CONSTANTS.attributes.VARIANT, this._variant);
+        }
+    }
+    get pill() {
+        return this._pill;
+    }
+    set pill(value) {
+        if (this._pill !== value) {
+            this._pill = value;
+            this._adapter.toggleHostAttribute(BUTTON_CONSTANTS.attributes.PILL, this._pill);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.setHostAttribute(BUTTON_CONSTANTS.attributes.THEME, this._theme);
+        }
+    }
+}

package/esm/button/button.d.ts

@@ -3,9 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IButtonComponent extends IBaseComponent {
-    type: string;
+import { BaseButton, IBaseButton } from './base/base-button';
+import { ButtonTheme, ButtonVariant } from './button-constants';
+import { ButtonFoundation } from './button-foundation';
+export interface IButtonComponent extends IBaseButton {
+    variant: ButtonVariant;
+    pill: boolean;
+    theme: ButtonTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -13,36 +17,128 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-button>` element.
- *
  * @tag forge-button
+ *
+ * @summary Buttons represent actions that a user can take.
+ *
+ * @description
+ * Buttons are used when a user needs to take an action, such as submitting a form or opening a dialog.
+ * Buttons can be used to trigger an action or to navigate to a new location. Buttons can be styled with
+ * a variety of themes and variants.
+ *
+ * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @property {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @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.
+ * @property {boolean} pill - Whether or not the button is pill-shaped.
+ * @property {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @attribute {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @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.
+ * @attribute {boolean} pill - Whether or not the button is pill-shaped.
+ * @attribute {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-button-primary-color - The primary color of the button.
+ * @cssproperty --forge-button-text-color - The text color of the button. Inherits from primary color.
+ * @cssproperty --forge-button-disabled-color - The disabled color of the button.
+ * @cssproperty --forge-button-padding - The padding of the button.
+ * @cssproperty --forge-button-display - The display of the button.
+ * @cssproperty --forge-button-justify - The flex justify of the button.
+ * @cssproperty --forge-button-shape - The shape of the button.
+ * @cssproperty --forge-button-height - The height of the button.
+ * @cssproperty --forge-button-min-width - The min-width of the button.
+ * @cssproperty --forge-button-spacing - The spacing of the button.
+ * @cssproperty --forge-button-border-width - The border-width of the button.
+ * @cssproperty --forge-button-border-style - The border style of the button.
+ * @cssproperty --forge-button-border-color - The border color of the button.
+ * @cssproperty --forge-button-shape-start-start-radius - The shape start start radius of the button.
+ * @cssproperty --forge-button-shape-start-end-radius - The shape start end radius of the button.
+ * @cssproperty --forge-button-shape-end-start-radius - The shape end start radius of the button.
+ * @cssproperty --forge-button-shape-end-end-radius - The shape end end radius of the button.
+ * @cssproperty --forge-button-padding-block - The padding block of the button.
+ * @cssproperty --forge-button-padding-inline - The padding inline of the button.
+ * @cssproperty --forge-button-background - The background color of the button.
+ * @cssproperty --forge-button-hover-background - The background color of the button on hover.
+ * @cssproperty --forge-button-active-background - The background color of the button on active state.
+ * @cssproperty --forge-button-color - The text color of the button.
+ * @cssproperty --forge-button-icon-size - The size of the icon in the button.
+ * @cssproperty --forge-button-shadow - The shadow of the button.
+ * @cssproperty --forge-button-hover-shadow - The shadow of the button on hover.
+ * @cssproperty --forge-button-active-shadow - The shadow of the button on active state.
+ * @cssproperty --forge-button-cursor - The cursor type of the button.
+ * @cssproperty --forge-button-raised-background - The background color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-background - The background color of the disabled raised button.
+ * @cssproperty --forge-button-raised-color - The text color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-color - The text color of the disabled raised button.
+ * @cssproperty --forge-button-raised-shadow - The shadow of the raised button.
+ * @cssproperty --forge-button-raised-hover-shadow - The shadow of the raised button on hover.
+ * @cssproperty --forge-button-raised-active-shadow - The shadow of the raised button on active state.
+ * @cssproperty --forge-button-raised-disabled-shadow - The shadow of the disabled raised button.
+ * @cssproperty --forge-button-raised-transition-duration - The transition duration of the raised button.
+ * @cssproperty --forge-button-raised-transition-timing - The transition timing of the raised button.
+ * @cssproperty --forge-button-flat-background - The background color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-background - The background color of the disabled flat button.
+ * @cssproperty --forge-button-flat-color - The text color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-color - The text color of the disabled flat button.
+ * @cssproperty --forge-button-outlined-background - The background color of the outlined button.
+ * @cssproperty --forge-button-outlined-color - The text color of the outlined button.
+ * @cssproperty --forge-button-outlined-border-width - The border width of the outlined button.
+ * @cssproperty --forge-button-outlined-border-style - The border style of the outlined button.
+ * @cssproperty --forge-button-outlined-border-color - The border color of the outlined button.
+ * @cssproperty --forge-button-link-color - The text color of the link button.
+ * @cssproperty --forge-button-link-text-decoration - The text decoration of the link button.
+ * @cssproperty --forge-button-link-height - The height of the link button.
+ * @cssproperty --forge-button-link-padding - The padding of the link button.
+ * @cssproperty --forge-button-link-line-height - The line height of the link button.
+ * @cssproperty --forge-button-link-width - The width of the link button.
+ * @cssproperty --forge-button-link-hover-text-decoration - The text decoration of the link button on hover.
+ * @cssproperty --forge-button-link-active-opacity - The opacity of the link button on active state.
+ * @cssproperty --forge-button-link-transition-duration - The transition duration of the link button.
+ * @cssproperty --forge-button-link-transition-timing - The transition timing of the link button.
+ * @cssproperty --forge-button-disabled-cursor - The cursor type of the disabled button.
+ * @cssproperty --forge-button-disabled-text-color - The text color of the disabled button.
+ * @cssproperty --forge-button-disabled-background - The background color of the disabled button.
+ * @cssproperty --forge-button-disabled-border-color - The border color of the disabled button.
+ * @cssproperty --forge-button-disabled-shadow - The shadow of the disabled button.
+ * @cssproperty --forge-button-dense-height - The height of the dense button.
+ * @cssproperty --forge-button-pill-shape - The shape of the pill button.
+ * @cssproperty --forge-button-pill-padding-inline - The inline padding of the pill button.
+ *
+ * @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 label text.
+ * @slot start - Elements to logically render before the label text.
+ * @slot end - Elements to logically render after the label text.
  */
-export declare class ButtonComponent extends BaseComponent implements IButtonComponent {
+export declare class ButtonComponent extends BaseButton<ButtonFoundation> implements IButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _buttonElement;
-    private _type;
-    private _mutationObserver;
-    private _buttonAttrMutationObserver;
-    private _destroyUserInteractionListener;
+    protected readonly _foundation: ButtonFoundation;
     constructor();
-    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    disconnectedCallback(): void;
-    /**
-     * Sets the type of button decoration.
-     * Possible values are: raised, elevated, outlined, and dense.
-     * Can be combined as: outlined-dense.
-     */
-    get type(): string;
-    set type(value: string);
-    private _applyType;
-    private _initialize;
-    private _initializeButton;
-    private _deferRippleInitialization;
-    private _createRipple;
-    private _initializeButtonChildren;
-    private _initializeMutationObserver;
-    private _buttonWasAdded;
-    private _syncDisabledState;
+    variant: ButtonVariant;
+    pill: boolean;
+    theme: ButtonTheme;
 }