@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -5,63 +5,48 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IToastAdapter } from './toast-adapter';
-import { ToastBuilder, ToastPlacement } from './toast-constants';
+import { ToastPlacement, ToastTheme } from './toast-constants';
 export interface IToastFoundation extends ICustomElementFoundation {
-    message: string;
-    actionText: string;
     duration: number;
     placement: ToastPlacement;
-    showClose: boolean;
-    builder: ToastBuilder | string;
+    actionText: string;
+    dismissible: boolean;
+    dismissLabel: string;
     show(): void;
-    hide(): void;
+    hide(): Promise<void>;
 }
-/**
- * The foundation class behind the `ToastComponent` class that manages the state of a toast component instance.
- */
 export declare class ToastFoundation implements IToastFoundation {
     private _adapter;
-    private _message;
+    private _open;
     private _actionText;
     private _duration;
     private _placement;
-    private _showClose;
-    private _hasAction;
-    private _isActive;
+    private _dismissible;
+    private _dismissLabel;
+    private _theme;
     private _hideTimeout;
-    private _builder;
     private _actionListener;
     private _closeListener;
     constructor(_adapter: IToastAdapter);
     initialize(): void;
-    /**
-     * Starts the animation of the toast and hides it after the duration.
-     */
     show(): void;
-    /**
-     * Hides the toast and removes it from the DOM.
-     */
-    hide(emitEvent?: boolean): void;
-    /**
-     * Handles click events from the optional action button.
-     * @param {MouseEvent} evt The mouse event.
-     */
+    hide({ dispatchEvent }?: {
+        dispatchEvent?: boolean | undefined;
+    }): Promise<void>;
     private _onAction;
     private _onClose;
-    /** The message to display in the toast. */
-    get message(): string;
-    set message(value: string);
-    /** The text to display in the action button. */
-    get actionText(): string;
-    set actionText(value: string);
-    /** The time in milliseconds to show the toast. */
+    get open(): boolean;
+    set open(value: boolean);
     get duration(): number;
     set duration(value: number);
-    /** The placement of the toast. */
     get placement(): ToastPlacement;
     set placement(value: ToastPlacement);
-    get builder(): ToastBuilder | string;
-    set builder(value: ToastBuilder | string);
-    get showClose(): boolean;
-    set showClose(value: boolean);
+    get actionText(): string;
+    set actionText(value: string);
+    get dismissible(): boolean;
+    set dismissible(value: boolean);
+    get dismissLabel(): string;
+    set dismissLabel(value: string);
+    get theme(): ToastTheme;
+    set theme(value: ToastTheme);
 }

package/esm/toast/toast-foundation.js

@@ -3,111 +3,74 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isFunction } from '@tylertech/forge-core';
 import { TOAST_CONSTANTS } from './toast-constants';
-/**
- * The foundation class behind the `ToastComponent` class that manages the state of a toast component instance.
- */
 export class ToastFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        this._open = false;
         this._duration = TOAST_CONSTANTS.defaults.DURATION;
         this._placement = TOAST_CONSTANTS.defaults.PLACEMENT;
-        this._showClose = true;
-        this._hasAction = false;
-        this._isActive = false;
-        this._actionListener = (evt) => this._onAction(evt);
-        this._closeListener = (evt) => this._onClose(evt);
+        this._dismissible = false;
+        this._theme = TOAST_CONSTANTS.defaults.THEME;
+        this._actionListener = this._onAction.bind(this);
+        this._closeListener = this._onClose.bind(this);
     }
     initialize() {
-        this._adapter.setPlacement(this._placement);
-        this._adapter.registerCloseListener(this._closeListener);
-        this._adapter.setCloseButtonVisibility(this._showClose);
-        this._adapter.setActionVisibility(!!this._actionText);
-        this.show();
-    }
-    /**
-     * Starts the animation of the toast and hides it after the duration.
-     */
-    show() {
-        // Check if we were provided a builder function and call it if so (this will override the message text)
-        if (isFunction(this._builder)) {
-            const tpl = this._builder();
-            this._adapter.setMessageTemplate(tpl);
+        if (this._open) {
+            this.show();
         }
-        this._isActive = true;
-        this._adapter.setActive(true);
+    }
+    show() {
+        this._adapter.show();
         if (isFinite(this._duration) && this._duration > 0) {
-            this._hideTimeout = setTimeout(() => this.hide(true), this._duration);
+            /* c8 ignore next 3 */
+            if (this._hideTimeout) {
+                window.clearTimeout(this._hideTimeout);
+            }
+            this._hideTimeout = window.setTimeout(() => this.hide(), this._duration);
         }
+        this._open = true;
+        this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
     }
-    /**
-     * Hides the toast and removes it from the DOM.
-     */
-    hide(emitEvent = false) {
-        if (!this._isActive) {
-            return;
-        }
-        this._isActive = false;
-        this._adapter.setActive(false);
+    async hide({ dispatchEvent = true } = {}) {
         if (this._hideTimeout) {
-            clearTimeout(this._hideTimeout);
+            window.clearTimeout(this._hideTimeout);
             this._hideTimeout = undefined;
         }
-        if (emitEvent) {
-            this._adapter.emitHostEvent(TOAST_CONSTANTS.events.CLOSE);
+        await this._adapter.hide();
+        this._open = false;
+        this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
+        if (dispatchEvent) {
+            this._adapter.dispatchHostEvent(new CustomEvent(TOAST_CONSTANTS.events.CLOSE, { bubbles: true }));
         }
     }
-    /**
-     * Handles click events from the optional action button.
-     * @param {MouseEvent} evt The mouse event.
-     */
     _onAction(evt) {
         evt.stopPropagation();
-        this._adapter.emitHostEvent(TOAST_CONSTANTS.events.ACTION);
-    }
-    _onClose(evt) {
-        this.hide(true);
+        this._adapter.dispatchHostEvent(new CustomEvent(TOAST_CONSTANTS.events.ACTION, { bubbles: true }));
     }
-    /** The message to display in the toast. */
-    get message() {
-        return this._message;
+    _onClose(_evt) {
+        this.hide();
     }
-    set message(value) {
-        if (this._message !== value) {
-            this._message = value;
-            this._adapter.setMessage(this._message);
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.MESSAGE, this._message);
-        }
+    get open() {
+        return this._open;
     }
-    /** The text to display in the action button. */
-    get actionText() {
-        return this._actionText;
-    }
-    set actionText(value) {
-        if (this._actionText !== value) {
-            this._actionText = value;
-            if (this._actionText) {
-                if (this._hasAction) {
-                    this._adapter.setActionText(this._actionText);
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            if (this._adapter.isConnected) {
+                if (value) {
+                    this.show();
                 }
                 else {
-                    this._adapter.setActionText(this._actionText);
-                    this._adapter.setActionVisibility(true);
-                    this._adapter.registerActionListener('click', this._actionListener);
-                    this._hasAction = true;
+                    this.hide({ dispatchEvent: false });
                 }
             }
-            else if (this._hasAction) {
-                this._adapter.setActionText('');
-                this._adapter.setActionVisibility(false);
-                this._adapter.deregisterActionListener('click', this._actionListener);
-                this._hasAction = false;
+            else {
+                this._open = value;
+                this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
             }
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.ACTION_TEXT, this._actionText);
         }
     }
-    /** The time in milliseconds to show the toast. */
     get duration() {
         return this._duration;
     }
@@ -115,36 +78,73 @@ export class ToastFoundation {
         if (this._duration !== value) {
             this._duration = value;
             if (this._hideTimeout) {
-                clearTimeout(this._hideTimeout);
-                this._hideTimeout = setTimeout(() => this.hide(true), this._duration);
+                window.clearTimeout(this._hideTimeout);
+                if (isFinite(this._duration) && this._duration > 0) {
+                    this._hideTimeout = window.setTimeout(() => this.hide(), this._duration);
+                }
             }
         }
     }
-    /** The placement of the toast. */
     get placement() {
         return this._placement;
     }
     set placement(value) {
         if (this._placement !== value) {
             this._placement = value;
-            this._adapter.setPlacement(this._placement);
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.PLACEMENT, this._placement);
         }
-        this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.PLACEMENT, this._placement);
     }
-    get builder() {
-        return this._builder;
+    get actionText() {
+        return this._actionText;
     }
-    set builder(value) {
-        this._builder = value;
+    set actionText(value) {
+        var _a;
+        value = (_a = value === null || value === void 0 ? void 0 : value.trim()) !== null && _a !== void 0 ? _a : '';
+        if (this._actionText !== value) {
+            this._actionText = value;
+            this._adapter.setActionText(this._actionText);
+            if (!!this._actionText) {
+                this._adapter.addActionListener(this._actionListener);
+            }
+            else {
+                this._adapter.removeActionListener(this._actionListener);
+            }
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.ACTION_TEXT, this._actionText);
+        }
+    }
+    get dismissible() {
+        return this._dismissible;
+    }
+    set dismissible(value) {
+        value = Boolean(value);
+        if (this._dismissible !== value) {
+            this._dismissible = value;
+            if (this._dismissible) {
+                this._adapter.addCloseListener(this._closeListener);
+            }
+            else {
+                this._adapter.removeCloseListener(this._closeListener);
+            }
+            this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.DISMISSIBLE, this._dismissible);
+        }
+    }
+    get dismissLabel() {
+        return this._dismissLabel;
+    }
+    set dismissLabel(value) {
+        if (this._dismissLabel !== value) {
+            this._dismissLabel = value;
+            this._adapter.setDismissLabel(this._dismissLabel);
+        }
     }
-    get showClose() {
-        return this._showClose;
+    get theme() {
+        return this._theme;
     }
-    set showClose(value) {
-        if (this._showClose !== value) {
-            this._showClose = value;
-            this._adapter.setCloseButtonVisibility(this._showClose);
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.SHOW_CLOSE, this._showClose.toString());
+    set theme(value) {
+        value !== null && value !== void 0 ? value : (value = TOAST_CONSTANTS.defaults.THEME);
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.THEME, this._theme);
         }
     }
 }

package/esm/toast/toast.d.ts

@@ -3,16 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { ToastBuilder, ToastPlacement } from './toast-constants';
-export interface IToastComponent extends IBaseComponent {
-    message: string;
-    actionText: string;
+import { BaseComponent } from '../core/base/base-component';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IIconProperties } from '../icon';
+import { ToastPlacement, ToastTheme } from './toast-constants';
+export interface IToastProperties {
+    open: boolean;
     duration: number;
     placement: ToastPlacement;
-    showClose: boolean;
-    builder: ToastBuilder | string;
-    hide(): void;
+    actionText: string;
+    dismissible: boolean;
+    dismissLabel: string;
+    theme: ToastTheme;
+}
+export interface IToastPresentConfiguration extends Partial<IToastProperties> {
+    message?: string;
+    element?: HTMLElement;
+    className?: string | string[];
+    icon?: Partial<IIconProperties>;
+}
+export interface IToastComponent extends IToastProperties, IWithElementInternals, IWithDefaultAria {
+    show(): void;
+    hide(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -23,29 +36,75 @@ declare global {
         'forge-toast-close': CustomEvent<void>;
     }
 }
+declare const BaseClass: import("../constants").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & typeof BaseComponent;
 /**
- * The custom element class behind the `<forge-toast>` web component.
- *
  * @tag forge-toast
+ *
+ * @summary Toasts are non-modal notifications that appear in response to user interactions.
+ *
+ * @property {boolean} open - The open state.
+ * @property {number} duration - The duration in milliseconds that the toast is displayed.
+ * @property {ToastPlacement} placement - The placement of the toast.
+ * @property {string} actionText - The text for the action button. This controls the visibility of the action button.
+ * @property {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @property {string} dismissLabel - The accessible label for the dismiss button.
+ * @property {ToastTheme} theme - The theme of the toast.
+ *
+ * @attribute {boolean} open - The open state.
+ * @attribute {number} duration - The duration in milliseconds that the toast is displayed.
+ * @attribute {ToastPlacement} placement - The placement of the toast.
+ * @attribute {string} action-text - The text for the action button. This controls the visibility of the action button.
+ * @attribute {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @attribute {string} dismiss-label - The accessible label for the dismiss button.
+ * @attribute {ToastTheme} theme - The theme of the toast.
+ *
+ * @event {CustomEvent<void>} forge-toast-action - Dispatched when the action button is clicked.
+ * @event {CustomEvent<void>} forge-toast-close - Dispatched when the toast is closed.
+ *
+ * @cssproperty --forge-toast-background - The background color of the toast.
+ * @cssproperty --forge-toast-color - The text color of the toast.
+ * @cssproperty --forge-toast-offset - The offset of the toast from the edge of the viewport.
+ * @cssproperty --forge-toast-shape - The shape of the toast.
+ * @cssproperty --forge-toast-elevation - The elevation of the toast.
+ * @cssproperty --forge-toast-action-color - The text color of the action button.
+ * @cssproperty --forge-toast-min-width - The minimum width of the toast.
+ * @cssproperty --forge-toast-max-width - The maximum width of the toast.
+ * @cssproperty --forge-toast-min-height - The minimum height of the toast.
+ * @cssproperty --forge-toast-inline-padding - The padding of the toast when inline.
+ * @cssproperty --forge-toast-spacing - The spacing between toasts.
+ * @cssproperty --forge-toast-message-padding - The padding of the toast message.
+ * @cssproperty --forge-toast-enter-duration - The duration of the enter animation.
+ * @cssproperty --forge-toast-enter-timing - The timing function of the enter animation.
+ * @cssproperty --forge-toast-exit-duration - The duration of the exit animation.
+ * @cssproperty --forge-toast-exit-timing - The timing function of the exit animation.
+ * @cssproperty --forge-toast-slide-origin - The origin of the slide animation.
+ *
+ * @csspart surface - The surface container.
+ * @csspart message - The message container.
+ * @csspart action-button - The action button.
+ * @csspart close-button - The close button.
+ * @csspart overlay - The `<forge-overlay>` element.
  */
-export declare class ToastComponent extends BaseComponent implements IToastComponent {
+export declare class ToastComponent extends BaseClass implements IToastComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** The message to display in the toast. */
-    message: string;
-    /** The text to display in the action button. */
-    actionText: string;
-    /** The time in milliseconds to show the toast. */
+    open: boolean;
     duration: number;
-    /** The placement of the toast. */
     placement: ToastPlacement;
-    /** Sets the toast builder function for displaying custom content. */
-    builder: ToastBuilder | string;
-    /** Controls the visibility of the close button. */
-    showClose: boolean;
-    /** Hides the toast and removes it from the DOM. */
-    hide(): void;
+    actionText: string;
+    dismissible: boolean;
+    dismissLabel: string;
+    theme: ToastTheme;
+    show(): void;
+    hide(): Promise<void>;
+    /**
+     * Presents a toast notification.
+     * @param config The configuration for the toast.
+     * @returns A promise that resolves when the toast is closed.
+     */
+    static present({ message, element, icon, className, ...config }: IToastPresentConfiguration): IToastComponent;
 }
+export {};