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

package/esm/dialog/dialog-adapter.js

@@ -3,166 +3,138 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { deepQuerySelectorAll, getActiveElement, getShadowElement, removeElement, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, playKeyframeAnimation } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
-import { CHECKBOX_CONSTANTS } from '../checkbox/checkbox-constants';
+import { setDefaultAria } from '../constants';
 import { BaseAdapter } from '../core/base/base-adapter';
-import { ICON_BUTTON_CONSTANTS } from '../icon-button/icon-button-constants';
-import { RADIO_CONSTANTS } from '../radio/radio/radio-constants';
-import { SWITCH_CONSTANTS } from '../switch/switch-constants';
-import { DIALOG_CONSTANTS } from './dialog-constants';
-/**
- * Provides facilities for interacting with the internal DOM of `DialogComponent`.
- */
+import { DialogComponent } from './dialog';
+import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
+    get moveHandleElement() {
+        return this._moveHandleElement;
+    }
+    get surfaceElement() {
+        return this._surfaceElement;
+    }
     constructor(component) {
         super(component);
-        this._containerElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.CONTAINER);
+        this._dialogElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.DIALOG);
         this._surfaceElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.SURFACE);
-    }
-    initializeAccessibility() {
-        if (!this._component.hasAttribute('role')) {
-            this._component.setAttribute('role', 'dialog');
+        this._moveHandleElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.MOVE_HANDLE);
+        this._backdropElement = getShadowElement(component, BACKDROP_CONSTANTS.elementName);
+        if (!this._backdropElement.shadowRoot) {
+            window.customElements.upgrade(this._backdropElement);
         }
-        this._component.setAttribute('aria-modal', 'true');
     }
-    setAnimating(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);
+    show() {
+        /* c8 ignore next 3 */
+        if (this._dialogElement.open) {
+            return;
+        }
+        this._component[setDefaultAria]({
+            role: this._component.type,
+            ariaModal: this._component.mode === 'modal' || this._component.mode === 'inline-modal' ? 'true' : 'false'
+        }, { setAttribute: true });
+        // Show the dialog (and backdrop) based on modal vs non-modal
+        const isModal = this._component.mode === 'modal' || this._component.mode === 'inline-modal';
+        if (isModal) {
+            if (this._component.animationType === 'none') {
+                this._backdropElement.show();
+            }
+            else {
+                this._backdropElement.fadeIn();
+            }
         }
-        if (visible) {
-            this._backdropElement.fadeIn();
+        if (this._component.mode === 'modal') {
+            this._dialogElement.showModal();
         }
         else {
-            this._backdropElement.fadeOut();
+            this._dialogElement.show();
         }
-    }
-    attach(parent = document.body) {
-        parent.appendChild(this._component);
-    }
-    detach() {
-        if (this._activeElement) {
-            this._activeElement = undefined;
+        if (isModal) {
+            this._hideBackdrops();
         }
-        removeElement(this._component);
-    }
-    registerTransitionEndHandler(handler) {
-        this._surfaceElement.addEventListener('transitionend', handler);
-    }
-    deregisterTransitionEndHandler(handler) {
-        this._surfaceElement.removeEventListener('transitionend', handler);
+        DialogComponent[dialogStack].add(this._component);
     }
-    setDocumentListener(type, listener) {
-        document.addEventListener(type, listener);
+    _hideBackdrops() {
+        DialogComponent[dialogStack].forEach(dialog => dialog[hideBackdrop]());
     }
-    removeDocumentListener(type, listener) {
-        document.removeEventListener(type, listener);
-    }
-    registerBackdropClickHandler(handler) {
-        var _a;
-        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
-    }
-    deregisterBackdropClickHandler(handler) {
+    _showBackdropMostRecent() {
         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);
-    }
-    setBodyAttribute(name, value) {
-        document.body.setAttribute(name, value);
-    }
-    removeBodyAttribute(name) {
-        document.body.removeAttribute(name);
-    }
-    trySetInitialFocus() {
-        const elements = deepQuerySelectorAll(this._component, DIALOG_CONSTANTS.selectors.INITIAL_FOCUS);
-        if (elements && elements.length) {
-            const initialElement = elements[elements.length - 1];
-            initialElement.focus();
-        }
-    }
-    isScrollable() {
-        const contentElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.CONTENT);
-        if (contentElement) {
-            return contentElement.scrollHeight > contentElement.offsetHeight;
+        (_a = Array.from(DialogComponent[dialogStack]).filter(dialog => dialog.mode === 'modal' || dialog.mode === 'inline-modal').at(-1)) === null || _a === void 0 ? void 0 : _a[showBackdrop]();
+    }
+    async hide() {
+        this._component[setDefaultAria]({
+            role: null,
+            ariaModal: null
+        }, { setAttribute: true });
+        const close = () => {
+            this._surfaceElement.classList.remove(BACKDROP_CONSTANTS.classes.EXITING);
+            this._dialogElement.close();
+            DialogComponent[dialogStack].delete(this._component);
+            this._showBackdropMostRecent();
+        };
+        if (this._component.animationType === 'none') {
+            return Promise.resolve(close());
         }
-        return false;
-    }
-    addRootClass(name) {
-        this._component.classList.add(name);
-    }
-    setFullscreen(value) {
-        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.FULLSCREEN);
-    }
-    setMoveable(value) {
-        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
-    }
-    tryLayoutRippleChildren() {
-        const selectors = [
-            ICON_BUTTON_CONSTANTS.elementName,
-            SWITCH_CONSTANTS.elementName,
-            CHECKBOX_CONSTANTS.elementName,
-            RADIO_CONSTANTS.elementName
-        ];
-        const rippleChildren = deepQuerySelectorAll(this._component, selectors.join(':focus-within,'));
-        rippleChildren.filter(el => typeof el.layout === 'function').forEach(el => el.layout());
-    }
-    setMoveTarget(selector) {
-        if (!selector) {
-            return false;
+        this._backdropElement.fadeOut();
+        await playKeyframeAnimation(this._surfaceElement, BACKDROP_CONSTANTS.classes.EXITING);
+        close();
+    }
+    addDialogFormSubmitListener(listener) {
+        this._dialogElement.addEventListener('submit', listener);
+    }
+    removeDialogFormSubmitListener(listener) {
+        this._dialogElement.removeEventListener('submit', listener);
+    }
+    addDialogCancelListener(listener) {
+        this._dialogElement.addEventListener('cancel', listener);
+    }
+    removeDialogCancelListener(listener) {
+        this._dialogElement.removeEventListener('cancel', listener);
+    }
+    addBackdropDismissListener(listener) {
+        this._backdropElement.addEventListener('click', listener);
+    }
+    removeBackdropDismissListener(listener) {
+        this._backdropElement.removeEventListener('click', listener);
+    }
+    tryAutofocus() {
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                if (this._component.open && this._dialogElement.isConnected && !this._component.matches(':focus-within')) {
+                    const autofocusElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.AUTOFOCUS);
+                    autofocusElement === null || autofocusElement === void 0 ? void 0 : autofocusElement.focus();
+                }
+            });
+        });
+    }
+    tryLocateTriggerElement(id) {
+        if (!id) {
+            this.triggerElement = null;
+            return;
         }
-        this._moveTargetElement = this._component.querySelector(selector);
-        return !!this._moveTargetElement;
+        const rootNode = this._component.getRootNode();
+        this.triggerElement = rootNode.querySelector(`#${id}`);
     }
-    setMoveTargetHandler(type, listener) {
+    addTriggerInteractionListener(listener) {
         var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
     }
-    removeDragTargetHandler(type, listener) {
+    removeTriggerInteractionListener(listener) {
         var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', listener);
     }
-    getSurfaceBounds() {
-        return this._surfaceElement.getBoundingClientRect();
+    hideBackdrop() {
+        this._backdropElement.fadeOut();
     }
-    setSurfacePosition(x, y, positionType) {
-        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) {
-            this._surfaceElement.style.left = x;
-        }
-        else {
-            this._surfaceElement.style.removeProperty('left');
-        }
+    showBackdrop() {
+        this._backdropElement.fadeIn();
     }
-    captureActiveElement() {
-        var _a;
-        this._activeElement = getActiveElement(this._component.ownerDocument);
-        (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    addSurfaceClass(className) {
+        this._surfaceElement.classList.add(className);
     }
-    tryRestoreActiveElement() {
-        if (this._activeElement) {
-            if (this._activeElement.isConnected) {
-                this._activeElement.focus();
-            }
-            this._activeElement = undefined;
-        }
+    removeSurfaceClass(className) {
+        this._surfaceElement.classList.remove(className);
     }
 }

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

@@ -5,49 +5,64 @@
  */
 export declare const DIALOG_CONSTANTS: {
     elementName: "forge-dialog";
-    classes: {
-        ANIMATING: string;
+    observedAttributes: {
         OPEN: string;
-        ACTION_BUTTON: string;
-        BUTTON_TEXT: string;
-        SCROLLABLE: string;
+        VISIBLE: string;
+        MODE: string;
+        TYPE: string;
+        ANIMATION_TYPE: string;
+        PRESET: string;
+        PERSISTENT: string;
         FULLSCREEN: string;
+        TRIGGER: string;
         MOVEABLE: string;
+        MOVE_TARGET: string;
+        POSITION_STRATEGY: string;
+        PLACEMENT: string;
+        SIZE_STRATEGY: string;
     };
-    selectors: {
-        CONTAINER: string;
-        SURFACE: string;
-        BACKDROP: "forge-backdrop";
-        INITIAL_FOCUS: string;
-        DFEAULT_MOVE_TARGET: string;
-        CONTENT: string;
+    classes: {
+        MOVED: string;
+        MOVING: string;
     };
     attributes: {
-        BACKDROP_CLOSE: string;
-        ESCAPE_CLOSE: string;
+        OPEN: string;
+        VISIBLE: string;
+        MODE: string;
+        TYPE: string;
+        ANIMATION_TYPE: string;
+        PRESET: string;
+        PERSISTENT: string;
         FULLSCREEN: string;
-        POSITION_TYPE: string;
-        POSITION_X: string;
-        POSITION_Y: string;
+        TRIGGER: string;
         MOVEABLE: string;
         MOVE_TARGET: string;
-        OPEN: string;
-        BODY_OPEN: string;
-        INITIAL_FOCUS: string;
-        DFEAULT_MOVE_TARGET: string;
+        POSITION_STRATEGY: string;
+        PLACEMENT: string;
+        SIZE_STRATEGY: string;
+    };
+    selectors: {
+        DIALOG: string;
+        SURFACE: string;
+        MOVE_HANDLE: string;
+        AUTOFOCUS: string;
     };
     events: {
         BEFORE_CLOSE: string;
         OPEN: string;
         CLOSE: string;
-        READY: string;
         MOVE_START: string;
-        MOVED: string;
+        MOVE: string;
         MOVE_END: string;
     };
-    numbers: {
-        ANIMATION_DURATION: number;
-        BACKDROP_MAX_OPACITY: number;
+    defaults: {
+        MODE: DialogMode;
+        TYPE: DialogType;
+        ANIMATION_TYPE: DialogAnimationType;
+        PRESET: DialogPreset;
+        SIZE_STRATEGY: DialogSizeStrategy;
+        POSITION_STRATEGY: DialogPositionStrategy;
+        PLACEMENT: DialogPlacement;
     };
 };
 export interface IDialogMoveEventData {
@@ -62,5 +77,13 @@ export interface IDialogMoveContext {
 }
 export interface IDialogMoveStartEventData extends IDialogMoveEventData {
 }
-export type DialogPositionType = 'absolute' | 'relative';
-export type DialogStateCallback = () => boolean | void | Promise<boolean | void>;
+export type DialogMode = 'modal' | 'inline-modal' | 'nonmodal';
+export type DialogType = 'dialog' | 'alertdialog';
+export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+export type DialogPositionStrategy = 'viewport' | 'container';
+export type DialogPlacement = 'custom' | 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type DialogSizeStrategy = 'content' | 'container-inline' | 'container-block';
+export type DialogPreset = 'dialog' | 'bottom-sheet' | 'top-sheet' | 'left-sheet' | 'right-sheet';
+export declare const hideBackdrop: unique symbol;
+export declare const showBackdrop: unique symbol;
+export declare const dialogStack: unique symbol;

package/esm/dialog/dialog-constants.js

@@ -4,57 +4,60 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { BACKDROP_CONSTANTS } from '../backdrop';
 const elementName = `${COMPONENT_NAME_PREFIX}dialog`;
-const classes = {
-    ANIMATING: 'forge-dialog--animating',
-    OPEN: 'forge-dialog--open',
-    ACTION_BUTTON: 'forge-dialog__action__button',
-    BUTTON_TEXT: 'forge-button__text',
-    SCROLLABLE: 'forge-dialog--scrollable',
-    FULLSCREEN: 'forge-dialog--fullscreen',
-    MOVEABLE: 'forge-dialog--moveable'
-};
-const attributes = {
-    BACKDROP_CLOSE: 'backdrop-close',
-    ESCAPE_CLOSE: 'escape-close',
+const observedAttributes = {
+    OPEN: 'open',
+    VISIBLE: 'visible',
+    MODE: 'mode',
+    TYPE: 'type',
+    ANIMATION_TYPE: 'animation-type',
+    PRESET: 'preset',
+    PERSISTENT: 'persistent',
     FULLSCREEN: 'fullscreen',
-    POSITION_TYPE: 'position-type',
-    POSITION_X: 'position-x',
-    POSITION_Y: 'position-y',
+    TRIGGER: 'trigger',
     MOVEABLE: 'moveable',
     MOVE_TARGET: 'move-target',
-    OPEN: 'open',
-    BODY_OPEN: 'forge-dialog-open',
-    INITIAL_FOCUS: 'forge-dialog-focus',
-    DFEAULT_MOVE_TARGET: 'forge-dialog-move-target'
+    POSITION_STRATEGY: 'position-strategy',
+    PLACEMENT: 'placement',
+    SIZE_STRATEGY: 'size-strategy'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    MOVED: 'moved',
+    MOVING: 'moving'
 };
 const selectors = {
-    CONTAINER: '.forge-dialog',
-    SURFACE: '.forge-dialog__surface',
-    BACKDROP: BACKDROP_CONSTANTS.elementName,
-    INITIAL_FOCUS: `[${attributes.INITIAL_FOCUS}]`,
-    DFEAULT_MOVE_TARGET: `[${attributes.DFEAULT_MOVE_TARGET}]`,
-    CONTENT: '.forge-dialog__body'
+    DIALOG: '.forge-dialog',
+    SURFACE: '.surface',
+    MOVE_HANDLE: '.move-handle',
+    AUTOFOCUS: ':is([autofocus],[forge-dialog-focus])'
 };
 const events = {
     BEFORE_CLOSE: `${elementName}-before-close`,
     OPEN: `${elementName}-open`,
     CLOSE: `${elementName}-close`,
-    READY: `${elementName}-ready`,
     MOVE_START: `${elementName}-move-start`,
-    MOVED: `${elementName}-move`,
+    MOVE: `${elementName}-move`,
     MOVE_END: `${elementName}-move-end`
 };
-const numbers = {
-    ANIMATION_DURATION: 150,
-    BACKDROP_MAX_OPACITY: 0.3
+const defaults = {
+    MODE: 'modal',
+    TYPE: 'dialog',
+    ANIMATION_TYPE: 'zoom',
+    PRESET: 'dialog',
+    SIZE_STRATEGY: 'content',
+    POSITION_STRATEGY: 'viewport',
+    PLACEMENT: 'center'
 };
 export const DIALOG_CONSTANTS = {
     elementName,
+    observedAttributes,
     classes,
-    selectors,
     attributes,
+    selectors,
     events,
-    numbers
+    defaults
 };
+export const hideBackdrop = Symbol('hideBackdrop');
+export const showBackdrop = Symbol('showBackdrop');
+export const dialogStack = Symbol('dialogStack');

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

@@ -5,100 +5,84 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IDialogAdapter } from './dialog-adapter';
-import { DialogPositionType, DialogStateCallback } from './dialog-constants';
+import { DialogAnimationType, DialogMode, DialogPlacement, DialogPositionStrategy, DialogPreset, DialogSizeStrategy, DialogType } from './dialog-constants';
 export interface IDialogFoundation extends ICustomElementFoundation {
-    backdropClose: boolean;
-    escapeClose: boolean;
     open: boolean;
+    mode: DialogMode;
+    type: DialogType;
+    animationType: DialogAnimationType;
+    preset: DialogPreset;
+    persistent: boolean;
     fullscreen: boolean;
-    openCallback: DialogStateCallback;
-    closeCallback: DialogStateCallback;
-    beforeCloseCallback: DialogStateCallback;
-    positionType: DialogPositionType;
-    positionX: number | string | null | undefined;
-    positionY: number | string | null | undefined;
+    trigger: string;
+    triggerElement: HTMLElement | null;
+    positionStrategy: DialogPositionStrategy;
+    sizeStrategy: DialogSizeStrategy;
+    placement: DialogPlacement;
     moveable: boolean;
-    moveTarget: string;
-    initializeMoveTarget(): void;
-    resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    dispatchBeforeCloseEvent(): boolean;
 }
 export declare class DialogFoundation implements IDialogFoundation {
     _adapter: IDialogAdapter;
     private _open;
-    private _backdropClose;
-    private _escapeClose;
+    private _mode;
+    private _type;
+    private _animationType;
+    private _preset;
+    private _persistent;
     private _fullscreen;
-    private _openCallback;
-    private _closeCallback;
-    private _beforeCloseCallback;
-    private _positionType;
-    private _positionX;
-    private _positionY;
+    private _trigger;
     private _moveable;
-    private _moveTarget;
-    private _isAnimating;
-    private _isMoving;
-    private _moveContext;
-    private _lastPosition;
-    private _transitionEndHandler;
-    private _documentKeydownHandler;
-    private _backdropClickHandler;
-    private _moveTargetMouseDownHandler;
-    private _moveTargetMouseMoveHandler;
-    private _moveTargetMouseUpHandler;
+    private _sizeStrategy;
+    private _placement;
+    private _positionStrategy;
+    private _moveController;
+    private _escapeDismissListener;
+    private _backdropDismissListener;
+    private _dialogFormSubmitListener;
+    private _triggerClickListener;
     constructor(_adapter: IDialogAdapter);
     initialize(): void;
     destroy(): void;
+    dispatchBeforeCloseEvent(): boolean;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    private _show;
+    private _hide;
     private _applyOpen;
-    private _executeOpenCallback;
-    private _executeCloseCallback;
-    initializeMoveTarget(): void;
-    resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
-    private _normalizePositionValue;
-    private _openDialog;
-    private _closeDialog;
-    private _onTransitionEnd;
-    private _initMoveTarget;
-    private _removeDragHandlers;
-    private _onMoveTargetMouseDown;
-    private _onMoveTargetMouseMove;
-    private _onMoveTargetMouseUp;
-    private _moveComplete;
-    private _onDocumentKeydown;
-    private _onBackdropClick;
+    private _onEscapeDismiss;
+    private _onBackdropDismiss;
+    private _onDialogFormSubmit;
     private _tryClose;
-    private _setBackdropClickListener;
-    private _setDocumentKeydownListener;
-    private _calculateOffsetPosition;
-    private _clampPosition;
-    /** Controls whether clicking the backdrop closes the dialog or not. */
-    set backdropClose(value: boolean);
-    get backdropClose(): boolean;
-    /** Controls whether pressing the escape key closes the dialog or not. */
-    set escapeClose(value: boolean);
-    get escapeClose(): boolean;
+    private _onTriggerClick;
+    private _initializeMoveController;
+    private _destroyMoveController;
     get open(): boolean;
     set open(value: boolean);
+    get mode(): DialogMode;
+    set mode(value: DialogMode);
+    get type(): DialogType;
+    set type(value: DialogType);
+    get animationType(): DialogAnimationType;
+    set animationType(value: DialogAnimationType);
+    get preset(): DialogPreset;
+    set preset(value: DialogPreset);
+    get persistent(): boolean;
+    set persistent(value: boolean);
     get fullscreen(): boolean;
     set fullscreen(value: boolean);
-    get openCallback(): DialogStateCallback;
-    set openCallback(callback: DialogStateCallback);
-    get closeCallback(): DialogStateCallback;
-    set closeCallback(callback: DialogStateCallback);
-    get beforeCloseCallback(): DialogStateCallback;
-    set beforeCloseCallback(callback: DialogStateCallback);
-    get positionType(): DialogPositionType;
-    set positionType(value: DialogPositionType);
-    get positionX(): number | string | null | undefined;
-    set positionX(value: number | string | null | undefined);
-    get positionY(): number | string | null | undefined;
-    set positionY(value: number | string | null | undefined);
+    get trigger(): string;
+    set trigger(value: string);
+    get triggerElement(): HTMLElement | null;
+    set triggerElement(element: HTMLElement | null);
     get moveable(): boolean;
     set moveable(value: boolean);
-    get moveTarget(): string;
-    set moveTarget(value: string);
+    get positionStrategy(): DialogPositionStrategy;
+    set positionStrategy(value: DialogPositionStrategy);
+    get sizeStrategy(): DialogSizeStrategy;
+    set sizeStrategy(value: DialogSizeStrategy);
+    get placement(): DialogPlacement;
+    set placement(value: DialogPlacement);
 }