import { Host, h } from "@stencil/core";
let groupId = 0;
export class Optgroup {
    constructor() {
        this.optgroupId = `'anj-optgroup-${groupId++}`;
        /**
         * Should the labels be sticky
         */
        this.sticky = false;
    }
    onMouseDown(event) {
        event.preventDefault();
    }
    render() {
        return (h(Host, { role: "group" },
            h("label", { id: this.optgroupId, class: "anj-optgroup-label", onMouseDown: ev => this.onMouseDown(ev) }, this.label),
            h("slot", null)));
    }
    static get is() { return "anj-optgroup"; }
    static get originalStyleUrls() { return {
        "$": ["optgroup.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["optgroup.css"]
    }; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Label to display"
            },
            "attribute": "label",
            "reflect": false
        },
        "sticky": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Should the labels be sticky"
            },
            "attribute": "sticky",
            "reflect": true,
            "defaultValue": "false"
        }
    }; }
}
