@tylertech/forge 3.0.0-next.16 → 3.0.0-next.18

package/esm/banner/banner.js

@@ -7,25 +7,44 @@ import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconCancel } from '@tylertech/tyler-icons/standard';
 import { BaseComponent } from '../core/base/base-component';
-import { IconComponent, IconRegistry } from '../icon';
+import { IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
 import { TooltipComponent } from '../tooltip';
 import { BannerAdapter } from './banner-adapter';
 import { BANNER_CONSTANTS } from './banner-constants';
 import { BannerFoundation } from './banner-foundation';
-const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"forge-banner__container\" part=\"container\"><div class=\"forge-banner__container-wrapper\" part=\"wrapper\"><div class=\"forge-banner__container-wrapper-icon\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-banner__container-wrapper-subsection\" part=\"subsection-wrapper\"><div class=\"forge-banner__container-wrapper-subsection-text forge-typography--body2\" part=\"subsection-text\"><slot></slot></div><div class=\"forge-banner__container-wrapper-subsection-action\" part=\"action-subsection\"><slot name=\"button\"></slot></div></div></div><forge-icon-button class=\"forge-banner__container-dismiss\" part=\"dismiss-icon-button\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\">Dismiss</forge-tooltip></div></div></template>';
-const styles = '@media (min-width:600px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;-webkit-box-align:center;align-items:center;padding:0 24px 0 24px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-subsection-text{padding:14px 0 14px 0;margin-right:24px}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-right:16px}.forge-banner__container-dismiss[hidden]{display:none}}@media (max-width:599px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;padding:16px 12px 16px 12px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-top:12px}.forge-banner__container-dismiss{margin-top:-12px;margin-right:-12px}.forge-banner__container-dismiss[hidden]{display:none}}:host{display:block}:host([hidden]){display:none}:host(:not([theme])) .forge-banner,:host([theme=\"\"]) .forge-banner,:host([theme=default]) .forge-banner{background:#e8eaf6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-default-background,#e8eaf6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-default-font-color,rgba(0,0,0,.87)))}:host(:not([theme])) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=\"\"]) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=default]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host(:not([theme])) .forge-banner .forge-banner__container-dismiss,:host([theme=\"\"]) .forge-banner .forge-banner__container-dismiss,:host([theme=default]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner{background:#ffcdd2;background:var(--forge-banner-theme-background,var(--forge-banner-theme-danger-background,#ffcdd2));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner{background:#ffdba6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-warning-background,#ffdba6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner{background:#a5d6a7;background:var(--forge-banner-theme-background,var(--forge-banner-theme-success-background,#a5d6a7));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner{background:#bbdefb;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-primary-background,#bbdefb));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner{background:#e0e0e0;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-secondary-background,#e0e0e0));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}';
+const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"inner\"><div class=\"container\"><slot name=\"icon\"></slot><slot></slot><div class=\"button-container\"><slot name=\"button\"></slot></div></div><div><forge-icon-button part=\"dismiss-button\"><forge-icon name=\"cancel\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\"><slot name=\"dismiss-tooltip\">Dismiss</slot></forge-tooltip></div></div></div></template>';
+const styles = ':host{display:block;container-type:inline-size}:host([hidden]){display:none}.forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-info-container, #c7daf0));--_banner-color:var(--forge-banner-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_banner-gap:var(--forge-banner-gap, var(--forge-spacing-small, 12px));--_banner-padding-inline:var(--forge-banner-padding-inline, var(--forge-spacing-large, 24px));--_banner-padding-block:var(--forge-banner-padding-block, var(--forge-spacing-small, 12px));--_banner-transition-duration:var(--forge-banner-transition-duration, var(--forge-animation-duration-short4, 200ms));--_banner-transition-easing:var(--forge-banner-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-banner{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:opacity,grid-template-rows,min-height;transition-property:opacity,grid-template-rows,min-height;transition-property:opacity,grid-template-rows,min-height,-ms-grid-rows;-webkit-transition-duration:var(--_banner-transition-duration);transition-duration:var(--_banner-transition-duration);-webkit-transition-timing-function:var(--_banner-transition-easing);transition-timing-function:var(--_banner-transition-easing);background:var(--_banner-background);color:var(--_banner-color);opacity:1}.forge-banner .inner{display:grid;grid-template-columns:1fr auto;place-items:center;gap:var(--_banner-gap);overflow:hidden;padding-inline:var(--_banner-padding-inline)}.forge-banner .container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;gap:var(--_banner-gap);-webkit-box-flex:1;flex:1 1 auto;padding-block:var(--_banner-padding-block)}.forge-banner forge-icon-button{--forge-icon-button-focus-indicator-color:var(--_banner-color)}::slotted(forge-button[slot=button]){--forge-button-primary-color:var(--_banner-color)}:host([dismissed]) .forge-banner{grid-template-rows:0fr;opacity:0}:host([theme=primary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=tertiary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-tertiary-container, #d0d7ff))}:host([theme=success]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=danger]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-error-container, #ecc2c9))}:host([theme=info-secondary]) .forge-banner{--_banner-background:var(--forge-banner-background, var(--forge-theme-surface-container, #e0e0e0))}@container (max-width:600px){.forge-banner .container{display:grid;grid-template-rows:[content] 1fr [button] auto;grid-template-columns:[content] 1fr;place-items:normal}.forge-banner.has-icon .container{grid-template-columns:[icon] auto [content] 1fr}.forge-banner .inner{place-items:normal}.forge-banner .button-container{grid-row:button;grid-column:content}}';
 /**
- * The custom element class behind the `<forge-banner>` element.
- *
  * @tag forge-banner
+ *
+ * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages.
+ *
+ * @property {boolean} dismissed - Controls the visibility of the banner.
+ * @property {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @property {BannerTheme} theme - The theme of the banner.
+ *
+ * @attribute {boolean} dismissed - Controls the visibility of the banner.
+ * @attribute {boolean} persistent - Controls the visibility of the built-in dismiss button.
+ * @attribute {BannerTheme} theme - The theme of the banner.
+ *
+ * @event {CustomEvent} forge-banner-dismissed - Dispatched when the banner is dismissed.
+ *
+ * @cssproperty --forge-banner-background - The background color of the banner.
+ * @cssproperty --forge-banner-color - The text color of the banner.
+ * @cssproperty --forge-banner-gap - The gap between the contents.
+ * @cssproperty --forge-banner-padding-inline - The inline padding.
+ * @cssproperty --forge-banner-padding-block - The block padding.
+ * @cssproperty --forge-banner-transition-duration - The transition duration.
+ * @cssproperty --forge-banner-transition-easing - The transition easing function.
+ *
+ * @slot - The content of the banner.
+ * @slot icon - The icon to display.
+ * @slot button - The optional button to display.
  */
 let BannerComponent = class BannerComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            BANNER_CONSTANTS.attributes.DISMISSED,
-            BANNER_CONSTANTS.attributes.CAN_DISMISS
-        ];
+        return Object.values(BANNER_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -34,34 +53,46 @@ let BannerComponent = class BannerComponent extends BaseComponent {
         this._foundation = new BannerFoundation(new BannerAdapter(this));
     }
     connectedCallback() {
-        this._foundation.connect();
-    }
-    disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case BANNER_CONSTANTS.attributes.DISMISSED:
+            case BANNER_CONSTANTS.observedAttributes.DISMISSED:
                 this.dismissed = coerceBoolean(newValue);
                 break;
-            case BANNER_CONSTANTS.attributes.CAN_DISMISS:
-                this.canDismiss = coerceBoolean(newValue);
+            case BANNER_CONSTANTS.observedAttributes.PERSISTENT:
+                this.persistent = coerceBoolean(newValue);
+                break;
+            case BANNER_CONSTANTS.observedAttributes.CAN_DISMISS:
+                this.persistent = coerceBoolean(newValue) === false;
+                break;
+            case BANNER_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
                 break;
         }
     }
+    /** @deprecated Use `persistent` instead. */
+    get canDismiss() {
+        return this.persistent;
+    }
+    set canDismiss(value) {
+        this.persistent = !value;
+    }
 };
 __decorate([
     FoundationProperty()
 ], BannerComponent.prototype, "dismissed", void 0);
 __decorate([
     FoundationProperty()
-], BannerComponent.prototype, "canDismiss", void 0);
+], BannerComponent.prototype, "persistent", void 0);
+__decorate([
+    FoundationProperty()
+], BannerComponent.prototype, "theme", void 0);
 BannerComponent = __decorate([
     CustomElement({
         name: BANNER_CONSTANTS.elementName,
         dependencies: [
             IconButtonComponent,
-            IconComponent,
             TooltipComponent
         ]
     })

package/esm/circular-progress/circular-progress-foundation.js

@@ -37,6 +37,9 @@ export class CircularProgressFoundation {
         return this._progress;
     }
     set progress(value) {
+        if (isNaN(value)) {
+            value = 0;
+        }
         if (this._progress !== value) {
             this._progress = value;
             if (this._determinate) {

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

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../../core/delegates/base-component-delegate';
+import { IDeprecatedButtonComponent } from './deprecated-button';
+export type DeprecatedButtonComponentDelegateProps = Partial<IDeprecatedButtonComponent>;
+export interface IDeprecatedButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
+    type?: 'button' | 'submit';
+    text?: string;
+}
+export interface IDeprecatedButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IDeprecatedButtonComponent, IDeprecatedButtonComponentDelegateOptions> {
+}
+export declare class DeprecatedButtonComponentDelegate extends BaseComponentDelegate<IDeprecatedButtonComponent, IDeprecatedButtonComponentDelegateOptions> {
+    private _buttonElement?;
+    constructor(config?: IDeprecatedButtonComponentDelegateConfig);
+    destroy(): void;
+    get buttonElement(): HTMLButtonElement | undefined;
+    protected _build(): IDeprecatedButtonComponent;
+    onClick(listener: (evt: MouseEvent) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate } from '../../core/delegates/base-component-delegate';
+import { DEPRECATED_BUTTON_CONSTANTS } from './deprecated-button-constants';
+export class DeprecatedButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    destroy() {
+        this._buttonElement = undefined;
+    }
+    get buttonElement() {
+        return this._buttonElement;
+    }
+    _build() {
+        var _a, _b;
+        const component = document.createElement(DEPRECATED_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);
+        return component;
+    }
+    onClick(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', evt => listener(evt));
+    }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const DEPRECATED_BUTTON_CONSTANTS: {
+    elementName: "forge-deprecated-button";
+    attributes: {
+        TYPE: string;
+        DISABLED: string;
+        FULL_WIDTH: string;
+    };
+    selectors: {
+        BUTTON: string;
+    };
+};
+export type DeprecatedButtonType = 'text' | 'raised' | 'unelevated' | 'outlined' | 'dense';

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}deprecated-button`;
+const attributes = {
+    TYPE: 'type',
+    DISABLED: 'disabled',
+    FULL_WIDTH: 'full-width'
+};
+const selectors = {
+    BUTTON: 'button,a'
+};
+export const DEPRECATED_BUTTON_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors
+};

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DeprecatedButtonType } from './deprecated-button-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+/**
+ * @deprecated Use `IButtonComponent` component instead.
+ */
+export interface IDeprecatedButtonComponent extends IBaseComponent {
+    type: string;
+    disabled: boolean;
+    fullWidth: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-deprecated-button': IDeprecatedButtonComponent;
+    }
+}
+/**
+ * @tag forge-deprecated-button
+ *
+ * @deprecated Use the `<forge-button>` element instead.
+ */
+export declare class DeprecatedButtonComponent extends BaseComponent implements IDeprecatedButtonComponent {
+    static get observedAttributes(): string[];
+    private _slotElement;
+    private _focusIndicator;
+    private _stateLayer;
+    private _buttonOrAnchorElement;
+    private _type;
+    private _disabled;
+    private _fullWidth;
+    private _buttonChangeListener;
+    private _buttonAttrMutationObserver;
+    private _keydownListener;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _onKeydown;
+    private _onButtonChange;
+    private _initialize;
+    private _syncDisabledState;
+    private _detachButton;
+    get type(): DeprecatedButtonType;
+    set type(value: DeprecatedButtonType);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get fullWidth(): boolean;
+    set fullWidth(value: boolean);
+    focus(options?: FocusOptions | undefined): void;
+}

package/esm/deprecated/button/deprecated-button.js

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, ensureChildren, getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { FocusIndicatorComponent, FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { StateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
+import { DEPRECATED_BUTTON_CONSTANTS } from './deprecated-button-constants';
+import { BaseComponent } from '../../core/base/base-component';
+const template = '<template><slot></slot><forge-focus-indicator part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></template>';
+const styles = ':host{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-display:var(--forge-button-display, inline-flex);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, var(--forge-shape-medium, 4px));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, var(--_button-background));--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, var(--forge-shape-full, 9999px));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent;border-radius:var(--_button-shape)}:host([hidden]){display:none}::slotted(:is(button,a)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_button-justify);justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);-webkit-box-shadow:var(--_button-shadow);box-shadow:var(--_button-shadow);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_button-transition-duration);transition-duration:var(--_button-transition-duration);-webkit-transition-timing-function:var(--_button-transition-timing);transition-timing-function:var(--_button-transition-timing);--forge-icon-font-size:1.25em}::slotted(:is(button,a))::-moz-focus-inner{padding:0;border:0}::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}::slotted(:is(button,a)):active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}::slotted(a){text-decoration:none;--forge-typography-link-text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host(:is(:not([type],[type*=text]))) ::slotted(:is(button,a)){--_button-focus-indicator-offset:var(--_button-text-focus-indicator-offset)}:host(:is([type*=unelevated],[type*=raised])) ::slotted(:is(button,a)){--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([type*=unelevated],[type*=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([type*=raised]) ::slotted(:is(button,a)){--_button-shadow:var(--_button-raised-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):active{--_button-shadow:var(--_button-raised-active-shadow)}:host([type*=outlined]) ::slotted(:is(button,a)){--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([full-width]){width:100%}:host(:is([dense],[type*=dense])) ::slotted(:is(button,a)){--_button-height:var(--_button-dense-height)}:host([disabled]){cursor:var(--_button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host([type*=outlined][disabled]) ::slotted(button[disabled]){--_button-border-color:var(--_button-disabled-border-color)}:host(:is([type*=unelevated],[type*=raised])[disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host([type*=raised][disabled]) ::slotted(button[disabled]){--_button-shadow:var(--_button-raised-disabled-shadow)}';
+/**
+ * @tag forge-deprecated-button
+ *
+ * @deprecated Use the `<forge-button>` element instead.
+ */
+let DeprecatedButtonComponent = class DeprecatedButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(DEPRECATED_BUTTON_CONSTANTS.attributes);
+    }
+    constructor() {
+        super();
+        this._buttonOrAnchorElement = null;
+        this._disabled = false;
+        this._fullWidth = false;
+        this._buttonChangeListener = this._onButtonChange.bind(this);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+        attachShadowTemplate(this, template, styles);
+        this._slotElement = getShadowElement(this, 'slot:not([name])');
+        this._focusIndicator = getShadowElement(this, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayer = getShadowElement(this, STATE_LAYER_CONSTANTS.elementName);
+    }
+    connectedCallback() {
+        this._slotElement.addEventListener('slotchange', this._buttonChangeListener);
+        if (this.children.length) {
+            this._initialize();
+        }
+        else {
+            ensureChildren(this).then(() => this._initialize());
+        }
+    }
+    disconnectedCallback() {
+        this._detachButton();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case DEPRECATED_BUTTON_CONSTANTS.attributes.TYPE:
+                this.type = newValue;
+                return;
+            case DEPRECATED_BUTTON_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_BUTTON_CONSTANTS.attributes.FULL_WIDTH:
+                this.fullWidth = coerceBoolean(newValue);
+                return;
+        }
+    }
+    _onKeydown(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            this._stateLayer.playAnimation();
+        }
+    }
+    _onButtonChange() {
+        this._detachButton();
+        this._initialize();
+    }
+    _initialize() {
+        this._buttonOrAnchorElement = this.querySelector(DEPRECATED_BUTTON_CONSTANTS.selectors.BUTTON);
+        if (!this._buttonOrAnchorElement) {
+            return;
+        }
+        this._stateLayer.targetElement = this._buttonOrAnchorElement;
+        this._focusIndicator.targetElement = this._buttonOrAnchorElement;
+        this._buttonOrAnchorElement.addEventListener('keydown', this._keydownListener);
+        // Sync disabled state
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement && this._disabled && !this._buttonOrAnchorElement.disabled) {
+            this._buttonOrAnchorElement.disabled = true;
+        }
+        else {
+            this.disabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        }
+        // Listen for disabled attribute changes on the button
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement) {
+            this._buttonAttrMutationObserver = new MutationObserver(mutationList => {
+                if (mutationList.some(mutation => mutation.attributeName === 'disabled')) {
+                    this._syncDisabledState();
+                }
+            });
+            this._buttonAttrMutationObserver.observe(this._buttonOrAnchorElement, { attributes: true, attributeFilter: ['disabled'] });
+        }
+    }
+    _syncDisabledState() {
+        const isDisabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        toggleAttribute(this, isDisabled, DEPRECATED_BUTTON_CONSTANTS.attributes.DISABLED);
+    }
+    _detachButton() {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._keydownListener);
+        if (this._buttonAttrMutationObserver) {
+            this._buttonAttrMutationObserver.disconnect();
+            this._buttonAttrMutationObserver = undefined;
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (this._type !== value) {
+            this._type = value;
+            this.setAttribute(DEPRECATED_BUTTON_CONSTANTS.attributes.TYPE, this._type);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        var _a;
+        if (this._disabled !== value) {
+            this._disabled = value;
+            (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(DEPRECATED_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+            this.toggleAttribute(DEPRECATED_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get fullWidth() {
+        return this._fullWidth;
+    }
+    set fullWidth(value) {
+        if (this._fullWidth !== value) {
+            this._fullWidth = value;
+            this.toggleAttribute(DEPRECATED_BUTTON_CONSTANTS.attributes.FULL_WIDTH, this._fullWidth);
+        }
+    }
+    focus(options) {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+};
+DeprecatedButtonComponent = __decorate([
+    CustomElement({
+        name: DEPRECATED_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
+    })
+], DeprecatedButtonComponent);
+export { DeprecatedButtonComponent };

package/esm/deprecated/button/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './deprecated-button';
+export * from './deprecated-button-component-delegate';
+export * from './deprecated-button-constants';
+/**
+ * @deprecated Use `defineButtonComponent()` instead for the `<forge-button>` element.
+ */
+export declare function defineDeprecatedButtonComponent(): void;

package/esm/deprecated/button/index.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { DeprecatedButtonComponent } from './deprecated-button';
+export * from './deprecated-button';
+export * from './deprecated-button-component-delegate';
+export * from './deprecated-button-constants';
+/**
+ * @deprecated Use `defineButtonComponent()` instead for the `<forge-button>` element.
+ */
+export function defineDeprecatedButtonComponent() {
+    defineCustomElement(DeprecatedButtonComponent);
+}

package/{dist/esm/chunks/chunk.WINL2C7Q.js → esm/deprecated/index.d.ts}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-//# sourceMappingURL=chunk.WINL2C7Q.js.map
+export * from './button';

package/esm/deprecated/index.js

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './button';

package/esm/index.d.ts

@@ -73,7 +73,12 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './utils';
 export * from './view-switcher';
+/**
+ * Deprecated exports
+ */
+export * from './deprecated/button';
 /**
  * Registers all components in the library with the browser.
  */
 export declare function defineComponents(): void;
+export declare function defineDeprecatedComponents(): void;

package/esm/index.js

@@ -76,6 +76,10 @@ import { ToastComponent } from './toast';
 import { ToolbarComponent } from './toolbar';
 import { TooltipComponent } from './tooltip';
 import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
+/**
+ * Deprecated imports
+ */
+import { DeprecatedButtonComponent } from './deprecated/button';
 export * from './accordion';
 export * from './app-bar';
 export * from './autocomplete';
@@ -146,6 +150,10 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './utils';
 export * from './view-switcher';
+/**
+ * Deprecated exports
+ */
+export * from './deprecated/button';
 const CUSTOM_ELEMENTS = [
     AccordionComponent,
     AppBarComponent,
@@ -236,3 +244,12 @@ const CUSTOM_ELEMENTS = [
 export function defineComponents() {
     defineCustomElements(CUSTOM_ELEMENTS);
 }
+/**
+ * Deprecated component registration
+ */
+const DEPRECATED_CUSTOM_ELEMENTS = [
+    DeprecatedButtonComponent
+];
+export function defineDeprecatedComponents() {
+    defineCustomElements(DEPRECATED_CUSTOM_ELEMENTS);
+}

package/esm/inline-message/inline-message-constants.d.ts

@@ -3,9 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const INLINE_MESSAGE_CONSTANTS: {
     elementName: "forge-inline-message";
-    selectors: {
-        ROOT: string;
+    attributes: {
+        THEME: string;
+    };
+    defaults: {
+        THEME: string;
     };
 };
+type LegacyInlineMessageThemes = 'info-secondary' | 'danger';
+export type InlineMessageTheme = Theme | LegacyInlineMessageThemes;
+export {};

package/esm/inline-message/inline-message-constants.js

@@ -5,10 +5,14 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}inline-message`;
-const selectors = {
-    ROOT: '.forge-inline-message'
+const attributes = {
+    THEME: 'theme'
+};
+const defaults = {
+    THEME: 'info'
 };
 export const INLINE_MESSAGE_CONSTANTS = {
     elementName,
-    selectors
+    attributes,
+    defaults
 };