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

package/esm/app-bar/profile-button/app-bar-profile-button-foundation.js

@@ -17,11 +17,11 @@ export class AppBarProfileButtonFoundation {
         this._profileButtonText = PROFILE_CARD_CONSTANTS.defaults.PROFILE_BUTTON_TEXT;
         this._open = false;
         this._isInitialized = false;
-        this._clickListener = evt => this._onClick(evt);
-        this._dismissListener = () => this._onDismiss();
-        this._keydownListener = evt => this._onKeydown(evt);
-        this._profileButtonListener = () => this._onProfileButtonClick();
-        this._signOutButtonListener = () => this._onSignOutButtonClick();
+        this._clickListener = this._onClick.bind(this);
+        this._dismissListener = this._onDismiss.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
+        this._profileButtonListener = this._onProfileButtonClick.bind(this);
+        this._signOutButtonListener = this._onSignOutButtonClick.bind(this);
     }
     initialize() {
         this._adapter.initialize();
@@ -33,7 +33,7 @@ export class AppBarProfileButtonFoundation {
         this._isInitialized = true;
     }
     destroy() {
-        this._adapter.removeWindowListener('keydown', this._keydownListener);
+        this._adapter.removeDocumentListener('keydown', this._keydownListener);
         this._adapter.removeClickListener(this._clickListener);
         this._adapter.destroy();
         this._isInitialized = false;
@@ -49,21 +49,19 @@ export class AppBarProfileButtonFoundation {
     _onKeydown(evt) {
         if (evt.key === 'Escape') {
             this._closeDropdown();
-            this._adapter.requestFocus();
+            this._adapter.focusButtonElement();
         }
     }
     _onDismiss() {
         this._closeDropdown();
     }
     _onProfileButtonClick() {
-        this._adapter.emitHostEvent(PROFILE_CARD_CONSTANTS.events.PROFILE);
+        this._adapter.dispatchHostEvent(new CustomEvent(PROFILE_CARD_CONSTANTS.events.PROFILE, { bubbles: true, composed: true }));
         this._closeDropdown();
-        this._adapter.requestFocus();
     }
     _onSignOutButtonClick() {
-        this._adapter.emitHostEvent(PROFILE_CARD_CONSTANTS.events.SIGN_OUT);
+        this._adapter.dispatchHostEvent(new CustomEvent(PROFILE_CARD_CONSTANTS.events.SIGN_OUT, { bubbles: true, composed: true }));
         this._closeDropdown();
-        this._adapter.requestFocus();
     }
     _openDropdown() {
         /* c8 ignore next 3 */
@@ -84,13 +82,9 @@ export class AppBarProfileButtonFoundation {
         };
         const profileCardContent = this._profileCardBuilder ? this._profileCardBuilder() : undefined;
         this._cancelDismissListener = this._adapter.openPopup(profileCardConfig, this._dismissListener, this._profileButtonListener, this._signOutButtonListener, profileCardContent);
-        this._adapter.addWindowListener('keydown', this._keydownListener);
+        this._adapter.addDocumentListener('keydown', this._keydownListener);
         this._open = true;
         this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.OPEN, this._open);
-        // If we aren't showing the sign out or profile buttons then leave focus on our button
-        if (!profileCardConfig.signOut && !profileCardConfig.profile) {
-            this._adapter.requestFocus();
-        }
     }
     _closeDropdown() {
         /* c8 ignore next 3 */
@@ -102,7 +96,6 @@ export class AppBarProfileButtonFoundation {
             this._cancelDismissListener = undefined;
         }
         this._open = false;
-        this._adapter.removeWindowListener('keydown', this._keydownListener);
         this._adapter.closePopup();
         this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.OPEN, this._open);
     }
@@ -177,6 +170,7 @@ export class AppBarProfileButtonFoundation {
         return this._showSignOutButton;
     }
     set signOutButton(value) {
+        value = Boolean(value);
         if (this._showSignOutButton !== value) {
             this._showSignOutButton = value;
             this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.SIGN_OUT_BUTTON, this._showSignOutButton);
@@ -186,6 +180,7 @@ export class AppBarProfileButtonFoundation {
         return this._showProfileButton;
     }
     set profileButton(value) {
+        value = Boolean(value);
         if (this._showProfileButton !== value) {
             this._showProfileButton = value;
             this._adapter.toggleHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.PROFILE_BUTTON, this._showProfileButton);
@@ -213,6 +208,7 @@ export class AppBarProfileButtonFoundation {
         return this._open;
     }
     set open(value) {
+        value = Boolean(value);
         if (this._open !== value) {
             if (value) {
                 this._openDropdown();

package/esm/app-bar/profile-button/app-bar-profile-button.d.ts

@@ -4,8 +4,8 @@
  * License: Apache-2.0
  */
 import { AppBarProfileButtonProfileCardBuilder } from './app-bar-profile-button-constants';
-import { IPopupComponent } from '../../popup';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { IPopoverComponent } from '../../popover/popover';
 export interface IAppBarProfileButtonComponent extends IBaseComponent {
     avatarImageUrl: string;
     avatarLetterCount: number;
@@ -18,7 +18,7 @@ export interface IAppBarProfileButtonComponent extends IBaseComponent {
     signOutButtonText: string;
     profileButtonText: string;
     open: boolean;
-    popupElement: IPopupComponent | undefined;
+    popupElement: IPopoverComponent | undefined;
     profileCardBuilder: (fn: AppBarProfileButtonProfileCardBuilder) => void;
 }
 declare global {
@@ -40,7 +40,7 @@ declare global {
  * @property {string} signOutButtonText - The text to display in the sign out button.
  * @property {string} profileButtonText - The text to display in the profile button.
  * @property {boolean} open - Whether the profile card is open or not.
- * @property {IPopupComponent | undefined} popupElement - The popup element when open.
+ * @property {IPopoverComponent | undefined} popupElement - The popup element when open.
  * @property {AppBarProfileButtonProfileCardBuilder} profileCardBuilder - Sets the profile card builder callback that will be used to add extra content to the profile card.
  *
  * @attribute {string} [avatar-image-url] - The url of the avatar image to display.
@@ -76,7 +76,7 @@ export declare class AppBarProfileButtonComponent extends BaseComponent implemen
     signOutButtonText: string;
     profileButtonText: string;
     open: boolean;
-    get popupElement(): IPopupComponent | undefined;
+    get popupElement(): IPopoverComponent | undefined;
     /** Sets the profile card builder callback that will be used to add extra content to the profile card. */
     profileCardBuilder: AppBarProfileButtonProfileCardBuilder;
 }

package/esm/app-bar/profile-button/app-bar-profile-button.js

@@ -11,9 +11,9 @@ import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-const
 import { ProfileCardComponent } from '../../profile-card';
 import { IconButtonComponent } from '../../icon-button';
 import { AvatarComponent } from '../../avatar';
-import { PopupComponent } from '../../popup';
 import { TooltipComponent } from '../../tooltip';
 import { BaseComponent } from '../../core/base/base-component';
+import { PopoverComponent } from '../../popover/popover';
 const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\">View profile</forge-tooltip></template>';
 /**
  * @tag forge-app-bar-profile-button
@@ -29,7 +29,7 @@ const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\
  * @property {string} signOutButtonText - The text to display in the sign out button.
  * @property {string} profileButtonText - The text to display in the profile button.
  * @property {boolean} open - Whether the profile card is open or not.
- * @property {IPopupComponent | undefined} popupElement - The popup element when open.
+ * @property {IPopoverComponent | undefined} popupElement - The popup element when open.
  * @property {AppBarProfileButtonProfileCardBuilder} profileCardBuilder - Sets the profile card builder callback that will be used to add extra content to the profile card.
  *
  * @attribute {string} [avatar-image-url] - The url of the avatar image to display.
@@ -156,7 +156,7 @@ AppBarProfileButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_PROFILE_BUTTON_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             ProfileCardComponent,
             IconButtonComponent,
             AvatarComponent,

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

@@ -15,7 +15,9 @@ export interface IAutocompleteAdapter extends IBaseAdapter {
     initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
-    hide(listener: () => void): void;
+    hide(listener: () => void, options: {
+        destroy?: boolean;
+    }): Promise<void>;
     focus(): void;
     setOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
@@ -59,7 +61,9 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
-    hide(listener: () => void): void;
+    hide(listener: () => void, { destroy }?: {
+        destroy?: boolean | undefined;
+    }): Promise<void>;
     setBusyVisibility(isVisible: boolean): void;
     setDismissListener(listener: () => void): void;
     focus(): void;

package/esm/autocomplete/autocomplete-adapter.js

@@ -3,13 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
+import { deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
 import { TEXT_FIELD_CONSTANTS } from '../text-field';
 import { ListDropdown } from '../list-dropdown';
 import { CHIP_FIELD_CONSTANTS } from '../chip-field';
-import { POPUP_CONSTANTS } from '../popup';
+import { POPOVER_CONSTANTS } from '../popover';
 /**
  * The DOM adapter for the `<forge-autocomplete>` element.
  */
@@ -57,18 +57,26 @@ export class AutocompleteAdapter extends BaseAdapter {
         this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
         this._tryToggleDropdownIconRotation(true);
     }
-    hide(listener) {
+    async hide(listener, { destroy = false } = {}) {
+        var _a, _b, _c;
+        this.setBusyVisibility(false);
+        this._tryToggleDropdownIconRotation(false);
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-activedescendant');
+        (_b = this._inputElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-controls');
+        (_c = this._inputElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
         if (!this._listDropdown) {
             return;
         }
-        const { targetElement } = this._listDropdown.dropdownElement;
-        targetElement.removeEventListener(POPUP_CONSTANTS.events.BLUR, listener);
-        this.setBusyVisibility(false);
-        this._tryToggleDropdownIconRotation(false);
-        this._inputElement.removeAttribute('aria-activedescendant');
-        this._inputElement.removeAttribute('aria-controls');
-        this._inputElement.setAttribute('aria-expanded', 'false');
-        this._listDropdown.close();
+        const { anchorElement } = this._listDropdown.dropdownElement;
+        if (anchorElement && anchorElement instanceof HTMLElement) {
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
+        }
+        if (destroy) {
+            this._listDropdown.destroy();
+        }
+        else {
+            await this._listDropdown.close();
+        }
         this._listDropdown = undefined;
     }
     setBusyVisibility(isVisible) {
@@ -80,8 +88,8 @@ export class AutocompleteAdapter extends BaseAdapter {
             return;
         }
         const dropdownElement = this._listDropdown.dropdownElement;
-        if (dropdownElement.targetElement) {
-            dropdownElement.targetElement.addEventListener(POPUP_CONSTANTS.events.BLUR, listener);
+        if (dropdownElement.anchorElement && dropdownElement.anchorElement instanceof HTMLElement) {
+            dropdownElement.anchorElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
         }
     }
     focus() {
@@ -208,19 +216,15 @@ export class AutocompleteAdapter extends BaseAdapter {
         return selector ? this._component.querySelector(selector) || this._getDefaultTargetElement() : this._getDefaultTargetElement();
     }
     _getDefaultTargetElement() {
-        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignment
-        const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
+        const fieldElements = [
+            TEXT_FIELD_CONSTANTS.elementName,
+            CHIP_FIELD_CONSTANTS.elementName
+        ];
+        // This component is often used with the field-like Forge elements, if so, let's target our popup around one if its internal elements for proper alignment
+        const textField = this._component.querySelector(`:is(${fieldElements.join(',')})`);
         if (textField === null || textField === void 0 ? void 0 : textField.popoverTargetElement) {
             return textField.popoverTargetElement;
         }
-        // This component is often used with the chip-field, if so, let's target our popup around one if its internal elements for proper alignment
-        const chipField = this._component.querySelector(CHIP_FIELD_CONSTANTS.elementName);
-        if (chipField && chipField.shadowRoot) {
-            const chipFieldRoot = getShadowElement(chipField, CHIP_FIELD_CONSTANTS.selectors.ROOT);
-            if (chipFieldRoot) {
-                return chipFieldRoot;
-            }
-        }
         return this._component.querySelector('input') || this._component;
     }
     _tryToggleDropdownIconRotation(state) {

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

@@ -5,7 +5,7 @@
  */
 import { IListItemComponent } from '../list';
 import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup, ListDropdownOptionGroupBuilder } from '../list-dropdown';
-import { IPopupPosition } from '../popup';
+import { IOverlayOffset } from '../overlay/overlay-constants';
 export declare const AUTOCOMPLETE_CONSTANTS: {
     elementName: "forge-autocomplete";
     attributes: {
@@ -58,7 +58,7 @@ export interface IAutocompletePopupConfiguration {
     popupTarget: string;
     dropdownConfig: IListDropdownConfig;
     popupClasses: string[];
-    popupOffset: IPopupPosition;
+    popupOffset: IOverlayOffset;
     syncPopupWidth: boolean;
     listener: (value: string) => void;
     scrollEndListener: () => void;

package/esm/autocomplete/autocomplete-constants.js

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX, KEYSTROKE_DEBOUNCE_THRESHOLD } from '../constants';
-import { FIELD_CONSTANTS } from '../field/field-constants';
 const elementName = `${COMPONENT_NAME_PREFIX}autocomplete`;
 const attributes = {
     MODE: 'mode',
@@ -25,7 +24,7 @@ const attributes = {
     DROPDOWN_ICON_OPEN: 'data-forge-dropdown-icon-open'
 };
 const selectors = {
-    INPUT: FIELD_CONSTANTS.selectors.INPUT,
+    INPUT: 'input',
     DROPDOWN_ICON: '[data-forge-dropdown-icon],[data-forge-dropdown-icon],[forge-dropdown-icon],.forge-dropdown-icon',
     CLEAR_BUTTON: '[data-forge-autocomplete-clear],[forge-autocomplete-clear]'
 };

package/esm/autocomplete/autocomplete-foundation.js

@@ -70,9 +70,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             this._detachListeners();
             this._isInitialized = false;
         }
-        if (this._isDropdownOpen) {
-            this._closeDropdown();
-        }
+        this._closeDropdown({ destroy: true });
     }
     async forceFilter({ preserveValue }) {
         // Clear any existing options since they are expected to no longer be valid
@@ -413,12 +411,12 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             this._adapter.activateFirstOption();
         }
     }
-    _closeDropdown() {
+    _closeDropdown({ destroy = false } = {}) {
         if (this._multiple) {
             this._filterText = '';
         }
         this._isDropdownOpen = false;
-        this._adapter.hide(this._dismissListener);
+        this._adapter.hide(this._dismissListener, { destroy });
         this._sortSelectedOptions();
         this._adapter.toggleHostAttribute(AUTOCOMPLETE_CONSTANTS.attributes.OPEN, this._isDropdownOpen);
     }

package/esm/autocomplete/autocomplete.js

@@ -11,7 +11,7 @@ import { IconComponent, IconRegistry } from '../icon';
 import { LinearProgressComponent } from '../linear-progress';
 import { ListComponent, ListItemComponent } from '../list';
 import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover/popover';
 import { SkeletonComponent } from '../skeleton';
 import { TextFieldComponent } from '../text-field';
 import { AutocompleteAdapter } from './autocomplete-adapter';
@@ -172,7 +172,7 @@ AutocompleteComponent = __decorate([
         name: AUTOCOMPLETE_CONSTANTS.elementName,
         dependencies: [
             TextFieldComponent,
-            PopupComponent,
+            PopoverComponent,
             ListComponent,
             ListItemComponent,
             DividerComponent,

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

@@ -5,22 +5,19 @@
  */
 export declare const BACKDROP_CONSTANTS: {
     elementName: "forge-backdrop";
-    selectors: {
-        CONTAINER: string;
-    };
-    numbers: {
-        OPACITY: number;
-        DELAY: number;
-        TRANSITION_DURATION: number;
+    observedAttributes: {
+        VISIBLE: string;
+        FIXED: string;
     };
     attributes: {
-        DELAY: string;
-        MAX_OPACITY: string;
-        APPEARANCE: string;
+        VISIBLE: string;
         FIXED: string;
     };
-    events: {
-        BACKDROP_CLICK: string;
+    classes: {
+        ENTERING: string;
+        EXITING: string;
+    };
+    selectors: {
+        ROOT: string;
     };
 };
-export type BackdropAppearance = 'light' | 'dark' | undefined;

package/esm/backdrop/backdrop-constants.js

@@ -5,27 +5,22 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}backdrop`;
-const selectors = {
-    CONTAINER: '.forge-backdrop'
-};
-const numbers = {
-    OPACITY: 0.54,
-    DELAY: 0,
-    TRANSITION_DURATION: 150
-};
-const attributes = {
-    DELAY: 'delay',
-    MAX_OPACITY: 'max-opacity',
-    APPEARANCE: 'appearance',
+const observedAttributes = {
+    VISIBLE: 'visible',
     FIXED: 'fixed'
 };
-const events = {
-    BACKDROP_CLICK: `${elementName}-click`
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    ENTERING: 'entering',
+    EXITING: 'exiting'
+};
+const selectors = {
+    ROOT: '.forge-backdrop'
 };
 export const BACKDROP_CONSTANTS = {
     elementName,
-    selectors,
-    numbers,
+    observedAttributes,
     attributes,
-    events
+    classes,
+    selectors
 };

package/esm/backdrop/backdrop.d.ts

@@ -4,50 +4,38 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { BackdropAppearance } from './backdrop-constants';
-import { BackdropFoundation } from './backdrop-foundation';
 export interface IBackdropComponent extends IBaseComponent {
-    delay: number;
-    maxOpacity: number;
-    appearance: BackdropAppearance;
-    fadeOut(): Promise<void>;
+    visible: boolean;
+    fixed: boolean;
+    show(): void;
+    hide(): void;
     fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-backdrop': IBackdropComponent;
     }
-    interface HTMLElementEventMap {
-        'forge-backdrop-click': CustomEvent<void>;
-    }
 }
 /**
- * A web component that renders a backdrop covering its parent container with a semi-opaque element.
- *
  * @tag forge-backdrop
  */
 export declare class BackdropComponent extends BaseComponent {
     static get observedAttributes(): string[];
-    protected _foundation: BackdropFoundation;
+    private _visible;
+    private _fixed;
+    private _rootElement;
+    private _animationController;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /**
-     * The time in milliseconds to delay the fade in animation of the opacity.
-     * Note: The element will start with 0% opacity when the component is rendered.
-     */
-    delay: number;
-    /** Controls whether the theme defaults to light vs dark compatibility. */
-    appearance: BackdropAppearance;
-    /** The max opacity to fade the element to. This defines how opaque the backdrop is when visible. */
-    maxOpacity: number;
-    /**
-     * Starts the fade-out animation to animate the backdrop to 0% opacity.
-     */
-    fadeOut(): Promise<void>;
-    /**
-     * Starts the fade-in animation to animate the backdrop to max opacity.
-     */
+    private _applyVisibility;
+    show(): void;
+    hide(): void;
     fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
+    get visible(): boolean;
+    set visible(value: boolean);
+    get fixed(): boolean;
+    set fixed(value: boolean);
 }