// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import { assert } from 'chai';
import * as Platform from '../../../core/platform/platform.js';
import { assertScreenshot, dispatchClickEvent, dispatchKeyDownEvent, raf, renderElementIntoDOM } from '../../../testing/DOMHelpers.js';
import { setupLocaleHooks } from '../../../testing/LocaleHelpers.js';
import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
import * as Dialogs from './dialogs.js';
describe('Dialog', () => {
    describe('positioning', () => {
        let dialog;
        let container;
        let host;
        beforeEach(() => {
            container = document.createElement('div');
            container.style.width = '500px';
            container.style.height = '500px';
            container.style.display = 'flex';
            container.style.alignItems = 'center';
            container.style.justifyContent = 'center';
            dialog = new Dialogs.Dialog.Dialog();
            host = document.createElement('div');
            host.textContent = 'Hover me';
            host.style.width = '100px';
            host.style.height = '100px';
            dialog.position = "top" /* Dialogs.Dialog.DialogVerticalPosition.TOP */;
            dialog.origin = host;
        });
        it('places the Dialog hit area correctly', async () => {
            host.addEventListener('click', () => dialog.setDialogVisible(true));
            dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false));
            container.appendChild(host);
            container.appendChild(dialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            const hostBounds = host.getBoundingClientRect();
            const hitAreaBounds = dialog.getHitArea();
            // Make sure the hit area contains the host fully.
            assert.isAtMost(hitAreaBounds.top, hostBounds.top);
            assert.isAtLeast(hitAreaBounds.bottom, hostBounds.top + hostBounds.height);
            assert.isAtMost(hitAreaBounds.left, hostBounds.left);
            assert.isAtLeast(hitAreaBounds.right, hostBounds.left + hostBounds.width);
        });
        it('sets the automatic horizontal alignment correctly', async () => {
            // Create the container for the dialog and its origin (host).
            // This container will be set as the dialog's "window".
            // With the host in the left border of the window, the Dialog
            // should deploy from left to right (left horizontal alignment).
            container.style.display = 'block';
            host.style.position = 'relative';
            host.style.left = '0';
            const content = document.createElement('div');
            content.classList.add('dialog-content');
            content.style.padding = '0 1em';
            content.innerHTML = 'Hi';
            dialog.horizontalAlignment = "auto" /* Dialogs.Dialog.DialogHorizontalAlignment.AUTO */;
            dialog.origin = host;
            dialog.setBoundingElementForTesting(container);
            host.addEventListener('click', () => dialog.setDialogVisible(true));
            dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false));
            dialog.appendChild(content);
            container.appendChild(host);
            container.appendChild(dialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            // Open the dialog and check its position.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            // Test the dialog is deployed left to right, since this way there is more space.
            assert.strictEqual(dialog.bestHorizontalAlignment, "left" /* Dialogs.Dialog.DialogHorizontalAlignment.LEFT */);
            // Close the dialog
            dispatchKeyDownEvent(dialog, { key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true });
            await RenderCoordinator.done();
            // With the host in the right border of the window, the Dialog
            // should deploy from right to left (left horizontal alignment).
            host.style.position = 'relative';
            host.style.left = '450px';
            await RenderCoordinator.done();
            // Open the dialog and check its position.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            // Test the dialog is deployed right to left.
            assert.strictEqual(dialog.bestHorizontalAlignment, "right" /* Dialogs.Dialog.DialogHorizontalAlignment.RIGHT */);
        });
        it('sets the automatic vertical position correctly when it fits on top', async () => {
            // Create the container for the dialog and its origin (host), aligning
            // items to the bottom of the container. This container will be set as the
            // dialog's "window".
            // By default the dialog is placed at the bottom of its origin, but doing
            // so means it wouldn't fit in its window. Because if shown on top would
            // fit in its window it should be automatically positioned there.
            container.style.width = '150px';
            container.style.height = '300px';
            container.style.display = 'flex';
            container.style.alignItems = 'end';
            container.style.justifyContent = 'center';
            // The dialogs content dimensions exceed the viewport's
            const content = document.createElement('div');
            content.classList.add('dialog-content');
            content.style.padding = '0 1em';
            content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
            dialog.position = "auto" /* Dialogs.Dialog.DialogVerticalPosition.AUTO */;
            dialog.origin = host;
            dialog.setBoundingElementForTesting(container);
            host.addEventListener('click', () => dialog.setDialogVisible(true));
            dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false));
            dialog.appendChild(content);
            container.appendChild(host);
            container.appendChild(dialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            // Open the dialog and check its position.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            // Test the capped dimensions
            assert.strictEqual(dialog.bestVerticalPosition, "top" /* Dialogs.Dialog.DialogVerticalPosition.TOP */);
        });
        it('sets the automatic vertical position correctly when it does not fit on top', async () => {
            // Create the container for the dialog and its origin (host), aligning
            // items to the bottom of the container. This container will be set as the
            // dialog's "window".
            // Because the dialog's full height cannot be fully fit at the
            // bottom or at the top it is positioned at the bottom and the
            // overflow made visible by scrolling.
            container.style.width = '150px';
            container.style.height = '80px';
            container.style.display = 'flex';
            container.style.alignItems = 'end';
            container.style.justifyContent = 'center';
            // The dialogs content dimensions exceed the viewport's
            const content = document.createElement('div');
            content.classList.add('dialog-content');
            content.style.padding = '0 1em';
            content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
            dialog.position = "auto" /* Dialogs.Dialog.DialogVerticalPosition.AUTO */;
            dialog.origin = host;
            dialog.setBoundingElementForTesting(container);
            host.addEventListener('click', () => dialog.setDialogVisible(true));
            dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false));
            dialog.appendChild(content);
            container.appendChild(host);
            container.appendChild(dialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            // Open the dialog and check its position.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            // Test the capped dimensions
            assert.strictEqual(dialog.bestVerticalPosition, "bottom" /* Dialogs.Dialog.DialogVerticalPosition.BOTTOM */);
        });
        it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is displayed as a modal', async () => {
            const devtoolsDialog = new Dialogs.Dialog.Dialog();
            devtoolsDialog.setBoundingElementForTesting(container);
            const WINDOW_WIDTH = 300;
            // This container will be set as the dialog's "window", or the representation
            // of DevTools bounding element.
            container.style.width = `${WINDOW_WIDTH}px`;
            container.style.height = `${WINDOW_WIDTH}px`;
            const host = document.createElement('div');
            host.textContent = 'Hover me';
            host.style.width = '100px';
            const content = document.createElement('div');
            content.classList.add('dialog-content');
            content.style.width = '400px';
            content.style.height = '400px';
            content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
            devtoolsDialog.origin = Dialogs.Dialog.MODAL;
            host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true));
            devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false));
            container.appendChild(host);
            container.appendChild(devtoolsDialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            devtoolsDialog.appendChild(content);
            // Open the dialog and check its position.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
            assert.exists(dialog, 'Dialog not found');
            assert.strictEqual(dialog.clientWidth, WINDOW_WIDTH - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW + 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING);
            assert.strictEqual(dialog.clientHeight, WINDOW_WIDTH - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW + 2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING);
        });
        describe('with an anchor and possible overflow', () => {
            const CONTAINER_WIDTH = 500;
            const CONTAINER_HEIGHT = 500;
            const HOST_OFFSET = 100;
            const HOST_HEIGHT = 100;
            const devtoolsDialog = new Dialogs.Dialog.Dialog();
            let host;
            let container;
            beforeEach(async () => {
                // This container will be set as the dialog's "window", or the representation
                // of DevTools bounding element.
                container = document.createElement('div');
                container.style.width = `${CONTAINER_WIDTH}px`;
                container.style.height = `${CONTAINER_HEIGHT}px`;
                container.style.position = 'fixed';
                container.style.top = '0';
                container.style.left = '0';
                host = document.createElement('div');
                host.textContent = 'Click me';
                host.style.width = `${HOST_HEIGHT}px`;
                host.style.height = `${HOST_HEIGHT}px`;
                host.style.position = 'absolute';
                host.style.top = `${HOST_OFFSET}px`;
                host.style.left = `${HOST_OFFSET}px`;
                // The dialogs content dimensions exceed the container's
                const content = document.createElement('div');
                content.classList.add('dialog-content');
                content.style.width = '600px';
                content.style.height = '600px';
                content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
                devtoolsDialog.origin = host;
                devtoolsDialog.horizontalAlignment = "center" /* Dialogs.Dialog.DialogHorizontalAlignment.CENTER */;
                host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true));
                devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false));
                devtoolsDialog.setBoundingElementForTesting(container);
                dialog.setBoundingElementForTesting(container);
                container.appendChild(host);
                container.appendChild(devtoolsDialog);
                renderElementIntoDOM(container);
                await RenderCoordinator.done();
                devtoolsDialog.appendChild(content);
            });
            it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is anchored to the left', async () => {
                devtoolsDialog.horizontalAlignment = "left" /* Dialogs.Dialog.DialogHorizontalAlignment.LEFT */;
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const { left: dialogLeft, width: dialogWidth } = dialog.getBoundingClientRect();
                const dialogLeftBorderLimitPosition = dialogWidth + dialogLeft + Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW -
                    2 * Dialogs.Dialog.DIALOG_SIDE_PADDING;
                assert.strictEqual(dialogLeftBorderLimitPosition, CONTAINER_WIDTH);
                assert.strictEqual(dialog.clientHeight, CONTAINER_HEIGHT - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW - HOST_HEIGHT - HOST_OFFSET +
                    2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING);
            });
            it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is anchored to the right', async () => {
                devtoolsDialog.horizontalAlignment = "right" /* Dialogs.Dialog.DialogHorizontalAlignment.RIGHT */;
                await RenderCoordinator.done();
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const dialogRight = host.getBoundingClientRect().right;
                const containerLeft = container.getBoundingClientRect().left;
                assert.strictEqual(dialog.clientWidth, (dialogRight - containerLeft) - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW +
                    2 * Dialogs.Dialog.DIALOG_SIDE_PADDING);
            });
            it('sets the dialog\'s horizontal position correctly to prevent overlap with DevTools when alinged to the left.', async () => {
                devtoolsDialog.horizontalAlignment = "left" /* Dialogs.Dialog.DialogHorizontalAlignment.LEFT */;
                host.style.left = '-10px';
                await RenderCoordinator.done();
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const dialogLeft = dialog.getBoundingClientRect().left;
                const containerLeft = container.getBoundingClientRect().left;
                assert.isAtLeast(dialogLeft, containerLeft);
            });
            it('sets the dialog\'s horizontal position correctly to prevent overlap with DevTools when alinged to the right.', async () => {
                devtoolsDialog.horizontalAlignment = "right" /* Dialogs.Dialog.DialogHorizontalAlignment.RIGHT */;
                const containerWidth = container.clientWidth;
                host.style.left = `${containerWidth + 10}px`;
                await RenderCoordinator.done();
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const dialogRight = dialog.getBoundingClientRect().right;
                const dialogRightEdgePosition = dialogRight - 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW / 2;
                assert.isAtMost(dialogRightEdgePosition, containerWidth);
            });
            it('sets the dialog\'s horizontal position correctly to prevent overlapping with DevTools on the right when alinged to the center.', async () => {
                const containerWidth = container.clientWidth;
                host.style.left = `${containerWidth + 260}px`;
                await RenderCoordinator.done();
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const dialogRight = dialog.getBoundingClientRect().right;
                const dialogRightEdgePosition = dialogRight - 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW / 2;
                assert.isAtMost(dialogRightEdgePosition, containerWidth);
            });
            it('sets the dialog\'s horizontal position correctly to prevent overlapping with DevTools on the left when alinged to the center.', async () => {
                host.style.left = '-260px';
                await RenderCoordinator.done();
                // Open the dialog and check its position.
                dispatchClickEvent(host);
                await RenderCoordinator.done();
                const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog');
                assert.exists(dialog, 'Dialog not found');
                // Test the capped dimensions
                const containerLeft = container.getBoundingClientRect().left;
                const dialogLeft = dialog.getBoundingClientRect().left;
                assert.isAtLeast(dialogLeft, containerLeft);
            });
        });
        // Fails on Windows only after the window-size was increased.
        it.skip('[crbug.com/420924642]: updates the dialog client rect automatically when its dimensions change', async function () {
            host.addEventListener('click', () => dialog.setDialogVisible(true));
            const dialogContent = document.createElement('div');
            dialogContent.style.display = 'block';
            dialogContent.style.minWidth = '10px';
            dialogContent.style.minHeight = '10px';
            dialogContent.style.fontSize = '10px';
            dialogContent.innerText = 'Hello';
            dialog.append(dialogContent);
            container.appendChild(host);
            container.appendChild(dialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            dispatchClickEvent(host);
            await RenderCoordinator.done();
            const initialWidth = dialog.getDialogBounds().width;
            const initialHeight = dialog.getDialogBounds().height;
            // Increase the font size to increase the dialog's dimensions
            dialogContent.style.fontSize = '1000px';
            // Wait for the resize handling to take effect.
            await new Promise(res => setTimeout(res, 200));
            const finalWidth = dialog.getDialogBounds().width;
            const finalHeight = dialog.getDialogBounds().height;
            assert.isAbove(finalWidth, initialWidth);
            assert.isAbove(finalHeight, initialHeight);
        });
    });
    describe('closing the dialog with the ESC key', () => {
        let devtoolsDialog;
        let container;
        beforeEach(async () => {
            devtoolsDialog = new Dialogs.Dialog.Dialog();
            container = document.createElement('div');
            const host = document.createElement('div');
            const content = document.createElement('div');
            content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
            devtoolsDialog.origin = host;
            host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true));
            devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false));
            container.appendChild(host);
            container.appendChild(devtoolsDialog);
            renderElementIntoDOM(container);
            await RenderCoordinator.done();
            devtoolsDialog.appendChild(content);
            // Open the dialog.
            dispatchClickEvent(host);
            await RenderCoordinator.done();
        });
        it('closes the dialog by default when the ESC key is pressed', async () => {
            let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.exists(dialog, 'Dialog not found');
            dispatchKeyDownEvent(dialog, { key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true });
            await RenderCoordinator.done();
            dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.notExists(dialog, 'Dialog did not close');
        });
        it('closes the dialog by default when the ESC key is pressed from document.body', async () => {
            let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.exists(dialog, 'Dialog not found');
            dispatchKeyDownEvent(document.body, { key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true });
            await RenderCoordinator.done();
            dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.notExists(dialog, 'Dialog did not close');
        });
        it('closes the dialog by default when the ESC key is pressed anywhere within the devtools bounding element', async () => {
            let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.exists(dialog, 'Dialog not found');
            dispatchKeyDownEvent(container, { key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true });
            await RenderCoordinator.done();
            dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.notExists(dialog, 'Dialog did not close');
        });
        it('does not close the dialog when the ESC key is pressed if the closeOnESC prop is set to false', async () => {
            let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            devtoolsDialog.closeOnESC = false;
            assert.exists(dialog, 'Dialog not found');
            dispatchKeyDownEvent(dialog, { key: Platform.KeyboardUtilities.ESCAPE_KEY });
            await RenderCoordinator.done();
            dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
            assert.exists(dialog, 'Dialog was closed');
        });
    });
    describe('rendering', () => {
        setupLocaleHooks();
        it('do not render dialog header line if title is empty and there is no close button', async () => {
            const dialog = new Dialogs.Dialog.Dialog();
            dialog.closeButton = false;
            dialog.dialogTitle = '';
            renderElementIntoDOM(dialog);
            await RenderCoordinator.done();
            assert.isNotNull(dialog.shadowRoot);
            const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
            assert.exists(dialogHeader);
            assert.isEmpty(dialogHeader.children);
        });
        it('should render a close button in the dialog if closeButton is true', async () => {
            const dialog = new Dialogs.Dialog.Dialog();
            dialog.closeButton = true;
            renderElementIntoDOM(dialog);
            await RenderCoordinator.done();
            assert.isNotNull(dialog.shadowRoot);
            const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
            assert.exists(dialogHeader);
            const closeButton = dialogHeader.querySelector('devtools-button');
            assert.exists(closeButton);
        });
        it('should render dialog title if it is not empty', async () => {
            const dialogTitle = 'Button dialog example';
            const dialog = new Dialogs.Dialog.Dialog();
            dialog.dialogTitle = dialogTitle;
            renderElementIntoDOM(dialog);
            await RenderCoordinator.done();
            assert.isNotNull(dialog.shadowRoot);
            const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
            assert.exists(dialogHeader);
            const dialogTitleElement = dialogHeader.querySelector('.dialog-header-text');
            assert.exists(dialogTitleElement);
            assert.strictEqual(dialogTitleElement.textContent, dialogTitle);
        });
    });
});
describe('clo lick', () => {
    let devtoolsDialog;
    beforeEach(async () => {
        devtoolsDialog = new Dialogs.Dialog.Dialog();
        const container = document.createElement('div');
        const host = document.createElement('div');
        const content = document.createElement('div');
        content.innerHTML = 'Hello, World<br/> I am <br/> a Dialog!';
        devtoolsDialog.origin = Dialogs.Dialog.MODAL;
        host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true));
        devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false));
        container.appendChild(host);
        container.appendChild(devtoolsDialog);
        renderElementIntoDOM(container);
        await RenderCoordinator.done();
        devtoolsDialog.appendChild(content);
        // Open the dialog.
        dispatchClickEvent(host);
        await RenderCoordinator.done();
    });
    it('Only closes the dialog if the click falls outside its content', async () => {
        let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
        assert.exists(dialog, 'Dialog not found');
        const { x, width, bottom } = dialog.getBoundingClientRect();
        // Click just inside must not close the dialog.
        dispatchClickEvent(dialog, { clientX: x + width / 2, clientY: bottom - 1 });
        await RenderCoordinator.done();
        dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
        assert.exists(dialog, 'Dialog closed when it should not');
        dispatchClickEvent(dialog, { clientX: x + width / 2, clientY: bottom + 1 });
        await RenderCoordinator.done();
        // Click just outside must close the dialog.
        dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]');
        assert.notExists(dialog, 'Dialog did not close');
    });
});
describe('visual appearance', () => {
    setupLocaleHooks();
    /** FIXME: clean up and modularize these test  **/
    async function renderDialogs() {
        const verticalPositions = ["top" /* Dialogs.Dialog.DialogVerticalPosition.TOP */, "bottom" /* Dialogs.Dialog.DialogVerticalPosition.BOTTOM */];
        const horizontalAlignments = [
            "auto" /* Dialogs.Dialog.DialogHorizontalAlignment.AUTO */,
            "left" /* Dialogs.Dialog.DialogHorizontalAlignment.LEFT */,
            "center" /* Dialogs.Dialog.DialogHorizontalAlignment.CENTER */,
            "right" /* Dialogs.Dialog.DialogHorizontalAlignment.RIGHT */,
            "auto" /* Dialogs.Dialog.DialogHorizontalAlignment.AUTO */,
        ];
        const root = document.createElement('div');
        root.id = 'root';
        const style = document.createElement('style');
        style.innerHTML = `#root {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
}

.dialog-host {
  border: 1px solid black;
  padding: 5px;
  border-radius: 3px;
  width: 70px;
}

.dialog-host-narrow {
  border: 1px solid black;
  width: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
  margin: 2em 0;
}
.container {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}`;
        root.append(style);
        let i = 0;
        for (const verticalPosition of verticalPositions) {
            const row = document.createElement('div');
            row.classList.add('row');
            root.appendChild(row);
            for (const horizontalAlignment of horizontalAlignments) {
                const dialog = new Dialogs.Dialog.Dialog();
                const container = document.createElement('div');
                container.classList.add('container');
                container.id = `container-${i}`;
                const host = document.createElement('div');
                host.classList.add('dialog-host');
                host.id = `host-${i}`;
                host.textContent = 'Hover me';
                container.appendChild(host);
                row.appendChild(container);
                dialog.position = verticalPosition;
                dialog.horizontalAlignment = horizontalAlignment;
                dialog.origin = host;
                dialog.id = `dialog-${i}`;
                host.addEventListener('mouseover', () => {
                    void dialog.setDialogVisible(true);
                });
                dialog.addEventListener('clickoutsidedialog', () => {
                    void dialog.setDialogVisible(false);
                });
                const div = document.createElement('div');
                div.classList.add('dialog-content');
                div.style.padding = '0 1em';
                div.innerHTML =
                    `Hello, World<br/>Vertical position: ${verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`;
                dialog.appendChild(div);
                root.appendChild(dialog);
                i++;
            }
        }
        for (const verticalPosition of verticalPositions) {
            const row = document.createElement('div');
            row.classList.add('row');
            root.appendChild(row);
            for (const horizontalAlignment of horizontalAlignments) {
                const dialog = new Dialogs.Dialog.Dialog();
                const container = document.createElement('div');
                container.classList.add('container');
                container.id = `container-${i}`;
                const host = document.createElement('div');
                host.classList.add('dialog-host-narrow');
                host.id = `host-${i}`;
                host.textContent = 'H';
                container.appendChild(host);
                row.appendChild(container);
                dialog.position = verticalPosition;
                dialog.horizontalAlignment = horizontalAlignment;
                dialog.origin = host;
                dialog.id = `dialog-${i}`;
                host.addEventListener('mouseover', () => {
                    void dialog.setDialogVisible(true);
                });
                dialog.addEventListener('clickoutsidedialog', () => {
                    void dialog.setDialogVisible(false);
                });
                const div = document.createElement('div');
                div.classList.add('dialog-content');
                div.style.padding = '0 1em';
                div.innerHTML = `Hello, World<br/>Show connector: true<br/>Vertical position: ${verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`;
                dialog.appendChild(div);
                root.appendChild(dialog);
                i++;
            }
        }
        renderDifferentModeExample();
        function renderDifferentModeExample() {
            const row = document.createElement('div');
            row.classList.add('row');
            root.appendChild(row);
            renderDialogWithTitle();
            renderDialogWithTitleAndCloseButton();
            renderDialogWithoutTitleOrCloseButton();
            function renderDialog() {
                const dialog = new Dialogs.Dialog.Dialog();
                const container = document.createElement('div');
                container.classList.add('container');
                container.id = `container-${i}`;
                const host = document.createElement('div');
                host.classList.add('dialog-host-narrow');
                host.id = `host-${i}`;
                host.textContent = 'H';
                container.appendChild(host);
                row.appendChild(container);
                dialog.position = "bottom" /* Dialogs.Dialog.DialogVerticalPosition.BOTTOM */;
                dialog.horizontalAlignment = "auto" /* Dialogs.Dialog.DialogHorizontalAlignment.AUTO */;
                dialog.origin = host;
                dialog.id = `dialog-${i}`;
                host.addEventListener('mouseover', () => {
                    void dialog.setDialogVisible(true);
                });
                dialog.addEventListener('clickoutsidedialog', () => {
                    void dialog.setDialogVisible(false);
                });
                const div = document.createElement('div');
                div.classList.add('dialog-content');
                div.style.padding = '0 var(--sys-size-8)';
                div.innerHTML = 'Hello, World';
                dialog.appendChild(div);
                root.appendChild(dialog);
                i++;
                return dialog;
            }
            function renderDialogWithTitle() {
                const dialog = renderDialog();
                dialog.dialogTitle = 'title';
            }
            function renderDialogWithTitleAndCloseButton() {
                const dialog = renderDialog();
                dialog.dialogTitle = 'title';
                dialog.closeButton = true;
            }
            function renderDialogWithoutTitleOrCloseButton() {
                renderDialog();
            }
        }
        renderElementIntoDOM(root, { includeCommonStyles: true });
        return root;
    }
    async function openDialog(dialogNumber) {
        const dialog = document.querySelector(`#dialog-${dialogNumber}`);
        await dialog.setDialogVisible(true);
        await raf();
        return dialog;
    }
    it('renders the dialog at the top left properly', async () => {
        await renderDialogs();
        await openDialog(1);
        await assertScreenshot('dialog/top-left-open.png');
    });
    it('renders a dialog at the bottom with automatic horizontal alignment properly', async () => {
        await renderDialogs();
        await openDialog(5);
        await assertScreenshot('dialog/bottom-auto-open.png');
    });
    it('renders the dialog at the bottom center properly', async () => {
        await renderDialogs();
        await openDialog(7);
        await assertScreenshot('dialog/bottom-center-open.png');
    });
    it('renders a dialog for super narrow origin at the top with automatic horizontal alignment properly', async () => {
        await renderDialogs();
        await openDialog(20);
        await assertScreenshot('dialog/narrow-top-auto-open.png');
    });
    it('sets open attribute when the dialog is opened', async () => {
        await renderDialogs();
        const dialog = await openDialog(2);
        assert.isTrue(dialog.hasAttribute('open'));
    });
    it('removed open attribute when the dialog is hidden', async () => {
        await renderDialogs();
        const dialog = await openDialog(2);
        assert.isTrue(dialog.hasAttribute('open'));
        await dialog.setDialogVisible(false);
        await RenderCoordinator.done();
        assert.isFalse(dialog.hasAttribute('open'));
    });
});
//# sourceMappingURL=Dialog.test.js.map