egroupware/api/js/etemplate/et2-box.ts

/**
 * EGroupware eTemplate2 - Box widget
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Nathan Gray
 */


import {css, html, LitElement} from "../../../node_modules/@lion/core/index.js";
import {Et2Widget} from "./et2_core_webComponent";

export class Et2Box extends Et2Widget(LitElement)
{
		static get styles()
		{
				return [
						css`
            :host {
							display: block;
							width: 100%;
            }
            :host > div {
            	display: flex;
            	flex-wrap: nowrap;
            	justify-content: space-between;
            	align-items: stretch;
						}
            ::slotted(*) {
            	/* CSS for child elements */
            }`,
				];
		}

		render()
		{
				return html`
            <div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}>
                <slot><p>Empty box</p></slot>
            </div> `;
		}

		_createNamespace(): boolean
		{
				return true;
		}
}

customElements.define("et2-box", Et2Box);

export class Et2HBox extends Et2Box
{
		static get styles()
		{
				return [
						...super.styles,
						css`
            :host > div {
            	flex-direction: row;
						}`
				];
		}
}

customElements.define("et2-hbox", Et2HBox);

export class Et2VBox extends Et2Box
{
		static get styles()
		{
				return [
						...super.styles,
						css`
            :host > div {
            	flex-direction: column;
						}`
				];
		}
}

customElements.define("et2-vbox", Et2VBox);