Nested dialogs

Modals can be displayed from within another dialog.
The only requirement is that each dialog has a unique Alpine.js x-ref name.
The naming is taken care of automatically when using the PHP Modal view model.

Example

<?php

$nestedDialog = $modalViewModel->createModal()
                    ->withTemplate('My_Module::nested-dialog.phtml');

$outerDialog = $modalViewModel->createModal()->withContent(<<<OUTER_MODAL_CONTENT
    <div id="outer-label">{$escaper->escapeHtml(__('Outer Model Modal'))}</div>

    {$nestedDialog}<!-- NOTE 1: here the nested dialog is rendered -->

    <div class="mt-20 flex justify-between gap-2">
        <button @click="hide" type="button" class="btn">
            {$escaper->escapeHtml(__('Cancel'))}
        </button>
        <button x-focus-first

                @click="{$nestedDialog->getShowJs()}"<!-- NOTE 2: The ref name of the inner dialog is handled automatically -->

                type="button"
                aria-haspopup="dialog"
                class="btn btn-primary">
            {$escaper->escapeHtml(__('More Info'))}
        </button>
    </div>
OUTER_MODAL_CONTENT
)->withAriaLabelledby('outer-label');

?>
<div x-data="hyva.modal()">
    <button @click="<?= $outerDialog->getShowJs() ?>" type="button" class="btn mt-40" aria-haspopup="dialog">
        <?= $escaper->escapeHtml(__('Outer View Model')) ?>
    </button>
    <?= $outerDialog ?>
</div>