import { h } from "@stencil/core";
/**
 * Segmented 分段控制器组件
 * 类似 iOS 分段控件，选中项有高亮滑块背景
 */
export class Segmented {
    /** 当前选中值 */
    modelValue = '';
    /** 是否撑满宽度 */
    block = false;
    /** 尺寸 */
    size = 'default';
    /** 选项数组 */
    options = [];
    /** 选中值变化事件 */
    hbChange;
    handleSelect = (option) => {
        if (option.disabled || option.value === this.modelValue)
            return;
        this.modelValue = option.value;
        this.hbChange.emit(option.value);
    };
    render() {
        return (h("div", { key: '1e3f2004fd85fbce0d29721006dcf9f415827ec5', class: { 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block } }, h("div", { key: '81859de225297f531f53825d792a965356daf685', class: "hb-segmented__items" }, this.options.map((option) => (h("button", { type: "button", class: {
                'hb-segmented__item': true,
                'hb-segmented__item--active': option.value === this.modelValue,
                'hb-segmented__item--disabled': !!option.disabled,
            }, disabled: !!option.disabled, onClick: () => this.handleSelect(option) }, h("span", { class: "hb-segmented__item-label" }, option.label)))))));
    }
    static get is() { return "hb-segmented"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["segmented.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["segmented.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u9009\u4E2D\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "''"
            },
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u6491\u6EE1\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "block",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SegmentedOption[]",
                    "resolved": "SegmentedOption[]",
                    "references": {
                        "SegmentedOption": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Segmented/Segmented.tsx",
                            "id": "src/components/Segmented/Segmented.tsx::SegmentedOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u9009\u9879\u6570\u7EC4"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u9009\u4E2D\u503C\u53D8\u5316\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=Segmented.js.map
