{
  "name": "FountainheadTabs",
  "shortname": "FountainheadTabs",
  "classitems": [
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 166,
      "description": "<p>Internal method that can be used with a <code>run.once</code> call to only add new tabs\nonce per run loop. Simply iterates through <code>_tabsToCreate</code> and pushes them\ninto the <code>tabList</code>. This is needed to prevent multiple renders in a single\nrun loop when all of the <code>content</code> subcomponents register themselves with\nthe container during init.</p>\n",
      "itemtype": "method",
      "name": "_createTabsList",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 87,
      "description": "<p>The elementId of the currently opened tab. This determines which tab is active and\nwhich tab's content to display. If this is empty, no tabs are open.</p>\n",
      "itemtype": "property",
      "name": "activeId",
      "type": "{String}",
      "default": "''",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 142,
      "description": "<p>Bound attributes:</p>\n<ul>\n<li><code>data-test</code>: for precise testing identification</li>\n</ul>\n",
      "itemtype": "property",
      "name": "attributeBindings",
      "type": "{Array}",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 95,
      "description": "<p>Pass false to use tab style without primary color tabs.</p>\n",
      "itemtype": "property",
      "name": "buttonStyle",
      "type": "{Boolean}",
      "default": "true",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 149,
      "description": "<p>Class names: <code>fountainhead-tabs</code></p>\n",
      "itemtype": "property",
      "name": "classNames",
      "type": "{Array}",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 102,
      "description": "<p>The optional elementId of the tab that should be shown by default. This is\nuseful for cases where the user has come into a page and is expecting one\nof the tabs to be shown by default.</p>\n",
      "itemtype": "property",
      "name": "defaultTab",
      "type": "{String}",
      "default": "''",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 183,
      "description": "<p>When the component initializes, we set the <code>tabList</code> property to an array.\nThis prevents multiple instances of <code>fountainhead-tabs</code> on a given page\nfrom inheriting the same tabList array through prototype inheritance.</p>\n",
      "itemtype": "event",
      "name": "init",
      "return": {
        "description": "",
        "type": "Undefined"
      },
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 111,
      "description": "<p>Optional closure action that will be called whenever a tab is opened with\nthe id of that tab. Use this to create a controlled tabs instance.</p>\n",
      "itemtype": "property",
      "name": "onChange",
      "type": "{function}",
      "default": "null",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 229,
      "description": "<p>Closure action passed to content subcomponents that is called on init.\nEach child tab will register itself with this container. To ensure the\ntabList is only updated once per render, we proxy new tabs to the\n<code>_tabsToCreate</code> array and then push all of them to <code>tabList</code> using a\n<code>run.once</code> call to <code>_createTabsList</code></p>\n",
      "itemtype": "method",
      "name": "registerTab",
      "params": [
        {
          "name": "tab",
          "description": "<p>Object model of tab to be registered</p>\n",
          "type": "Object"
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 119,
      "description": "<p>Whether the page should scroll the tab context back to the top when one of\nthe tabs is clicked. This can be a nice convenience for usabilitee.</p>\n",
      "itemtype": "property",
      "name": "scrollOnClick",
      "type": "{Boolean}",
      "default": "false",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 127,
      "description": "<p>What the target of the <code>scrollOnClick</code> behavior should be. By default,\nthe entire page/body scrolls, however if this instance of\n<code>fountainhead-tabs</code> is contained within a modal or some other scrollable\nsub-container, it may be more desirable to execute a scroll against that\ninstead of the entire page. Simply pass a standard jQuery-like selector in\nas a string.</p>\n",
      "itemtype": "property",
      "name": "scrollTarget",
      "type": "{string}",
      "default": "'body, html'",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 207,
      "description": "<p>Action to show a tab. Set <code>activeId</code> to the passed elementId. <code>activeId</code>\nis passed down to children content components</p>\n",
      "itemtype": "method",
      "name": "showTab",
      "params": [
        {
          "name": "elementId",
          "description": "<p>HTML id of the tab to show</p>\n",
          "type": "String"
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 155,
      "description": "<p>List of tabs to display. This is iterated through in the template to\nrendered the buttons that are used to change tabs.</p>\n",
      "itemtype": "property",
      "name": "tabList",
      "type": "{Array.<Object>}",
      "default": "null",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 243,
      "description": "<p>Closure action passed to content subcomponents that is called whenever\na tab has updated in a way this container needs to know of. Currently\nthis is only when a tab's <code>hidden</code> status changes.</p>\n",
      "itemtype": "method",
      "name": "updateTab",
      "params": [
        {
          "name": "tab",
          "description": null,
          "type": "Object",
          "props": [
            {
              "name": "elementId",
              "description": "HTML id of tab to update",
              "type": "String"
            },
            {
              "name": "hidden",
              "description": "Hidden status of changed tab",
              "type": "Boolean"
            }
          ]
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    }
  ],
  "plugins": [],
  "extensions": [],
  "plugin_for": [],
  "extension_for": [],
  "module": "Addon",
  "file": "addon/components/fountainhead-tabs.js",
  "line": 10,
  "description": "<p>A++ Accessible tabs. The <code>fountainhead-tabs</code> component is the parent\ncontainer for a given set of tabs and handles managing the active state of\nthe tabs and tab panels. The <code>fountainhead-tabs</code> component yields a <code>content</code>\ncontextual component inside of the <code>components</code> hash.</p>\n{{#fountainhead-header tagName=\"h4\" elementId=\"usage\"}}Usage{{/fountainhead-header}}\n<pre class=\"language-handlebars\"><code class=\"language-handlebars\"><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#fountainhead<span class=\"token operator\">-</span>tabs <span class=\"token keyword\">as</span> <span class=\"token operator\">|</span>components<span class=\"token operator\">|</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#components<span class=\"token punctuation\">.</span>content label<span class=\"token operator\">=</span><span class=\"token string\">\"Delgrango's\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n    This is my favorite resaurant at the marinara<span class=\"token punctuation\">,</span> name <span class=\"token keyword\">of</span> Delgrango's\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>components<span class=\"token punctuation\">.</span>content<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#components<span class=\"token punctuation\">.</span>content label<span class=\"token operator\">=</span><span class=\"token string\">\"Fresh Water\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n    Boy I sure did work up a thirst after eating all them shramps<span class=\"token punctuation\">.</span> Time to\n    wash it down <span class=\"token keyword\">with</span> a cool glass <span class=\"token keyword\">of</span> marina water<span class=\"token punctuation\">.</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>components<span class=\"token punctuation\">.</span>content<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>fountainhead<span class=\"token operator\">-</span>tabs<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n</code></pre>\n<p>You can include any number of <code>components.content</code> contextual components.\n<em>(However keep in mind that adding too many <code>content</code> components may result in\nthe tab labels becoming unreadable depending on the space alotted for\ndisplaying them.)</em></p>\n<p>You can also specify a default tab by setting the <code>defaultTab</code> parameter to\nmatch one of content components' HTML id property:</p>\n<pre class=\"language-handlebars\"><code class=\"language-handlebars\"><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#fountainhead<span class=\"token operator\">-</span>tabs defaultTab<span class=\"token operator\">=</span><span class=\"token string\">\"shrimpers\"</span> <span class=\"token keyword\">as</span> <span class=\"token operator\">|</span>components<span class=\"token operator\">|</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#components<span class=\"token punctuation\">.</span>content label<span class=\"token operator\">=</span><span class=\"token string\">\"Shrimp\"</span> elementId<span class=\"token operator\">=</span><span class=\"token string\">\"shrimpers\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n    BRINGO<span class=\"token operator\">!</span> There<span class=\"token string\">'s some pretty good lil'</span> shrimpers <span class=\"token keyword\">in</span> here<span class=\"token punctuation\">,</span> lets check it out<span class=\"token punctuation\">.</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>components<span class=\"token punctuation\">.</span>content<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>#components<span class=\"token punctuation\">.</span>content label<span class=\"token operator\">=</span><span class=\"token string\">\"Delgrango's\"</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n    This is my favorite resaurant at the marinara<span class=\"token punctuation\">,</span> name <span class=\"token keyword\">of</span> Delgrango's\n  <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>components<span class=\"token punctuation\">.</span>content<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span><span class=\"token operator\">/</span>fountainhead<span class=\"token operator\">-</span>tabs<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\n</code></pre>\n{{#fountainhead-header tagName=\"h3\" elementId=\"controlled-tabs\"}}Controlled Tabs{{/fountainhead-header}}\n<p>If you need to programatically open tabs within your application you can\ncreate a controlled instance of <code>fountainhead-tabs</code> by specifying the\n<code>activeId</code> for the component. This means that you need to track the\n<code>activeId</code> in a parent component or service and pass it down into the\ncontrolled tab instance. To do this pass an <code>onChange</code> closure into the\ncomponent. It will be called with the <code>elementId</code> of the selected tab any\ntime a user changes tabs.</p>\n<p>TODO: Template &amp; JS Examples</p>\n<p>Configuration | Type | Default | Description\n— | — | —\n<code>activeId</code> | string | null | The <code>elementId</code> of the tab that should be opened\n<code>buttonStyle</code> | boolean | true | Set to false for tab buttons without primary background-color\n<code>defaultTab</code> | string | null | Tab to render shown by default\n<code>onChange</code> | function | null | Optional closure that will be called when any tab is opened\n<code>scrollOnClick</code> | boolean | false | Set to true to scroll page to top on tab click\n<code>scrollTarget</code> | jQuery selector | 'body, html' | Specify scroll animation target</p>\n{{#fountainhead-header tagName=\"h3\" elementId=\"a++-accessibility\"}}A++ Accessibility{{/fountainhead-header}}\n<ul>\n<li>Tabs have <code>aria-controls</code> set to the <code>elementId</code> of the <code>tabpanel</code> they show.</li>\n<li>Tabs have <code>role=tab</code> for role identification</li>\n<li>Tabs are instances of <code>fountainhead-button</code> for keyboard access</li>\n<li>Show/hide of tabs and panels are managed through <code>aria-hidden</code> attr</li>\n</ul>\n{{#fountainhead-header tagName=\"h3\" elementId=\"feature-notes:\"}}Feature Notes:{{/fountainhead-header}}\n<ul>\n<li>The tab list is a flexbox container with flex-grow 1 for each tab. This auto\nmagically grows the tabs to fill the entire width of tab container.</li>\n</ul>\n",
  "is_constructor": 1,
  "extends": "Ember.Component",
  "method": [
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 166,
      "description": "<p>Internal method that can be used with a <code>run.once</code> call to only add new tabs\nonce per run loop. Simply iterates through <code>_tabsToCreate</code> and pushes them\ninto the <code>tabList</code>. This is needed to prevent multiple renders in a single\nrun loop when all of the <code>content</code> subcomponents register themselves with\nthe container during init.</p>\n",
      "itemtype": "method",
      "name": "_createTabsList",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 229,
      "description": "<p>Closure action passed to content subcomponents that is called on init.\nEach child tab will register itself with this container. To ensure the\ntabList is only updated once per render, we proxy new tabs to the\n<code>_tabsToCreate</code> array and then push all of them to <code>tabList</code> using a\n<code>run.once</code> call to <code>_createTabsList</code></p>\n",
      "itemtype": "method",
      "name": "registerTab",
      "params": [
        {
          "name": "tab",
          "description": "<p>Object model of tab to be registered</p>\n",
          "type": "Object"
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 207,
      "description": "<p>Action to show a tab. Set <code>activeId</code> to the passed elementId. <code>activeId</code>\nis passed down to children content components</p>\n",
      "itemtype": "method",
      "name": "showTab",
      "params": [
        {
          "name": "elementId",
          "description": "<p>HTML id of the tab to show</p>\n",
          "type": "String"
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 243,
      "description": "<p>Closure action passed to content subcomponents that is called whenever\na tab has updated in a way this container needs to know of. Currently\nthis is only when a tab's <code>hidden</code> status changes.</p>\n",
      "itemtype": "method",
      "name": "updateTab",
      "params": [
        {
          "name": "tab",
          "description": null,
          "type": "Object",
          "props": [
            {
              "name": "elementId",
              "description": "HTML id of tab to update",
              "type": "String"
            },
            {
              "name": "hidden",
              "description": "Hidden status of changed tab",
              "type": "Boolean"
            }
          ]
        }
      ],
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    }
  ],
  "property": [
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 87,
      "description": "<p>The elementId of the currently opened tab. This determines which tab is active and\nwhich tab's content to display. If this is empty, no tabs are open.</p>\n",
      "itemtype": "property",
      "name": "activeId",
      "type": "{String}",
      "default": "''",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 142,
      "description": "<p>Bound attributes:</p>\n<ul>\n<li><code>data-test</code>: for precise testing identification</li>\n</ul>\n",
      "itemtype": "property",
      "name": "attributeBindings",
      "type": "{Array}",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 95,
      "description": "<p>Pass false to use tab style without primary color tabs.</p>\n",
      "itemtype": "property",
      "name": "buttonStyle",
      "type": "{Boolean}",
      "default": "true",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 149,
      "description": "<p>Class names: <code>fountainhead-tabs</code></p>\n",
      "itemtype": "property",
      "name": "classNames",
      "type": "{Array}",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 102,
      "description": "<p>The optional elementId of the tab that should be shown by default. This is\nuseful for cases where the user has come into a page and is expecting one\nof the tabs to be shown by default.</p>\n",
      "itemtype": "property",
      "name": "defaultTab",
      "type": "{String}",
      "default": "''",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 111,
      "description": "<p>Optional closure action that will be called whenever a tab is opened with\nthe id of that tab. Use this to create a controlled tabs instance.</p>\n",
      "itemtype": "property",
      "name": "onChange",
      "type": "{function}",
      "default": "null",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 119,
      "description": "<p>Whether the page should scroll the tab context back to the top when one of\nthe tabs is clicked. This can be a nice convenience for usabilitee.</p>\n",
      "itemtype": "property",
      "name": "scrollOnClick",
      "type": "{Boolean}",
      "default": "false",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 127,
      "description": "<p>What the target of the <code>scrollOnClick</code> behavior should be. By default,\nthe entire page/body scrolls, however if this instance of\n<code>fountainhead-tabs</code> is contained within a modal or some other scrollable\nsub-container, it may be more desirable to execute a scroll against that\ninstead of the entire page. Simply pass a standard jQuery-like selector in\nas a string.</p>\n",
      "itemtype": "property",
      "name": "scrollTarget",
      "type": "{string}",
      "default": "'body, html'",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    },
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 155,
      "description": "<p>List of tabs to display. This is iterated through in the template to\nrendered the buttons that are used to change tabs.</p>\n",
      "itemtype": "property",
      "name": "tabList",
      "type": "{Array.<Object>}",
      "default": "null",
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    }
  ],
  "event": [
    {
      "file": "addon/components/fountainhead-tabs.js",
      "line": 183,
      "description": "<p>When the component initializes, we set the <code>tabList</code> property to an array.\nThis prevents multiple instances of <code>fountainhead-tabs</code> on a given page\nfrom inheriting the same tabList array through prototype inheritance.</p>\n",
      "itemtype": "event",
      "name": "init",
      "return": {
        "description": "",
        "type": "Undefined"
      },
      "class": "FountainheadTabs",
      "srcFileId": "addon_components_fountainhead-tabs.js"
    }
  ],
  "srcFileId": "addon_components_fountainhead-tabs.js"
}