@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/time-picker/time-picker-foundation.js

@@ -83,7 +83,7 @@ export class TimePickerFoundation {
             this._adapter.destroyMask();
         }
         // Ensure we remove our dropdown
-        this._closeDropdown();
+        this._closeDropdown({ destroy: true });
         // Cleanup any resources used in the adapter
         this._adapter.destroy();
     }
@@ -116,7 +116,7 @@ export class TimePickerFoundation {
                 if (this._open) {
                     evt.preventDefault();
                     evt.stopPropagation();
-                    this._closeDropdown(true);
+                    this._closeDropdown({ emitCloseEvent: true });
                 }
                 break;
             case 'Down':
@@ -207,7 +207,7 @@ export class TimePickerFoundation {
         }
         evt.preventDefault();
         if (this._open) {
-            this._closeDropdown(true);
+            this._closeDropdown({ emitCloseEvent: true });
         }
         else {
             if (!Platform.isMobile) {
@@ -233,7 +233,7 @@ export class TimePickerFoundation {
         }
         this._formatInputValue();
         if (this._open && !this._adapter.isInputFocused()) {
-            this._closeDropdown(true);
+            this._closeDropdown({ emitCloseEvent: true });
         }
     }
     _onInputMousedown(evt) {
@@ -286,7 +286,7 @@ export class TimePickerFoundation {
             this._adapter.addToggleListener('mousedown', this._toggleMousedownListener);
         }
         else if (this._open) {
-            this._closeDropdown(true);
+            this._closeDropdown({ emitCloseEvent: true });
         }
     }
     _applyAllowSeconds() {
@@ -315,7 +315,7 @@ export class TimePickerFoundation {
             return;
         }
         if (this._open) {
-            this._closeDropdown(true);
+            this._closeDropdown({ emitCloseEvent: true });
         }
         // Let's attempt to coerce our time string into a known format to help with ease of entry
         value = tryCoerceTimeString(value, this._use24HourTime, this._allowSeconds);
@@ -392,7 +392,7 @@ export class TimePickerFoundation {
         return TWENTY_FOUR_HOUR_TIME_REGEX.test(value);
     }
     _onSelect(value) {
-        this._closeDropdown(true);
+        this._closeDropdown({ emitCloseEvent: true });
         // Check if the "Now" option was selected
         if (!value.isCustom && value.metadata === 'now') {
             value.time = getCurrentTimeOfDayMillis(this._allowSeconds);
@@ -501,18 +501,18 @@ export class TimePickerFoundation {
             type: ListDropdownType.Standard,
             options,
             selectCallback: value => this._onSelect(value),
-            closeCallback: () => this._closeDropdown(true),
+            closeCallback: () => this._closeDropdown({ emitCloseEvent: true }),
             activeChangeCallback: id => this._adapter.setActiveDescendant(id),
             targetWidthCallback: () => this._adapter.getTargetElementWidth(this._popupTarget)
         };
         this._adapter.attachDropdown(this._dropdownConfig);
         this._adapter.emitHostEvent(TIME_PICKER_CONSTANTS.events.OPEN, undefined, false);
     }
-    _closeDropdown(emitCloseEvent = false) {
+    _closeDropdown({ destroy = false, emitCloseEvent = false } = {}) {
         this._open = false;
         this._dropdownConfig = undefined;
         this._adapter.removeHostAttribute(TIME_PICKER_CONSTANTS.attributes.OPEN);
-        this._adapter.detachDropdown();
+        this._adapter.detachDropdown({ destroy });
         if (emitCloseEvent) {
             this._adapter.emitHostEvent(TIME_PICKER_CONSTANTS.events.CLOSE, true, false);
         }

package/esm/time-picker/time-picker.js

@@ -12,10 +12,10 @@ import { TimePickerFoundation } from './time-picker-foundation';
 import { TIME_PICKER_CONSTANTS } from './time-picker-constants';
 import { IconRegistry, IconComponent } from '../icon';
 import { IconButtonComponent } from '../icon-button';
-import { PopupComponent } from '../popup';
 import { DialogComponent } from '../dialog';
 import { ListComponent, ListItemComponent } from '../list';
 import { BaseComponent } from '../core/base/base-component';
+import { PopoverComponent } from '../popover/popover';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
@@ -201,7 +201,7 @@ TimePickerComponent = __decorate([
             ListItemComponent,
             IconButtonComponent,
             IconComponent,
-            PopupComponent,
+            PopoverComponent,
             IconComponent,
             DialogComponent
         ]

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

@@ -4,80 +4,29 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { PopupPlacement } from '../popup';
 import { IToastComponent } from './toast';
 export interface IToastAdapter extends IBaseAdapter {
-    setHostAttribute: (name: string, value: string) => void;
-    setMessage: (value: string) => void;
-    setMessageTemplate: (tpl: HTMLElement | string) => void;
-    setActionVisibility: (isVisible: boolean) => void;
-    setActionText: (message: string) => void;
-    registerActionListener: (type: string, listener: (evt: MouseEvent) => void) => void;
-    deregisterActionListener: (type: string, listener: (evt: MouseEvent) => void) => void;
-    setPlacement: (placement: PopupPlacement) => void;
-    setActive: (isActive: boolean) => void;
-    setCloseButtonVisibility(visible: boolean): void;
-    registerCloseListener(listener: (evt: Event) => void): void;
+    show(): void;
+    hide(): void;
+    addCloseListener(listener: EventListener): void;
+    removeCloseListener(listener: EventListener): void;
+    addActionListener(listener: EventListener): void;
+    removeActionListener(listener: EventListener): void;
+    setDismissLabel(label: string): void;
+    setActionText(text: string): void;
 }
-/**
- * The DOM adapter for the `ToastComponent` web component.
- */
 export declare class ToastAdapter extends BaseAdapter<IToastComponent> implements IToastAdapter {
-    private _containerElement;
-    private _messageElement;
+    private _overlayElement;
+    private _surfaceElement;
     private _actionButtonElement;
-    private _actionButtonPlaceholder;
     private _closeButtonElement;
     constructor(component: IToastComponent);
-    /**
-     * Sets an attribute on the host element.
-     * @param name The attribute name.
-     * @param value The attribute value.
-     */
-    setHostAttribute(name: string, value: string): void;
-    /**
-     * Sets the message text on the toast element.
-     * @param value The message text.
-     */
-    setMessage(value: string): void;
-    /**
-     * Sets a custom template on the message element.
-     * @param tpl The message template.
-     */
-    setMessageTemplate(tpl: HTMLElement | string): void;
-    /**
-     * Toggles the visibility of the action button element.
-     * @param isVisible The visibility.
-     */
-    setActionVisibility(isVisible: boolean): void;
-    /**
-     * Sets the action button text.
-     * @param message The message text.
-     */
-    setActionText(message: string): void;
-    /**
-     * Adds an event listener to the action button element.
-     * @param type The event type.
-     * @param listener The event listener.
-     */
-    registerActionListener(type: string, listener: (evt: MouseEvent) => void): void;
-    /**
-     * Removes an event listener from the action button.
-     * @param type The event type.
-     * @param listener The event listener.
-     */
-    deregisterActionListener(type: string, listener: (evt: MouseEvent) => void): void;
-    /**
-     * Adjusts the class applied to the toast container to position it properly.
-     * @param placement The screen placement position.
-     */
-    setPlacement(placement: PopupPlacement): void;
-    /**
-     * Triggers the addition of classes to the container element to hide or show the toast using CSS transitions.
-     * @param isActive Active or not.
-     */
-    setActive(isActive: boolean): void;
-    setCloseButtonVisibility(visible: boolean): void;
-    registerCloseListener(listener: (evt: Event) => void): void;
-    private _getPlacementClass;
+    show(): void;
+    hide(): Promise<void>;
+    addCloseListener(listener: EventListener): void;
+    removeCloseListener(listener: EventListener): void;
+    addActionListener(listener: EventListener): void;
+    removeActionListener(listener: EventListener): void;
+    setDismissLabel(label: string): void;
+    setActionText(text: string): void;
 }

package/esm/toast/toast-adapter.js

@@ -3,144 +3,47 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, isString, removeAllChildren, removeClass, removeElement, toggleElementPlaceholder } from '@tylertech/forge-core';
+import { getShadowElement, playKeyframeAnimation } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { OVERLAY_CONSTANTS } from '../overlay';
 import { TOAST_CONSTANTS } from './toast-constants';
-/**
- * The DOM adapter for the `ToastComponent` web component.
- */
 export class ToastAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._containerElement = getShadowElement(component, TOAST_CONSTANTS.selectors.CONTAINER);
-        this._messageElement = getShadowElement(component, TOAST_CONSTANTS.selectors.MESSAGE);
+        this._overlayElement = getShadowElement(component, OVERLAY_CONSTANTS.elementName);
+        this._surfaceElement = getShadowElement(component, TOAST_CONSTANTS.selectors.SURFACE);
         this._actionButtonElement = getShadowElement(component, TOAST_CONSTANTS.selectors.ACTION_BUTTON);
         this._closeButtonElement = getShadowElement(component, TOAST_CONSTANTS.selectors.CLOSE_BUTTON);
     }
-    /**
-     * Sets an attribute on the host element.
-     * @param name The attribute name.
-     * @param value The attribute value.
-     */
-    setHostAttribute(name, value) {
-        if (this._component.getAttribute(name) !== value) {
-            this._component.setAttribute(name, value);
-        }
+    show() {
+        this._overlayElement.open = true;
     }
-    /**
-     * Sets the message text on the toast element.
-     * @param value The message text.
-     */
-    setMessage(value) {
-        this._messageElement.innerText = value;
+    async hide() {
+        await playKeyframeAnimation(this._surfaceElement, TOAST_CONSTANTS.classes.EXITING);
+        this._overlayElement.open = false;
     }
-    /**
-     * Sets a custom template on the message element.
-     * @param tpl The message template.
-     */
-    setMessageTemplate(tpl) {
-        this._containerElement.classList.add(TOAST_CONSTANTS.classes.CUSTOM);
-        if (isString(tpl)) {
-            this._component.innerHTML = tpl;
-        }
-        else {
-            removeAllChildren(this._messageElement);
-            this._component.appendChild(tpl);
-        }
-    }
-    /**
-     * Toggles the visibility of the action button element.
-     * @param isVisible The visibility.
-     */
-    setActionVisibility(isVisible) {
-        this._actionButtonPlaceholder = toggleElementPlaceholder(this._component, isVisible, TOAST_CONSTANTS.elementName, TOAST_CONSTANTS.selectors.ACTION_BUTTON, this._actionButtonElement, this._actionButtonPlaceholder);
+    addCloseListener(listener) {
+        this._closeButtonElement.addEventListener('click', listener);
     }
-    /**
-     * Sets the action button text.
-     * @param message The message text.
-     */
-    setActionText(message) {
-        this._actionButtonElement.innerText = message;
+    removeCloseListener(listener) {
+        this._closeButtonElement.removeEventListener('click', listener);
     }
-    /**
-     * Adds an event listener to the action button element.
-     * @param type The event type.
-     * @param listener The event listener.
-     */
-    registerActionListener(type, listener) {
-        this._actionButtonElement.addEventListener(type, listener);
+    addActionListener(listener) {
+        this._actionButtonElement.addEventListener('click', listener);
     }
-    /**
-     * Removes an event listener from the action button.
-     * @param type The event type.
-     * @param listener The event listener.
-     */
-    deregisterActionListener(type, listener) {
-        this._actionButtonElement.removeEventListener(type, listener);
+    removeActionListener(listener) {
+        this._actionButtonElement.removeEventListener('click', listener);
     }
-    /**
-     * Adjusts the class applied to the toast container to position it properly.
-     * @param placement The screen placement position.
-     */
-    setPlacement(placement) {
-        removeClass([
-            TOAST_CONSTANTS.classes.TOP,
-            TOAST_CONSTANTS.classes.TOP_LEFT,
-            TOAST_CONSTANTS.classes.TOP_RIGHT,
-            TOAST_CONSTANTS.classes.BOTTOM,
-            TOAST_CONSTANTS.classes.BOTTOM_LEFT,
-            TOAST_CONSTANTS.classes.BOTTOM_RIGHT
-        ], this._containerElement);
-        const placementClass = this._getPlacementClass(placement);
-        if (placementClass) {
-            this._containerElement.classList.add(placementClass);
-        }
+    setDismissLabel(label) {
+        this._closeButtonElement.setAttribute('aria-label', label);
     }
-    /**
-     * Triggers the addition of classes to the container element to hide or show the toast using CSS transitions.
-     * @param isActive Active or not.
-     */
-    setActive(isActive) {
-        if (isActive) {
-            // We need to force a reflow here to make sure that our new transform gets applied by the active class
-            window.getComputedStyle(this._containerElement).getPropertyValue('bottom');
-            this._containerElement.classList.add(TOAST_CONSTANTS.classes.ACTIVE);
+    setActionText(text) {
+        this._actionButtonElement.textContent = text;
+        if (!!text) {
+            this._actionButtonElement.removeAttribute('hidden');
         }
         else {
-            this._containerElement.classList.remove(TOAST_CONSTANTS.classes.ACTIVE);
-            const animationCompletedListener = () => {
-                this._containerElement.removeEventListener('transitionend', animationCompletedListener);
-                removeElement(this._component);
-            };
-            this._containerElement.addEventListener('transitionend', animationCompletedListener);
-        }
-    }
-    setCloseButtonVisibility(visible) {
-        if (visible) {
-            this._closeButtonElement.style.removeProperty('display');
-        }
-        else {
-            this._closeButtonElement.style.display = 'none';
-        }
-    }
-    registerCloseListener(listener) {
-        this._closeButtonElement.addEventListener('click', listener);
-    }
-    _getPlacementClass(placement) {
-        switch (placement) {
-            case 'top':
-                return TOAST_CONSTANTS.classes.TOP;
-            case 'top-start':
-                return TOAST_CONSTANTS.classes.TOP_LEFT;
-            case 'top-end':
-                return TOAST_CONSTANTS.classes.TOP_RIGHT;
-            case 'bottom':
-                return TOAST_CONSTANTS.classes.BOTTOM;
-            case 'bottom-start':
-                return TOAST_CONSTANTS.classes.BOTTOM_LEFT;
-            case 'bottom-end':
-                return TOAST_CONSTANTS.classes.BOTTOM_RIGHT;
+            this._actionButtonElement.setAttribute('hidden', '');
         }
-        return null;
     }
 }

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

@@ -3,56 +3,45 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { PopupPlacement } from '../popup/popup-constants';
+import { Theme } from '../constants';
+import { PositionPlacement } from '../core/utils/position-utils';
 export declare const TOAST_CONSTANTS: {
     elementName: "forge-toast";
+    observedAttributes: {
+        OPEN: string;
+        DURATION: string;
+        PLACEMENT: string;
+        ACTION_TEXT: string;
+        DISMISSIBLE: string;
+        DISMISS_LABEL: string;
+        THEME: string;
+    };
+    attributes: {
+        OPEN: string;
+        DURATION: string;
+        PLACEMENT: string;
+        ACTION_TEXT: string;
+        DISMISSIBLE: string;
+        DISMISS_LABEL: string;
+        THEME: string;
+    };
     classes: {
-        CONTAINER: string;
-        MESSAGE: string;
-        ACTION_BUTTON: string;
-        CLOSE_BUTTON: string;
-        TOP: string;
-        TOP_LEFT: string;
-        TOP_RIGHT: string;
-        BOTTOM: string;
-        BOTTOM_LEFT: string;
-        BOTTOM_RIGHT: string;
-        ACTIVE: string;
-        CUSTOM: string;
+        EXITING: string;
     };
     selectors: {
-        CONTAINER: string;
-        MESSAGE: string;
+        SURFACE: string;
         ACTION_BUTTON: string;
         CLOSE_BUTTON: string;
     };
-    attributes: {
-        MESSAGE: string;
-        ACTION_TEXT: string;
-        DURATION: string;
-        PLACEMENT: string;
-        SHOW_CLOSE: string;
-    };
     defaults: {
         PLACEMENT: import("@floating-ui/utils").Placement;
         DURATION: number;
+        THEME: ToastTheme;
     };
     events: {
         ACTION: string;
         CLOSE: string;
     };
-    customCssPositionProperties: {
-        TOP_MARGIN_TOP: string;
-        BOTTOM_MARGIN_BOTTOM: string;
-        TOP_LEFT_MARGIN_TOP: string;
-        TOP_LEFT_MARGIN_LEFT: string;
-        TOP_RIGHT_MARGIN_TOP: string;
-        TOP_RIGHT_MARGIN_RIGHT: string;
-        BOTTOM_LEFT_MARGIN_BOTTOM: string;
-        BOTTOM_LEFT_MARGIN_LEFT: string;
-        BOTTOM_RIGHT_MARGIN_RIGHT: string;
-        BOTTOM_RIGHT_MARGIN_BOTTOM: string;
-    };
 };
-export type ToastBuilder = () => HTMLElement | string;
-export type ToastPlacement = PopupPlacement;
+export type ToastPlacement = PositionPlacement;
+export type ToastTheme = 'default' | Theme;

package/esm/toast/toast-constants.js

@@ -5,59 +5,39 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}toast`;
-const customCssPositionProperties = {
-    TOP_MARGIN_TOP: '--forge-toast-top-margin-top',
-    BOTTOM_MARGIN_BOTTOM: '--forge-toast-bottom-margin-bottom',
-    TOP_LEFT_MARGIN_TOP: '--forge-toast-top-left-margin-top',
-    TOP_LEFT_MARGIN_LEFT: '--forge-toast-top-left-margin-left',
-    TOP_RIGHT_MARGIN_TOP: '--forge-toast-top-right-margin-top',
-    TOP_RIGHT_MARGIN_RIGHT: '--forge-toast-top-right-margin-right',
-    BOTTOM_LEFT_MARGIN_BOTTOM: '--forge-toast-bottom-left-margin-bottom',
-    BOTTOM_LEFT_MARGIN_LEFT: '--forge-toast-bottom-left-margin-left',
-    BOTTOM_RIGHT_MARGIN_RIGHT: '--forge-toast-bottom-right-margin-right',
-    BOTTOM_RIGHT_MARGIN_BOTTOM: '--forge-toast-bottom-right-margin-bottom'
-};
-const classes = {
-    CONTAINER: 'forge-toast__container',
-    MESSAGE: 'forge-toast__message',
-    ACTION_BUTTON: 'forge-toast__action-button',
-    CLOSE_BUTTON: 'forge-toast__close-button',
-    TOP: 'forge-toast__container--top',
-    TOP_LEFT: 'forge-toast__container--top-left',
-    TOP_RIGHT: 'forge-toast__container--top-right',
-    BOTTOM: 'forge-toast__container--bottom',
-    BOTTOM_LEFT: 'forge-toast__container--bottom-left',
-    BOTTOM_RIGHT: 'forge-toast__container--bottom-right',
-    ACTIVE: 'forge-toast__container--active',
-    CUSTOM: 'forge-toast__container--custom'
-};
-const selectors = {
-    CONTAINER: `.${classes.CONTAINER}`,
-    MESSAGE: `.${classes.MESSAGE}`,
-    ACTION_BUTTON: `.${classes.ACTION_BUTTON}`,
-    CLOSE_BUTTON: `.${classes.CLOSE_BUTTON}`
-};
-const attributes = {
-    MESSAGE: 'message',
-    ACTION_TEXT: 'action-text',
+const observedAttributes = {
+    OPEN: 'open',
     DURATION: 'duration',
     PLACEMENT: 'placement',
-    SHOW_CLOSE: 'show-close'
+    ACTION_TEXT: 'action-text',
+    DISMISSIBLE: 'dismissible',
+    DISMISS_LABEL: 'dismiss-label',
+    THEME: 'theme'
 };
+const attributes = Object.assign({}, observedAttributes);
 const events = {
     ACTION: `${elementName}-action`,
     CLOSE: `${elementName}-close`
 };
+const classes = {
+    EXITING: 'exiting'
+};
+const selectors = {
+    SURFACE: '.surface',
+    ACTION_BUTTON: '.action-button',
+    CLOSE_BUTTON: '.close-button'
+};
 const defaults = {
     PLACEMENT: 'bottom',
-    DURATION: 2750
+    DURATION: 2750,
+    THEME: 'default'
 };
 export const TOAST_CONSTANTS = {
     elementName,
+    observedAttributes,
+    attributes,
     classes,
     selectors,
-    attributes,
     defaults,
-    events,
-    customCssPositionProperties
+    events
 };

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);
 }