import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { B as BEM } from './bem.js';
import { L as Logger } from './log.js';

const balContentCss = ".bal-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;text-align:left;gap:.25rem}.bal-content--align-center{-ms-flex-align:center;align-items:center;text-align:center}.bal-content--align-end{-ms-flex-align:end;align-items:flex-end;text-align:right}.bal-content--layout-horizontal{-ms-flex-direction:row;flex-direction:row}.bal-content--layout-vertical{-ms-flex-direction:column;flex-direction:column}.bal-content--space-none{gap:0rem}.bal-content--space-xxx-small{gap:.125rem}.bal-content--space-xx-small{gap:.25rem}.bal-content--space-x-small{gap:.5rem}.bal-content--space-small{gap:.75rem}.bal-content--space-normal{gap:1rem}.bal-content>.bal-text{margin:0}";

const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Defines the position of the child elements if they
         * are showed verticaly or horizontally. Default is verticaly.
         */
        this.layout = 'vertical';
        /**
         * Defines the text positioning like center, end or
         * default to start.
         */
        this.align = 'start';
        /**
         * Defines the space between the child elements. Default is xx-small.
         */
        this.space = 'xx-small';
        /**
         * @internal
         * Please use layout instead.
         */
        this.direction = '';
        /**
         * @internal
         * Please use align instead.
         */
        this.alignment = '';
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('content');
        const direction = !!this.direction;
        const layout = !!this.layout;
        const alignment = !!this.alignment;
        const align = !!this.align;
        const space = !!this.space;
        let layoutValue = this.layout;
        if (direction) {
            layoutValue = this.direction === 'row' ? 'horizontal' : 'vertical';
        }
        let alignValue = this.align.split(' ').join('-');
        if (alignment) {
            alignValue = this.alignment.split(' ').join('-');
        }
        return (h(Host, { key: 'a7213517d4b70adbe0ba7091c1393d6dfdb62c9e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, h("slot", { key: 'd907c3d66bf4927b63cfa6958288e3eb38e9d4be' })));
    }
    static get style() { return balContentCss; }
}, [260, "bal-content", {
        "layout": [1],
        "align": [1],
        "space": [1],
        "direction": [1],
        "alignment": [1]
    }]);
__decorate([
    Logger('bal-content'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Content.prototype, "createLogger", null);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-content"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-content":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Content);
            }
            break;
    } });
}

export { Content as C, defineCustomElement as d };
