import { h, Host } from "@stencil/core";
import { BEM } from "../../../utils/bem";
export class ButtonGroup {
    constructor() {
        /**
         * The value of the button, which is submitted with the form data.
         */
        this.position = '';
        /**
         * `auto` will position the button items vertical and full width.
         * `row` will force that the buttons are also horizontal on mobile.
         */
        this.direction = 'auto';
        /**
         * If `true` the flex direction is used in reverse on mobile.
         */
        this.reverse = false;
    }
    render() {
        const block = BEM.block('button-group');
        return (h(Host, { key: 'a41720ea16a458ae915bece1adf109d2f20ea8ec', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: '03f0d65f12c0ac0e14f4854ef85e845fe51f9e62', class: {
                'field': true,
                'is-grouped': true,
                'is-reverse': this.reverse,
                [`has-direction-${this.direction}`]: true,
            } }, h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
    }
    static get is() { return "bal-button-group"; }
    static get properties() {
        return {
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonGroupPosition",
                    "resolved": "\"\" | \"center\" | \"right\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the button, which is submitted with the form data."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "position",
                "defaultValue": "''"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonGroupDirection",
                    "resolved": "\"auto\" | \"column\" | \"row\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "`auto` will position the button items vertical and full width.\n`row` will force that the buttons are also horizontal on mobile."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "defaultValue": "'auto'"
            },
            "reverse": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the flex direction is used in reverse on mobile."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "reverse",
                "defaultValue": "false"
            }
        };
    }
}
