ts
import { css, customElement, html } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
import { NoEscapeModalData, NoEscapeModalValue } from "./noescape.modal.token";
import { umbFocus } from "@umbraco-cms/backoffice/lit-element";

@customElement('no-escape-modal')
export class NoEscapeModalElement extends UmbModalBaseElement<NoEscapeModalData, NoEscapeModalValue>
{
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('keydown', this.handleKeyDown);
    }

    disconnectedCallback() {
        document.removeEventListener('keydown', this.handleKeyDown);
        super.disconnectedCallback();
    }

    private handleKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            event.preventDefault();
        }
    };


    private confirmTheThing() {
        console.log('Submitting modal and confirming the thing');
        this.updateValue({confimed:true});
        this._submitModal();
    }

    render() {
        return html`
            <uui-dialog-layout class="uui-text" headline="There is no escape">
                You can only perform one action that will dismiss this dialog, which is clicking the button below.
                If you try to escape by pressing the escape key, it will not work.

                <uui-button
                    slot="actions"
                    id="confirm"
                    color='danger'
                    look="primary"
                    label="Yes I give in"
                    @click=${this.confirmTheThing}
                    ${umbFocus()}></uui-button>

            </uui-dialog-layout>
        `;
    }
    
    static styles = css`
        uui-box {
            height:100%;
        }
    `;
}

export default NoEscapeModalElement;

connectedCallback

disconnectedCallback

event.preventDefault();