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

package/esm/overlay/base/overlay-aware-foundation.js

@@ -0,0 +1,158 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { OVERLAY_CONSTANTS } from '../overlay-constants';
+export class OverlayAwareFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._lightDismissListener = (evt) => this._onOverlayLightDismiss(evt);
+    }
+    initialize() {
+        if (!this.persistent) {
+            this._adapter.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, this._lightDismissListener);
+        }
+    }
+    destroy() {
+        this._adapter.overlayElement.removeEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, this._lightDismissListener);
+    }
+    get overlayElement() {
+        return this._adapter.overlayElement;
+    }
+    get anchorElement() {
+        return this._adapter.overlayElement.anchorElement;
+    }
+    set anchorElement(value) {
+        this._adapter.overlayElement.anchorElement = value;
+    }
+    get anchor() {
+        return this._adapter.overlayElement.anchor;
+    }
+    set anchor(value) {
+        this._adapter.overlayElement.anchor = value;
+    }
+    get noAnchor() {
+        return this._adapter.overlayElement.noAnchor;
+    }
+    set noAnchor(value) {
+        if (this._adapter.overlayElement.noAnchor !== value) {
+            this._adapter.overlayElement.noAnchor = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.NO_ANCHOR, this._adapter.overlayElement.noAnchor);
+        }
+    }
+    get open() {
+        return this._adapter.overlayElement.open;
+    }
+    set open(value) {
+        if (this._adapter.overlayElement.open === value) {
+            this._adapter.overlayElement.open = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.OPEN, this._adapter.overlayElement.open);
+        }
+    }
+    get inline() {
+        return this._adapter.overlayElement.inline;
+    }
+    set inline(value) {
+        if (this._adapter.overlayElement.inline !== value) {
+            this._adapter.overlayElement.inline = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.INLINE, this._adapter.overlayElement.inline);
+        }
+    }
+    get placement() {
+        return this._adapter.overlayElement.placement;
+    }
+    set placement(value) {
+        if (this._adapter.overlayElement.placement !== value) {
+            this._adapter.overlayElement.placement = value;
+            this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.PLACEMENT, this._adapter.overlayElement.placement);
+        }
+    }
+    get positionStrategy() {
+        return this._adapter.overlayElement.positionStrategy;
+    }
+    set positionStrategy(value) {
+        if (this._adapter.overlayElement.positionStrategy !== value) {
+            this._adapter.overlayElement.positionStrategy = value;
+            this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.POSITION_STRATEGY, this._adapter.overlayElement.positionStrategy);
+        }
+    }
+    get offset() {
+        return this._adapter.overlayElement.offset;
+    }
+    set offset(value) {
+        if (this._adapter.overlayElement.offset !== value) {
+            this._adapter.overlayElement.offset = value;
+        }
+    }
+    get hide() {
+        return this._adapter.overlayElement.hide;
+    }
+    set hide(value) {
+        if (this._adapter.overlayElement.hide !== value) {
+            this._adapter.overlayElement.hide = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._adapter.overlayElement.hide !== OVERLAY_CONSTANTS.defaults.HIDE, String(this._adapter.overlayElement.hide));
+        }
+    }
+    get persistent() {
+        return this._adapter.overlayElement.persistent;
+    }
+    set persistent(value) {
+        if (this._adapter.overlayElement.persistent !== value) {
+            this._adapter.overlayElement.persistent = value;
+            if (!this.persistent) {
+                this._adapter.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, this._lightDismissListener);
+            }
+            else {
+                this._adapter.overlayElement.removeEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, this._lightDismissListener);
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.PERSISTENT, this._adapter.overlayElement.persistent);
+        }
+    }
+    get shift() {
+        return this._adapter.overlayElement.shift;
+    }
+    set shift(value) {
+        if (this._adapter.overlayElement.shift !== value) {
+            this._adapter.overlayElement.shift = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._adapter.overlayElement.shift);
+        }
+    }
+    get flip() {
+        return this._adapter.overlayElement.flip;
+    }
+    set flip(value) {
+        if (this._adapter.overlayElement.flip !== value) {
+            this._adapter.overlayElement.flip = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.FLIP, this._adapter.overlayElement.flip !== OVERLAY_CONSTANTS.defaults.FLIP, String(this._adapter.overlayElement.flip));
+        }
+    }
+    get boundary() {
+        return this._adapter.overlayElement.boundary;
+    }
+    set boundary(value) {
+        if (this._adapter.overlayElement.boundary !== value) {
+            this._adapter.overlayElement.boundary = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.BOUNDARY, !!this._adapter.overlayElement.boundary, this._adapter.overlayElement.boundary);
+        }
+    }
+    get boundaryElement() {
+        return this._adapter.overlayElement.boundaryElement;
+    }
+    set boundaryElement(value) {
+        if (this._adapter.overlayElement.boundaryElement !== value) {
+            this._adapter.overlayElement.boundaryElement = value;
+        }
+    }
+    get fallbackPlacements() {
+        return this._adapter.overlayElement.fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        if (this._adapter.overlayElement.fallbackPlacements !== value) {
+            this._adapter.overlayElement.fallbackPlacements = value;
+        }
+    }
+    position() {
+        this._adapter.overlayElement.position();
+    }
+}

package/esm/overlay/base/overlay-aware.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { IOverlayComponent } from '../overlay';
+import { IOverlayAwareFoundation } from './overlay-aware-foundation';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
+import { PositionPlacement, VirtualElement } from '../../core/utils/position-utils';
+import { IBaseOverlay } from './base-overlay';
+export interface IOverlayAware extends IBaseComponent, IBaseOverlay {
+    readonly overlay: IOverlayComponent;
+}
+export declare abstract class OverlayAware<T extends IOverlayAwareFoundation> extends BaseComponent implements IOverlayAware {
+    protected _foundation: T;
+    constructor();
+    position(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    get overlay(): IOverlayComponent;
+    anchorElement: HTMLElement | VirtualElement | null;
+    anchor: string | null;
+    noAnchor: boolean;
+    open: boolean;
+    inline: boolean;
+    placement: OverlayPlacement;
+    positionStrategy: OverlayPositionStrategy;
+    offset: IOverlayOffset;
+    shift: boolean;
+    hide: OverlayHideState;
+    persistent: boolean;
+    flip: OverlayFlipState;
+    boundary: string | null;
+    boundaryElement: HTMLElement | null;
+    fallbackPlacements: PositionPlacement[] | null;
+}

package/esm/overlay/base/overlay-aware.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../../core/base/base-component';
+import { OVERLAY_CONSTANTS } from '../overlay-constants';
+export class OverlayAware extends BaseComponent {
+    constructor() {
+        super();
+    }
+    position() {
+        this._foundation.position();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case OVERLAY_CONSTANTS.observedAttributes.ANCHOR:
+                this.anchor = newValue;
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.NO_ANCHOR:
+                this.noAnchor = coerceBoolean(newValue);
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.INLINE:
+                this.inline = coerceBoolean(newValue);
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.PLACEMENT:
+                this.placement = newValue;
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.POSITION_STRATEGY:
+                this.positionStrategy = newValue;
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.HIDE:
+                this.hide = newValue;
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.PERSISTENT:
+                this.persistent = coerceBoolean(newValue);
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
+                this.shift = coerceBoolean(newValue);
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.FLIP:
+                this.flip = newValue;
+                break;
+            case OVERLAY_CONSTANTS.observedAttributes.BOUNDARY:
+                this.boundary = newValue;
+                break;
+        }
+    }
+    get overlay() {
+        return this._foundation.overlayElement;
+    }
+}
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "anchorElement", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "anchor", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "noAnchor", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "inline", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "placement", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "positionStrategy", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "offset", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "shift", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "hide", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "persistent", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "flip", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "boundary", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "boundaryElement", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayAware.prototype, "fallbackPlacements", void 0);

package/esm/overlay/index.d.ts

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

package/esm/overlay/index.js

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

package/esm/overlay/mixins/with-overlay-aware.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, MixinBase } from '../../constants';
+import { IBaseComponent } from '../../core/base/base-component';
+import { IOverlayComponent } from '../overlay';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
+import { VirtualElement } from '../../core/utils/position-utils';
+/**
+ * An element that exposes a common API to its underlying `<forge-overlay>`.
+ */
+export interface IWithOverlayAware extends IBaseComponent {
+    /**
+     * The underlying `<forge-overlay>` element.
+     */
+    readonly overlayElement: IOverlayComponent;
+    /**
+     * The element to which the overlay is anchored.
+     */
+    anchorElement: HTMLElement | VirtualElement | null;
+    /**
+     * The CSS selector of the element to which the overlay is anchored.
+     */
+    anchor: string | null;
+    /**
+     * Whether the overlay is open.
+     */
+    open: boolean;
+    /**
+     * Whether the overlay is inline.
+     */
+    inline: boolean;
+    /**
+     * The placement of the overlay.
+     */
+    placement: OverlayPlacement;
+    /**
+     * The position strategy of the overlay.
+     */
+    positionStrategy: OverlayPositionStrategy;
+    /**
+     * The offset of the overlay.
+     */
+    offset: IOverlayOffset;
+    /**
+     * Whether the overlay shifts to avoid being cut off.
+     */
+    shift: boolean;
+    /**
+     * Whether the overlay hides when the anchor is clicked.
+     */
+    hide: boolean;
+    /**
+     * Whether the overlay is persistent (disables light dismiss).
+     */
+    persistent: boolean;
+    /**
+     * Whether the overlay flips when it would be cut off.
+     */
+    flip: boolean;
+    /**
+     * The id for the position boundary element that is an ancestor of the overlay.
+     */
+    boundary: string | null;
+    /**
+     * The position boundary element that is an ancestor of the overlay.
+     */
+    boundaryElement: HTMLElement | null;
+    /**
+     * The fallback placements of the overlay.
+     */
+    fallbackPlacements: OverlayPlacement[] | null;
+    /**
+     * Positions the overlay.
+     */
+    position(): void;
+}
+export declare abstract class WithOverlayAwareContract {
+    get overlayElement(): IOverlayComponent;
+    anchorElement: HTMLElement | VirtualElement | null;
+    anchor: string | null;
+    open: boolean;
+    inline: boolean;
+    placement: OverlayPlacement;
+    positionStrategy: OverlayPositionStrategy;
+    offset: IOverlayOffset;
+    shift: boolean;
+    hide: OverlayHideState;
+    persistent: boolean;
+    flip: OverlayFlipState;
+    boundary: string | null;
+    boundaryElement: HTMLElement | null;
+    fallbackPlacements: OverlayPlacement[] | null;
+    position(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+/**
+ *
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithOverlayAware<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithOverlayAwareContract> & TBase;

package/esm/overlay/mixins/with-overlay-aware.js

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { coerceBoolean } from '@tylertech/forge-core';
+import { coerceStringToArray } from '../../core/utils/utils';
+import { OVERLAY_CONSTANTS } from '../overlay-constants';
+/**
+ *
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithOverlayAware(base) {
+    class OverlayAware extends base {
+        //
+        // Public members
+        //
+        get anchorElement() {
+            return this.overlayElement.anchorElement;
+        }
+        set anchorElement(value) {
+            this.overlayElement.anchorElement = value;
+        }
+        get anchor() {
+            return this.overlayElement.anchor;
+        }
+        set anchor(value) {
+            this.overlayElement.anchor = value;
+        }
+        get open() {
+            return this.overlayElement.open;
+        }
+        set open(value) {
+            this.overlayElement.open = value;
+        }
+        get inline() {
+            return this.overlayElement.inline;
+        }
+        set inline(value) {
+            this.overlayElement.inline = value;
+        }
+        get placement() {
+            return this.overlayElement.placement;
+        }
+        set placement(value) {
+            this.overlayElement.placement = value;
+        }
+        get positionStrategy() {
+            return this.overlayElement.positionStrategy;
+        }
+        set positionStrategy(value) {
+            this.overlayElement.positionStrategy = value;
+        }
+        get offset() {
+            return this.overlayElement.offset;
+        }
+        set offset(value) {
+            this.overlayElement.offset = value;
+        }
+        get shift() {
+            return this.overlayElement.shift;
+        }
+        set shift(value) {
+            this.overlayElement.shift = value;
+        }
+        get hide() {
+            return this.overlayElement.hide;
+        }
+        set hide(value) {
+            this.overlayElement.hide = value;
+        }
+        get persistent() {
+            return this.overlayElement.persistent;
+        }
+        set persistent(value) {
+            this.overlayElement.persistent = value;
+        }
+        get flip() {
+            return this.overlayElement.flip;
+        }
+        set flip(value) {
+            this.overlayElement.flip = value;
+        }
+        get boundary() {
+            return this.overlayElement.boundary;
+        }
+        set boundary(value) {
+            this.overlayElement.boundary = value;
+        }
+        get boundaryElement() {
+            return this.overlayElement.boundaryElement;
+        }
+        set boundaryElement(value) {
+            this.overlayElement.boundaryElement = value;
+        }
+        get fallbackPlacements() {
+            return this.overlayElement.fallbackPlacements;
+        }
+        set fallbackPlacements(value) {
+            this.overlayElement.fallbackPlacements = value;
+        }
+        //
+        // Public methods
+        //
+        position() {
+            this.overlayElement.position();
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            var _a;
+            (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, name, _oldValue, newValue);
+            switch (name) {
+                case OVERLAY_CONSTANTS.observedAttributes.ANCHOR:
+                    this.anchor = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.OPEN:
+                    this.open = coerceBoolean(newValue);
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.INLINE:
+                    this.inline = coerceBoolean(newValue);
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.PLACEMENT:
+                    this.placement = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.POSITION_STRATEGY:
+                    this.positionStrategy = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.HIDE:
+                    this.hide = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.PERSISTENT:
+                    this.persistent = coerceBoolean(newValue);
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
+                    this.shift = coerceBoolean(newValue);
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.FLIP:
+                    this.flip = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.BOUNDARY:
+                    this.boundary = newValue;
+                    break;
+                case OVERLAY_CONSTANTS.observedAttributes.FALLBACK_PLACEMENTS:
+                    this.fallbackPlacements = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? coerceStringToArray(newValue) : null;
+                    break;
+            }
+        }
+    }
+    return OverlayAware;
+}

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { PositionPlacement, VirtualElement } from '../core/utils/position-utils';
+import { IOverlayComponent } from './overlay';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayLightDismissReason, OverlayPositionStrategy } from './overlay-constants';
+export interface IOverlayAdapter extends IBaseAdapter {
+    show(): void;
+    hide(): void;
+    tryHideDescendantOverlays(): void;
+    locateAnchorElement(id: string | null): HTMLElement | null;
+    isMostRecentOpenOverlay(): boolean;
+    positionElement(config: IPositionElementConfig): void;
+    tryCleanupAutoUpdate(): void;
+    addLightDismissListener(listener: (reason: OverlayLightDismissReason) => void): void;
+    removeLightDismissListener(): void;
+}
+export interface IPositionElementConfig {
+    anchorElement: HTMLElement | VirtualElement;
+    strategy: OverlayPositionStrategy;
+    placement: PositionPlacement;
+    auto: boolean;
+    hide: OverlayHideState;
+    offset: IOverlayOffset;
+    shift: boolean;
+    flip: OverlayFlipState;
+    boundary: string | null;
+    boundaryElement: HTMLElement | null;
+    fallbackPlacements: PositionPlacement[] | undefined;
+}
+export declare class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IOverlayAdapter {
+    private _rootElement;
+    private _autoUpdateCleanup?;
+    private _lightDismissController;
+    private _overlayStackAddTimeout?;
+    constructor(component: IOverlayComponent);
+    show(): Promise<void>;
+    hide(): void;
+    tryHideDescendantOverlays(): void;
+    locateAnchorElement(id: string | null): HTMLElement | null;
+    positionElement({ anchorElement, strategy, placement, auto, hide, offset, shift, flip, boundary, boundaryElement, fallbackPlacements }: IPositionElementConfig): void;
+    tryCleanupAutoUpdate(): void;
+    isMostRecentOpenOverlay(): boolean;
+    addLightDismissListener(listener: (reason: OverlayLightDismissReason) => void): void;
+    removeLightDismissListener(): void;
+    /**
+     * Finds all descendant overlays that are not persistent.
+     * @returns An array of descendant overlays.
+     */
+    private _findDescendantOverlays;
+}