/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <slot></slot>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        height: fit-content;
        min-height: min-content;
        min-width: min-content;
    }
    
    :host > ::slotted(*) {
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 100%;
        max-width: fit-content;
    }
    
    :host(.stretchlast) > ::slotted(:last-child),
    :host > ::slotted(.autosize) {
        flex-grow: 1;
    }
    
    :host > ::slotted(.panel) {
        border-style: solid;
        border-width: 2px;
        border-color: var(--page-border-color, #ffffff);
    }
`);

/* ======================================================================= */

import CustomElement from "../../element/CustomElement.js";

export default class VBox extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    load() {
        for (const ch of this.children) {
            if (typeof ch.load === "function") {
                ch.load();
            }
        }
    }

    unload() {
        for (const ch of this.children) {
            if (typeof ch.unload === "function") {
                ch.unload();
            }
        }
    }

}

customElements.define("emc-panel-vbox", VBox);
