{
  "file": "addon/components/fountainhead-class/property-link.js",
  "content": "<pre class=\"language-javascript line-numbers\"><code class=\"language-javascript}\"><span aria-hidden=\"true\" role=\"presentation\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span><span class=\"token keyword\">import</span> Component <span class=\"token keyword\">from</span> <span class=\"token string\">'ember-component'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> inject <span class=\"token keyword\">from</span> <span class=\"token string\">'ember-service/inject'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> hbs <span class=\"token keyword\">from</span> <span class=\"token string\">'htmlbars-inline-precompile'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\" spellcheck=\"true\">/**\n * Creates the property link used in the index tab for a class. Renders either an\n * anchor or button based on consuming app's location type:\n * - History Location: An anchor with a href fragment matching the property name for\n *   the link and an action for selecting the tab for that property.\n * - Hash Location: Button with an action for selecting the tab for that property and\n *   then calling {{c-l class='Fountainhead'}} to update `id` query param to match\n *   property name.\n *\n * In both cases, the tab for the property must be selected first so that when the\n * url updates and the app then updates the property with the matching id is in DOM.\n *\n * For the anchor, this just means selecting the tab. The anchor click then bubbles\n * and the browser handles scrolling to the matching id that is now in DOM b/c the\n * correct tab has been selected.\n *\n * For the button, we have to manually DDAU the event. The correct tab is selected\n * and query param id is then updated. The changed query param then triggers the\n * class page to scroll to the new id.\n * @class FountainheadClass.PropertyLink\n * @constructor\n * @extends Ember.Component\n */</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> Component<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  fountainhead<span class=\"token punctuation\">:</span> <span class=\"token function\">inject</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\" spellcheck=\"true\">/**\n   * @property tagName\n   * @type {string}\n   * @default ''\n   */</span>\n  tagName<span class=\"token punctuation\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\" spellcheck=\"true\">// Layout</span>\n  <span class=\"token comment\" spellcheck=\"true\">// ---------------------------------------------------------------------------</span>\n  layout<span class=\"token punctuation\">:</span> hbs<span class=\"token template-string\"><span class=\"token string\">`\n    {{#if fountainhead.meta.hashRouting}}\n      {{! For Hash Location consumers, a link-to with just a query-params creates\n          a link to this page with the correct &amp;id= query param }}\n      {{#link-to (query-params id=fragmentId)}}\n        {{fragmentId}}\n      {{/link-to}}\n    {{else}}\n      {{! History Location: Use href fragment to prompt browser scroll }}\n      &lt;a\n        href={{concat '#' fragmentId}}\n        onclick={{action selectTabForProperty fragmentId}}>\n        {{fragmentId}}\n      &lt;/a>\n    {{/if}}\n  `</span></span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>"
}