@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/core/controllers/move-controller.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { WithMoveable } from '../mixins/interactions/moveable/with-moveable';
+const MoveBase = WithMoveable(Object);
+export class MoveController extends MoveBase {
+    constructor(_config) {
+        super();
+        this._config = _config;
+        this._startMoveListener();
+    }
+    destroy() {
+        this._stopMoveListener();
+        super.stopMoveListener();
+    }
+    _getMoveableBounds() {
+        return this._config.surfaceElement.getBoundingClientRect();
+    }
+    _updatePosition(x, y) {
+        this._config.surfaceElement.style.top = y != null ? y : '';
+        this._config.surfaceElement.style.left = x != null ? x : '';
+    }
+    _onMoveStart() {
+        return this._config.onMoveStart();
+    }
+    _onMove(position) {
+        return this._config.onMove(position);
+    }
+    _onMoveEnd() {
+        this._config.onMoveEnd();
+    }
+    _startMoveListener() {
+        this._config.handleElement.addEventListener('pointerdown', this._movePointerDownListener);
+    }
+    _stopMoveListener() {
+        this._config.handleElement.removeEventListener('pointerdown', this._movePointerDownListener);
+    }
+}

package/esm/core/mixins/interactions/moveable/with-moveable.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, MixinBase } from '../../../../constants';
+export interface IWithMoveableMoveContext {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+}
+export declare abstract class WithMoveableContract {
+    stopMoveListener(): void;
+    protected _movePointerDownListener: EventListener;
+    protected abstract _getMoveableBounds(): {
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+    };
+    protected abstract _updatePosition(x: string | null, y: string | null): void;
+    protected abstract _onMoveStart(): boolean;
+    protected abstract _onMove(position: {
+        x: number;
+        y: number;
+    }): boolean;
+    protected abstract _onMoveEnd(): void;
+}
+export declare function WithMoveable<TBase extends MixinBase<object>>(base?: TBase): AbstractConstructor<WithMoveableContract> & TBase;

package/esm/core/mixins/interactions/moveable/with-moveable.js

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getActiveElement, isNumber, isString } from '@tylertech/forge-core';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithMoveable(base = class {
+}) {
+    class Moveable extends base {
+        constructor() {
+            super(...arguments);
+            this._isMoving = false;
+            this._activeElement = undefined;
+            this._movePointerDownListener = this._onMoveTargetPointerDown.bind(this);
+            this._movePointerMoveListener = this._onMoveTargetPointerMove.bind(this);
+            this._movePointerUpListener = this._onMoveTargetPointerUp.bind(this);
+        }
+        stopMoveListener() {
+            this._updatePosition(null, null);
+            document.removeEventListener('pointermove', this._movePointerMoveListener);
+            document.removeEventListener('pointerup', this._movePointerUpListener);
+            this._isMoving = false;
+            this._moveContext = undefined;
+            this._lastPosition = undefined;
+            this._activeElement = undefined;
+        }
+        _onMoveTargetPointerDown(evt) {
+            evt.preventDefault();
+            this._captureActiveElement();
+            const bounds = this._getMoveableBounds();
+            this._moveContext = {
+                top: evt.pageY - bounds.top,
+                left: evt.pageX - bounds.left,
+                height: bounds.height,
+                width: bounds.width
+            };
+            document.addEventListener('pointermove', this._movePointerMoveListener);
+            document.addEventListener('pointerup', this._movePointerUpListener);
+        }
+        _onMoveTargetPointerMove(evt) {
+            evt.preventDefault();
+            const position = this._calculateOffsetPosition(evt.pageX, evt.pageY, this._moveContext);
+            // If this is the beginning of the move sequence, we emit the start event (to allow for preventing default) and
+            // then update the surface position if not prevented
+            if (!this._isMoving) {
+                this._isMoving = true;
+                const defaultPrevented = this._onMoveStart();
+                if (defaultPrevented) {
+                    return;
+                }
+            }
+            // Ensure that the surface position stays within the bounds of the screen
+            const newPosition = this._clampPosition(position, this._moveContext);
+            // Only update the position if it actually changed
+            if (!this._lastPosition || newPosition.x !== this._lastPosition.x || newPosition.y !== this._lastPosition.y) {
+                const defaultPrevented = this._onMove(newPosition);
+                if (!defaultPrevented) {
+                    this._lastPosition = Object.assign({}, newPosition);
+                    const newX = this._normalizePositionValue(newPosition.x);
+                    const newY = this._normalizePositionValue(newPosition.y);
+                    this._updatePosition(newX, newY);
+                }
+            }
+        }
+        _onMoveTargetPointerUp(_evt) {
+            if (this._isMoving) {
+                this._onMoveEnd();
+            }
+            this._moveComplete();
+        }
+        _moveComplete() {
+            this._tryRestoreActiveElement();
+            document.removeEventListener('pointermove', this._movePointerMoveListener);
+            document.removeEventListener('pointerup', this._movePointerUpListener);
+            this._lastPosition = undefined;
+            this._moveContext = undefined;
+            this._isMoving = false;
+        }
+        _captureActiveElement() {
+            var _a;
+            this._activeElement = getActiveElement();
+            (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        _tryRestoreActiveElement() {
+            var _a;
+            if ((_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+                this._activeElement.focus();
+            }
+            this._activeElement = undefined;
+        }
+        _normalizePositionValue(value) {
+            if (isNumber(value)) {
+                return `${value}px`;
+            }
+            else if (isString(value)) {
+                return value;
+            }
+            return null;
+        }
+        _calculateOffsetPosition(pageX, pageY, context) {
+            var _a, _b;
+            return {
+                x: pageX - ((_a = context === null || context === void 0 ? void 0 : context.left) !== null && _a !== void 0 ? _a : 0),
+                y: pageY - ((_b = context === null || context === void 0 ? void 0 : context.top) !== null && _b !== void 0 ? _b : 0)
+            };
+        }
+        _clampPosition({ x, y }, context) {
+            let width = 0;
+            let height = 0;
+            if (context) {
+                width = context.width;
+                height = context.height;
+            }
+            if (x <= 0) {
+                x = 0;
+            }
+            else if (x + width >= window.innerWidth) {
+                x = window.innerWidth - width;
+            }
+            if (y <= 0) {
+                y = 0;
+            }
+            else if (y + height >= window.innerHeight) {
+                y = window.innerHeight - height;
+            }
+            return { x, y };
+        }
+    }
+    return Moveable;
+}

package/esm/core/utils/dismissible-stack.d.ts

@@ -71,4 +71,10 @@ export declare class DismissibleStack<T extends IDismissible> {
      * Checks if an element is requesting to be dismissed.
      */
     isRequestingLightDismiss(el: T): boolean;
+    /**
+     * Checks if an element is the most recent element in the dismissible queue.
+     * @param el The element to check.
+     * @returns
+     */
+    isMostRecent(el: T): boolean;
 }

package/esm/core/utils/dismissible-stack.js

@@ -130,4 +130,13 @@ export class DismissibleStack {
     isRequestingLightDismiss(el) {
         return this._elementsRequestingDismiss.has(el);
     }
+    /**
+     * Checks if an element is the most recent element in the dismissible queue.
+     * @param el The element to check.
+     * @returns
+     */
+    isMostRecent(el) {
+        const elements = Array.from(this._dismissibleElements);
+        return elements[elements.length - 1] === el;
+    }
 }

package/esm/core/utils/feature-detection.d.ts

@@ -21,3 +21,8 @@ export declare function supportsElementInternalsAria(): boolean;
  * @returns {boolean}
  */
 export declare function supportsHover(): boolean;
+/**
+ * Detects if the browser is set to prefer reduced motion.
+ * @returns {boolean}
+ */
+export declare function prefersReducedMotion(): boolean;

package/esm/core/utils/feature-detection.js

@@ -31,3 +31,10 @@ export function supportsHover() {
     // return window.matchMedia('(hover: hover)').matches;
     return !Platform.isMobile;
 }
+/**
+ * Detects if the browser is set to prefer reduced motion.
+ * @returns {boolean}
+ */
+export function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

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

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 export * from './date-utils';
+export * from './deferred';
+export * from './dismissible-stack';
 export * from './event-utils';
 export * from './feature-detection';
 export * from './form-utils';

package/esm/core/utils/index.js

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 export * from './date-utils';
+export * from './deferred';
+export * from './dismissible-stack';
 export * from './event-utils';
 export * from './feature-detection';
 export * from './form-utils';

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

@@ -6,7 +6,7 @@
 /**
  * Creates an SVG element from a string.
  */
-export declare function createSvgFromString(svgContent: string, defaultViewBox?: string): SVGSVGElement | null;
+export declare function createSvgFromString(svgContent: string, defaultViewBox?: string): SVGElement | null;
 /**
  * Determines if the provided element is a safe SVG to use.
  * @param el The element reference to test.

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

@@ -16,7 +16,7 @@ export function createSvgFromString(svgContent, defaultViewBox) {
         }
     }
     const svgElm = div.firstElementChild;
-    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg' && isSafeSvg(svgElm)) {
+    if ((svgElm === null || svgElm === void 0 ? void 0 : svgElm.nodeName.toLowerCase()) === 'svg' && isSafeSvg(svgElm)) {
         // Check if a custom viewbox value was provided and use that if so
         if (defaultViewBox) {
             svgElm.setAttribute('viewBox', defaultViewBox);
@@ -41,7 +41,7 @@ export function isSafeSvg(el) {
         return true;
     }
     // Validate no <script> tags exist
-    if (el.nodeName.toLowerCase() === 'script') {
+    if (el.nodeName.toLowerCase() === 'script' || el.querySelector('script')) {
         return false;
     }
     // Ensure there are no inline listeners

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

@@ -19,8 +19,6 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-date-picker>` element.
- *
  * @tag forge-date-picker
  */
 export declare class DatePickerComponent extends BaseDatePickerComponent<Date | string | undefined, Date, DatePickerFoundation> implements IDatePickerComponent {

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

@@ -9,7 +9,7 @@ import { tylIconInsertInvitation } from '@tylertech/tyler-icons/standard';
 import { CalendarComponent } from '../calendar';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover';
 import { BaseDatePickerComponent } from './base/base-date-picker';
 import { BASE_DATE_PICKER_CONSTANTS } from './base/base-date-picker-constants';
 import { DatePickerAdapter } from './date-picker-adapter';
@@ -18,8 +18,6 @@ import { DatePickerFoundation } from './date-picker-foundation';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
- * The custom element class behind the `<forge-date-picker>` element.
- *
  * @tag forge-date-picker
  */
 let DatePickerComponent = class DatePickerComponent extends BaseDatePickerComponent {
@@ -48,7 +46,7 @@ DatePickerComponent = __decorate([
     CustomElement({
         name: DATE_PICKER_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             CalendarComponent,
             IconButtonComponent,
             IconComponent

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

@@ -8,7 +8,7 @@ import { CalendarDropdown } from '../calendar/calendar-dropdown';
 import { DateInputMask } from '../core';
 import { BaseDatePickerAdapter } from '../date-picker/base/base-date-picker-adapter';
 import { createToggleElement } from '../date-picker/base/base-date-picker-utils';
-import { FIELD_CONSTANTS } from '../field-next';
+import { FIELD_CONSTANTS } from '../field';
 import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
 export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     constructor(component) {

package/esm/date-range-picker/date-range-picker-component-delegate.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { FormFieldComponentDelegate, IBaseComponentDelegateConfig, IFormFieldComponentDelegateOptions } from '../core/delegates';
-import { FieldDensity } from '../field-next';
+import { FieldDensity } from '../field';
 import { ITextFieldComponent } from '../text-field';
 import { IDateRangePickerComponent } from './date-range-picker';
 import { IDateRangePickerChangeEventData } from './date-range-picker-constants';

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

@@ -11,7 +11,7 @@ import { BaseDatePickerComponent } from '../date-picker/base/base-date-picker';
 import { BASE_DATE_PICKER_CONSTANTS } from '../date-picker/base/base-date-picker-constants';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover';
 import { DateRangePickerAdapter } from './date-range-picker-adapter';
 import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
 import { DateRangePickerFoundation } from './date-range-picker-foundation';
@@ -58,7 +58,7 @@ DateRangePickerComponent = __decorate([
     CustomElement({
         name: DATE_RANGE_PICKER_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             CalendarComponent,
             IconButtonComponent,
             IconComponent

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

@@ -5,71 +5,53 @@
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IDialogComponent } from './dialog';
-import { DialogPositionType } from './dialog-constants';
 export interface IDialogAdapter extends IBaseAdapter {
-    initializeAccessibility(): void;
-    setAnimating(animating: boolean): void;
-    setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
-    detach(): void;
-    setDocumentListener(type: string, listener: (evt: Event) => void): void;
-    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
-    registerTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
-    deregisterTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
-    registerBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
-    deregisterBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
-    getOpenDialogs: (selector: string) => NodeListOf<HTMLElement>;
-    setBodyAttribute: (name: string, value: string) => void;
-    removeBodyAttribute: (name: string) => void;
-    trySetInitialFocus: () => void;
-    isScrollable(): boolean;
-    addRootClass(name: string): void;
-    setFullscreen(value: boolean): void;
-    setMoveable(value: boolean): void;
-    tryLayoutRippleChildren(): void;
-    setMoveTarget(selector: string): boolean;
-    setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
-    removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
-    getSurfaceBounds(): DOMRect;
-    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
-    captureActiveElement(): void;
-    tryRestoreActiveElement(): void;
+    readonly hostElement: IDialogComponent;
+    readonly moveHandleElement: HTMLElement;
+    readonly surfaceElement: HTMLElement;
+    triggerElement: HTMLElement | null;
+    show(): void;
+    hide(): Promise<void>;
+    addDialogFormSubmitListener(listener: EventListener): void;
+    removeDialogFormSubmitListener(listener: EventListener): void;
+    addDialogCancelListener(listener: EventListener): void;
+    removeDialogCancelListener(listener: EventListener): void;
+    addBackdropDismissListener(listener: EventListener): void;
+    removeBackdropDismissListener(listener: EventListener): void;
+    tryAutofocus(): void;
+    tryLocateTriggerElement(id: string | null): void;
+    addTriggerInteractionListener(listener: EventListener): void;
+    removeTriggerInteractionListener(listener: EventListener): void;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    addSurfaceClass(className: string): void;
+    removeSurfaceClass(className: string): void;
 }
-/**
- * Provides facilities for interacting with the internal DOM of `DialogComponent`.
- */
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
-    private _backdropElement?;
-    private _containerElement;
+    private _dialogElement;
     private _surfaceElement;
-    private _moveTargetElement;
-    private _activeElement;
+    private _backdropElement;
+    private _moveHandleElement;
+    triggerElement: HTMLElement | null;
+    get moveHandleElement(): HTMLElement;
+    get surfaceElement(): HTMLElement;
     constructor(component: IDialogComponent);
-    initializeAccessibility(): void;
-    setAnimating(animating: boolean): void;
-    setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
-    detach(): void;
-    registerTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
-    deregisterTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
-    setDocumentListener(type: string, listener: (evt: Event) => void): void;
-    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
-    registerBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
-    deregisterBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
-    getOpenDialogs(selector: string): NodeListOf<HTMLElement>;
-    setBodyAttribute(name: string, value: string): void;
-    removeBodyAttribute(name: string): void;
-    trySetInitialFocus(): void;
-    isScrollable(): boolean;
-    addRootClass(name: string): void;
-    setFullscreen(value: boolean): void;
-    setMoveable(value: boolean): void;
-    tryLayoutRippleChildren(): void;
-    setMoveTarget(selector: string): boolean;
-    setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
-    removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
-    getSurfaceBounds(): DOMRect;
-    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
-    captureActiveElement(): void;
-    tryRestoreActiveElement(): void;
+    show(): void;
+    private _hideBackdrops;
+    private _showBackdropMostRecent;
+    hide(): Promise<void>;
+    addDialogFormSubmitListener(listener: EventListener): void;
+    removeDialogFormSubmitListener(listener: EventListener): void;
+    addDialogCancelListener(listener: EventListener): void;
+    removeDialogCancelListener(listener: EventListener): void;
+    addBackdropDismissListener(listener: EventListener): void;
+    removeBackdropDismissListener(listener: EventListener): void;
+    tryAutofocus(): void;
+    tryLocateTriggerElement(id: string | null): void;
+    addTriggerInteractionListener(listener: EventListener): void;
+    removeTriggerInteractionListener(listener: EventListener): void;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    addSurfaceClass(className: string): void;
+    removeSurfaceClass(className: string): void;
 }