@tylertech/forge 2.0.0

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IPopupComponent } from './popup';
+export interface IPopupAdapter extends IBaseAdapter {
+    setAttribute(attribute: string, value: string, element?: HTMLElement): void;
+    removeAttribute(attribute: string, element?: HTMLElement): void;
+    positionPopup(): void;
+    addPopup(targetElement: HTMLElement, manageFocus: boolean): void;
+    removePopup(manageFocus: boolean): void;
+    manageWindowEvents(add: boolean): void;
+    dispatchEvent(type: string, data?: any, bubbles?: boolean, cancellable?: boolean): boolean;
+    addClass(classes: string | string[]): void;
+    removeClass(classes: string | string[]): void;
+    setAnimationEndListener(listener: (evt: TransitionEvent) => void, classes?: string | string[]): void;
+    removeEventListener(type: string, listener: (evt: Event) => void): void;
+    setBlurListener(listener: () => void): () => void;
+    trySetInitialFocus(): void;
+}
+export declare class PopupAdapter extends BaseAdapter<IPopupComponent> implements IPopupAdapter {
+    private _windowEventCallback?;
+    private _previouslyFocusedElement?;
+    private _hostElement?;
+    private _rootElement;
+    constructor(component: IPopupComponent);
+    setAttribute(attribute: string, value: string, element?: HTMLElement): void;
+    removeAttribute(attribute: string, element?: HTMLElement): void;
+    positionPopup(): Promise<void>;
+    addPopup(targetElement: HTMLElement, manageFocus: boolean): void;
+    removePopup(manageFocus: boolean): void;
+    manageWindowEvents(add?: boolean): void;
+    dispatchEvent(type: string, data?: any, bubbles?: boolean, cancelable?: boolean): boolean;
+    addClass(classes: string | string[]): void;
+    removeClass(classes: string | string[]): void;
+    setAnimationEndListener(listener: (evt: TransitionEvent) => void, classes?: string | string[]): void;
+    removeEventListener(type: string, listener: (evt: Event) => void): void;
+    setBlurListener(listener: () => void): () => void;
+    trySetInitialFocus(): void;
+    private _windowInteraction;
+}

package/esm/popup/popup-adapter.js

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, closestElement, emitEvent, getShadowElement, notChildEventListener, positionElementAsync, removeClass, removeElement, deepQuerySelectorAll, getActiveElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { POPUP_CONSTANTS } from './popup-constants';
+export class PopupAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, POPUP_CONSTANTS.selectors.CONTAINER);
+    }
+    setAttribute(attribute, value, element) {
+        if (element) {
+            element.setAttribute(attribute, value);
+        }
+        else {
+            this._component.setAttribute(attribute, value);
+        }
+    }
+    removeAttribute(attribute, element) {
+        if (element) {
+            element.removeAttribute(attribute);
+        }
+        else {
+            this._component.removeAttribute(attribute);
+        }
+    }
+    async positionPopup() {
+        const config = {
+            element: this._component,
+            targetElement: this._component.targetElement,
+            placement: this._component.placement,
+            hide: this._component.hideWhenClipped
+        };
+        if (this._component.offset) {
+            config.offset = this._component.offset;
+        }
+        const data = await positionElementAsync(config);
+        emitEvent(this._component, POPUP_CONSTANTS.events.POSITION, data);
+    }
+    addPopup(targetElement, manageFocus) {
+        this._component.setAttribute('tabindex', '-1');
+        this._component.setAttribute(POPUP_CONSTANTS.attributes.HOST, '');
+        const hostDocument = targetElement.ownerDocument || document;
+        this._hostElement = closestElement(POPUP_CONSTANTS.selectors.HOST, targetElement) || hostDocument.body;
+        this._hostElement.appendChild(this._component);
+        this.positionPopup();
+        if (manageFocus) {
+            this._previouslyFocusedElement = getActiveElement();
+            this._component.focus();
+        }
+    }
+    removePopup(manageFocus) {
+        removeElement(this._component);
+        if (manageFocus) {
+            window.requestAnimationFrame(() => {
+                if (this._previouslyFocusedElement) {
+                    const activeElement = getActiveElement();
+                    if (!activeElement || activeElement === document.body) {
+                        this._previouslyFocusedElement.focus();
+                    }
+                    this._previouslyFocusedElement = undefined;
+                }
+            });
+        }
+        this._hostElement = undefined;
+    }
+    manageWindowEvents(add = false) {
+        if (add) {
+            this._windowEventCallback = evt => this._windowInteraction(evt);
+            window.addEventListener('scroll', this._windowEventCallback, true);
+            window.addEventListener('resize', this._windowEventCallback, true);
+        }
+        else {
+            if (this._windowEventCallback) {
+                window.removeEventListener('scroll', this._windowEventCallback, true);
+                window.removeEventListener('resize', this._windowEventCallback, true);
+                this._windowEventCallback = undefined;
+            }
+        }
+    }
+    dispatchEvent(type, data, bubbles, cancelable) {
+        if (this._component.targetElement) {
+            return !emitEvent(this._component.targetElement, type, data, bubbles, cancelable);
+        }
+        return false;
+    }
+    addClass(classes) {
+        addClass(classes, this._rootElement);
+    }
+    removeClass(classes) {
+        removeClass(classes, this._rootElement);
+    }
+    setAnimationEndListener(listener, classes) {
+        window.requestAnimationFrame(() => {
+            if (classes && classes.length) {
+                addClass(classes, this._rootElement);
+            }
+            this._rootElement.addEventListener('transitionend', listener);
+        });
+    }
+    removeEventListener(type, listener) {
+        this._rootElement.removeEventListener(type, listener);
+    }
+    setBlurListener(listener) {
+        return notChildEventListener(this._component, activeElement => {
+            if (!this._component.contains(activeElement)) {
+                listener();
+            }
+        }, true);
+    }
+    trySetInitialFocus() {
+        window.requestAnimationFrame(() => {
+            const elements = deepQuerySelectorAll(this._component, POPUP_CONSTANTS.selectors.INITIAL_FOCUS);
+            if (elements && elements.length) {
+                const initialElement = elements[elements.length - 1];
+                initialElement.focus();
+            }
+        });
+    }
+    _windowInteraction(evt) {
+        if (!this._component.open) {
+            return;
+        }
+        switch (evt.type) {
+            case 'scroll':
+            case 'resize':
+                this.positionPopup();
+                break;
+            default:
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { PositionPlacement } from '@tylertech/forge-core';
+export declare const POPUP_CONSTANTS: {
+    elementName: "forge-popup";
+    classes: {
+        OPEN: string;
+        OPENING: string;
+        CLOSED: string;
+        SELECT: string;
+    };
+    selectors: {
+        HOST: string;
+        CONTAINER: string;
+        INITIAL_FOCUS: string;
+    };
+    attributes: {
+        CONTAINER: string;
+        OPEN: string;
+        PLACEMENT: string;
+        MANAGE_FOCUS: string;
+        ANIMATION_TYPE: string;
+        STATIC: string;
+        HIDE_WHEN_CLIPPED: string;
+        HOST: string;
+        INITIAL_FOCUS: string;
+    };
+    events: {
+        OPEN: string;
+        CLOSE: string;
+        POSITION: string;
+        BLUR: string;
+    };
+    numbers: {
+        ANIMATION_DURATION: number;
+    };
+};
+export interface IPopupPosition {
+    x: number;
+    y: number;
+}
+export declare type PopupPlacement = PositionPlacement;
+export declare enum PopupAnimationType {
+    None = "none",
+    Menu = "menu",
+    Dropdown = "dropdown"
+}
+export interface IPopupPositionEventData extends IPopupPosition {
+    visibility: 'visible' | 'hidden';
+}
+export declare type PopupStateCallback = () => boolean | void | Promise<boolean | void>;

package/esm/popup/popup-constants.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}popup`;
+const attributes = {
+    CONTAINER: 'forge-popup',
+    OPEN: 'open',
+    PLACEMENT: 'placement',
+    MANAGE_FOCUS: 'manage-focus',
+    ANIMATION_TYPE: 'animation-type',
+    STATIC: 'static',
+    HIDE_WHEN_CLIPPED: 'hide-when-clipped',
+    HOST: 'forge-popup-host',
+    INITIAL_FOCUS: 'forge-popup-focus'
+};
+const classes = {
+    OPEN: 'forge-popup--open',
+    OPENING: 'forge-popup--opening',
+    CLOSED: 'forge-popup--closed',
+    SELECT: 'forge-popup--select'
+};
+const selectors = {
+    HOST: `.forge-popup-host, [${attributes.HOST}]`,
+    CONTAINER: '.forge-popup',
+    INITIAL_FOCUS: `[${attributes.INITIAL_FOCUS}]`
+};
+const events = {
+    OPEN: `${elementName}-open`,
+    CLOSE: `${elementName}-close`,
+    POSITION: `${elementName}-position`,
+    BLUR: `${elementName}-blur`
+};
+const numbers = {
+    ANIMATION_DURATION: 120
+};
+export const POPUP_CONSTANTS = {
+    elementName,
+    classes,
+    selectors,
+    attributes,
+    events,
+    numbers
+};
+export var PopupAnimationType;
+(function (PopupAnimationType) {
+    PopupAnimationType["None"] = "none";
+    PopupAnimationType["Menu"] = "menu";
+    PopupAnimationType["Dropdown"] = "dropdown";
+})(PopupAnimationType || (PopupAnimationType = {}));

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IPopupAdapter } from './popup-adapter';
+import { IPopupPosition, PopupAnimationType, PopupPlacement, PopupStateCallback } from './popup-constants';
+export interface IPopupFoundation extends ICustomElementFoundation {
+    targetElement: HTMLElement;
+    placement: PopupPlacement;
+    open: boolean;
+    manageFocus: boolean;
+    animationType: PopupAnimationType;
+    static: boolean;
+    offset: IPopupPosition;
+    hideWhenClipped: boolean;
+    position(): void;
+    openCallback: PopupStateCallback;
+    closeCallback: PopupStateCallback;
+}
+export declare class PopupFoundation implements IPopupFoundation {
+    private _adapter;
+    private _targetElement;
+    private _placement;
+    private _open;
+    private _manageFocus;
+    private _animationType;
+    private _static;
+    private _offset?;
+    private _hideWhenClipped;
+    private _destroyBlurListener;
+    private _openCallback;
+    private _closeCallback;
+    private _blurListener;
+    constructor(_adapter: IPopupAdapter);
+    disconnect(): void;
+    private _openPopup;
+    private _closePopup;
+    private _destroyPopup;
+    private _applyOpenAnimation;
+    private _applyCloseAnimation;
+    private _onBlur;
+    private _applyOpen;
+    private _executeOpenCallback;
+    private _executeCloseCallback;
+    get targetElement(): HTMLElement;
+    set targetElement(element: HTMLElement);
+    get placement(): PopupPlacement;
+    set placement(value: PopupPlacement);
+    get open(): boolean;
+    set open(value: boolean);
+    get manageFocus(): boolean;
+    set manageFocus(value: boolean);
+    get animationType(): PopupAnimationType;
+    set animationType(value: PopupAnimationType);
+    get static(): boolean;
+    set static(value: boolean);
+    get hideWhenClipped(): boolean;
+    set hideWhenClipped(value: boolean);
+    get offset(): IPopupPosition;
+    set offset(value: IPopupPosition);
+    get openCallback(): PopupStateCallback;
+    set openCallback(callback: PopupStateCallback);
+    get closeCallback(): PopupStateCallback;
+    set closeCallback(callback: PopupStateCallback);
+    position(): void;
+}

package/esm/popup/popup-foundation.js

@@ -0,0 +1,249 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isElement } from '@tylertech/forge-core';
+import { PopupAnimationType, POPUP_CONSTANTS as constants, POPUP_CONSTANTS } from './popup-constants';
+export class PopupFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._placement = 'bottom-start';
+        this._open = false;
+        this._manageFocus = false;
+        this._animationType = PopupAnimationType.None;
+        this._static = false;
+        this._hideWhenClipped = false;
+        this._blurListener = () => this._onBlur();
+    }
+    disconnect() {
+        if (this.open) {
+            this.open = false;
+        }
+    }
+    _openPopup() {
+        if (this._animationType !== PopupAnimationType.None) {
+            this._applyOpenAnimation();
+            if (this._animationType === PopupAnimationType.Dropdown) {
+                this._adapter.addClass(POPUP_CONSTANTS.classes.SELECT);
+            }
+        }
+        else {
+            this._adapter.addClass(POPUP_CONSTANTS.classes.OPEN);
+        }
+        this._adapter.setAttribute(POPUP_CONSTANTS.attributes.OPEN, '');
+        this._adapter.addPopup(this.targetElement, this._manageFocus);
+        this._adapter.trySetInitialFocus();
+        if (this._destroyBlurListener) {
+            this._destroyBlurListener();
+        }
+        if (!this._static) {
+            this._destroyBlurListener = this._adapter.setBlurListener(this._blurListener);
+        }
+        this._adapter.manageWindowEvents(true);
+        this._adapter.dispatchEvent(constants.events.OPEN);
+    }
+    _closePopup() {
+        if (this._destroyBlurListener) {
+            this._destroyBlurListener();
+            this._destroyBlurListener = undefined;
+        }
+        if (this._animationType !== PopupAnimationType.None) {
+            this._applyCloseAnimation();
+        }
+        else {
+            this._destroyPopup();
+        }
+    }
+    _destroyPopup() {
+        this._adapter.manageWindowEvents(false);
+        this._adapter.removePopup(this._manageFocus);
+        this._adapter.dispatchEvent(constants.events.CLOSE);
+        this._adapter.removeAttribute(POPUP_CONSTANTS.attributes.OPEN);
+    }
+    _applyOpenAnimation() {
+        switch (this._animationType) {
+            case PopupAnimationType.Dropdown:
+            case PopupAnimationType.Menu:
+                this._adapter.addClass(POPUP_CONSTANTS.classes.OPENING);
+                const transitionEndListener = (evt) => {
+                    if (evt.propertyName === 'transform') {
+                        this._adapter.removeClass(POPUP_CONSTANTS.classes.OPENING);
+                        this._adapter.removeEventListener('transitionend', transitionEndListener);
+                    }
+                };
+                this._adapter.setAnimationEndListener(transitionEndListener, POPUP_CONSTANTS.classes.OPEN);
+                break;
+        }
+    }
+    _applyCloseAnimation() {
+        switch (this._animationType) {
+            case PopupAnimationType.Dropdown:
+            case PopupAnimationType.Menu:
+                this._adapter.removeClass(POPUP_CONSTANTS.classes.OPEN);
+                this._adapter.addClass(POPUP_CONSTANTS.classes.CLOSED);
+                const transitionEndListener = (evt) => {
+                    if (evt.propertyName === 'opacity') {
+                        if (fallbackTimer) {
+                            clearTimeout(fallbackTimer);
+                        }
+                        this._destroyPopup();
+                    }
+                };
+                this._adapter.setAnimationEndListener(transitionEndListener);
+                const fallbackTimer = setTimeout(() => this._destroyPopup(), POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
+                break;
+        }
+    }
+    _onBlur() {
+        const cancelled = this._adapter.dispatchEvent(POPUP_CONSTANTS.events.BLUR, undefined, true, true);
+        if (!cancelled) {
+            this.open = false;
+        }
+    }
+    _applyOpen() {
+        if (this._open) {
+            if (!this.targetElement || !isElement(this.targetElement)) {
+                throw new Error('targetElement on Popup component must be an HTMLElement');
+            }
+            if (typeof this._openCallback === 'function') {
+                this._executeOpenCallback();
+            }
+            else {
+                this._openPopup();
+            }
+        }
+        else {
+            if (typeof this._closeCallback === 'function') {
+                this._executeCloseCallback();
+            }
+            else {
+                this._closePopup();
+            }
+        }
+    }
+    async _executeOpenCallback() {
+        try {
+            if (await Promise.resolve(this._openCallback()) !== false) {
+                this._openPopup();
+            }
+            else {
+                this._open = false;
+            }
+        }
+        catch (e) {
+            this._open = false;
+        }
+    }
+    async _executeCloseCallback() {
+        try {
+            if (await Promise.resolve(this._closeCallback()) !== false) {
+                this._closePopup();
+            }
+            else {
+                this._open = true;
+            }
+        }
+        catch (e) {
+            this._open = true;
+        }
+    }
+    get targetElement() {
+        return this._targetElement;
+    }
+    set targetElement(element) {
+        if (!element || !isElement(element)) {
+            throw new Error('targetElement on Popup component must be an HTMLElement');
+        }
+        this._targetElement = element;
+    }
+    get placement() {
+        return this._placement;
+    }
+    set placement(value) {
+        if (this._placement !== value) {
+            this._placement = value || 'bottom-start';
+            this._adapter.setAttribute(POPUP_CONSTANTS.attributes.PLACEMENT, this._placement);
+        }
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._open = value;
+            this._applyOpen();
+        }
+    }
+    get manageFocus() {
+        return this._manageFocus;
+    }
+    set manageFocus(value) {
+        if (this._manageFocus !== value) {
+            this._manageFocus = value;
+        }
+    }
+    get animationType() {
+        return this._animationType;
+    }
+    set animationType(value) {
+        if (this._animationType !== value) {
+            this._animationType = value;
+        }
+    }
+    get static() {
+        return this._static;
+    }
+    set static(value) {
+        if (this._static !== value) {
+            this._static = value;
+            if (this._static && this._destroyBlurListener) {
+                this._destroyBlurListener();
+                this._destroyBlurListener = undefined;
+            }
+        }
+    }
+    get hideWhenClipped() {
+        return this._hideWhenClipped;
+    }
+    set hideWhenClipped(value) {
+        if (this._hideWhenClipped !== value) {
+            this._hideWhenClipped = value;
+        }
+    }
+    get offset() {
+        var _a;
+        return (_a = this._offset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+    }
+    set offset(value) {
+        var _a, _b;
+        if (!value) {
+            this._offset = undefined;
+        }
+        else {
+            this._offset = {
+                x: (_a = value.x) !== null && _a !== void 0 ? _a : 0,
+                y: (_b = value.y) !== null && _b !== void 0 ? _b : 0
+            };
+        }
+        if (this._open) {
+            this._adapter.positionPopup();
+        }
+    }
+    get openCallback() {
+        return this._openCallback;
+    }
+    set openCallback(callback) {
+        this._openCallback = callback;
+    }
+    get closeCallback() {
+        return this._closeCallback;
+    }
+    set closeCallback(callback) {
+        this._closeCallback = callback;
+    }
+    position() {
+        this._adapter.positionPopup();
+    }
+}

package/esm/popup/popup.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { IPopupPosition, IPopupPositionEventData, PopupAnimationType, PopupPlacement, PopupStateCallback } from './popup-constants';
+export interface IPopupComponent extends IBaseComponent {
+    targetElement: HTMLElement;
+    placement: PopupPlacement;
+    open: boolean;
+    manageFocus: boolean;
+    animationType: PopupAnimationType;
+    static: boolean;
+    offset: IPopupPosition;
+    hideWhenClipped: boolean;
+    position(): void;
+    openCallback: PopupStateCallback;
+    closeCallback: PopupStateCallback;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-popup': IPopupComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-popup-open': CustomEvent<void>;
+        'forge-popup-close': CustomEvent<void>;
+        'forge-popup-position': CustomEvent<IPopupPositionEventData>;
+        'forge-popup-blur': CustomEvent<void>;
+    }
+}
+export declare class PopupComponent extends BaseComponent implements IPopupComponent {
+    private _foundation;
+    static get observedAttributes(): string[];
+    constructor();
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    targetElement: HTMLElement;
+    placement: PopupPlacement;
+    open: boolean;
+    manageFocus: boolean;
+    animationType: PopupAnimationType;
+    static: boolean;
+    hideWhenClipped: boolean;
+    openCallback: PopupStateCallback;
+    closeCallback: PopupStateCallback;
+    offset: IPopupPosition;
+    position(): void;
+}