@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/dialog/dialog-foundation.js

@@ -3,455 +3,313 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isNumber, isString } from '@tylertech/forge-core';
+import { MoveController } from '../core/controllers/move-controller';
+import { DismissibleStack } from '../core/utils/dismissible-stack';
 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._mode = DIALOG_CONSTANTS.defaults.MODE;
+        this._type = DIALOG_CONSTANTS.defaults.TYPE;
+        this._animationType = DIALOG_CONSTANTS.defaults.ANIMATION_TYPE;
+        this._preset = DIALOG_CONSTANTS.defaults.PRESET;
+        this._persistent = false;
         this._fullscreen = false;
-        this._positionType = 'absolute';
-        this._positionX = null;
-        this._positionY = null;
+        this._trigger = '';
         this._moveable = false;
-        this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
-        this._isAnimating = false;
-        this._isMoving = 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);
+        this._sizeStrategy = DIALOG_CONSTANTS.defaults.SIZE_STRATEGY;
+        this._placement = DIALOG_CONSTANTS.defaults.PLACEMENT;
+        this._positionStrategy = DIALOG_CONSTANTS.defaults.POSITION_STRATEGY;
+        this._escapeDismissListener = this._onEscapeDismiss.bind(this);
+        this._backdropDismissListener = this._onBackdropDismiss.bind(this);
+        this._dialogFormSubmitListener = this._onDialogFormSubmit.bind(this);
+        this._triggerClickListener = this._onTriggerClick.bind(this);
     }
     initialize() {
-        this._adapter.initializeAccessibility();
-        if (this._open) {
-            if (this._moveable) {
-                this._adapter.setMoveable(this._moveable);
-                this._initMoveTarget();
-            }
+        if (this._trigger && !this._adapter.triggerElement) {
+            this._adapter.tryLocateTriggerElement(this._trigger);
+        }
+        if (this._adapter.triggerElement) {
+            this._adapter.addTriggerInteractionListener(this._triggerClickListener);
         }
-    }
-    destroy() {
         if (this._open) {
-            this._removeDragHandlers();
-            this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            this._applyOpen();
         }
     }
-    async _applyOpen(value) {
-        if (value) {
-            if (typeof this._openCallback === 'function' && !await this._executeOpenCallback()) {
-                return;
-            }
-            this._open = value;
-            this._openDialog();
+    destroy() {
+        if (this._adapter.triggerElement) {
+            this._adapter.removeTriggerInteractionListener(this._triggerClickListener);
         }
-        else {
-            if (typeof this._closeCallback === 'function' && !await this._executeCloseCallback()) {
-                return;
-            }
-            this._open = value;
-            this._closeDialog();
+        if (this._moveController) {
+            this._destroyMoveController();
         }
-        this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.OPEN, this._open);
-    }
-    async _executeOpenCallback() {
-        try {
-            return await Promise.resolve(this._openCallback()) !== false;
-        }
-        catch (e) {
-            return false;
+        if (this._open) {
+            this._hide();
         }
     }
-    async _executeCloseCallback() {
-        try {
-            return await Promise.resolve(this._closeCallback()) !== false;
-        }
-        catch (e) {
-            return false;
-        }
+    dispatchBeforeCloseEvent() {
+        const evt = new CustomEvent(DIALOG_CONSTANTS.events.BEFORE_CLOSE, { cancelable: true, bubbles: true, composed: true });
+        this._adapter.dispatchHostEvent(evt);
+        return !evt.defaultPrevented;
     }
-    initializeMoveTarget() {
-        if (!this._moveTarget) {
-            this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
-        }
-        this._initMoveTarget();
+    hideBackdrop() {
+        this._adapter.hideBackdrop();
     }
-    resetPosition() {
-        this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
+    showBackdrop() {
+        this._adapter.showBackdrop();
     }
-    async show(parent) {
-        if (this._open) {
-            return;
+    _show() {
+        this._adapter.show();
+        this._adapter.addDialogFormSubmitListener(this._dialogFormSubmitListener);
+        DismissibleStack.instance.add(this._adapter.hostElement);
+        if (this._mode === 'modal') {
+            this._adapter.addDialogCancelListener(this._escapeDismissListener);
         }
-        this._open = true;
-        if (!this._adapter.isConnected) {
-            this._adapter.attach(parent);
+        else if (this._mode === 'inline-modal') {
+            this._adapter.addDocumentListener('keydown', this._escapeDismissListener);
         }
-        await this._openDialog();
-    }
-    async hide(remove) {
-        if (!this._open) {
-            return;
+        if (!this._persistent) {
+            this._adapter.addBackdropDismissListener(this._backdropDismissListener);
         }
-        this._open = false;
-        await this._closeDialog();
-        if (remove) {
-            this._adapter.detach();
+        if (this._moveable && !this._fullscreen) {
+            this._initializeMoveController();
         }
+        this._adapter.dispatchHostEvent(new CustomEvent(DIALOG_CONSTANTS.events.OPEN, { bubbles: true, composed: true }));
     }
-    _normalizePositionValue(value) {
-        if (isNumber(value)) {
-            return `${value}px`;
-        }
-        else if (isString(value)) {
-            return value;
+    async _hide() {
+        this._adapter.removeDialogFormSubmitListener(this._dialogFormSubmitListener);
+        this._adapter.removeDialogCancelListener(this._escapeDismissListener);
+        this._adapter.removeDocumentListener('keydown', this._escapeDismissListener);
+        this._adapter.removeBackdropDismissListener(this._backdropDismissListener);
+        DismissibleStack.instance.remove(this._adapter.hostElement);
+        await this._adapter.hide();
+        if (this._moveController) {
+            this._destroyMoveController();
         }
-        return null;
+        this._adapter.dispatchHostEvent(new CustomEvent(DIALOG_CONSTANTS.events.CLOSE, { bubbles: true, composed: true }));
     }
-    _openDialog() {
-        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);
-            }
+    async _applyOpen() {
+        if (this._open) {
+            this._show();
+            this._adapter.tryAutofocus();
         }
-        this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.BODY_OPEN, 'true');
-        this._adapter.registerTransitionEndHandler(this._transitionEndHandler);
-        this._setDocumentKeydownListener(this._escapeClose);
-        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()) {
-                    this._adapter.addRootClass(DIALOG_CONSTANTS.classes.SCROLLABLE);
-                }
-            });
-        });
-        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._escapeClose) {
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-        }
-        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);
-        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.BODY_OPEN);
-                }
-                this._adapter.setAnimating(false);
-                resolve();
-            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
-        });
-    }
-    _onTransitionEnd() {
-        if (!this._isAnimating) {
-            return;
+        else {
+            await this._hide();
         }
-        this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-        this._adapter.setAnimating(false);
-        this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.READY);
-        this._adapter.tryLayoutRippleChildren();
-        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.pageY - bounds.top,
-            left: evt.pageX - 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) {
+        this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.VISIBLE, this._open); // We use this for styling purposes to control animations
+        this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.OPEN, this._open);
+    }
+    _onEscapeDismiss(evt) {
+        if (evt.type === 'keydown') {
+            const key = evt.key;
+            if (key !== 'Escape' || !DismissibleStack.instance.isMostRecent(this._adapter.hostElement)) {
                 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');
-            }
+        else if (evt.type === 'cancel') {
+            evt.preventDefault();
         }
-    }
-    _onMoveTargetMouseUp(evt) {
-        if (this._isMoving) {
-            this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.MOVE_END);
+        if (!this._persistent) {
+            this._tryClose();
         }
-        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;
+    _onBackdropDismiss() {
+        this._tryClose();
     }
-    _onDocumentKeydown(evt) {
+    _onDialogFormSubmit(evt) {
+        var _a, _b;
         evt.stopPropagation();
-        if (evt.key && (evt.key === 'Escape' || evt.key === 'Esc')) {
+        const isDialogSubmitter = ((_a = evt.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute('formmethod')) === 'dialog' ||
+            ((_b = evt.target) === null || _b === void 0 ? void 0 : _b.getAttribute('method')) === 'dialog';
+        if (isDialogSubmitter) {
             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) {
+    _tryClose() {
+        if (this.dispatchBeforeCloseEvent()) {
             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._backdropClose) {
-            this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
-        }
-        else if (!attach) {
-            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
-        }
+    _onTriggerClick(_evt) {
+        this.open = !this._open;
     }
-    _setDocumentKeydownListener(attach) {
-        if (!this._open) {
+    _initializeMoveController() {
+        /* c8 ignore next 3 */
+        if (this._moveController) {
             return;
         }
-        if (attach && this._escapeClose) {
-            this._adapter.setDocumentListener('keydown', this._documentKeydownHandler);
-        }
-        else if (!attach) {
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-        }
-    }
-    _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)
+        const onMoveStart = () => {
+            const event = new CustomEvent(DIALOG_CONSTANTS.events.MOVE_START, { cancelable: true });
+            this._adapter.dispatchHostEvent(event);
+            return event.defaultPrevented;
+        };
+        const onMove = (position) => {
+            const event = new CustomEvent(DIALOG_CONSTANTS.events.MOVE, { detail: position, cancelable: true });
+            this._adapter.dispatchHostEvent(event);
+            if (!event.defaultPrevented) {
+                this._adapter.addSurfaceClass(DIALOG_CONSTANTS.classes.MOVED);
+                this._adapter.addSurfaceClass(DIALOG_CONSTANTS.classes.MOVING);
+            }
+            return event.defaultPrevented;
         };
+        const onMoveEnd = () => {
+            const event = new CustomEvent(DIALOG_CONSTANTS.events.MOVE_END);
+            this._adapter.removeSurfaceClass(DIALOG_CONSTANTS.classes.MOVING);
+            this._adapter.dispatchHostEvent(event);
+        };
+        const { moveHandleElement: handleElement, surfaceElement } = this._adapter;
+        this._moveController = new MoveController({ handleElement, surfaceElement, onMoveStart, onMove, onMoveEnd });
     }
-    _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;
+    _destroyMoveController() {
+        var _a;
+        this._adapter.removeSurfaceClass(DIALOG_CONSTANTS.classes.MOVED);
+        (_a = this._moveController) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._moveController = undefined;
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._open = value;
+            if (this._adapter.isConnected) {
+                this._applyOpen();
+            }
         }
-        else if (y + height >= window.innerHeight) {
-            y = window.innerHeight - height;
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(value) {
+        if (this._mode !== value) {
+            this._mode = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.MODE, this._mode);
         }
-        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);
-            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose);
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (this._type !== value) {
+            this._type = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.TYPE, this._type);
         }
     }
-    get backdropClose() {
-        return this._backdropClose;
+    get animationType() {
+        return this._animationType;
     }
-    /** 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);
-            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose);
+    set animationType(value) {
+        if (this._animationType !== value) {
+            this._animationType = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.ANIMATION_TYPE, this._animationType);
         }
     }
-    get escapeClose() {
-        return this._escapeClose;
+    get preset() {
+        return this._preset;
     }
-    get open() {
-        return this._open;
+    set preset(value) {
+        if (this._preset !== value) {
+            this._preset = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.PRESET, this._preset);
+        }
     }
-    set open(value) {
-        if (this._open !== value) {
-            this._applyOpen(!!value);
+    get persistent() {
+        return this._persistent;
+    }
+    set persistent(value) {
+        value = Boolean(value);
+        if (this._persistent !== value) {
+            this._persistent = value;
+            this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.PERSISTENT, this._persistent);
         }
     }
     get fullscreen() {
         return this._fullscreen;
     }
     set fullscreen(value) {
+        value = Boolean(value);
         if (this._fullscreen !== value) {
-            this._fullscreen = !!value;
-            this._adapter.setFullscreen(this._fullscreen);
+            this._fullscreen = value;
             this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
         }
     }
-    get openCallback() {
-        return this._openCallback;
-    }
-    set openCallback(callback) {
-        this._openCallback = callback;
+    get trigger() {
+        var _a;
+        return (_a = this._trigger) !== null && _a !== void 0 ? _a : '';
     }
-    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);
+    set trigger(value) {
+        if (this._trigger !== value) {
+            this._trigger = value;
+            if (this._adapter.triggerElement) {
+                this._adapter.removeTriggerInteractionListener(this._triggerClickListener);
             }
-        }
-    }
-    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);
+            if (this._adapter.isConnected) {
+                this._adapter.tryLocateTriggerElement(this._trigger);
+                this._adapter.addTriggerInteractionListener(this._triggerClickListener);
             }
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.TRIGGER, this._trigger);
         }
     }
-    get positionY() {
-        return this._positionY;
+    get triggerElement() {
+        return this._adapter.triggerElement;
     }
-    set positionY(value) {
-        if (this._positionY !== value) {
-            this._positionY = this._normalizePositionValue(value);
-            if (this._open) {
-                this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
-            }
+    set triggerElement(element) {
+        if (this._adapter.triggerElement) {
+            this._adapter.removeTriggerInteractionListener(this._triggerClickListener);
+        }
+        if (this._trigger) {
+            this._trigger = '';
+        }
+        this._adapter.triggerElement = element;
+        if (this._adapter.isConnected) {
+            this._adapter.addTriggerInteractionListener(this._triggerClickListener);
         }
     }
     get moveable() {
         return this._moveable;
     }
     set moveable(value) {
+        value = Boolean(value);
         if (this._moveable !== value) {
-            this._moveable = !!value;
-            if (this._open) {
-                this._adapter.setMoveable(this._moveable);
+            this._moveable = value;
+            if (this._adapter.isConnected && this._open) {
                 if (this._moveable) {
-                    this._initMoveTarget();
+                    this._initializeMoveController();
                 }
                 else {
-                    this._removeDragHandlers();
-                    this._isMoving = false;
+                    this._destroyMoveController();
                 }
             }
             this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.MOVEABLE, this._moveable);
         }
     }
-    get moveTarget() {
-        return this._moveTarget;
+    get positionStrategy() {
+        return this._positionStrategy;
     }
-    set moveTarget(value) {
-        this._moveTarget = value;
+    set positionStrategy(value) {
+        if (this._positionStrategy !== value) {
+            this._positionStrategy = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.POSITION_STRATEGY, this._positionStrategy);
+        }
+    }
+    get sizeStrategy() {
+        return this._sizeStrategy;
+    }
+    set sizeStrategy(value) {
+        if (this._sizeStrategy !== value) {
+            this._sizeStrategy = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.SIZE_STRATEGY, this._sizeStrategy);
+        }
+    }
+    get placement() {
+        return this._placement;
+    }
+    set placement(value) {
+        if (this._placement !== value) {
+            this._placement = value;
+            this._adapter.setHostAttribute(DIALOG_CONSTANTS.attributes.PLACEMENT, this._placement);
+        }
     }
 }