[
  {
    "tags": [
      {
        "type": "component",
        "string": "select",
        "html": "<p>select</p>"
      },
      {
        "type": "param",
        "string": "{bindable} label (string)",
        "name": "label",
        "description": "<p>(string)</p>",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{bindable} value (any)",
        "name": "value",
        "description": "<p>(any)</p>",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{bindable} disabled (boolean)",
        "name": "disabled",
        "description": "<p>(boolean)</p>",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{bindable} data ({}[] || {})",
        "name": "data",
        "description": "<p>({}[] || {})</p>",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{pseudo} horizontal",
        "name": "horizontal",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} horizontal</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} success",
        "name": "success",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} success</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} danger",
        "name": "danger",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} danger</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} blank",
        "name": "blank",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} blank</p>"
      },
      {
        "type": "section.usage",
        "string": "",
        "html": ""
      },
      {
        "type": "usage.title",
        "string": "Usage",
        "html": "<p>Usage</p>"
      },
      {
        "type": "usage.description",
        "string": "Just like any form element, a select can have a label and a value. It can also be disabled. It takes an array of {label: string, value: string} objects.",
        "html": "<p>Just like any form element, a select can have a label and a value. It can also be disabled. It takes an array of {label: string, value: string} objects.</p>"
      },
      {
        "type": "usage.examples.Default",
        "string": "aire-select(data=\"[label='Default, value='']\")",
        "html": "<p>aire-select(data=&quot;[label='Default, value='']&quot;)</p>"
      },
      {
        "type": "usage.examples.With_Label_And_Value",
        "string": "aire-select(label=\"My Select\" value=\"1\", data=\"[{label:'Default', value:''}, {label: 'One', value:'1'}]\")",
        "html": "<p>aire-select(label=&quot;My Select&quot; value=&quot;1&quot;, data=&quot;[{label:'Default', value:''}, {label: 'One', value:'1'}]&quot;)</p>"
      },
      {
        "type": "usage.examples.Disabled",
        "string": "aire-select(disabled label=\"Disabled Select\")",
        "html": "<p>aire-select(disabled label=&quot;Disabled Select&quot;)</p>"
      },
      {
        "type": "section.styles",
        "string": "",
        "html": ""
      },
      {
        "type": "styles.title",
        "string": "Styles",
        "html": "<p>Styles</p>"
      },
      {
        "type": "styles.description",
        "string": "An select's label can be moved horizontal with `horizontal`. The select can also have an `danger` or `success` state. For a more minimal look, make it `blank`.",
        "html": "<p>An select's label can be moved horizontal with <code>horizontal</code>. The select can also have an <code>danger</code> or <code>success</code> state. For a more minimal look, make it <code>blank</code>.</p>"
      },
      {
        "type": "styles.examples.Horizontal",
        "string": "aire-select(horizontal label=\"Horizontal Select\")",
        "html": "<p>aire-select(horizontal label=&quot;Horizontal Select&quot;)</p>"
      },
      {
        "type": "styles.examples.Danger",
        "string": "aire-select(danger label=\"Danger Select\")",
        "html": "<p>aire-select(danger label=&quot;Danger Select&quot;)</p>"
      },
      {
        "type": "styles.examples.Success",
        "string": "aire-select(success label=\"Success Select\")",
        "html": "<p>aire-select(success label=&quot;Success Select&quot;)</p>"
      },
      {
        "type": "styles.examples.Blank",
        "string": "aire-select(blank label=\"Minimal Select\")",
        "html": "<p>aire-select(blank label=&quot;Minimal Select&quot;)</p>"
      }
    ],
    "description": {
      "full": "<p>The aire-select is a styled select</p>",
      "summary": "<p>The aire-select is a styled select</p>",
      "body": ""
    },
    "isPrivate": false,
    "isConstructor": false,
    "isClass": false,
    "isEvent": false,
    "ignore": false,
    "line": 5,
    "codeStart": 55,
    "code": "@inject(DOM.Element)\n@customElement('aire-select')\nexport class AireSelect extends AireFormElement {\n\n    options     : {label: string, value: string}[];\n\n    @bindable\n    data        : {label: string, value: string}[] | {label: string, value: string};\n\n    constructor(element: Element) {\n        super(element);\n        this.options = Array.isArray(this.data) ? this.data : [this.data]; //catches single instance non-iterable\n    }\n}",
    "ctx": false
  }
]