import { Host, h } from "@stencil/core";
export class CpslButtonGroup {
    constructor() {
        this.selectedId = undefined;
    }
    selectItem() {
        this.buttonSlots.forEach(item => {
            if (item.id === this.selectedId) {
                item.classList.add('selected');
            }
            else {
                item.classList.remove('selected');
            }
        });
    }
    componentWillRender() {
        var _a;
        this.buttonSlots.forEach(item => {
            item.setAttribute('variant', 'secondary');
            item.setAttribute('full-width', 'true');
            this.selectItem();
        });
        if ((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length) {
            console.error('cpsl-button is the only valid child of cpsl-button-group');
            this.otherSlots.forEach(item => item.remove());
        }
    }
    get buttonSlots() {
        return this.el.querySelectorAll('cpsl-button');
    }
    get otherSlots() {
        return this.el.querySelectorAll('&> *:not(cpsl-button)');
    }
    render() {
        return (h(Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
    }
    static get is() { return "cpsl-button-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-button-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-button-group.css"]
        };
    }
    static get properties() {
        return {
            "selectedId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The id of the selected button."
                },
                "attribute": "selected-id",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "selectedId",
                "methodName": "selectItem"
            }];
    }
}
//# sourceMappingURL=cpsl-button-group.js.map
