import { h } from "@stencil/core";
export class DgaContentSwitcher {
    constructor() {
        this.value = 0;
        this.onColor = false;
        this.size = 'md';
        this.items = [
            {
                label: 'Item 1',
                content: 'Content 1',
            },
            {
                label: 'Item 2',
                content: 'Content 2',
            },
            {
                label: 'Item 3',
                content: 'Content 3',
            },
        ];
        this.onChange = () => { };
        this.selected = this.value;
        this.handleSelect = (index) => {
            this.selected = index;
            this.onChange(index);
        };
    }
    render() {
        return (h("div", { key: '7007dbc0f059caf862c107e224c54b34fc308985', class: "content-switcher" }, h("div", { key: 'dbdf8d3c0ff2b11f7e4ef95c987dcb52ed5b9354', class: "content-switcher__items" }, this.items.map((item, index) => {
            const selected = index === this.selected;
            const itemType = index === 0 ? 'first' : index === this.items.length - 1 ? 'last' : 'mid';
            const className = `content-switcher__item content-switcher__item--${itemType} ${this.onColor ? 'content-switcher__item--on-color' : ''} content-switcher__item--${this.size} ${selected ? 'content-switcher__item--selected' : ''}`;
            return (h("button", { key: index, type: "button", class: className, onClick: () => this.handleSelect(index) }, item.label));
        }))));
    }
    static get is() { return "dga-content-switcher"; }
    static get properties() {
        return {
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": true,
                "defaultValue": "0"
            },
            "onColor": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "on-color",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'sm' | 'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'md'"
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{\n    label: any;\n    content: any;\n  }[]",
                    "resolved": "{ label: any; content: any; }[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[\n    {\n      label: 'Item 1',\n      content: 'Content 1',\n    },\n    {\n      label: 'Item 2',\n      content: 'Content 2',\n    },\n    {\n      label: 'Item 3',\n      content: 'Content 3',\n    },\n  ]"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(value: number) => void",
                    "resolved": "(value: number) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {}"
            }
        };
    }
    static get states() {
        return {
            "selected": {}
        };
    }
}
//# sourceMappingURL=dga-content-switcher.js.map
