[
  {
    "tags": [
      {
        "type": "component",
        "string": "fab",
        "html": "<p>fab</p>"
      },
      {
        "type": "param",
        "string": "{bindable} icon (string)",
        "name": "icon",
        "description": "<p>(string)</p>",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{pseudo} default",
        "name": "default",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} default</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} primary",
        "name": "primary",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} primary</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} secondary",
        "name": "secondary",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} secondary</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} top (string)",
        "name": "top",
        "description": "<p>(string)</p>",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{pseudo} right (string)",
        "name": "right",
        "description": "<p>(string)</p>",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{pseudo} bottom (string)",
        "name": "bottom",
        "description": "<p>(string)</p>",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "param",
        "string": "{pseudo} left (string)",
        "name": "left",
        "description": "<p>(string)</p>",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false
      },
      {
        "type": "section.usage",
        "string": "",
        "html": ""
      },
      {
        "type": "usage.title",
        "string": "Usage",
        "html": "<p>Usage</p>"
      },
      {
        "type": "usage.description",
        "string": "A fab has an icon",
        "html": "<p>A fab has an icon</p>"
      },
      {
        "type": "usage.examples.Icon",
        "string": "aire-fab(icon=\"fa fa-pencil\" default)",
        "html": "<p>aire-fab(icon=&quot;fa fa-pencil&quot; default)</p>"
      },
      {
        "type": "section.style",
        "string": "",
        "html": ""
      },
      {
        "type": "style.title",
        "string": "Style",
        "html": "<p>Style</p>"
      },
      {
        "type": "style.description",
        "string": "Fabs have four styling options: default, primary, secondary, danger.",
        "html": "<p>Fabs have four styling options: default, primary, secondary, danger.</p>"
      },
      {
        "type": "style.examples.Styles",
        "string": "aire-fab(icon=\"fa fa-pencil\" default)\naire-fab(icon=\"fa fa-pencil\" primary left=\"50%\")\naire-fab(icon=\"fa fa-pencil\" secondary left=\"100%\")\naire-fab(icon=\"fa fa-pencil\" danger left=\"25%\")",
        "html": "<p>aire-fab(icon=&quot;fa fa-pencil&quot; default)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; primary left=&quot;50%&quot;)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; secondary left=&quot;100%&quot;)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; danger left=&quot;25%&quot;)</p>"
      },
      {
        "type": "section.position",
        "string": "",
        "html": ""
      },
      {
        "type": "position.title",
        "string": "Position",
        "html": "<p>Position</p>"
      },
      {
        "type": "position.description",
        "string": "Fabs are arranged on the page by passing in arguments for each edge. If an edge is not set, its position is auto.",
        "html": "<p>Fabs are arranged on the page by passing in arguments for each edge. If an edge is not set, its position is auto.</p>"
      },
      {
        "type": "position.examples.Position",
        "string": "aire-fab(icon=\"fa fa-pencil\" top=\"50px\" default)\naire-fab(icon=\"fa fa-pencil\" left=\"50px\" default)\naire-fab(icon=\"fa fa-pencil\" right=\"50px\" default)\naire-fab(icon=\"fa fa-pencil\" bottom=\"50px\" default)",
        "html": "<p>aire-fab(icon=&quot;fa fa-pencil&quot; top=&quot;50px&quot; default)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; left=&quot;50px&quot; default)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; right=&quot;50px&quot; default)<br />\naire-fab(icon=&quot;fa fa-pencil&quot; bottom=&quot;50px&quot; default)</p>"
      }
    ],
    "description": {
      "full": "<p>The aire-fab is a rounded button element that can be absolutely positioned along any set of edges</p>",
      "summary": "<p>The aire-fab is a rounded button element that can be absolutely positioned along any set of edges</p>",
      "body": ""
    },
    "isPrivate": false,
    "isConstructor": false,
    "isClass": false,
    "isEvent": false,
    "ignore": false,
    "line": 5,
    "codeStart": 55,
    "code": "@inject(DOM.Element)\n@customElement('aire-fab')\nexport class AireFab extends AireBaseButton {\n\n  style     : string = \"\";\n\n  static readonly edges = [\"top\", \"right\", \"bottom\", \"left\"];\n\n  constructor(element: Element) {\n    super(element);\n    this.style = AireFab.edges.map((edge) => {\n        return `${edge}: ${element.getAttribute(edge) || \"auto\"}`;\n    }).join('; ');\n  }\n\n  attached() {\n      super.attached();\n  }\n}",
    "ctx": false
  }
]