import { Component, Host, h, Prop, Event } from '@stencil/core';
export class UxplToggleText {
  constructor() {
    this.onClick = (option) => {
      this.value = option;
      this.uxplSelectionChanged.emit(this.value);
    };
  }
  render() {
    return (h(Host, null,
      h("div", { class: "pl-text-toggle" }, this.options.map((option) => h("div", { class: "pl-wrapper-div" },
        h("input", { class: "pl-text-toggle__input", type: "radio", id: option.value, name: "text-toggle", checked: this.selected == option.value, disabled: this.disabled, onClick: (_) => this.onClick(option) }),
        h("label", { class: "pl-text-toggle__label", htmlFor: option.value }, option.label))))));
  }
  static get is() { return "uxpl-toggle-text"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-toggle-text.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-toggle-text.css"]
  }; }
  static get properties() { return {
    "options": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "ToggleTextOption[]",
        "resolved": "ToggleTextOption[]",
        "references": {
          "ToggleTextOption": {
            "location": "import",
            "path": "./uxpl-toggle-interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "selected": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "uxplSelectionChanged",
      "name": "uxplSelectionChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "ToggleTextOption",
        "resolved": "ToggleTextOption",
        "references": {
          "ToggleTextOption": {
            "location": "import",
            "path": "./uxpl-toggle-interface"
          }
        }
      }
    }]; }
}
/*

<input
class="pl-text-toggle__input"
type="radio"
id="changeME-toggle5"
name="text-toggle"
/>
<label class="pl-text-toggle__label" htmlFor="changeME-toggle5">{option.label}</label>


          {this.options.map((option) =>
              <input
              class="pl-text-toggle__input"
              type="radio"
              id={option.value}
              name="text-toggle"
            />
          )}
          {this.options.map((option) =>
            <label class="pl-text-toggle__label" htmlFor={option.value}>{option.label}</label>
          )}


<input
class="pl-text-toggle__input"
type="radio"
id="changeME-toggle5"
name="text-toggle"
/>
<label class="pl-text-toggle__label" htmlFor="changeME-toggle5">label 1</label>

<input
class="pl-text-toggle__input"
type="radio"
id="changeME-toggle6"
name="text-toggle"
/>
<label class="pl-text-toggle__label" htmlFor="changeME-toggle6">label 2</label>

<input
class="pl-text-toggle__input"
type="radio"
id="changeME-toggle7"
name="text-toggle"
/>
<label class="pl-text-toggle__label" htmlFor="changeME-toggle7">label 3</label>



*/
