import { Component, Element, h, Host, Prop, Event, Listen } from '@stencil/core';
export class SelectOption {
  constructor() {
    this.hidden = false;
    /**
     * Baloise icon as a prefix
     */
    this.icon = '';
    /**
     * TODO: add description
     */
    this.checkbox = false;
    /**
     * If `true` the option is focused
     */
    this.focused = false;
    /**
     * If `true` the option is selected
     */
    this.selected = false;
  }
  async selectChanged(event) {
    event.preventDefault();
    event.stopPropagation();
    this.selected = event.detail === null ? false : this.value.value === event.detail.value;
  }
  async selectInput(event) {
    event.preventDefault();
    event.stopPropagation();
    const searchValue = event.detail;
    const index = this.value.text.toLowerCase().indexOf(searchValue.toLowerCase());
    this.hidden = index < 0;
  }
  async onClick() {
    this.balOptionSelect.emit(this.value);
  }
  render() {
    return (h(Host, null,
      h("button", { class: [
          'dropdown-item',
          this.selected ? 'is-selected' : '',
          this.hidden ? 'is-hidden' : '',
          this.focused ? 'is-focused' : '',
          this.icon ? 'has-icon' : '',
        ].join(' '), tabIndex: -1, onClick: this.onClick.bind(this) }, 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 {
    "hidden": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hidden",
      "reflect": false,
      "defaultValue": "false"
    },
    "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."
      }
    },
    "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": "''"
    },
    "checkbox": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "TODO: add description"
      },
      "attribute": "checkbox",
      "reflect": false,
      "defaultValue": "false"
    },
    "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 events() { return [{
      "method": "balOptionSelect",
      "name": "balOptionSelect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string | boolean | number | any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "balSelectChanged",
      "method": "selectChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "balSelectInput",
      "method": "selectInput",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
