/*!
 * Built with Stencil
 * By PostNord.
 */
import { uuidv4 } from "../../../../globals/helpers";
import { h, Host } from "@stencil/core";
/**
 * The `pn-segment` is built with a native `input[type="radio"]` in the background.
 * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead.
 */
export class PnSegment {
    id = `pn-segment-${uuidv4()}`;
    hostElement;
    /** The segment label, same as the slot. @since v7.7.0 */
    label;
    /** The segment controller name. */
    name;
    /** The segment value. */
    value;
    /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
    selected = false;
    /** A unique HTML id. */
    segmentid = this.id;
    /** The SVG content of the icon you want. */
    icon;
    /** Disable the segment. @since v7.7.0 */
    disabled = false;
    /** This event is used by the `pn-segmented-control` component. Do not use manually. */
    segmentHover;
    handleHover(mouse) {
        this.segmentHover.emit(mouse);
    }
    render() {
        return (h(Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
    }
    static get is() { return "pn-segment"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-segment.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-segment.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.7.0"
                        }],
                    "text": "The segment label, same as the slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The segment controller name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The segment value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "hide",
                            "text": "true"
                        }],
                    "text": "Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "selected",
                "defaultValue": "false"
            },
            "segmentid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique HTML id."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "segmentid",
                "defaultValue": "this.id"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The SVG content of the icon you want."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.7.0"
                        }],
                    "text": "Disable the segment."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "segmentHover",
                "name": "segmentHover",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "This event is used by the `pn-segmented-control` component. Do not use manually."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
