{ "file": "addon/components/fountainhead-tabs-content.js", "content": "
/* Source: https://github.com/healthsparq/ember-radical/blob/master/addon/components/rad-tabs/content/component.js */\n\nimport Component from 'ember-component';\nimport computed from 'ember-computed';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * This component is yielded by the `fountainhead-tabs` component. The `activeId` and\n * actions `registerTab` and `updateTab` are privately bound for internal use.\n *\n * On init each tab will register itself with the `fountainhead-tabs` wrapping container,\n * passing all its data. The `fountainhead-tabs` container uses this to build out the\n * tab buttons.\n *\n * ```handlebars\n * {{#fountainhead-tabs defaultTab=\"dumpsterShrimp\" as |components|}}\n *   {{#components.content label=\"Shrimp\" elementId=\"dumpsterShrimp\" tabDataTest=\"a-nifty-tab-button\"}}\n *     BRINGO! There's some pretty good lil' shrimpers in here, lets check it out.\n *   {{/components.content}}\n * {{/fountainhead-tabs}}\n * ```\n *\n * Configuration | Type | Default | Description\n * --- | --- | --- | ---\n * `label` | string | null | Text label of the tab button for this panel\n * `elementId` | string | null | Set a specific id for this component when using container `defaultTab`\n * `tabDataTest` | string | null | `data-test` for the tab button\n *\n * @class FountainheadTabsContent\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * The id of the currently active tab in the scope of the\n   * `fountainhead-tabs` component. This is provided privately in the\n   * `fountainhead-tabs` yield hash.\n   * @property activeId\n   * @type {String}\n   * @default ''\n   */\n  activeId: '',\n  /**\n   * Whether this tab should be hidden from view. Useful for situations where\n   * a tab needs to exist in a particular place in the tab ordering but may\n   * not have the data it needs to display information at the time when\n   * `registerTab` is invoked. This allows you to make sure your tab can be\n   * hidden while preserving its place in the list.\n   *\n   * @property hidden\n   * @type {Boolean}\n   */\n  hidden: false,\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Aria role `tabpanel` is bound for A++ accessibility.\n   * @property ariaRole\n   * @type {string}\n   * @default tabpanel\n   */\n  ariaRole: 'tabpanel',\n  /**\n   * Bound attributes:\n   * - `data-test`: for precise testing identification\n   * - `_hidden`: to hide this tab if it is not selected or if prop hidden is true\n   * @property attributeBindings\n   * @type {Array}\n   */\n  attributeBindings: ['data-test', '_hidden:aria-hidden'],\n  /**\n   * Class names: `tabs-content`\n   * @property classNames\n   * @type {Array}\n   */\n  classNames: ['tabs-content'],\n  /**\n   * Computed `_hidden` accounts for whether the tab is selected (by checking\n   * `activeId`) && if this tab has been flagged to be hidden with property\n   * `hidden`\n   * @property _hidden\n   * @param {string} activeId\n   * @param {boolean} hidden\n   * @return {string} String of true/false for use with `aria-hidden` binding\n   */\n  _hidden: computed('activeId', 'hidden', function() {\n    if (this.get('hidden') || this.get('activeId') !== this.get('elementId')) {\n      return 'true';\n    } else {\n      return 'false';\n    }\n  }),\n  /**\n   * The button label text of this tab. This will be passed up via a closure\n   * action to the containing `fountainhead-tabs` component.\n   *\n   * @property label\n   * @type {String}\n   * @default ''\n   */\n  label: '',\n  /**\n   * Use this attribute to place a custom data-test attribute on the tab button\n   * for this tab. This will allow easier, specific/direct targeting of clicking\n   * this tab in automated testing.\n   *\n   * @property tabDataTest\n   * @type {string}\n   */\n  tabDataTest: '',\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * Handle registering with the tabs container on int by firing `registerTab`\n   * closure action with this tab's data.\n   * @event init\n   */\n  init() {\n    this._super(...arguments);\n\n    this.registerTab(this.getProperties(\n      'elementId',\n      'label',\n      'hidden',\n      'tabDataTest',\n      'tagcategory',\n      'tagaction',\n      'taglabel')\n    );\n  },\n  /**\n   * Actions Up: When something changes in this component we need to let the\n   * container tabs know by firing the `updateTab` closure action with this\n   * tabs changed data.\n   *\n   * _(Currently the only change we're notifying on is the `hidden` prop)_\n   * @event didUpdateAttrs\n   */\n  didUpdateAttrs() {\n    let hidden = this.get('hidden'),\n        oldHidden = this.get('_oldHidden');\n\n    if (oldHidden !== hidden) {\n      this.updateTab(this.getProperties('elementId', 'hidden'));\n    }\n\n    // Update the private hidden state so it can be used for comparison\n    // on the next attrs update\n    this.set('_oldHidden', hidden);\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`{{yield}}`\n});\n
" }