@tylertech/forge 2.16.6 → 3.0.0-next.10

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

@@ -27,7 +27,6 @@ export interface IBaseDatePickerFoundation<TValue> extends ICustomElementFoundat
     showToday: boolean;
     showClear: boolean;
     yearRange: string;
-    locale: string | undefined;
 }
 export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDatePickerAdapter, TPublicValue, TPrivateValue = TPublicValue> implements IBaseDatePickerFoundation<TPublicValue> {
     protected _adapter: TAdapter;
@@ -53,7 +52,6 @@ export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDat
     protected _showClear: boolean;
     protected _disabledDaysOfWeek: DayOfWeek[];
     protected _yearRange: string;
-    protected _locale: string | undefined;
     protected _isInitialized: boolean;
     private _inputListener;
     private _inputKeydownListener;
@@ -151,6 +149,4 @@ export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDat
     set showClear(value: boolean);
     get yearRange(): string;
     set yearRange(value: string);
-    get locale(): string | undefined;
-    set locale(value: string | undefined);
 }

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

@@ -124,8 +124,7 @@ export class BaseDatePickerFoundation {
             preventFocus: true,
             menuAnimation: 'fade',
             fixedHeight: true,
-            selectionFollowsMonth: true,
-            locale: this._locale
+            selectionFollowsMonth: true
         };
         const dropdownConfig = {
             popupClasses: this._popupClasses,
@@ -610,15 +609,4 @@ export class BaseDatePickerFoundation {
             }
         }
     }
-    get locale() {
-        return this._locale;
-    }
-    set locale(value) {
-        if (this._locale !== value) {
-            this._locale = value;
-            if (this._isInitialized && this._open) {
-                this._adapter.setCalendarLocale(this._locale);
-            }
-        }
-    }
 }

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

@@ -30,7 +30,6 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     showClear: boolean;
     disabledDaysOfWeek: DayOfWeek[];
     yearRange: string;
-    locale: string | undefined;
 }
 export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValue, TFoundation extends BaseDatePickerFoundation<IBaseDatePickerAdapter, TPublicValue, TPrivateValue>> extends BaseComponent implements IBaseDatePickerComponent<TPublicValue> {
     protected _foundation: TFoundation;
@@ -80,6 +79,4 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     disableDayCallback: (date: Date) => boolean;
     /** Sets the year range. */
     yearRange: string;
-    /** Sets the locale to use. */
-    locale: string | undefined;
 }

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

@@ -67,9 +67,6 @@ export class BaseDatePickerComponent extends BaseComponent {
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.YEAR_RANGE:
                 this.yearRange = newValue;
                 break;
-            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.LOCALE:
-                this.locale = newValue;
-                break;
         }
     }
 }
@@ -136,6 +133,3 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], BaseDatePickerComponent.prototype, "yearRange", void 0);
-__decorate([
-    FoundationProperty()
-], BaseDatePickerComponent.prototype, "locale", void 0);

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

@@ -89,7 +89,7 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         return this._inputElement.disabled;
     }
     isInputFocused() {
-        return getActiveElement(this._component.ownerDocument) === this._inputElement;
+        return getActiveElement() === this._inputElement;
     }
     getInputValue() {
         return this._inputMask ? this._inputMask.maskedValue : this._inputElement.value;

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

@@ -7,7 +7,7 @@ import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-d
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ITextFieldComponent, ITextFieldComponentDelegateConfig } from '../text-field';
 import { IDatePickerComponent } from './date-picker';
-export declare type DatePickerComponentDelegateProps = Partial<IDatePickerComponent>;
+export type DatePickerComponentDelegateProps = Partial<IDatePickerComponent>;
 export interface IDatePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     useDropdownIcon?: boolean;
     textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;

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

@@ -144,7 +144,7 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         if (target && this._toInputElement === target || this._fromInputElement === target) {
             return true;
         }
-        const activeEl = getActiveElement(this._component.ownerDocument);
+        const activeEl = getActiveElement();
         return this._toInputElement === activeEl || this._fromInputElement === activeEl;
     }
     getInputValue() {

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

@@ -8,7 +8,7 @@ import { FieldDensityType } from '../field/field-constants';
 import { ITextFieldComponent } from '../text-field';
 import { IDateRangePickerComponent } from './date-range-picker';
 import { IDateRangePickerChangeEventData } from './date-range-picker-constants';
-export declare type DateRangePickerComponentDelegateProps = Partial<IDateRangePickerComponent>;
+export type DateRangePickerComponentDelegateProps = Partial<IDateRangePickerComponent>;
 export interface IDateRangePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     useDropdownIcon?: boolean;
     fromPlaceholder?: string;

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

@@ -10,7 +10,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     initializeAccessibility(): void;
     setAnimating(animating: boolean): void;
     setVisibility(visible: boolean): void;
-    attach(): void;
+    attach(parent?: HTMLElement): void;
     detach(): void;
     setDocumentListener(type: string, listener: (evt: Event) => void): void;
     removeDocumentListener(type: string, listener: (evt: Event) => void): void;
@@ -30,7 +30,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     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): void;
+    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
     captureActiveElement(): void;
     tryRestoreActiveElement(): void;
 }
@@ -38,7 +38,7 @@ export interface IDialogAdapter extends IBaseAdapter {
  * Provides facilities for interacting with the internal DOM of `DialogComponent`.
  */
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
-    private _backdropElement;
+    private _backdropElement?;
     private _containerElement;
     private _surfaceElement;
     private _moveTargetElement;
@@ -47,7 +47,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     initializeAccessibility(): void;
     setAnimating(animating: boolean): void;
     setVisibility(visible: boolean): void;
-    attach(): void;
+    attach(parent?: HTMLElement): void;
     detach(): void;
     registerTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
     deregisterTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
@@ -67,7 +67,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     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): void;
+    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
     captureActiveElement(): void;
     tryRestoreActiveElement(): void;
 }

package/esm/dialog/dialog-adapter.js

@@ -13,7 +13,6 @@ import { DIALOG_CONSTANTS } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._backdropElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.BACKDROP);
         this._containerElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.CONTAINER);
         this._surfaceElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.SURFACE);
     }
@@ -24,23 +23,24 @@ export class DialogAdapter extends BaseAdapter {
         this._component.setAttribute('aria-modal', 'true');
     }
     setAnimating(animating) {
-        if (animating) {
-            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.ANIMATING);
-        }
-        else {
-            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.ANIMATING);
-        }
+        toggleClass(this._containerElement, animating, DIALOG_CONSTANTS.classes.ANIMATING);
     }
     setVisibility(visible) {
+        toggleClass(this._containerElement, visible, DIALOG_CONSTANTS.classes.OPEN);
+        if (!this._backdropElement) {
+            this._backdropElement = document.createElement('forge-backdrop');
+            this._backdropElement.setAttribute('part', 'scrim');
+            this._containerElement.appendChild(this._backdropElement);
+        }
         if (visible) {
-            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.OPEN);
+            this._backdropElement.fadeIn();
         }
         else {
-            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.OPEN);
+            this._backdropElement.fadeOut();
         }
     }
-    attach() {
-        document.body.appendChild(this._component);
+    attach(parent = document.body) {
+        parent.appendChild(this._component);
     }
     detach() {
         if (this._activeElement) {
@@ -61,10 +61,12 @@ export class DialogAdapter extends BaseAdapter {
         document.removeEventListener(type, listener);
     }
     registerBackdropClickHandler(handler) {
-        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        var _a;
+        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
     }
     deregisterBackdropClickHandler(handler) {
-        this._backdropElement.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        var _a;
+        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
     }
     getOpenDialogs(selector) {
         return document.querySelectorAll(selector);
@@ -93,12 +95,7 @@ export class DialogAdapter extends BaseAdapter {
         this._component.classList.add(name);
     }
     setFullscreen(value) {
-        if (value) {
-            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.FULLSCREEN);
-        }
-        else {
-            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.FULLSCREEN);
-        }
+        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.FULLSCREEN);
     }
     setMoveable(value) {
         toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
@@ -111,27 +108,30 @@ export class DialogAdapter extends BaseAdapter {
         return !!this._moveTargetElement;
     }
     setMoveTargetHandler(type, listener) {
-        if (this._moveTargetElement) {
-            this._moveTargetElement.addEventListener(type, listener);
-        }
+        var _a;
+        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
     }
     removeDragTargetHandler(type, listener) {
-        if (this._moveTargetElement) {
-            this._moveTargetElement.removeEventListener(type, listener);
-        }
+        var _a;
+        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
     }
     getSurfaceBounds() {
         return this._surfaceElement.getBoundingClientRect();
     }
     setSurfacePosition(x, y, positionType) {
-        this._surfaceElement.style.position = positionType === 'absolute' ? positionType : 'relative';
-        if (y != null) {
+        if (positionType) {
+            this._surfaceElement.style.position = positionType === 'absolute' ? positionType : 'relative';
+        }
+        else {
+            this._surfaceElement.style.removeProperty('position');
+        }
+        if (y !== null) {
             this._surfaceElement.style.top = y;
         }
         else {
             this._surfaceElement.style.removeProperty('top');
         }
-        if (x != null) {
+        if (x !== null) {
             this._surfaceElement.style.left = x;
         }
         else {
@@ -139,10 +139,9 @@ export class DialogAdapter extends BaseAdapter {
         }
     }
     captureActiveElement() {
-        this._activeElement = getActiveElement(this._component.ownerDocument);
-        if (this._activeElement) {
-            this._activeElement.blur();
-        }
+        var _a;
+        this._activeElement = getActiveElement();
+        (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     tryRestoreActiveElement() {
         if (this._activeElement) {

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

@@ -61,5 +61,5 @@ export interface IDialogMoveContext {
 }
 export interface IDialogMoveStartEventData extends IDialogMoveEventData {
 }
-export declare type DialogPositionType = 'absolute' | 'relative';
-export declare type DialogStateCallback = () => boolean | void | Promise<boolean | void>;
+export type DialogPositionType = 'absolute' | 'relative';
+export type DialogStateCallback = () => boolean | void | Promise<boolean | void>;

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

@@ -21,6 +21,8 @@ export interface IDialogFoundation extends ICustomElementFoundation {
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
 }
 export declare class DialogFoundation implements IDialogFoundation {
     _adapter: IDialogAdapter;
@@ -46,8 +48,6 @@ export declare class DialogFoundation implements IDialogFoundation {
     private _moveTargetMouseDownHandler;
     private _moveTargetMouseMoveHandler;
     private _moveTargetMouseUpHandler;
-    private _attachedDocumentKeydownHandler;
-    private _attachedBackdropClickHandler;
     constructor(_adapter: IDialogAdapter);
     initialize(): void;
     destroy(): void;
@@ -56,6 +56,8 @@ export declare class DialogFoundation implements IDialogFoundation {
     private _executeCloseCallback;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
     private _normalizePositionValue;
     private _openDialog;
     private _closeDialog;

package/esm/dialog/dialog-foundation.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isDefined, isNumber, isString } from '@tylertech/forge-core';
+import { isNumber, isString } from '@tylertech/forge-core';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 export class DialogFoundation {
     constructor(_adapter) {
@@ -20,9 +20,6 @@ export class DialogFoundation {
         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);
@@ -43,12 +40,8 @@ export class DialogFoundation {
         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);
-            }
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
         }
     }
     async _applyOpen(value) {
@@ -93,6 +86,26 @@ export class DialogFoundation {
     resetPosition() {
         this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
     }
+    async show(parent) {
+        if (this._open) {
+            return;
+        }
+        this._open = true;
+        if (!this._adapter.isConnected) {
+            this._adapter.attach(parent);
+        }
+        await this._openDialog();
+    }
+    async hide(remove) {
+        if (!this._open) {
+            return;
+        }
+        this._open = false;
+        await this._closeDialog();
+        if (remove) {
+            this._adapter.detach();
+        }
+    }
     _normalizePositionValue(value) {
         if (isNumber(value)) {
             return `${value}px`;
@@ -103,25 +116,24 @@ export class DialogFoundation {
         return null;
     }
     _openDialog() {
-        this._adapter.attach();
         if (!this._fullscreen) {
             if (this._moveable) {
                 this._adapter.setMoveable(this._moveable);
             }
-            if (this._positionX != null || this._positionY != null) {
+            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._setBackdropClickListener(this._backdropClose); // Must come after setting visibility because the backdrop may not yet exist
                 this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.OPEN);
                 this._adapter.trySetInitialFocus();
                 if (this._adapter.isScrollable()) {
@@ -129,37 +141,46 @@ export class DialogFoundation {
                 }
             });
         });
-        // 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);
+        return new Promise(resolve => {
+            // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
+            window.setTimeout(() => {
+                window.requestAnimationFrame(() => {
+                    if (this._open && this._isAnimating) {
+                        this._onTransitionEnd();
+                        resolve();
+                    }
+                });
+            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        });
     }
     _closeDialog() {
         if (this._moveTarget) {
             this._removeDragHandlers();
         }
         this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-        if (this._attachedDocumentKeydownHandler) {
+        if (this._escapeClose) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
         }
-        if (this._attachedBackdropClickHandler) {
+        if (this._backdropClose) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
         }
         this._isAnimating = false;
+        this._moveContext = undefined;
+        this._lastPosition = undefined;
         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);
+        this._adapter.setSurfacePosition(null, null, null);
+        return new Promise(resolve => {
+            setTimeout(() => {
+                this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
+                const openDialogs = this._adapter.getOpenDialogs(`${DIALOG_CONSTANTS.elementName}[${DIALOG_CONSTANTS.attributes.OPEN}]`);
+                if (!openDialogs.length) {
+                    this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
+                }
+                this._adapter.setAnimating(false);
+                resolve();
+            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
+        });
     }
     _onTransitionEnd() {
         if (!this._isAnimating) {
@@ -269,26 +290,22 @@ export class DialogFoundation {
         if (!this._open) {
             return;
         }
-        if (attach && !this._attachedBackdropClickHandler) {
+        if (attach && this._backdropClose) {
             this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
-            this._attachedBackdropClickHandler = true;
         }
-        else if (!attach && this._attachedBackdropClickHandler) {
+        else if (!attach) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-            this._attachedBackdropClickHandler = false;
         }
     }
     _setDocumentKeydownListener(attach) {
         if (!this._open) {
             return;
         }
-        if (attach && !this._attachedDocumentKeydownHandler) {
+        if (attach && this._escapeClose) {
             this._adapter.setDocumentListener('keydown', this._documentKeydownHandler);
-            this._attachedDocumentKeydownHandler = true;
         }
-        else if (!attach && this._attachedDocumentKeydownHandler) {
+        else if (!attach) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            this._attachedDocumentKeydownHandler = false;
         }
     }
     _calculateOffsetPosition(pageX, pageY, context) {
@@ -324,12 +341,7 @@ export class DialogFoundation {
         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);
-            }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose);
         }
     }
     get backdropClose() {
@@ -339,14 +351,9 @@ export class DialogFoundation {
     set escapeClose(value) {
         value = Boolean(value);
         if (this._escapeClose !== value) {
-            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);
-            }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose);
         }
     }
     get escapeClose() {
@@ -370,7 +377,7 @@ export class DialogFoundation {
         if (this._fullscreen !== value) {
             this._fullscreen = !!value;
             this._adapter.setFullscreen(this._fullscreen);
-            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, String(this._fullscreen));
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
         }
     }
     get openCallback() {
@@ -429,7 +436,7 @@ export class DialogFoundation {
     }
     set moveable(value) {
         if (this._moveable !== value) {
-            this._moveable = value;
+            this._moveable = !!value;
             if (this._open) {
                 this._adapter.setMoveable(this._moveable);
                 if (this._moveable) {
@@ -440,6 +447,7 @@ export class DialogFoundation {
                     this._isMoving = false;
                 }
             }
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.MOVEABLE, this._moveable);
         }
     }
     get moveTarget() {

package/esm/dialog/dialog.d.ts

@@ -20,6 +20,8 @@ export interface IDialogComponent extends IBaseComponent {
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -73,4 +75,6 @@ export declare class DialogComponent extends BaseComponent implements IDialogCom
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
+    show(parent?: HTMLElement): Promise<void>;
+    hide(remove?: boolean): Promise<void>;
 }

package/esm/dialog/dialog.js

@@ -10,7 +10,7 @@ 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 template = '<template><div class=\"forge-dialog\" part=\"root\"><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}';
 /**
  * The web component class behind the `<forge-dialog>` custom element.
@@ -18,11 +18,6 @@ const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-ind
  * @tag forge-dialog
  */
 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,
@@ -36,6 +31,11 @@ let DialogComponent = class DialogComponent extends BaseComponent {
             DIALOG_CONSTANTS.attributes.MOVE_TARGET
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new DialogFoundation(new DialogAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }
@@ -79,6 +79,12 @@ let DialogComponent = class DialogComponent extends BaseComponent {
     resetPosition() {
         this._foundation.resetPosition();
     }
+    show(parent) {
+        return this._foundation.show(parent);
+    }
+    hide(remove) {
+        return this._foundation.hide(remove);
+    }
 };
 __decorate([
     FoundationProperty()

package/esm/drawer/base/base-drawer-constants.d.ts

@@ -24,4 +24,4 @@ export declare const BASE_DRAWER_CONSTANTS: {
         AFTER_CLOSE: string;
     };
 };
-export declare type DrawerDirection = 'left' | 'right';
+export type DrawerDirection = 'left' | 'right';