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

package/esm/overlay/overlay.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { OverlayLightDismissEventData, overlayStack } from './overlay-constants';
+import { OverlayFoundation } from './overlay-foundation';
+import { BaseOverlay, IBaseOverlay } from './base/base-overlay';
+export interface IOverlayComponent extends IBaseOverlay {
+    arrowElement: HTMLElement | undefined;
+    arrowElementOffset: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-overlay': IOverlayComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-overlay-light-dismiss': CustomEvent<OverlayLightDismissEventData>;
+    }
+}
+/**
+ * @tag forge-overlay
+ *
+ * @summary Overlays are used to render content in an element that rendered above all content on the page,
+ * and positioned around a specified anchor element.
+ *
+ * @description
+ * An overlay is a low-level building block component that does not provide any visual styles. Its only
+ * purpose is to render slotted content above all other content on the page. The element is positioned
+ * around an anchor element with various positioning options.
+ *
+ * @property {boolean} open - Whether or not the overlay is open.
+ * @property {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @property {HTMLElement} anchorElement - The element to anchor the overlay to.
+ * @property {HTMLElement} anchor - The id of the element to anchor the overlay to.
+ * @property {boolean} noAnchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @property {HTMLElement} arrowElement - The element to use as the arrow for the overlay.
+ * @property {number} arrowElementOffset - The offset to apply to the arrow element.
+ * @property {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
+ * @property {OverlayPositionStrategy} positionStrategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
+ * @property {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @property {OverlayHideState} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @property {OverlayFlipState} flip - Whether or not the overlay should flip to the opposite placement when not enough room.
+ * @property {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @property {HTMLElement | null} boundaryElement - The element to use as the boundary for the overlay.
+ * @property {OverlayPlacement[]} fallbackPlacements - The fallback placements to use when the overlay cannot be placed in the desired placement.
+ *
+ * @attribute {string} anchor - The id of the element to anchor the overlay to.
+ * @attribute {string} no-anchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @attribute {string} open - Whether or not the overlay is open.
+ * @attribute {string} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @attribute {string} placement - The placement of the overlay relative to the anchor element.
+ * @attribute {string} position-strategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @attribute {string} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @attribute {string} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @attribute {string} no-flip - Tells the overlay not to flip to the opposite placement when not enough room.
+ * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
+ * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @attribute {string} fallback-placements - The fallback placements to use when the overlay cannot be placed in the desired placement. Should be a comma separated list of placements.
+ *
+ * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-light-dismiss - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.
+ *
+ * @cssproperty --forge-overlay-position - The `position` of the overlay.
+ * @cssproperty --forge-overlay-z-index - The `z-index` of the overlay. Defaults to the `popup` range.
+ * @cssproperty --forge-overlay-height - The `height` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-width - The `width` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-position-block-start - The `block-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-block-end - The `block-end` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-start - The `inline-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-end - The `inline-end` position of the overlay.
+ *
+ * @slot - The content to render inside the positioned overlay container.
+ *
+ * @csspart root - The component's root element.
+ */
+export declare class OverlayComponent extends BaseOverlay<OverlayFoundation> implements IOverlayComponent {
+    static get observedAttributes(): string[];
+    /**
+     * Contains all the overlays that are currently open.
+     */
+    static readonly [overlayStack]: Set<IOverlayComponent>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    arrowElement: HTMLElement;
+    arrowElementOffset: number;
+}

package/esm/overlay/overlay.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { OverlayAdapter } from './overlay-adapter';
+import { overlayStack, OVERLAY_CONSTANTS } from './overlay-constants';
+import { OverlayFoundation } from './overlay-foundation';
+import { BaseOverlay } from './base/base-overlay';
+const template = '<template><div class=\"forge-overlay\" part=\"root\"><slot></slot></div></template>';
+const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overlay{--_overlay-position:var(--forge-overlay-position, fixed);--_overlay-z-index:var(--forge-overlay-z-index, var(--forge-z-index-popup, 10));--_overlay-height:var(--forge-overlay-height, fit-content);--_overlay-width:var(--forge-overlay-width, fit-content);--_overlay-position-inline-start:var(--forge-overlay-position-inline-start, auto);--_overlay-position-inline-end:var(--forge-overlay-position-inline-end, auto);--_overlay-position-block-start:var(--forge-overlay-position-block-start, auto);--_overlay-position-block-end:var(--forge-overlay-position-block-end, auto)}.forge-overlay{display:none;-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_overlay-height);width:var(--_overlay-width);border-radius:inherit;position:var(--_overlay-position);top:0;left:0;z-index:var(--_overlay-z-index);background:inherit;color:inherit}:host([position-strategy=absolute]) .forge-overlay{--_overlay-position:var(--forge-overlay-position, absolute)}:host([open][inline]) .forge-overlay{display:block;padding:0;margin:0;border:none;overflow:visible;inset:unset}:host([open]) .forge-overlay:popover-open{display:block;padding:0;margin:0;border:none;overflow:visible;inset:unset}:host([open][no-anchor]) .forge-overlay:popover-open{inset:0;margin:auto;-webkit-margin-start:var(--_overlay-position-inline-start);margin-inline-start:var(--_overlay-position-inline-start);-webkit-margin-end:var(--_overlay-position-inline-end);margin-inline-end:var(--_overlay-position-inline-end);-webkit-margin-before:var(--_overlay-position-block-start);margin-block-start:var(--_overlay-position-block-start);-webkit-margin-after:var(--_overlay-position-block-end);margin-block-end:var(--_overlay-position-block-end)}';
+/**
+ * @tag forge-overlay
+ *
+ * @summary Overlays are used to render content in an element that rendered above all content on the page,
+ * and positioned around a specified anchor element.
+ *
+ * @description
+ * An overlay is a low-level building block component that does not provide any visual styles. Its only
+ * purpose is to render slotted content above all other content on the page. The element is positioned
+ * around an anchor element with various positioning options.
+ *
+ * @property {boolean} open - Whether or not the overlay is open.
+ * @property {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @property {HTMLElement} anchorElement - The element to anchor the overlay to.
+ * @property {HTMLElement} anchor - The id of the element to anchor the overlay to.
+ * @property {boolean} noAnchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @property {HTMLElement} arrowElement - The element to use as the arrow for the overlay.
+ * @property {number} arrowElementOffset - The offset to apply to the arrow element.
+ * @property {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
+ * @property {OverlayPositionStrategy} positionStrategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
+ * @property {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @property {OverlayHideState} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @property {OverlayFlipState} flip - Whether or not the overlay should flip to the opposite placement when not enough room.
+ * @property {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @property {HTMLElement | null} boundaryElement - The element to use as the boundary for the overlay.
+ * @property {OverlayPlacement[]} fallbackPlacements - The fallback placements to use when the overlay cannot be placed in the desired placement.
+ *
+ * @attribute {string} anchor - The id of the element to anchor the overlay to.
+ * @attribute {string} no-anchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @attribute {string} open - Whether or not the overlay is open.
+ * @attribute {string} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @attribute {string} placement - The placement of the overlay relative to the anchor element.
+ * @attribute {string} position-strategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @attribute {string} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @attribute {string} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @attribute {string} no-flip - Tells the overlay not to flip to the opposite placement when not enough room.
+ * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
+ * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @attribute {string} fallback-placements - The fallback placements to use when the overlay cannot be placed in the desired placement. Should be a comma separated list of placements.
+ *
+ * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-light-dismiss - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.
+ *
+ * @cssproperty --forge-overlay-position - The `position` of the overlay.
+ * @cssproperty --forge-overlay-z-index - The `z-index` of the overlay. Defaults to the `popup` range.
+ * @cssproperty --forge-overlay-height - The `height` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-width - The `width` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-position-block-start - The `block-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-block-end - The `block-end` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-start - The `inline-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-end - The `inline-end` position of the overlay.
+ *
+ * @slot - The content to render inside the positioned overlay container.
+ *
+ * @csspart root - The component's root element.
+ */
+let OverlayComponent = class OverlayComponent extends BaseOverlay {
+    static get observedAttributes() {
+        return Object.values(OVERLAY_CONSTANTS.observedAttributes);
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new OverlayFoundation(new OverlayAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+};
+_a = overlayStack;
+/**
+ * Contains all the overlays that are currently open.
+ */
+OverlayComponent[_a] = new Set();
+__decorate([
+    FoundationProperty()
+], OverlayComponent.prototype, "arrowElement", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayComponent.prototype, "arrowElementOffset", void 0);
+OverlayComponent = __decorate([
+    CustomElement({
+        name: OVERLAY_CONSTANTS.elementName
+    })
+], OverlayComponent);
+export { OverlayComponent };

package/esm/paginator/paginator.js

@@ -14,7 +14,7 @@ import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
 import { TooltipComponent } from '../tooltip';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></div></div></template>';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the last page</forge-tooltip></div></div></template>';
 const styles = '.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
  * @tag forge-paginator

package/esm/popover/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './popover-adapter';
+export * from './popover-constants';
+export * from './popover-foundation';
+export * from './popover';
+export declare function definePopoverComponent(): void;

package/esm/popover/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { PopoverComponent } from './popover';
+export * from './popover-adapter';
+export * from './popover-constants';
+export * from './popover-foundation';
+export * from './popover';
+export function definePopoverComponent() {
+    defineCustomElement(PopoverComponent);
+}

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IOverlayAwareAdapter, OverlayAwareAdapter } from '../overlay/base/overlay-aware-adapter';
+import { IPopoverComponent } from './popover';
+export interface IPopoverAdapter extends IOverlayAwareAdapter {
+    readonly hostElement: IPopoverComponent;
+    tryLocateAnchorElement(id: string | null): void;
+    addAnchorListener(type: string, listener: EventListener): void;
+    removeAnchorListener(type: string, listener: EventListener): void;
+    addSurfaceListener(type: string, listener: EventListener): void;
+    removeSurfaceListener(type: string, listener: EventListener): void;
+    setOverlayOpen(newState: boolean): void;
+    toggleArrow(value: boolean): void;
+    isChildElement(element: HTMLElement): boolean;
+    tryAutofocus(): void;
+    hasFocus(): boolean;
+    captureFocusedElement(): HTMLElement | null;
+}
+export declare class PopoverAdapter extends OverlayAwareAdapter<IPopoverComponent> implements IPopoverAdapter {
+    private _surfaceElement;
+    private _arrowElement;
+    constructor(component: IPopoverComponent);
+    protected _initializeOverlayElement(): void;
+    tryLocateAnchorElement(id: string | null): void;
+    addAnchorListener(type: string, listener: EventListener): void;
+    removeAnchorListener(type: string, listener: EventListener): void;
+    addSurfaceListener(type: string, listener: EventListener): void;
+    removeSurfaceListener(type: string, listener: EventListener): void;
+    setOverlayOpen(newState: boolean): void;
+    toggleArrow(value: boolean): void;
+    isChildElement(element: HTMLElement): boolean;
+    tryAutofocus(): void;
+    hasFocus(): boolean;
+    captureFocusedElement(): HTMLElement | null;
+    /**
+     * Attempts to find the anchor element by first checking for an element with the provided id, and if not found,
+     * then implicitly assumes the previous element sibling is the anchor.
+     *
+     * @param [id] - The id of the anchor element to locate.
+     * @returns The anchor element if found, otherwise null.
+     */
+    private _tryFindAnchorElement;
+}

package/esm/popover/popover-adapter.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { VirtualElement } from '../core/utils/position-utils';
+import { OVERLAY_CONSTANTS } from '../overlay';
+import { OverlayAwareAdapter } from '../overlay/base/overlay-aware-adapter';
+import { POPOVER_CONSTANTS } from './popover-constants';
+export class PopoverAdapter extends OverlayAwareAdapter {
+    constructor(component) {
+        super(component);
+        this._surfaceElement = getShadowElement(this._component, POPOVER_CONSTANTS.selectors.SURFACE);
+    }
+    _initializeOverlayElement() {
+        this._overlayElement = getShadowElement(this._component, OVERLAY_CONSTANTS.elementName);
+    }
+    tryLocateAnchorElement(id) {
+        this._overlayElement.anchorElement = this._tryFindAnchorElement(id);
+    }
+    addAnchorListener(type, listener) {
+        var _a;
+        if (this._overlayElement.anchorElement instanceof VirtualElement) {
+            return;
+        }
+        (_a = this._overlayElement.anchorElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+    }
+    removeAnchorListener(type, listener) {
+        var _a;
+        if (this._overlayElement.anchorElement instanceof VirtualElement) {
+            return;
+        }
+        (_a = this._overlayElement.anchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+    }
+    addSurfaceListener(type, listener) {
+        this._surfaceElement.addEventListener(type, listener);
+    }
+    removeSurfaceListener(type, listener) {
+        this._surfaceElement.removeEventListener(type, listener);
+    }
+    setOverlayOpen(newState) {
+        this._overlayElement.open = newState;
+    }
+    toggleArrow(value) {
+        var _a;
+        if (value) {
+            if (!this._arrowElement) {
+                this._arrowElement = document.createElement('div');
+                this._arrowElement.classList.add(POPOVER_CONSTANTS.classes.ARROW);
+                this._arrowElement.setAttribute('part', POPOVER_CONSTANTS.parts.ARROW);
+            }
+            this._surfaceElement.appendChild(this._arrowElement);
+            this._overlayElement.arrowElement = this._arrowElement;
+        }
+        else {
+            (_a = this._arrowElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this._arrowElement = undefined;
+            this._overlayElement.arrowElement = undefined;
+        }
+    }
+    isChildElement(element) {
+        return this._component.contains(element);
+    }
+    tryAutofocus() {
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                if (this._component.open && this._overlayElement.isConnected && !this._component.matches(':focus-within')) {
+                    const autofocusElement = this._component.querySelector('[autofocus]');
+                    if (autofocusElement) {
+                        autofocusElement.focus();
+                    }
+                }
+            });
+        });
+    }
+    hasFocus() {
+        return this._component.matches(':focus-within');
+    }
+    captureFocusedElement() {
+        return this._component.ownerDocument.activeElement;
+    }
+    /**
+     * Attempts to find the anchor element by first checking for an element with the provided id, and if not found,
+     * then implicitly assumes the previous element sibling is the anchor.
+     *
+     * @param [id] - The id of the anchor element to locate.
+     * @returns The anchor element if found, otherwise null.
+     */
+    _tryFindAnchorElement(id) {
+        if (id) {
+            // First we attempt to locate the target element based on the id reference provided
+            const rootNode = this._component.getRootNode();
+            const targetEl = rootNode.querySelector(`#${id}`);
+            if (targetEl) {
+                return targetEl;
+            }
+        }
+        // If still not found, we'll implicitly assume the previous element sibling is our anchor
+        if (this._component.previousElementSibling) {
+            return this._component.previousElementSibling;
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { OverlayLightDismissReason } from '../overlay';
+export declare const POPOVER_CONSTANTS: {
+    elementName: string;
+    attributes: {
+        OPEN: string;
+        ARROW: string;
+        ANIMATION_TYPE: string;
+        TRIGGER_TYPE: string;
+        LONGPRESS_DELAY: string;
+        PERSISTENT_HOVER: string;
+        HOVER_DISMISS_DELAY: string;
+    };
+    classes: {
+        ARROW: string;
+    };
+    selectors: {
+        SURFACE: string;
+    };
+    parts: {
+        ARROW: string;
+    };
+    events: {
+        BEFORETOGGLE: string;
+        TOGGLE: string;
+    };
+    defaults: {
+        TRIGGER_TYPE: PopoverTriggerType;
+    };
+};
+export declare const POPOVER_HOVER_TIMEOUT = 500;
+export type PopoverAnimationType = 'none' | 'zoom' | 'slide' | 'fade';
+export type PopoverTriggerType = 'click' | 'hover' | 'focus' | 'longpress' | 'doubleclick' | 'contextmenu' | 'manual';
+export type PopoverDismissReason = OverlayLightDismissReason | PopoverTriggerType | 'destroy';
+export interface IPopoverToggleEventData {
+    newState: 'closed' | 'open';
+    oldState: 'closed' | 'open';
+}

package/esm/popover/popover-constants.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}popover`;
+const attributes = {
+    OPEN: 'open',
+    ARROW: 'arrow',
+    ANIMATION_TYPE: 'animation-type',
+    TRIGGER_TYPE: 'trigger-type',
+    LONGPRESS_DELAY: 'longpress-delay',
+    PERSISTENT_HOVER: 'persistent-hover',
+    HOVER_DISMISS_DELAY: 'hover-dismiss-delay'
+};
+const classes = {
+    ARROW: 'arrow'
+};
+const selectors = {
+    SURFACE: '.forge-popover'
+};
+const parts = {
+    ARROW: 'arrow'
+};
+const events = {
+    BEFORETOGGLE: `${elementName}-beforetoggle`,
+    TOGGLE: `${elementName}-toggle`
+};
+const defaults = {
+    TRIGGER_TYPE: 'click'
+};
+export const POPOVER_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors,
+    parts,
+    events,
+    defaults
+};
+export const POPOVER_HOVER_TIMEOUT = 500;

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

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IOverlayAwareFoundation, OverlayAwareFoundation } from '../overlay/base/overlay-aware-foundation';
+import { OverlayLightDismissEventData } from '../overlay/overlay-constants';
+import { IPopoverAdapter } from './popover-adapter';
+import { PopoverAnimationType, PopoverTriggerType } from './popover-constants';
+import { IDismissibleStackState } from '../core/utils/dismissible-stack';
+import { VirtualElement } from '../core/utils/position-utils';
+export interface IPopoverFoundation extends IOverlayAwareFoundation {
+    arrow: boolean;
+    animationType: PopoverAnimationType;
+    triggerType: PopoverTriggerType | PopoverTriggerType[];
+    longpressDelay: number;
+    persistentHover: boolean;
+    hoverDismissDelay: number;
+    dispatchBeforeToggleEvent(state: IDismissibleStackState): boolean;
+}
+declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/interactions/longpress/with-longpress-listener").WithLongpressListenerContract> & (abstract new (_adapter: IPopoverAdapter) => OverlayAwareFoundation<IPopoverAdapter>);
+export declare class PopoverFoundation extends BaseClass implements IPopoverFoundation {
+    private _anchor;
+    private _arrow;
+    private _animationType;
+    private _triggerTypes;
+    private _persistentHover;
+    private _hoverDismissDelay;
+    private _previouslyFocusedElement;
+    private _hoverAnchorLeaveTimeout;
+    private _popoverMouseleaveTimeout;
+    private _currentHoverCoords;
+    private _anchorClickListener;
+    private _anchorDoubleClickListener;
+    private _anchorMouseenterListener;
+    private _anchorMouseleaveListener;
+    private _popoverMouseenterListener;
+    private _popoverMouseleaveListener;
+    private _mousemoveListener;
+    private _anchorFocusListener;
+    private _anchorBlurListener;
+    private _popoverBlurListener;
+    private _contextmenuListener;
+    constructor(adapter: IPopoverAdapter);
+    initialize(): void;
+    destroy(): void;
+    protected _onOverlayLightDismiss(evt: CustomEvent<OverlayLightDismissEventData>): Promise<void>;
+    dispatchBeforeToggleEvent({ reason }: IDismissibleStackState): boolean;
+    private _openPopover;
+    private _closePopover;
+    private _dispatchBeforetoggleEvent;
+    private _dispatchToggleEvent;
+    private _initializeTriggerListeners;
+    private _removeTriggerListeners;
+    private _startHoverListeners;
+    private _tryRemoveHoverListeners;
+    private _requestDismiss;
+    private _requestClose;
+    private _onHoverClose;
+    /**
+     * Handles `click` events on the anchor element.
+     *
+     * Only called when using the "click" (default) trigger type.
+     */
+    private _onAnchorClick;
+    /**
+     * Handles `dblclick` events on the anchor element.
+     */
+    private _onAnchorDoubleClick;
+    /**
+     * Handles `mouseenter` events on the anchor element. This is used to determine if the popover should be opened.
+     *
+     * Only called when using the "hover" trigger type.
+     */
+    private _onAnchorMouseenter;
+    /**
+     * Handles `mouseleave` events on the anchor element. This is used to determine if the popover should be closed.
+     *
+     * Only called when using the "hover" trigger type.
+     *
+     * We use a timeout here to allow for the user to take an indirect path toward the popover.
+     */
+    private _onAnchorMouseleave;
+    /**
+     * Handles `mouseenter` events on the popover element. This is used to determine if the mouse has entered the popover element,
+     * only after the mouse leaves the anchor element..
+     */
+    private _onPopoverMouseenter;
+    /**
+     * Handles `mouseleave` events on the popover element. This is used to determine if the mouse has moved outside of the popover.
+     *
+     * Only called when using the "hover" trigger type.
+     *
+     * We use a timeout here to allow for the user to take an indirect path toward an open child menu.
+     * This allows for the popup to stay open while the user is moving their mouse to it to avoid closing immediately.
+     */
+    private _onPopoverMouseleave;
+    /**
+     * Handles `mousemove` events on the document. This is used to determine if the mouse has moved outside of the popover.
+     *
+     * This listener is only initialized once the mouse leaves the anchor element.
+     *
+     * Only called when using the "hover" trigger type.
+     */
+    private _onMousemove;
+    /**
+     * Handles `focusin` events on the anchor element. This is used to determine if focus has been received on the anchor element when using the "focus" trigger type.
+     */
+    private _onAnchorFocus;
+    /**
+     * Handles `focusout` events on the anchor element. This is used to determine if focus has been moved outside of the anchor element when using the "focus" trigger type.
+     */
+    private _onAnchorBlur;
+    private _onPopoverBlur;
+    protected _onLongpress(): void;
+    private _onContextmenu;
+    /**
+     * Public API
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    get anchorElement(): HTMLElement | VirtualElement | null;
+    set anchorElement(value: HTMLElement | VirtualElement | null);
+    get anchor(): string | null;
+    set anchor(value: string | null);
+    get arrow(): boolean;
+    set arrow(value: boolean);
+    get animationType(): PopoverAnimationType;
+    set animationType(value: PopoverAnimationType);
+    get triggerType(): PopoverTriggerType | PopoverTriggerType[];
+    set triggerType(value: PopoverTriggerType | PopoverTriggerType[]);
+    get longpressDelay(): number;
+    set longpressDelay(value: number);
+    get persistentHover(): boolean;
+    set persistentHover(value: boolean);
+    get hoverDismissDelay(): number;
+    set hoverDismissDelay(value: number);
+}
+export {};