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

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