import { Component, Element, h, Host, Prop } from '@stencil/core';
export class SelectOption {
  constructor() {
    this.inputId = `ion-selopt-${selectOptionIds++}`;
    /**
     * If `true` the option is hidden
     */
    this.hidden = false;
    /**
     * Baloise icon as a prefix
     */
    this.icon = '';
    /**
     * If `true` the option is focused
     */
    this.focused = false;
    /**
     * If `true` the option is selected
     */
    this.selected = false;
  }
  get parent() {
    return this.element.closest('bal-select');
  }
  onClick() {
    this.parent.select(this.value);
  }
  render() {
    return (h(Host, { role: "option", id: this.inputId, onClick: () => this.onClick() },
      h("button", { class: [
          'dropdown-item',
          this.selected ? 'is-selected' : '',
          this.hidden ? 'is-hidden' : '',
          this.focused ? 'is-focused' : '',
          this.icon ? 'has-icon' : '',
        ].join(' '), tabIndex: -1 }, this.value.render ? (h("span", { innerHTML: this.value.render(this.value) })) : (h("bal-text", { class: "title" }, this.value.text)))));
  }
  static get is() { return "bal-select-option"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-select-option.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-select-option.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "BalOptionValue<any>",
        "resolved": "BalOptionValue<any>",
        "references": {
          "BalOptionValue": {
            "location": "import",
            "path": "./bal-select-option.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the dropdown item. This value will be returned by the parent <bal-dropdown> element."
      }
    },
    "hidden": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is hidden"
      },
      "attribute": "hidden",
      "reflect": false,
      "defaultValue": "false"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Baloise icon as a prefix"
      },
      "attribute": "icon",
      "reflect": false,
      "defaultValue": "''"
    },
    "focused": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is focused"
      },
      "attribute": "focused",
      "reflect": false,
      "defaultValue": "false"
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is selected"
      },
      "attribute": "selected",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get elementRef() { return "element"; }
}
let selectOptionIds = 0;
