import { jsx as _jsx } from "@stencil/core/jsx-runtime";
import { Host } from "@stencil/core";
export class ButtonGroup {
    host;
    // MARK: Props
    gap = "auto";
    // MARK: States
    // MARK: Events
    // MARK: Lifecycle
    componentDidLoad() {
        this.handleSlotChange();
    }
    handleSlotChange() {
        if (!this.host) {
            return;
        }
        const slottedElements = this.host.querySelectorAll("dds-button");
        slottedElements.forEach((button, index) => {
            button.classList.add("dds-button-group__button");
            button.classList.toggle("dds-button-group__button--first", index === 0);
            button.classList.toggle("dds-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
            button.classList.toggle("dds-button-group__button--last", index === slottedElements.length - 1);
        });
    }
    // MARK: Render
    render() {
        const { gap } = this;
        return (_jsx(Host, { gap: gap, children: _jsx("div", { class: "dds-button-group", role: "group", children: _jsx("slot", { onSlotchange: () => this.handleSlotChange() }, '4542f540b5447910ed1c7ef4dcbf78cf465c06d4') }, '1540685e0d65f33e2564861fc0fa29daa8cbb494') }, '6267d1fec77251171c427a0e1576ee41a51ca134'));
    }
    static get is() { return "dds-button-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../reset.css", "button-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../reset.css", "button-group.css"]
        };
    }
    static get properties() {
        return {
            "gap": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "\"auto\" | \"none\"",
                    "resolved": "\"auto\" | \"none\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gap",
                "defaultValue": "\"auto\""
            }
        };
    }
    static get elementRef() { return "host"; }
}
