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

package/esm/core/utils/position-utils.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+export type PositionPlacement = Placement;
+export type PositionStrategy = Strategy;
+export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
+export interface IPositionElementResult {
+    x: number;
+    y: number;
+    hidden: boolean;
+    placement: PositionPlacement;
+    arrow?: MiddlewareData['arrow'];
+}
+export declare class VirtualElement {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    constructor(x: number, y: number, height?: number, width?: number);
+    getBoundingClientRect(): DOMRect;
+    static fromElement(element: HTMLElement): VirtualElement;
+    static fromEvent(event: MouseEvent | TouchEvent): VirtualElement;
+}
+export interface IPositionElementConfig {
+    /** The element to apply position to. */
+    element: HTMLElement;
+    /** The anchor element to position `element` around. */
+    anchorElement: HTMLElement | VirtualElement;
+    /** The placement position. */
+    placement: PositionPlacement;
+    /** Whether the position values should be applied to the `element` or not. Default is `true`. */
+    apply?: boolean;
+    /** Should the element flip to the opposite placement when not enough room. */
+    flip?: boolean;
+    /** Options to provide to the flip middleware. */
+    flipOptions?: Partial<FlipOptions>;
+    /** Should the element stay visible at the same placement when scrolling. */
+    shift?: boolean;
+    /** Options to provide to the shift middleware. */
+    shiftOptions?: Partial<ShiftOptions>;
+    /** Should the element hide itself when the anchor element is out of the view. */
+    hide?: boolean;
+    /** Options to provide to the hide middleware. */
+    hideOptions?: Partial<HideOptions>;
+    /** Should the element automatically attempt to locate the best placement, */
+    auto?: boolean;
+    /** Options to provide to the autoPlacement middleware. */
+    autoOptions?: Partial<AutoPlacementOptions>;
+    /** Should any offset values be applied to the element. */
+    offset?: boolean;
+    /** The options provide to the offset middleware. */
+    offsetOptions?: Partial<OffsetOptions>;
+    /** The element to use as an arrow. */
+    arrowElement?: HTMLElement;
+    /** Options to provide to the arrow middleware. */
+    arrowOptions?: Partial<ArrowOptions>;
+    /** Should the top-layer middleware be applied or not. */
+    topLayer?: boolean;
+    /** The positioning strategy. */
+    strategy?: PositionStrategy;
+    /** Should positioning be applied using a `transform` style. */
+    transform?: boolean;
+    /** The CSS `translate` function to apply to the `transform`. Only applied when `transform` is `true`. */
+    translateFunction?: 'translate3d' | 'translate';
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export declare function positionElementAsync({ element, anchorElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IPositionElementResult>;
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export declare const topLayerMiddleware: () => Middleware;

package/esm/core/utils/position-utils.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
+import { getContainingBlock, isContainingBlock, getWindow } from '@floating-ui/utils/dom';
+export const DEFAULT_FALLBACK_PLACEMENTS = ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'];
+export class VirtualElement {
+    constructor(x, y, height = 0, width = 0) {
+        this.x = x;
+        this.y = y;
+        this.height = height;
+        this.width = width;
+    }
+    getBoundingClientRect() {
+        return {
+            x: this.x,
+            y: this.y,
+            top: this.y,
+            left: this.x,
+            bottom: this.y,
+            right: this.x,
+            width: this.height,
+            height: this.width,
+            toJSON() {
+                return;
+            }
+        };
+    }
+    static fromElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new VirtualElement(rect.left, rect.top, rect.height, rect.width);
+    }
+    static fromEvent(event) {
+        if (event instanceof MouseEvent) {
+            return new VirtualElement(event.clientX, event.clientY);
+        }
+        if (event instanceof TouchEvent) {
+            return new VirtualElement(event.touches[0].clientX, event.touches[0].clientY);
+        }
+        throw new Error('Unsupported event type');
+    }
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'absolute', apply = true, flip = true, flipOptions = {
+    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
+    fallbackStrategy: 'initialPlacement'
+}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
+    var _a, _b, _c;
+    const middleware = [];
+    //
+    // Order of the following middleware is **important**
+    //
+    if (offset) {
+        middleware.push(offsetMiddleware(offsetOptions));
+    }
+    if (shift) {
+        middleware.push(shiftMiddleware(shiftOptions));
+    }
+    if (flip && !auto) { // flip and auto placement middleware cannot be used together
+        middleware.push(flipMiddleware(flipOptions));
+    }
+    if (auto) {
+        middleware.push(autoPlacementMiddleware(autoOptions));
+    }
+    if (hide) {
+        middleware.push(hideMiddleware(hideOptions));
+    }
+    if (arrowElement) { // Must come before the topLayer middleware
+        middleware.push(arrowMiddleware(Object.assign(Object.assign({}, arrowOptions), { element: arrowElement })));
+    }
+    if (topLayer) {
+        middleware.push(topLayerMiddleware());
+    }
+    const { x, y, placement: finalPlacement, middlewareData } = await computePosition(anchorElement, element, { strategy, placement, middleware });
+    // Should we apply the position information to the element?
+    if (apply) {
+        const styles = {
+            left: transform ? '0' : `${x}px`,
+            top: transform ? '0' : `${y}px`
+        };
+        if (transform) {
+            if (translateFunction === 'translate') {
+                styles.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+            }
+            else {
+                styles.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+            }
+        }
+        Object.assign(element.style, styles);
+        // We use `display` here to ensure that any child overlays are also hidden
+        if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+            element.style.display = 'none';
+        }
+        else {
+            element.style.removeProperty('display');
+        }
+    }
+    return {
+        x,
+        y,
+        hidden: (_c = (_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) !== null && _c !== void 0 ? _c : false,
+        placement: finalPlacement,
+        arrow: middlewareData.arrow
+    };
+}
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export const topLayerMiddleware = () => ({
+    name: 'topLayer',
+    async fn({ x, y, elements: { reference, floating } }) {
+        let onTopLayer = false;
+        let topLayerIsFloating = false;
+        let withinReference = false;
+        const diffCoords = { x: 0, y: 0 };
+        try {
+            onTopLayer = onTopLayer || floating.matches(':popover-open');
+        }
+        catch (_a) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':open');
+        }
+        catch (_b) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':modal');
+        }
+        catch (_c) { }
+        topLayerIsFloating = onTopLayer;
+        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', { composed: true, bubbles: true });
+        floating.addEventListener('floating-ui-dialog-test', (event) => {
+            event.composedPath().forEach((el) => {
+                withinReference = withinReference || el === reference;
+                if (el === floating || el.localName !== 'dialog') {
+                    return;
+                }
+                try {
+                    onTopLayer = onTopLayer || el.matches(':modal');
+                }
+                catch (_a) { }
+            });
+        }, { once: true });
+        floating.dispatchEvent(dialogAncestorQueryEvent);
+        let overTransforms = false;
+        if (!(reference instanceof VirtualElement)) {
+            const root = (withinReference ? reference : floating);
+            const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
+            let css = {};
+            if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
+                css = getComputedStyle(containingBlock);
+                // The overlay is "over transforms" when the containing block uses specific CSS...
+                overTransforms =
+                    css.transform !== 'none' ||
+                        css.translate !== 'none' ||
+                        (css.containerType ? css.containerType !== 'normal' : false) ||
+                        (css.backdropFilter ? css.backdropFilter !== 'none' : false) ||
+                        (css.filter ? css.filter !== 'none' : false) ||
+                        css.willChange.search('transform') > -1 ||
+                        css.willChange.search('translate') > -1 ||
+                        ['paint', 'layout', 'strict', 'content'].some((value) => (css.contain || '').includes(value));
+            }
+            if (onTopLayer && overTransforms && containingBlock) {
+                const rect = containingBlock.getBoundingClientRect();
+                // Margins and borders are not included in the bounding client rect and need to be handled separately
+                const { marginInlineStart = '0', marginBlockStart = '0', borderInlineWidth = '0', borderBlockWidth = '0' } = css;
+                const inlineBoxAdjust = parseFloat(marginInlineStart) + parseFloat(borderInlineWidth);
+                const blockBoxAdjust = parseFloat(marginBlockStart) + parseFloat(borderBlockWidth);
+                diffCoords.x = rect.x + inlineBoxAdjust - containingBlock.scrollLeft;
+                diffCoords.y = rect.y + blockBoxAdjust - containingBlock.scrollTop;
+            }
+        }
+        if (onTopLayer && topLayerIsFloating) {
+            return {
+                x: x + diffCoords.x,
+                y: y + diffCoords.y,
+                data: diffCoords
+            };
+        }
+        if (onTopLayer) {
+            return {
+                x,
+                y,
+                data: diffCoords
+            };
+        }
+        return {
+            x: x - diffCoords.x,
+            y: y - diffCoords.y,
+            data: diffCoords
+        };
+    }
+});

package/esm/core/utils/utils.d.ts

@@ -90,6 +90,13 @@ export declare function isPointerOverElement({ x, y }: {
  * @param value {string | null} - A selector string to query the DOM for the target element
  */
 export declare function locateTargetHeuristic(element: HTMLElement, id?: string | null): HTMLElement | null;
+/**
+ * Attempts to locate an element by id within its root node.
+ * @param element The element to search from.
+ * @param id The id of the element to locate.
+ * @returns The element if found, otherwise `null`.
+ */
+export declare function locateElementById(element: HTMLElement, id?: string | null): HTMLElement | null;
 /**
  * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
  * @param oldElement The element to replace.
@@ -98,3 +105,10 @@ export declare function locateTargetHeuristic(element: HTMLElement, id?: string
  * @returns The new element.
  */
 export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLElement, newElement: T, preserveChildren?: boolean): T;
+/**
+ * Coerces a string separated by `separator` into an array of strings.
+ * @param value The string to coerce.
+ * @params [separator=','] The separator to use when splitting the string.
+ * @returns An array of strings.
+ */
+export declare function coerceStringToArray<T extends string>(value: string, separator?: string): T[];

package/esm/core/utils/utils.js

@@ -168,19 +168,28 @@ export function isPointerOverElement({ x, y }, element) {
 export function locateTargetHeuristic(element, id) {
     let targetEl = null;
     if (id) {
-        const rootNode = element.getRootNode();
-        // Special case handling for a `:host` selector to easily target a host element
-        // from within a shadow tree, given that this is a very common scenario
-        if (id === ':host' && rootNode instanceof ShadowRoot) {
-            return rootNode.host;
-        }
-        targetEl = rootNode.querySelector(`#${id}`);
+        targetEl = locateElementById(element, id);
     }
     if (!targetEl) {
         return element.parentElement;
     }
     return targetEl;
 }
+/**
+ * Attempts to locate an element by id within its root node.
+ * @param element The element to search from.
+ * @param id The id of the element to locate.
+ * @returns The element if found, otherwise `null`.
+ */
+export function locateElementById(element, id) {
+    const rootNode = element.getRootNode();
+    // Special case handling for a `:host` selector to easily target a host element
+    // from within a shadow tree, given that this is a very common scenario
+    if (id === ':host' && rootNode instanceof ShadowRoot) {
+        return rootNode.host;
+    }
+    return rootNode.querySelector(`#${id}`);
+}
 /**
  * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
  * @param oldElement The element to replace.
@@ -196,3 +205,12 @@ export function replaceElement(oldElement, newElement, preserveChildren = true)
     oldElement.remove();
     return newElement;
 }
+/**
+ * Coerces a string separated by `separator` into an array of strings.
+ * @param value The string to coerce.
+ * @params [separator=','] The separator to use when splitting the string.
+ * @returns An array of strings.
+ */
+export function coerceStringToArray(value, separator = ',') {
+    return value.split(separator).map(p => p.trim());
+}

package/esm/date-range-picker/date-range-picker-foundation.d.ts

@@ -21,6 +21,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _toInputBlurListener;
     private _toInputValueChangedListener;
     constructor(adapter: IDateRangePickerAdapter);
+    initialize(): void;
     protected _initializeState(): void;
     protected _initializeListeners(): void;
     protected _initializeValueChangedListeners(): void;

package/esm/date-range-picker/date-range-picker-foundation.js

@@ -20,6 +20,10 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         this._toInputFocusListener = evt => this._onToInputFocus();
         this._toInputBlurListener = evt => this._onToInputBlur(evt);
     }
+    initialize() {
+        super.initialize();
+        this._setFormattedToInputValue(true);
+    }
     _initializeState() {
         this._applyToMask();
         if (!this._from) {

package/esm/deprecated/button/deprecated-button-component-delegate.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../../core/delegates/base-component-delegate';
+import { IDeprecatedButtonComponent } from './deprecated-button';
+export type DeprecatedButtonComponentDelegateProps = Partial<IDeprecatedButtonComponent>;
+export interface IDeprecatedButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
+    type?: 'button' | 'submit';
+    text?: string;
+}
+export interface IDeprecatedButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IDeprecatedButtonComponent, IDeprecatedButtonComponentDelegateOptions> {
+}
+export declare class DeprecatedButtonComponentDelegate extends BaseComponentDelegate<IDeprecatedButtonComponent, IDeprecatedButtonComponentDelegateOptions> {
+    private _buttonElement?;
+    constructor(config?: IDeprecatedButtonComponentDelegateConfig);
+    destroy(): void;
+    get buttonElement(): HTMLButtonElement | undefined;
+    protected _build(): IDeprecatedButtonComponent;
+    onClick(listener: (evt: MouseEvent) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+}

package/esm/deprecated/button/deprecated-button-component-delegate.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate } from '../../core/delegates/base-component-delegate';
+import { DEPRECATED_BUTTON_CONSTANTS } from './deprecated-button-constants';
+export class DeprecatedButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    destroy() {
+        this._buttonElement = undefined;
+    }
+    get buttonElement() {
+        return this._buttonElement;
+    }
+    _build() {
+        var _a, _b;
+        const component = document.createElement(DEPRECATED_BUTTON_CONSTANTS.elementName);
+        this._buttonElement = document.createElement('button');
+        this._buttonElement.type = ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.type) || 'button';
+        this._buttonElement.textContent = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.text) || '';
+        component.appendChild(this._buttonElement);
+        return component;
+    }
+    onClick(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', evt => listener(evt));
+    }
+}

package/esm/deprecated/button/deprecated-button-constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const DEPRECATED_BUTTON_CONSTANTS: {
+    elementName: "forge-deprecated-button";
+    attributes: {
+        TYPE: string;
+        DISABLED: string;
+        FULL_WIDTH: string;
+    };
+    selectors: {
+        BUTTON: string;
+    };
+};
+export type DeprecatedButtonType = 'text' | 'raised' | 'unelevated' | 'outlined' | 'dense';

package/esm/deprecated/button/deprecated-button-constants.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}deprecated-button`;
+const attributes = {
+    TYPE: 'type',
+    DISABLED: 'disabled',
+    FULL_WIDTH: 'full-width'
+};
+const selectors = {
+    BUTTON: 'button,a'
+};
+export const DEPRECATED_BUTTON_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors
+};

package/esm/deprecated/button/deprecated-button.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DeprecatedButtonType } from './deprecated-button-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+/**
+ * @deprecated Use `IButtonComponent` component instead.
+ */
+export interface IDeprecatedButtonComponent extends IBaseComponent {
+    type: string;
+    disabled: boolean;
+    fullWidth: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-deprecated-button': IDeprecatedButtonComponent;
+    }
+}
+/**
+ * @tag forge-deprecated-button
+ *
+ * @deprecated Use the `<forge-button>` element instead.
+ */
+export declare class DeprecatedButtonComponent extends BaseComponent implements IDeprecatedButtonComponent {
+    static get observedAttributes(): string[];
+    private _slotElement;
+    private _focusIndicator;
+    private _stateLayer;
+    private _buttonOrAnchorElement;
+    private _type;
+    private _disabled;
+    private _fullWidth;
+    private _buttonChangeListener;
+    private _buttonAttrMutationObserver;
+    private _keydownListener;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _onKeydown;
+    private _onButtonChange;
+    private _initialize;
+    private _syncDisabledState;
+    private _detachButton;
+    get type(): DeprecatedButtonType;
+    set type(value: DeprecatedButtonType);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get fullWidth(): boolean;
+    set fullWidth(value: boolean);
+    focus(options?: FocusOptions | undefined): void;
+}