ui/src/layout/Modal.component.ts

import {ExComponent} from '../ExComponent.js'
import {Attribute, Component, Element, Renders} from '../decorators.js'

@Component('ex-modal')
export class ModalComponent extends ExComponent {
    protected static html = `
        <style>
            :root {
                display: none;
            }

            .container {
                --modal-color: var(--color-accent);
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: 2000;
                position: fixed;
                background-color: rgba(0, 0, 0, 0.7);
                padding-top: 2%;
            }

            .ex-modal {
                width: 95vw;
                max-height: min(90vh, 700px);
                max-width: 600px;
                position: relative;
                overflow: hidden;
                border-radius: 7px;
                margin: 0 auto;
                background-color: var(--color-background);
                display: flex;
                flex-direction: column;
            }

            .ex-modal header {
                min-height: 40px;
                height: 40px;
                color: var(--color-text);
                background-color: var(--color-background-darkened);
                display: grid;
                padding-left: 14px;
                align-items: center;
                grid-template-columns: auto 40px;
            }

            .ex-modal header h4 {
                margin: 0;
                text-align: left;
            }

            .ex-modal header span {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
                font-size: 20px;
                opacity: 0.8;
                cursor: pointer;
            }

            .ex-modal header span:hover {
                opacity: 1;
            }

            .ex-modal .main {
                flex: 1;
                text-align: left;
                overflow: auto;
                padding: 14px;
            }

            .ex-modal footer {
                height: auto;
                text-align: right;
                padding: 14px;
                background-color: var(--color-background-darkened);
            }

            .ex-modal footer button, .ex-modal footer input {
                margin: 0;
            }

            .ex-modal footer button:not(:last-child), .ex-modal footer input:not(:last-child) {
                margin-right: 14px;
            }
        </style>
        
        <div class="container">
            <div class="ex-modal" tabindex="0">
                <header>
                    <h4 class="modal-title"></h4>
                    <span>&#10006;</span>
                </header>
                <div class="main">
                    <slot></slot>
                </div>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
        </div>
    `

    @Attribute()
    public header = ''

    @Renders()
    public shown = false

    @Element('h4.modal-title')
    protected headerEl!: HTMLHeadingElement

    render(): void {
        super.render()

        this.headerEl.innerText = this.header
        this.style.display = this.shown ? 'unset' : 'none'
    }
}