@tylertech/forge 2.0.0

package/esm/dialog/dialog-foundation.js

@@ -0,0 +1,451 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isDefined, isNumber, isString } from '@tylertech/forge-core';
+import { DIALOG_CONSTANTS } from './dialog-constants';
+export class DialogFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        // Private vars
+        this._open = false;
+        this._backdropClose = true;
+        this._escapeClose = true;
+        this._fullscreen = false;
+        this._positionType = 'absolute';
+        this._positionX = null;
+        this._positionY = null;
+        this._moveable = false;
+        this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
+        this._isAnimating = false;
+        this._isMoving = false;
+        // Event handler states
+        this._attachedDocumentKeydownHandler = false;
+        this._attachedBackdropClickHandler = false;
+        this._transitionEndHandler = (evt) => this._onTransitionEnd();
+        this._documentKeydownHandler = (evt) => this._onDocumentKeydown(evt);
+        this._backdropClickHandler = (evt) => this._onBackdropClick(evt);
+        this._moveTargetMouseDownHandler = (evt) => this._onMoveTargetMouseDown(evt);
+        this._moveTargetMouseMoveHandler = (evt) => this._onMoveTargetMouseMove(evt);
+        this._moveTargetMouseUpHandler = (evt) => this._onMoveTargetMouseUp(evt);
+    }
+    initialize() {
+        this._adapter.initializeAccessibility();
+        if (this._open) {
+            if (this._moveable) {
+                this._adapter.setMoveable(this._moveable);
+                this._initMoveTarget();
+            }
+        }
+    }
+    destroy() {
+        if (this._open) {
+            this._removeDragHandlers();
+            this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
+            if (this._attachedDocumentKeydownHandler) {
+                this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            }
+            if (this._attachedBackdropClickHandler) {
+                this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            }
+        }
+    }
+    async _applyOpen(value) {
+        if (value) {
+            if (typeof this._openCallback === 'function' && !await this._executeOpenCallback()) {
+                return;
+            }
+            this._open = value;
+            this._openDialog();
+        }
+        else {
+            if (typeof this._closeCallback === 'function' && !await this._executeCloseCallback()) {
+                return;
+            }
+            this._open = value;
+            this._closeDialog();
+        }
+        this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.OPEN, this._open);
+    }
+    async _executeOpenCallback() {
+        try {
+            return await Promise.resolve(this._openCallback()) !== false;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    async _executeCloseCallback() {
+        try {
+            return await Promise.resolve(this._closeCallback()) !== false;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    initializeMoveTarget() {
+        if (!this._moveTarget) {
+            this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
+        }
+        this._initMoveTarget();
+    }
+    resetPosition() {
+        this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+    }
+    _normalizePositionValue(value) {
+        if (isNumber(value)) {
+            return `${value}px`;
+        }
+        else if (isString(value)) {
+            return value;
+        }
+        return null;
+    }
+    _openDialog() {
+        this._adapter.attach();
+        if (!this._fullscreen) {
+            if (this._moveable) {
+                this._adapter.setMoveable(this._moveable);
+            }
+            if (this._positionX !== null || this._positionY !== null) {
+                this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+            }
+        }
+        this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN, 'true');
+        this._adapter.registerTransitionEndHandler(this._transitionEndHandler);
+        this._setDocumentKeydownListener(this._escapeClose);
+        this._setBackdropClickListener(this._backdropClose);
+        this._adapter.setAnimating(true);
+        this._isAnimating = true;
+        // Ensure transitions are triggered properly
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                this._adapter.setVisibility(true);
+                this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.OPEN);
+                this._adapter.trySetInitialFocus();
+                if (this._adapter.isScrollable()) {
+                    this._adapter.addRootClass(DIALOG_CONSTANTS.classes.SCROLLABLE);
+                }
+            });
+        });
+        // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
+        setTimeout(() => {
+            window.requestAnimationFrame(() => {
+                if (this._open && this._isAnimating) {
+                    this._onTransitionEnd();
+                }
+            });
+        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+    }
+    _closeDialog() {
+        if (this._moveTarget) {
+            this._removeDragHandlers();
+        }
+        this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
+        if (this._attachedDocumentKeydownHandler) {
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+        }
+        if (this._attachedBackdropClickHandler) {
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+        }
+        this._isAnimating = false;
+        this._adapter.setAnimating(true);
+        this._adapter.setVisibility(false);
+        setTimeout(() => {
+            this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
+            this._adapter.detach();
+            const openDialogs = this._adapter.getOpenDialogs(DIALOG_CONSTANTS.elementName);
+            if (!openDialogs.length) {
+                this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
+            }
+        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+    }
+    _onTransitionEnd() {
+        if (!this._isAnimating) {
+            return;
+        }
+        this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
+        this._adapter.setAnimating(false);
+        this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.READY);
+        this._adapter.tryLayoutChildren();
+        if (this._moveable) {
+            this._initMoveTarget();
+        }
+        this._isAnimating = false;
+    }
+    _initMoveTarget() {
+        if (!this._fullscreen && this._moveable && this._moveTarget && this._adapter.setMoveTarget(this._moveTarget)) {
+            this._adapter.setMoveTargetHandler('mousedown', this._moveTargetMouseDownHandler);
+        }
+    }
+    _removeDragHandlers() {
+        this._adapter.removeDragTargetHandler('mousedown', this._moveTargetMouseDownHandler);
+        this._adapter.removeDocumentListener('mousemove', this._moveTargetMouseMoveHandler);
+        this._adapter.removeDocumentListener('mouseup', this._moveTargetMouseUpHandler);
+    }
+    _onMoveTargetMouseDown(evt) {
+        evt.preventDefault();
+        this._adapter.captureActiveElement();
+        const bounds = this._adapter.getSurfaceBounds();
+        this._moveContext = {
+            top: evt.clientY - bounds.top,
+            left: evt.clientX - bounds.left,
+            height: bounds.height,
+            width: bounds.width
+        };
+        this._adapter.setDocumentListener('mousemove', this._moveTargetMouseMoveHandler);
+        this._adapter.setDocumentListener('mouseup', this._moveTargetMouseUpHandler);
+    }
+    _onMoveTargetMouseMove(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 canDrag = this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.MOVE_START, position, true, true);
+            if (!canDrag) {
+                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 canMove = this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.MOVED, newPosition, true, true);
+            if (canMove) {
+                this._lastPosition = Object.assign({}, newPosition);
+                const newX = this._normalizePositionValue(newPosition.x);
+                const newY = this._normalizePositionValue(newPosition.y);
+                this._adapter.setSurfacePosition(newX, newY, 'absolute');
+            }
+        }
+    }
+    _onMoveTargetMouseUp(evt) {
+        if (this._isMoving) {
+            this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.MOVE_END);
+        }
+        this._moveComplete();
+    }
+    _moveComplete() {
+        this._adapter.tryRestoreActiveElement();
+        this._adapter.removeDocumentListener('mousemove', this._moveTargetMouseMoveHandler);
+        this._adapter.removeDocumentListener('mouseup', this._moveTargetMouseUpHandler);
+        this._lastPosition = undefined;
+        this._moveContext = undefined;
+        this._isMoving = false;
+    }
+    _onDocumentKeydown(evt) {
+        evt.stopPropagation();
+        if (evt.key && (evt.key === 'Escape' || evt.key === 'Esc')) {
+            this._tryClose();
+        }
+    }
+    _onBackdropClick(evt) {
+        evt.stopPropagation();
+        this._tryClose();
+    }
+    async _tryClose() {
+        const isCancelled = !this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.BEFORE_CLOSE, undefined, undefined, true);
+        if (isCancelled) {
+            return;
+        }
+        if (!this._beforeCloseCallback) {
+            this.open = false;
+            return;
+        }
+        try {
+            const shouldClose = await Promise.resolve(this._beforeCloseCallback()) !== false;
+            if (shouldClose) {
+                this.open = false;
+                return;
+            }
+        }
+        catch (err) {
+            return;
+        }
+    }
+    _setBackdropClickListener(attach) {
+        if (!this._open) {
+            return;
+        }
+        if (attach && !this._attachedBackdropClickHandler) {
+            this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
+            this._attachedBackdropClickHandler = true;
+        }
+        else if (!attach && this._attachedBackdropClickHandler) {
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            this._attachedBackdropClickHandler = false;
+        }
+    }
+    _setDocumentKeydownListener(attach) {
+        if (!this._open) {
+            return;
+        }
+        if (attach && !this._attachedDocumentKeydownHandler) {
+            this._adapter.setDocumentListener('keydown', this._documentKeydownHandler);
+            this._attachedDocumentKeydownHandler = true;
+        }
+        else if (!attach && this._attachedDocumentKeydownHandler) {
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            this._attachedDocumentKeydownHandler = false;
+        }
+    }
+    _calculateOffsetPosition(pageX, pageY, context) {
+        return {
+            x: pageX - ((context === null || context === void 0 ? void 0 : context.left) || 0),
+            y: pageY - ((context === null || context === void 0 ? void 0 : context.top) || 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 };
+    }
+    /** Controls whether clicking the backdrop closes the dialog or not. */
+    set backdropClose(value) {
+        value = Boolean(value);
+        if (this._backdropClose !== value) {
+            this._backdropClose = value;
+            this._setBackdropClickListener(this._backdropClose);
+            if (isDefined(this._backdropClose)) {
+                this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose.toString());
+            }
+            else {
+                this._adapter.removeHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE);
+            }
+        }
+    }
+    get backdropClose() {
+        return this._backdropClose;
+    }
+    /** Controls whether pressing the escape key closes the dialog or not. */
+    set escapeClose(value) {
+        value = Boolean(value);
+        if (this._escapeClose !== value) {
+            this._escapeClose = value;
+            this._setDocumentKeydownListener(this._escapeClose);
+            if (isDefined(this._escapeClose)) {
+                this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose.toString());
+            }
+            else {
+                this._adapter.removeHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE);
+            }
+        }
+    }
+    get escapeClose() {
+        return this._escapeClose;
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        if (this._open !== value) {
+            value = Boolean(value);
+            if (value !== this._open) {
+                this._applyOpen(value);
+            }
+        }
+    }
+    get fullscreen() {
+        return this._fullscreen;
+    }
+    set fullscreen(value) {
+        if (this._fullscreen !== value) {
+            this._fullscreen = value;
+            this._adapter.setFullscreen(this._fullscreen);
+        }
+    }
+    get openCallback() {
+        return this._openCallback;
+    }
+    set openCallback(callback) {
+        this._openCallback = callback;
+    }
+    get closeCallback() {
+        return this._closeCallback;
+    }
+    set closeCallback(callback) {
+        this._closeCallback = callback;
+    }
+    get beforeCloseCallback() {
+        return this._beforeCloseCallback;
+    }
+    set beforeCloseCallback(callback) {
+        this._beforeCloseCallback = callback;
+    }
+    get positionType() {
+        return this._positionType;
+    }
+    set positionType(value) {
+        if (this._positionType !== value) {
+            this._positionType = value;
+            if (this._open) {
+                this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+            }
+        }
+    }
+    get positionX() {
+        return this._positionX;
+    }
+    set positionX(value) {
+        if (this._positionX !== value) {
+            this._positionX = this._normalizePositionValue(value);
+            if (this._open) {
+                this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+            }
+        }
+    }
+    get positionY() {
+        return this._positionY;
+    }
+    set positionY(value) {
+        if (this._positionY !== value) {
+            this._positionY = this._normalizePositionValue(value);
+            if (this._open) {
+                this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+            }
+        }
+    }
+    get moveable() {
+        return this._moveable;
+    }
+    set moveable(value) {
+        if (this._moveable !== value) {
+            this._moveable = value;
+            if (this._open) {
+                this._adapter.setMoveable(this._moveable);
+                if (this._moveable) {
+                    this._initMoveTarget();
+                }
+                else {
+                    this._removeDragHandlers();
+                    this._isMoving = false;
+                }
+            }
+        }
+    }
+    get moveTarget() {
+        return this._moveTarget;
+    }
+    set moveTarget(value) {
+        this._moveTarget = value;
+    }
+}

package/esm/dialog/dialog.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DialogPositionType, IDialogMoveStartEventData, IDialogMoveEventData, DialogStateCallback } from './dialog-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IDialogComponent extends IBaseComponent {
+    backdropClose: boolean;
+    escapeClose: boolean;
+    open: boolean;
+    fullscreen: boolean;
+    openCallback: DialogStateCallback;
+    closeCallback: DialogStateCallback;
+    beforeCloseCallback: () => boolean | Promise<boolean>;
+    positionType: DialogPositionType;
+    positionX: number | string | null;
+    positionY: number | string | null;
+    moveable: boolean;
+    moveTarget: string;
+    initializeMoveTarget(): void;
+    resetPosition(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-dialog': IDialogComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-dialog-before-close': CustomEvent<void>;
+        'forge-dialog-open': CustomEvent<void>;
+        'forge-dialog-close': CustomEvent<void>;
+        'forge-dialog-ready': CustomEvent<void>;
+        'forge-dialog-move-start': CustomEvent<IDialogMoveStartEventData>;
+        'forge-dialog-move': CustomEvent<IDialogMoveEventData>;
+        'forge-dialog-move-end': CustomEvent<void>;
+    }
+}
+export declare class DialogComponent extends BaseComponent implements IDialogComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Controls whether clicking the backdrop closes the dialog or not. Default is true. */
+    backdropClose: boolean;
+    /** Controls whether pressing the escape key closes the dialog or not. Default is true. */
+    escapeClose: boolean;
+    /** Controls whether the dialog is open or not. Default is false. */
+    open: boolean;
+    /** Controls whether the dialog is full screen or not. Default is false. */
+    fullscreen: boolean;
+    /** The function to call when the dialog wants to open. */
+    openCallback: DialogStateCallback;
+    /** the function to call when the dialog wants to close. */
+    closeCallback: DialogStateCallback;
+    /** the function to call when the dialog wants to close. */
+    beforeCloseCallback: () => boolean | Promise<boolean>;
+    /** Gets/sets the position type when using custom positioning values. Default is 'absolute'. */
+    positionType: DialogPositionType;
+    /** Controls the horizontal position of the dialog surface. */
+    positionX: number | string | null;
+    /** Controls the vertical position of the dialog surface. */
+    positionY: number | string | null;
+    /** Gets/sets whether the dialog surface can be moved or not. */
+    moveable: boolean;
+    /** Gets/sets the selector used to target the element that is used as the drag target. */
+    moveTarget: string;
+    initializeMoveTarget(): void;
+    resetPosition(): void;
+}

package/esm/dialog/dialog.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { DialogFoundation } from './dialog-foundation';
+import { DialogAdapter } from './dialog-adapter';
+import { DIALOG_CONSTANTS } from './dialog-constants';
+import { BackdropComponent } from '../backdrop';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-dialog\" part=\"root\"><forge-backdrop part=\"scrim\"></forge-backdrop><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
+const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-index:8;z-index:var(--forge-z-index-dialog,8);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-dialog-align-items,center);align-items:var(--forge-dialog-align-items,center);top:0;top:var(--forge-dialog-top,0);padding:24px;padding:var(--forge-dialog-padding,24px);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;visibility:hidden}@media (max-width:599px){.forge-dialog{padding:0}}.forge-dialog--moveable:not(.forge-dialog--fullscreen) ::slotted([forge-dialog-move-target]){cursor:move}.forge-dialog--animating{visibility:visible}.forge-dialog--animating .forge-dialog--open .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--animating .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--scrollable .forge-dialog__footer,.forge-dialog--scrollable .forge-dialog__title{border-color:rgba(0,0,0,.12)}.forge-dialog--open{visibility:visible!important}.forge-dialog--open .forge-dialog__surface{-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-dialog__surface{-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);width:auto;width:var(--forge-dialog-width,auto);height:auto;height:var(--forge-dialog-height,auto);min-width:280px;min-width:var(--forge-dialog-min-width,280px);max-width:100%;max-width:var(--forge-dialog-max-width,100%);max-height:100%;max-height:var(--forge-dialog-max-height,100%);border-radius:4px;border-radius:var(--forge-dialog-border-radius,var(--mdc-shape-medium,4px));display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(.8);transform:scale(.8);opacity:0;overflow:hidden;z-index:inherit}.forge-dialog__header{margin:0;padding:0 24px 9px;border-bottom:1px solid transparent}.forge-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.25rem;font-size:var(--forge-typography-title-font-size, 1.25rem);line-height:2rem;line-height:var(--forge-typography-title-line-height, 2rem);font-weight:400;font-weight:var(--forge-typography-title-font-weight,400);letter-spacing:.0125em;letter-spacing:var(--forge-typography-title-letter-spacing, .0125em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-title-text-decoration,inherit);text-decoration:var(--forge-typography-title-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-title-text-transform,inherit);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.forge-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.forge-dialog__body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);padding-top:20px;padding:0 24px 24px;overflow:auto}.forge-dialog__body--scrollable{max-height:195px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}.forge-dialog__footer{display:-webkit-box;display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:end;justify-content:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.forge-dialog--fullscreen{padding:0}.forge-dialog--fullscreen .forge-dialog__surface{height:100%;width:100%;min-width:auto;max-width:100%;border-radius:0}:host{display:block}:host([hidden]){display:none}';
+let DialogComponent = class DialogComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new DialogFoundation(new DialogAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE,
+            DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE,
+            DIALOG_CONSTANTS.attributes.OPEN,
+            DIALOG_CONSTANTS.attributes.FULLSCREEN,
+            DIALOG_CONSTANTS.attributes.POSITION_TYPE,
+            DIALOG_CONSTANTS.attributes.POSITION_X,
+            DIALOG_CONSTANTS.attributes.POSITION_Y,
+            DIALOG_CONSTANTS.attributes.MOVEABLE,
+            DIALOG_CONSTANTS.attributes.MOVE_TARGET
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE:
+                this.backdropClose = newValue === 'true';
+                break;
+            case DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE:
+                this.escapeClose = newValue === 'true';
+                break;
+            case DIALOG_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case DIALOG_CONSTANTS.attributes.FULLSCREEN:
+                this.fullscreen = coerceBoolean(newValue);
+                break;
+            case DIALOG_CONSTANTS.attributes.POSITION_TYPE:
+                this.positionType = newValue;
+                break;
+            case DIALOG_CONSTANTS.attributes.POSITION_X:
+                this.positionX = newValue;
+                break;
+            case DIALOG_CONSTANTS.attributes.POSITION_Y:
+                this.positionY = newValue;
+                break;
+            case DIALOG_CONSTANTS.attributes.MOVEABLE:
+                this.moveable = coerceBoolean(newValue);
+                break;
+            case DIALOG_CONSTANTS.attributes.MOVE_TARGET:
+                this.moveTarget = newValue;
+                break;
+        }
+    }
+    initializeMoveTarget() {
+        this._foundation.initializeMoveTarget();
+    }
+    resetPosition() {
+        this._foundation.resetPosition();
+    }
+};
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "backdropClose", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "escapeClose", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "fullscreen", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "openCallback", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "closeCallback", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "beforeCloseCallback", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "positionType", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "positionX", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "positionY", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "moveable", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "moveTarget", void 0);
+DialogComponent = __decorate([
+    CustomElement({
+        name: DIALOG_CONSTANTS.elementName,
+        dependencies: [BackdropComponent]
+    })
+], DialogComponent);
+export { DialogComponent };

package/esm/dialog/index.d.ts

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

package/esm/dialog/index.js

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

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const DIVIDER_CONSTANTS: {
+    elementName: "forge-divider";
+    classes: {
+        ROOT: string;
+    };
+};