[
  {
    "tags": [
      {
        "type": "param",
        "string": "{bindable} open",
        "name": "open",
        "description": "",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{bindable} open</p>"
      },
      {
        "type": "param",
        "string": "{bindable} parent",
        "name": "parent",
        "description": "",
        "types": [
          "bindable"
        ],
        "typesDescription": "<a href=\"bindable.html\">bindable</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{bindable} parent</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} push",
        "name": "push",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} push</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} mode",
        "name": "mode",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} mode</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} flip",
        "name": "flip",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} flip</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} overlay",
        "name": "overlay",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} overlay</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} esc-close",
        "name": "esc-close",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} esc-close</p>"
      },
      {
        "type": "param",
        "string": "{pseudo} bg-close",
        "name": "bg-close",
        "description": "",
        "types": [
          "pseudo"
        ],
        "typesDescription": "<a href=\"pseudo.html\">pseudo</a>",
        "optional": false,
        "nullable": false,
        "nonNullable": false,
        "variable": false,
        "html": "<p>{pseudo} bg-close</p>"
      },
      {
        "type": "section.usage",
        "string": "",
        "html": ""
      },
      {
        "type": "usage.title",
        "string": "Usage",
        "html": "<p>Usage</p>"
      },
      {
        "type": "usage.description",
        "string": "An off-canvas has a slot for all of its content, and can be open by default",
        "html": "<p>An off-canvas has a slot for all of its content, and can be open by default</p>"
      },
      {
        "type": "usage.examples.Open",
        "string": "aire-offcanvas(open)\n p Offcanvas Content",
        "html": "<p>aire-offcanvas(open)<br />\np Offcanvas Content</p>"
      },
      {
        "type": "section.parent",
        "string": "",
        "html": ""
      },
      {
        "type": "parent.title",
        "string": "Parent",
        "html": "<p>Parent</p>"
      },
      {
        "type": "parent.description",
        "string": "By default, the offcanvas takes up the entire height of the page, but in some cases (as with a navbar) this might not be desirable. You can specify a parent and tell the offcanvas to `push` to push it down.",
        "html": "<p>By default, the offcanvas takes up the entire height of the page, but in some cases (as with a navbar) this might not be desirable. You can specify a parent and tell the offcanvas to <code>push</code> to push it down.</p>"
      },
      {
        "type": "parent.examples.Pushing_From_Parent",
        "string": "aire-navbar\nsection#pushingFromParent\n aire-offcanvas(parent=\"#pushingFromParent\" push)",
        "html": "<p>aire-navbar<br />\nsection#pushingFromParent<br />\naire-offcanvas(parent=&quot;#pushingFromParent&quot; push)</p>"
      }
    ],
    "description": {
      "full": "<p>The aire-offcanvas is a sidebar that slides on and off the page</p>",
      "summary": "<p>The aire-offcanvas is a sidebar that slides on and off the page</p>",
      "body": ""
    },
    "isPrivate": false,
    "isConstructor": false,
    "isClass": false,
    "isEvent": false,
    "ignore": false,
    "line": 12,
    "codeStart": 47,
    "code": "@inject(DOM.Element)\n@customElement('aire-offcanvas')\nexport class AireOffCanvas {\n\n  @bindable\n  open : boolean;\n\n  element : HTMLElement;\n\n  @bindable\n  private parent : any;\n\n  private offcanvas : OffCanvas;\n\n  style : string;\n\n  constructor(private el : Element) {\n  }\n\n  activate() : void {\n  }\n\n  private resolveParentFor() : Element {\n    let parent = this.parent;\n    if (!parent) {\n      return null;\n    }\n    if (typeof parent === 'string') {\n      return dom.$(parent);\n    }\n    if(parent instanceof View) {\n      return dom.$('#' + (parent as any).firstChild.id);\n    }\n    return parent;\n  }\n\n\n  attached() {\n\n    let options = {\n        mode        : this.el.getAttribute(\"mode\") || \"slide\",\n        flip        : this.el.hasAttribute(\"flip\"),\n        overlay     : this.el.hasAttribute(\"overlay\"),\n        'esc-close' : this.el.hasAttribute(\"esc-close\") || true,\n        'bg-close'  : this.el.hasAttribute(\"bg-close\") || true\n      },\n      parent = this.resolveParentFor();\n\n    if (parent) {\n        parent.classList.add('uk-offcanvas-container');\n        if (this.el.hasAttribute(\"push\")) {\n            this.style = `top: ${(parent as HTMLElement).offsetTop}px`;\n        }\n      options['container'] = dom.pathTo(parent);\n    }\n\n    this.offcanvas = UIkit.offcanvas(this.element, options);\n  }\n\n  toggle() : void {\n    if (this.open) {\n      this.offcanvas.hide();\n    }\n    else {\n      this.offcanvas.show();\n    }\n    this.open = !this.open;\n  }\n\n  show() : void {\n    this.offcanvas.show();\n    this.open = true;\n  }\n\n  hide() : void {\n    this.offcanvas.hide();\n    this.open = false;\n  }\n}",
    "ctx": false
  }
]