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

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

@@ -0,0 +1,240 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
+export class BaseButtonFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._type = 'button'; // We default our buttons to the "button" type instead of "submit" as that is more common
+        this._disabled = false;
+        this._popoverIcon = false;
+        this._anchor = false;
+        this._href = '';
+        this._target = '';
+        this._download = '';
+        this._rel = '';
+        this._dense = false;
+        this._clickListener = (evt) => this._onClick(evt);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._anchorFocusListener = () => this._adapter.focusHost(); // Always ensure our host is focused when the anchor is focused
+        this._adapter.addHostListener('keydown', this._keydownListener);
+    }
+    initialize() {
+        this._adapter.initialize();
+        if (this._anchor) {
+            // When we're in anchor mode, we swap to us an `<a>` internally as the root. Since the `<a>`
+            // element is interactive by default, we can remove our click listener since the anchor will
+            // take over the default interaction handling
+            this._adapter.addAnchorEventListener('focus', this._anchorFocusListener);
+        }
+        else {
+            // When we're in button mode, we need to handle the click event on the host element
+            this._adapter.addHostListener('click', this._clickListener);
+        }
+    }
+    /**
+     * Handles overriding the the `click()` method on the HTMLElement instance
+     */
+    click({ animateStateLayer = false } = {}) {
+        if (this._disabled) {
+            return;
+        }
+        if (this._anchor) {
+            this._adapter.clickAnchor();
+        }
+        else {
+            this._adapter.clickHost();
+        }
+        if (animateStateLayer) {
+            this._adapter.animateStateLayer();
+        }
+    }
+    focus(options) {
+        this._adapter.focusHost(options);
+        if (options === null || options === void 0 ? void 0 : options.focusVisible) {
+            this._adapter.forceFocusVisible();
+        }
+    }
+    proxyLabel(label) {
+        this._adapter.proxyLabel(label);
+    }
+    async _onClick(evt) {
+        const isFormType = this._type === 'submit' || this._type === 'reset';
+        // Custom elements do not work with the popover* attributes by default so we need to manually
+        // manage the popover functionality for now...
+        if (!isFormType && this._adapter.hasPopoverTarget()) {
+            const isOpen = this._adapter.managePopover();
+            // If the popover was opened successfully we can stop here since there is no need to
+            // handle any other scenarios
+            if (isOpen) {
+                return;
+            }
+        }
+        // Wait a cycle to allow the click event to propagate
+        await new Promise(resolve => setTimeout(resolve));
+        // We allow for our click event to bubble first before we handle it in case the developer
+        // wants to prevent the default behavior
+        if (evt.defaultPrevented || this._disabled) {
+            return;
+        }
+        // For button types of submit or reset, we need to manually submit or reset the form
+        // since the click event doesn't do that for us with custom elements
+        if (isFormType) {
+            this._adapter.clickFormButton(this._type);
+        }
+    }
+    /**
+     * Handle keydown events on the host element to manually trigger click events.
+     */
+    async _onKeydown(evt) {
+        // Handle the special case for the space key (when not an anchor) to avoid
+        // scrolling when triggered
+        if (evt.key === ' ' && !this._anchor) {
+            evt.preventDefault();
+            this.click();
+            return;
+        }
+        // Wait a cycle for the keydown event to propagate
+        await new Promise(resolve => setTimeout(resolve));
+        if (evt.defaultPrevented || this._disabled) {
+            return;
+        }
+        if (evt.key === 'Enter') {
+            if (this._anchor) {
+                this._adapter.clickAnchor();
+            }
+            else {
+                this.click();
+            }
+        }
+    }
+    _toggleAnchor() {
+        if (this._anchor) {
+            this._adapter.initializeAnchor();
+            this._manageAnchorListeners();
+            this.disabled = false; // Anchor elements are always enabled
+        }
+        else {
+            this._adapter.removeAnchor();
+            this._manageAnchorListeners();
+        }
+    }
+    _manageAnchorListeners() {
+        if (this._anchor) {
+            this._adapter.removeHostListener('click', this._clickListener);
+            this._adapter.addAnchorEventListener('focus', this._anchorFocusListener);
+        }
+        else {
+            this._adapter.addHostListener('click', this._clickListener);
+            this._adapter.removeAnchorEventListener('focus', this._anchorFocusListener);
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(type) {
+        if (this._type !== type) {
+            this._type = type;
+            this._adapter.setHostAttribute(BASE_BUTTON_CONSTANTS.attributes.TYPE, type);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        // If we're in anchor mode, we need to ensure that the anchor is always enabled
+        if (this._anchor) {
+            if (this._disabled) {
+                this._adapter.syncDisabled(false);
+            }
+            value = false;
+        }
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DISABLED, value);
+        }
+    }
+    get popoverIcon() {
+        return this._popoverIcon;
+    }
+    set popoverIcon(value) {
+        value = Boolean(value);
+        if (this._popoverIcon !== value) {
+            this._popoverIcon = value;
+            this._adapter.toggleDefaultPopoverIcon(this._popoverIcon);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.POPOVER_ICON, value);
+        }
+    }
+    /**
+     * Anchor properties
+     */
+    get anchor() {
+        return this._anchor;
+    }
+    set anchor(value) {
+        value = Boolean(value);
+        if (this._anchor !== value) {
+            this._anchor = value;
+            this._toggleAnchor();
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.ANCHOR, value);
+        }
+    }
+    get href() {
+        return this._href;
+    }
+    set href(value) {
+        value = (value !== null && value !== void 0 ? value : '').trim();
+        if (this._href !== value) {
+            this._href = value;
+            this.anchor = this._href.length > 0;
+            if (this._anchor) {
+                this._adapter.setAnchorProperty('href', this._href);
+            }
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.HREF, !!this._href, this._href);
+        }
+    }
+    get target() {
+        return this._target;
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value !== null && value !== void 0 ? value : '_self';
+            this._adapter.setAnchorProperty('target', value);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.TARGET, !!this._target, this._target);
+        }
+    }
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        if (this._download !== value) {
+            this._download = value;
+            this._adapter.setAnchorProperty('download', this._download);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DOWNLOAD, !!this._download, this._download);
+        }
+    }
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        if (this._rel !== value) {
+            this._rel = value;
+            this._adapter.setAnchorProperty('rel', this._rel);
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.REL, !!this._rel, this._rel);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        value = Boolean(value);
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DENSE, value);
+        }
+    }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
+import { ExperimentalFocusOptions, internals } from '../../constants';
+import { IBaseComponent } from '../../core/base/base-component';
+import { IBaseButtonAdapter } from './base-button-adapter';
+import { ButtonType } from './base-button-constants';
+import { BaseButtonFoundation } from './base-button-foundation';
+import { ILabelAware } from '../../label/label-aware';
+export interface IBaseButton extends IBaseComponent {
+    type: ButtonType;
+    disabled: boolean;
+    popoverIcon: boolean;
+    name: string;
+    value: string;
+    dense: boolean;
+    anchor: boolean;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    form: HTMLFormElement | null;
+    focus(options?: ExperimentalFocusOptions): void;
+}
+export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseFocusableComponent implements IBaseButton, ILabelAware {
+    static readonly formAssociated = true;
+    [internals]: ElementInternals;
+    protected abstract _foundation: T;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+    get form(): HTMLFormElement | null;
+    get name(): string;
+    set name(name: string);
+    get value(): string;
+    set value(value: string);
+    type: ButtonType;
+    disabled: boolean;
+    popoverIcon: boolean;
+    anchor: boolean;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    dense: boolean;
+    click(): void;
+    focus(options: ExperimentalFocusOptions): void;
+}

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

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { IconRegistry } from '../../icon/icon-registry';
+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();
+        IconRegistry.define(tylIconArrowDropDown);
+        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 });
+    }
+    focus(options) {
+        this._foundation.focus(options);
+    }
+}
+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);
+        }
+    }
+}