martin/ft-webplatform
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/ft-webplatform.git synced 2025-01-11 06:55:08 +00:00
Code Issues Projects Releases Wiki Activity
76920442b1
ft-webplatform/assets/docs.json
Martin Donnelly 76920442b1 init
2017-09-28 13:04:16 +01:00

454 lines
286 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"index": [
{
"section": "General",
"regex": "^README.md|developer-notes/general|lib",
"pages": [
"README.md",
"lib/component-base.md",
"lib/date-formatter.md",
"lib/paging-utils.md",
"lib/redux-component-base.md",
"lib/sort-utils.md",
"lib/test-utils.md",
"developer-notes/general/browser-compatibilty.md",
"developer-notes/general/build-and-deployment.md",
"developer-notes/general/chrome-plugins.md",
"developer-notes/general/environments.md",
"developer-notes/general/generators.md",
"developer-notes/general/page-lifecyle.md",
"developer-notes/general/setup.md",
"developer-notes/general/stub-data.md",
"developer-notes/general/vs-code.md",
"developer-notes/general/writing-documentation.md",
"components/products/lib/date-util.md",
"components/products/lib/reducer-utils.md",
"components/products/lib/reducers/fund-config/config-loader.reducer.md"
]
},
{
"section": "Common Components",
"regex": "^components/common",
"pages": [
"components/common/attributes/ft-tooltip.md",
"components/common/elements/ft-back-to-top/ft-back-to-top.md",
"components/common/elements/ft-carousel/ft-carousel.md",
"components/common/elements/ft-date-dropdown/ft-date-dropdown.md",
"components/common/elements/ft-datepicker/ft-datepicker.md",
"components/common/elements/ft-historical-modal/ft-historical-modal.md",
"components/common/elements/ft-label/ft-label.md",
"components/common/elements/ft-modal/ft-modal.md",
"components/common/elements/ft-modal-inline/ft-modal-inline.md",
"components/common/elements/ft-owl-carousel/ft-owl-carousel.md",
"components/common/elements/ft-owl-tabbed/ft-owl-tabbed.md",
"components/common/elements/ft-pagination/ft-pagination.md",
"components/common/elements/ft-tab-collapse/ft-tab-collapse.md",
"components/common/elements/ft-th-sortable/ft-th-sortable.md",
"components/common/elements/ft-visual-hint/ft-visual-hint.md",
"components/common/elements/charting/ft-bar-chart/ft-bar-chart.md",
"components/common/elements/charting/ft-chart/ft-chart.md",
"components/common/elements/charting/ft-column-chart/ft-column-chart.md",
"components/common/elements/charting/ft-multi-bar-chart/ft-multi-bar-chart.md",
"components/common/elements/charting/ft-performance-cumulative-chart/ft-performance-cumulative-chart.md",
"components/common/elements/charting/ft-pie-chart/ft-pie-chart.md"
]
},
{
"section": "Marketing",
"regex": "^components/marketing",
"pages": [
"components/marketing/common/value-converters/ft-format-grid-cell.md",
"components/marketing/common/value-converters/ft-format-subscription-input-names.md",
"components/marketing/grids/ft-grid-filter/ft-grid-filter.md",
"components/marketing/grids/ft-grid-filter-dropdown/ft-grid-filter-dropdown.md",
"components/marketing/grids/ft-grid-filter-form/ft-grid-filter-form.md",
"components/marketing/layouts/ft-choose-subscription/ft-choose-subscription.md",
"components/marketing/lists/ft-document-lister/ft-document-lister.md",
"components/marketing/lists/ft-report-archive-a/ft-report-archive-a.md",
"components/marketing/lists/ft-report-archive-b/ft-report-archive-b.md",
"components/marketing/lists/ft-report-archive-c/ft-report-archive-c.md",
"components/marketing/lists/ft-report-archive-d/ft-report-archive-d.md",
"components/marketing/video/ft-video-switch/ft-video-switch.md",
"components/marketing/common/elements/ft-multi-select-bar/ft-multi-select-bar.md",
"components/marketing/common/elements/ft-gateway/ft-gateway.md"
]
},
{
"section": "Products",
"subs": [
{
"section": "General",
"regex": "^developer-notes/products",
"pages": [
"developer-notes/products/fund-labels.md",
"developer-notes/products/product beans.md",
"developer-notes/products/product-components-overview.md",
"developer-notes/products/product-state.md",
"developer-notes/products/useful-links.md"
]
},
{
"section": "Common components",
"regex": "^components/products/common/elements",
"pages": [
"components/products/common/elements/ft-caveats/ft-caveats.md",
"components/products/common/elements/ft-dropdown/ft-dropdown.md",
"components/products/common/elements/ft-footnote/ft-footnote.md",
"components/products/common/elements/ft-fund-alert/ft-fund-alert.md",
"components/products/common/elements/ft-fund-alert-banner/ft-fund-alert-banner.md",
"components/products/common/elements/ft-labels/ft-labels.md",
"components/products/common/elements/ft-proximal/ft-proximal.md"
]
},
{
"section": "Value converters",
"regex": "^components/products/common/value-converters",
"pages": []
},
{
"section": "PPSS",
"regex": "^components/products/ppss",
"pages": [
"components/products/ppss/ft-ppss-table-base.md",
"components/products/ppss/ft-find-a-fund/ft-find-a-fund.md",
"components/products/ppss/ft-find-a-fund-btn/ft-find-a-fund-btn.md",
"components/products/ppss/ft-ppss-etf/ft-ppss-etf.md",
"components/products/ppss/ft-ppss-favorite/ft-ppss-favorite.md",
"components/products/ppss/ft-ppss-fund-filter/ft-ppss-fund-filter.md",
"components/products/ppss/ft-ppss-fund-identifiers/ft-ppss-fund-identifiers.md",
"components/products/ppss/ft-ppss-fund-name/ft-ppss-fund-name.md",
"components/products/ppss/ft-ppss-performance/ft-ppss-performance.md",
"components/products/ppss/ft-ppss/ft-ppss.md",
"components/products/ppss/ft-ppss-ratings/ft-ppss-ratings-row.md",
"components/products/ppss/ft-ppss-ratings/ft-ppss-ratings.md",
"components/products/ppss/ft-ppss-search-box/ft-ppss-search-box.md",
"components/products/ppss/ft-ppss-tab-header/ft-ppss-tab-header.md",
"components/products/ppss/ft-ppss-table-toolbar/ft-ppss-table-toolbar.md",
"components/products/ppss/ft-ppss-yield/ft-ppss-yield-row.md",
"components/products/ppss/ft-ppss-yield/ft-ppss-yield.md"
]
},
{
"section": "Overview",
"regex": "^components/products/overview",
"pages": [
"components/products/overview/ft-fund-ratings/ft-fund-ratings.md",
"components/products/overview/ft-fund-static-bar/ft-fund-static-bar.md",
"components/products/overview/ft-performance-snapshot/ft-performance-snapshot.md",
"components/products/overview/en-us-retails/ft-fund-mmfr-stable-nav-header/ft-fund-mmfr-stable-nav-header.md",
"components/products/overview/en-us-retails/ft-fund-nav-header/ft-fund-nav-header.md",
"components/products/overview/en-us-retails/ft-fund-price-header/ft-fund-price-header.md",
"components/products/overview/ft-fund-information/etf/ft-fund-information.md",
"components/products/overview/ft-fund-information/gw/ft-fund-information.md",
"components/products/overview/ft-fund-static-bar/en-us-retail/ft-fund-static-bar.md",
"components/products/overview/ft-trading-information/etf/ft-trading-information.md"
]
},
{
"section": "Portfolio",
"regex": "^components/products/portfolio",
"pages": [
"components/products/portfolio/ft-market-capitalisation/ft-market-capitalisation.md",
"components/products/portfolio/ft-portfolio-allocation/ft-portfolio-allocation.md",
"components/products/portfolio/ft-portfolio-no-data-message/ft-portfolio-no-data-message.md",
"components/products/portfolio/ft-top-exposures/ft-top-exposures.md",
"components/products/portfolio/util/util.md",
"components/products/portfolio/en-us-retail/ft-asset-class-exposure/ft-asset-class-exposure.md",
"components/products/portfolio/en-us-retail/ft-asset-mix/ft-asset-mix.md",
"components/products/portfolio/en-us-retail/ft-category-fund-list/ft-category-fund-list.md",
"components/products/portfolio/en-us-retail/ft-commodities-sector-breakdown/ft-commodities-sector-breakdown.md",
"components/products/portfolio/en-us-retail/ft-coupon-rate-breakdown/ft-coupon-rate-breakdown.md",
"components/products/portfolio/en-us-retail/ft-credit-quality-exposure/ft-credit-quality-exposure.md",
"components/products/portfolio/en-us-retail/ft-currency-distribution/ft-currency-distribution.md",
"components/products/portfolio/en-us-retail/ft-fixed-income-sector-breakdown/ft-fixed-income-sector-breakdown.md",
"components/products/portfolio/en-us-retail/ft-geographic-exposure/ft-geographic-exposure.md",
"components/products/portfolio/en-us-retail/ft-maturity-breakdown/ft-maturity-breakdown.md",
"components/products/portfolio/en-us-retail/ft-manager-roster/ft-manager-roster.md",
"components/products/portfolio/en-us-retail/ft-quality-breakdown/ft-quality-breakdown.md",
"components/products/portfolio/en-us-retail/ft-sector-breakdown/ft-sector-breakdown.md",
"components/products/portfolio/en-us-retail/ft-sector-exposure/ft-sector-exposure.md",
"components/products/portfolio/en-us-retail/ft-statistics-and-positions/ft-statistics-and-positions.md",
"components/products/portfolio/en-us-retail/ft-strategy-breakdown/ft-strategy-breakdown.md",
"components/products/portfolio/en-us-retail/ft-top-exposures/ft-top-exposures.md",
"components/products/portfolio/ft-asset-allocation/gw/ft-asset-allocation.md",
"components/products/portfolio/ft-asset-class-exposure/gw/ft-asset-class-exposure.md",
"components/products/portfolio/ft-average-portfolio-exposure/gw/ft-average-portfolio-exposure.md",
"components/products/portfolio/ft-currency-breakdown/gw/ft-currency-breakdown.md",
"components/products/portfolio/ft-fund-measures/gw/ft-fund-measures.md",
"components/products/portfolio/ft-geographic-allocation/etf/ft-geographic-allocation.md",
"components/products/portfolio/ft-geographic-breakdown/gw/ft-geographic-breakdown.md",
"components/products/portfolio/ft-geographic-breakdown/en-us-retail/ft-geographic-breakdown.md",
"components/products/portfolio/ft-geographic-exposure/gw/ft-geographic-exposure.md",
"components/products/portfolio/ft-manager-roster/gw/ft-manager-roster.md",
"components/products/portfolio/ft-holdings/etf/ft-holdings.md",
"components/products/portfolio/ft-portfolio-exposure/gw/ft-portfolio-exposure.md",
"components/products/portfolio/ft-portfolio-risk-and-return-analysis/gw/ft-portfolio-risk-and-return-analysis.md",
"components/products/portfolio/ft-portfolio-statistics-and-positions/en-us-retail/ft-portfolio-statistics-and-positions.md",
"components/products/portfolio/ft-portfolio-statistics-and-positions/etf/ft-portfolio-statistics-and-positions.md",
"components/products/portfolio/ft-portfolio-statistics-and-positions/gw/ft-portfolio-statistics-and-positions.md",
"components/products/portfolio/ft-risk-contribution/gw/ft-risk-contribution.md",
"components/products/portfolio/ft-sector-allocation/etf/ft-sector-allocation.md",
"components/products/portfolio/ft-sector-allocation/gw/ft-sector-allocation.md",
"components/products/portfolio/ft-sector-exposure/gw/ft-sector-exposure.md",
"components/products/portfolio/ft-security-type-exposure/gw/ft-security-type-exposure.md",
"components/products/portfolio/ft-strategy-breakdown/gw/ft-strategy-breakdown.md",
"components/products/portfolio/ft-top-risk-allocation-by-asset-class/gw/ft-top-risk-allocation-by-asset-class.md",
"components/products/portfolio/ft-top-ten-holdings/en-us-retail/ft-top-ten-holdings.md",
"components/products/portfolio/ft-top-ten-holdings/gw/ft-top-ten-holdings.md",
"components/products/portfolio/ft-value-at-risk/gw/ft-value-at-risk.md"
]
},
{
"section": "Performance",
"regex": "^components/products/performance|components/products/historical",
"pages": [
"components/products/performance/ft-calendar-year-returns/ft-calendar-year-returns.md",
"components/products/performance/ft-discrete-returns/ft-discrete-returns.md",
"components/products/performance/ft-performance-annualised/ft-performance-annualised.md",
"components/products/performance/ft-performance-cumulative/ft-performance-cumulative.md",
"components/products/performance/ft-performance-risk-statistics/ft-performance-risk-statistics.md",
"components/products/historical/en-us-retail/ft-historical-average-annual-total-returns/ft-historical-average-annual-total-returns.md",
"components/products/historical/en-us-retail/ft-historical-cumulative-total-returns/ft-historical-cumulative-total-returns.md",
"components/products/performance/en-us-retail/ft-average-annual-total-returns/ft-average-annual-total-returns.md",
"components/products/performance/en-us-retail/ft-after-tax-average-annual-returns/ft-after-tax-average-annual-returns.md",
"components/products/performance/en-us-retail/ft-expenses-volatility-benchmarks/ft-expenses-volatility-benchmarks.md",
"components/products/performance/ft-backtested-performance-annualised/etf/ft-backtested-performance-annualised.md",
"components/products/performance/ft-backtested-performance-calendar/etf/ft-backtested-performance-calendar.md",
"components/products/performance/ft-backtested-performance-cumulative/etf/ft-backtested-performance-cumulative.md",
"components/products/performance/ft-calendar-year-returns/en-us-retail/ft-calendar-year-returns.md",
"components/products/performance/ft-calendar-year-returns/etf/ft-calendar-year-returns.md",
"components/products/performance/ft-performance-annualised/etf/ft-performance-annualised.md",
"components/products/performance/ft-performance-cumulative/en-us-retail/ft-performance-cumulative.md"
]
},
{
"section": "Pricing & Distribution",
"regex": "^components/products/pricing-distribution",
"pages": [
"components/products/pricing-distribution/ft-dividends/ft-dividends.md",
"components/products/pricing-distribution/ft-dividends-historical/ft-dividends-historical.md",
"components/products/pricing-distribution/ft-nav-high-low/ft-nav-high-low.md",
"components/products/pricing-distribution/ft-price-chart/ft-price-chart.md",
"components/products/pricing-distribution/ft-price-historical/ft-price-historical.md",
"components/products/pricing-distribution/ft-pricing-distribution/ft-pricing-distribution.md",
"components/products/pricing-distribution/ft-share-prices/ft-share-prices.md"
]
},
{
"section": "Price",
"regex": "^components/products/pricing",
"pages": [
"components/products/pricing/en-us-retail/ft-daily-prices-and-breakpoints/ft-daily-prices-and-breakpoints.md",
"components/products/pricing/en-us-retail/ft-pricing-at-nav/ft-pricing-at-nav.md",
"components/products/pricing/en-us-retail/ft-pricing-at-nav/charting/ft-pricing-at-nav-chart.md"
]
},
{
"section": "Distributions",
"regex": "^components/products/distributions",
"pages": [
"components/products/distributions/en-us-retail/ft-distributions/ft-distributions.md",
"components/products/distributions/en-us-retail/ft-distributions-ytd/ft-distributions-ytd.md"
]
},
{
"section": "Documents",
"regex": "^components/products/documents",
"pages": []
}
]
},
{
"section": "Uncategorized",
"pages": [
"configuration/configuration.md",
"configuration/il8n/il8n.md",
"components/products/common/attributes/ft-share-class-refresh-listener.md",
"components/products/common/attributes/share-class-link-listener.md",
"components/products/tax/ft-german-tax/ft-german-tax.md",
"components/products/tax/en-us-retail/ft-additional-tax-information/ft-additional-tax-information.md",
"components/products/tax/en-us-retail/ft-tax-information/ft-tax-information.md"
]
}
],
"pages": {
"README.md": "<h1 id=\"installation-and-set-up\">Installation and set up</h1>\n<h2 id=\"prerequisites\">prerequisites</h2>\n<ol>\n<li>Nodejs &gt; 6.5</li>\n<li>Git</li>\n</ol>\n<h2 id=\"steps\">steps</h2>\n<ol>\n<li>npm install aurelia-cli -g</li>\n<li>npm install</li>\n<li>au run --watch</li>\n<li>au test</li>\n</ol>\n<h2 id=\"build-details\">build details</h2>\n<p>The build creates web-platform.js in the assets/js folder</p>\n<h2 id=\"commands\">commands</h2>\n<h3 id=\"-au-run-\"><code>au run</code></h3>\n<p>Runs the build process, then starts a local dev server on port 9000 i.e. <a href=\"http://localhost:9000/\">http://localhost:9000/</a></p>\n<ul>\n<li>Add flag <code>--js</code> to only rebuild javascript and markup when developing. This speeds up the rebuild.</li>\n<li>Add flag <code>--dev</code> to only transpile js and process markup without linting when developing. This speeds up the rebuild. Run a full build before committing.</li>\n<li>Add flag <code>--docs</code> to only build the markdown files. This speeds up the documentation. </li>\n</ul>\n<p>Run a full build before committing.</p>\n<h3 id=\"-au-run-watch-\"><code>au run --watch</code></h3>\n<p>Same as <code>au run</code>, but will rebuild when code changes\nSee <code>au run</code> task for <code>--js</code> and <code>--docs</code> and <code>--dev</code> flags</p>\n<h3 id=\"-au-run-watch-use-test-server-\"><code>au run --watch --use-test-server</code></h3>\n<p>Same as <code>au run --watch</code>, but will use test server data\nType <code>au help run</code> for more details</p>\n<h3 id=\"-au-build-\"><code>au build</code></h3>\n<p>Runs the build process. This includes linting, processing, transpiling and bundling, but not tests\nSee <code>au run</code> task for <code>--js</code> and <code>--docs</code> and <code>--dev</code> flags</p>\n<h3 id=\"-au-test-\"><code>au test</code></h3>\n<p>Runs ALL test suites (*.spec.js files).</p>\n<p>Append a spec filename to --focused-test to run that suite only</p>\n<p><code>au test --focused-test ft-footnote</code></p>\n<p>to run</p>\n<p><code>src\\components\\products\\common\\elements\\ft-footnote.spec.js</code></p>\n<h3 id=\"-au-test-ui-\"><code>au test --ui</code></h3>\n<p>Runs test suites for UI components using Jasmine and Karma. This will open and close a browser window while running tests.</p>\n<p>Append a spec filename to --focused-test to run that suite only</p>\n<p><code>au test --ui --focused-test ft-footnote</code></p>\n<p>to run</p>\n<p><code>src\\components\\products\\common\\elements\\ft-footnote.spec.js</code></p>\n<p>NB: Doesn&#39;t run the Business Logic (reducer) test suites.</p>\n<h3 id=\"-au-test-bl-\"><code>au test --bl</code></h3>\n<p>Runs test suites for Business Logic JS files (reducers, value-converters etc) using Jest.</p>\n<p>Append a spec filename to --focused-test to run that suite only</p>\n<p><code>au test --bl --focused-test distribution-rate</code></p>\n<p>to run</p>\n<p><code>src\\components\\products\\distributions\\ft-distributions\\lib\\en-us-retail\\distribution-rate.spec.js</code></p>\n<p>NB: These tests run very fast, as they only use NodeJS.</p>\n<h3 id=\"-au-lint-css-\"><code>au lint-css</code></h3>\n<p>Lints all <code>scss</code> files within <code>src</code> folder using <a href=\"http://stylelint.io/\">http://stylelint.io/</a>\nConfiguration is based on <a href=\"https://github.com/stylelint/stylelint-config-standard\">stylelint-config-standard</a> with custom configuration in <code>.stylelintrc</code> file</p>\n<h3 id=\"-au-lint-js-\"><code>au lint-js</code></h3>\n<p>Uses <a href=\"http://eslint.org/\">ESLint</a> to lint all <code>.js</code> files within <code>src</code> and <code>test</code> folders.\nConfiguration is on &#39;.eslintrc&#39; and based on the Aurelia eslint configuration.\n<a href=\"https://stackoverflow.blog/2017/06/15/developers-use-spaces-make-money-use-tabs/\">Why we indent with spaces</a></p>\n<h3 id=\"-au-lint-markup-\"><code>au lint-markup</code></h3>\n<p>Lints html files using <a href=\"https://www.npmjs.com/package/gulp-lintspaces\">gulp-lintspaces</a>\nAll this really lints is whitespace and indentation, but at the moment there aren&#39;t any suitable html snippet linters.</p>\n<h3 id=\"-au-process-assets-\"><code>au process-assets</code></h3>\n<p>At present, this just copies the bootstrap fonts from the <code>node_modules</code> folder to <code>assets</code>.\nIn future it will likely copy more font and image files as part of the build.</p>\n<h3 id=\"-au-process-css-\"><code>au process-css</code></h3>\n<p>This applies the following to the scss files in the <code>src</code> folder:</p>\n<ul>\n<li>runs the <code>lint-css</code> task</li>\n<li>compiles the sass into css</li>\n<li>applies <a href=\"https://github.com/postcss/autoprefixer\">autoprefixer</a> via <a href=\"https://github.com/postcss/postcss\">postcss</a></li>\n<li>minifies the css via <a href=\"http://cssnano.co/\">cssnano</a></li>\n<li>generates css sourcemaps</li>\n<li>saves the css files and sourcemaps to the <code>assets</code> folder</li>\n</ul>\n<h3 id=\"-au-process-markup-\"><code>au process-markup</code></h3>\n<p>This just applies the <code>lint-markup</code> task, before passing the markup off to the bundler</p>\n<h3 id=\"-au-generate-redux-component-\"><code>au generate redux-component</code></h3>\n<p>This is used to generate a redux component or sub-component. Tests, documentation, sass and (optionally) reducer files are also generated. See <code>lib/redux-component-base.md</code> for more details.</p>\n<h3 id=\"-au-proxy-server-\"><code>au proxy-server</code></h3>\n<p>This is used to test the dev assets against the live or dev site.</p>\n<p>Example proxying live site with dev css assets</p>\n<p>au proxy-server --proxy-target <a href=\"http://rcovlnx0188:8202\">http://rcovlnx0188:8202</a> --dev-css-assets-server <a href=\"http://pattern-library.corp.frk.com/\">http://pattern-library.corp.frk.com/</a></p>\n<p>Example proxying dev site with dev css assets</p>\n<p>au proxy-server --dev-css-assets-server <a href=\"http://pattern-library.corp.frk.com/\">http://pattern-library.corp.frk.com/</a></p>\n<p>Example proxying live site with dev js assets, and aurelia etf config</p>\n<p>au proxy-server --override-aurelia-config configuration/etf/main --dev-js-assets-server <a href=\"http://localhost:9000/\">http://localhost:9000/</a></p>\n",
"configuration/configuration.md": "<h1 id=\"site-and-page-configuration\">Site and Page Configuration</h1>\n<h2 id=\"toc\">TOC</h2>\n<ol>\n<li>Overview</li>\n<li>How the configuration for a page is set</li>\n<li>How to use configurations</li>\n<li>When to create a new configuration?</li>\n</ol>\n<h2 id=\"overview\">Overview</h2>\n<p>On the front-end there are multiple configurations, but <strong>only one</strong>\nconfiguration will apply for a particular page.</p>\n<p>The configuration controls:</p>\n<ol>\n<li>the beans that are called.</li>\n<li>the reducers that process the beans and set the state.</li>\n<li>the components that render the data in the state.</li>\n<li>any other specialisation required.</li>\n</ol>\n<p>Ideally, you would want one configuration for an entire site or group of\nsites, but with ETFs being added to the main sites and requiring their\nown configuration, that is not feasible. Fortunately, it is easy and\nefficient to set up multiple configurations, and because one\nconfiguration can import data from another, there should be no\nredundancy i.e. no duplication.</p>\n<h2 id=\"how-the-configuration-of-a-page-is-set\">How the configuration of a page is set</h2>\n<p>In TeamSite, each site has a site configuration DCR\n(under templatedata/gw-config/site/data/). In the DCR, the platform\nshould be set to &quot;COREWEB&quot; and the platform configuration set to the\nname of the front-end configuration you want to be the default for the\nsite e.g. &quot;gw&quot;. In fact, &quot;gw&quot; is the default configuration, so any page\nfor which it the configuration cannot be determined (e.g. if the field\nis blank or invalid) will default to &quot;gw&quot;.</p>\n<p>In the same DCR, you can also specify alternative configurations. These\nalternatives must each specify:</p>\n<ol>\n<li>the <em>name</em> of the configuration.</li>\n<li>the <em>country code</em> used to access the DSL.</li>\n<li>the <em>language code</em> used to access the DSL.</li>\n<li>the <em>coverage code</em> used to access the DSL.</li>\n<li>a set of pages for which this configuration should be used.</li>\n</ol>\n<p>On the server, the PlatformProvider creates a div element in the page\nhtml, which is used to specify the configuration for the page.</p>\n<p>e.g.</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"site-config\"</span>\n <span class=\"hljs-attr\">aurelia-app</span>=<span class=\"hljs-string\">\"configuration/etf/main\"</span>\n <span class=\"hljs-attr\">site</span>=<span class=\"hljs-string\">\"etf-gb\"</span>\n <span class=\"hljs-attr\">segment</span>=<span class=\"hljs-string\">\"investor\"</span>\n <span class=\"hljs-attr\">locale</span>=<span class=\"hljs-string\">\"en-gb\"</span>\n <span class=\"hljs-attr\">short-date</span>=<span class=\"hljs-string\">\"\"</span>\n <span class=\"hljs-attr\">long-date</span>=<span class=\"hljs-string\">\"\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n<p>The <em>aurelia-app</em> attribute is the one that sets the configuration. In the\nexample above the configuration in the site config DCR is set to &quot;etf&quot;.</p>\n<p>By this, you can see that all configurations must:</p>\n<ol>\n<li>exist under the configuration folder.</li>\n<li>be named such that they can specify a path (i.e. use kebab-case).</li>\n<li>must have a main.js which is the entry point for supplying the details.</li>\n</ol>\n<h2 id=\"how-to-use-configurations\">How to use configurations</h2>\n<p>Configurations are cheap and easy to set up.</p>\n<h3 id=\"creating-a-new-configuration\">Creating a new configuration</h3>\n<ol>\n<li>create a new subfolder under configurations with the name of the\nconfiguration (use kebab-case for the name).</li>\n<li>create a main.js file - this is the <strong>only</strong> required file. Don&#39;t\njust copy the whole of another similar configuration as this will lead\nto dual maintenance. Instead, just import what you want from the similar\nconfiguration and replace what you don&#39;t want. Only one configuration is\nloaded per page, so it is even safe to modify an imported configuration.</li>\n</ol>\n<h2 id=\"when-to-create-a-new-configuration-\">When to create a new configuration?</h2>\n<p>There is a balance between having too many configurations and having\nmore complex code. The ideal is to have simple maintainable code and few\nconfigurations, but you don&#39;t always get what you want.</p>\n<p>By &quot;simple maintainable code&quot;, we mean code without a lot of statements\nsuch as:</p>\n<pre><code class=\"hljs lang-js\"><span class=\"hljs-keyword\">if</span> (site === <span class=\"hljs-string\">'abc'</span>) {\n ...\n} <span class=\"hljs-keyword\">else</span> <span class=\"hljs-keyword\">if</span> (site === <span class=\"hljs-string\">'xyz'</span>) {\n ...\n}\n</code></pre>\n<p>Better to create a new configuration and specify a change in a reducer or\ncomponent.</p>\n<p>One key questions to ask is this: would it be easier in the future to\nmerge code from two configurations in order to remove a configuration, or\nto split code out into separate components and/or reducers and to create\na new configuration?</p>\n<p>Normally it is easier to split than to merge but it all depends on the\ncode and what you expect to happen in the future.</p>\n<p>Above all, don&#39;t be afraid to try it one way and change your mind and do\nit the other.</p>\n<p>Given this is all a bit wishy washy, the following guidelines should\nguide you the default way to go:</p>\n<p>1) If you have to write code specific to a site or a considerable set of\npages that have a coherent commonality e.g. a specific product type, then\ncreate a new configuration.</p>\n<p>2) If you can achieve the same</p>\n",
"lib/component-base.md": "<h1 id=\"component-base\">component-base</h1>\n<p>This class is used as a base class for components.</p>\n<p>It provides access to an instance of the Aurelia <code>LogManager</code>.</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">this</span>.logger.debug(<span class=\"hljs-string\">'my debug message'</span>);\n</code></pre>\n<h2 id=\"getlabel\">getLabel</h2>\n<p>This should be used to retrieve the labels from the redux object. It should replace the use of :</p>\n<pre><code class=\"hljs lang-javascript\">&lt;ft-label label.bind=<span class=\"hljs-string\">\"label['as-of']\"</span>&gt;<span class=\"xml\"><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-label</span>&gt;</span>\n\n${label['as-of']}</span>\n</code></pre>\n<p>with</p>\n<pre><code class=\"hljs lang-javascript\">&lt;ft-label label.bind=<span class=\"hljs-string\">\"getLabel('as-of')\"</span>&gt;<span class=\"xml\"><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-label</span>&gt;</span>\n\n$getLabel('as-of')}</span>\n</code></pre>\n<p>As long as this.label is populated with the labels and the key exists, it should return the label, otherwise it will return the key searched for in square brackets eg: [as-of]</p>\n<p>This can help to highlight missing labels on the page.</p>\n<p>To change a page from label[&#39;key&#39;] to getLabels(&#39;key&#39;), a regex can be performed:</p>\n<pre><code class=\"hljs lang-javascript\">search: (label\\[)(.+)(\\])\n\nreplace: getLabel($<span class=\"hljs-number\">2</span>)\n</code></pre>\n",
"lib/date-formatter.md": "<h1 id=\"date-formatter\">date-formatter</h1>\n<p>A formatting class that takes already rendered date strings, parses them and converts them to long and short date formats as specified by the site config below. It is also used as a singleton to store the date formats specified by the site config so that these can be used to change to the desired date formats anywhere on the front end. </p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"site-config\"</span> \n <span class=\"hljs-attr\">aurelia-app</span>=<span class=\"hljs-string\">\"configuration/gw/main\"</span> \n <span class=\"hljs-attr\">site</span>=<span class=\"hljs-string\">\"en-gb\"</span> <span class=\"hljs-attr\">locale</span>=<span class=\"hljs-string\">\"en-gb\"</span> \n <span class=\"hljs-attr\">long-date</span>=<span class=\"hljs-string\">\"dd MMMM yyyy\"</span> \n <span class=\"hljs-attr\">short-date</span>=<span class=\"hljs-string\">\"dd.MM.yyyy\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n<p>In future it could also handle timestamps and other methods that need configuraing based on the site config formats.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-comment\">//General usage</span>\n<span class=\"hljs-keyword\">let</span> dateFormatter = <span class=\"hljs-keyword\">new</span> DateFormatter();\nval = dateFormatter.convertDateFormat(<span class=\"hljs-string\">'23.03.2017'</span>, <span class=\"hljs-string\">'L'</span>);\n<span class=\"hljs-comment\">//site configs long format will return 23 March 2017</span>\n</code></pre>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-comment\">//As a valueConverter injected within ft-format-grid-cell.js</span>\nval = <span class=\"hljs-keyword\">this</span>.dateFormatter.convertDateFormat(val, dateformat);\n</code></pre>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-comment\">&lt;!-- Specifying 'S' within the gridcell valueConverter to convert \nshort date and 'L' for long date format, will convert the existing\ndate accordingly --&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td</span> <span class=\"hljs-attr\">repeat.for</span>=<span class=\"hljs-string\">\"col of columns\"</span>\n <span class=\"hljs-attr\">innerhtml.bind</span>=<span class=\"hljs-string\">\"card.data | ftFormatGridCell:col.dataKey:'S'\"</span>\n <span class=\"hljs-attr\">class.bind</span>=<span class=\"hljs-string\">\"col.class\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">td</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><code>convertDateFormat(originalDate, toFormat)</code></p>\n<ul>\n<li><strong>returns</strong> a date <code>string</code> based on the site configs long or short date format specification</li>\n<li><code>originalDate</code> is the original rendered date string to be converted</li>\n<li><code>toFormat</code> can be passed string letters either <code>L</code> or <code>S</code> to the sites specified long and short specification to set the value to the desired format</li>\n</ul>\n<p><code>getDateFormats()</code></p>\n<ul>\n<li><strong>returns</strong> an <code>object</code> containing the site configs long and short formats</li>\n</ul>\n<p><code>getDateFormatLong()</code></p>\n<ul>\n<li><strong>returns</strong> a <code>string</code> containing the site configs long date format</li>\n</ul>\n<p><code>getDateFormatShort()</code></p>\n<ul>\n<li><strong>returns</strong> a <code>string</code> containing the site configs short date format</li>\n</ul>\n<p>This library works using moment js and in built date parsing methods</p>\n",
"lib/paging-utils.md": "<h1 id=\"paging-utils\">paging-utils</h1>\n<h2 id=\"-getpaginginfo-totalrecords-pagesize-10-pagenumber-1-\"><code>getPagingInfo(totalRecords, pageSize = 10, pageNumber = 1)</code></h2>\n<p>Use this function returns an object with data that can be used for paging a recordset.</p>\n<p>Call it every time you go to a new page, to get info on the page and navigation options.</p>\n<h3 id=\"arguments-\">arguments:</h3>\n<ul>\n<li><code>totalRecords</code> - Integer. Required. The total number of records you want to page over.</li>\n<li><code>pageSize</code> - Integer. Optional, default 10. The number of records per page.</li>\n<li><code>pageNumber</code> - Integer. Optional, default 1. The current page you wish to display.</li>\n</ul>\n<h3 id=\"the-return-object-has-the-following-properties-\">The return object has the following properties:</h3>\n<ul>\n<li><code>firstPage</code> - Integer. The page number clicking a &#39;first&#39; button would take you to i.e. 1. Returns <code>null</code> if the first page isn&#39;t available e.g. you are already on the first page</li>\n<li><code>previousPage</code> - Integer. The page number clicking a &#39;previous&#39; button would take you to. Returns <code>null</code> if the previous page isn&#39;t available.</li>\n<li><code>nextPage</code> - Integer. The page number clicking a &#39;next&#39; button would take you to. Returns <code>null</code> if the next page isn&#39;t available.</li>\n<li><code>lastPage</code> - Integer. The page number clicking a &#39;last&#39; button would take you to. Returns <code>null</code> if the last page isn&#39;t available e.g. you are already on the last page</li>\n<li><code>currentPage</code>- Page Object (see below). Returns a page object with details for the current page. returns null if no current page e.g. <code>totalrecord</code> equals 0.</li>\n<li><code>totalPages</code> - Integer. Total number of pages available.</li>\n<li><code>pages</code> - Array of Page objects (see below). Array with information about every possible page.</li>\n<li><code>firstRecord</code> - 1 (or 0 if <code>totalRecords</code> equals 0)</li>\n<li><code>lastRecord</code> - Integer. Same value as <code>totalRecords</code></li>\n<li><code>totalRecords</code> - Integer. Total number of records available i.e. what was passed in as an argument.</li>\n</ul>\n<p>Page Object:</p>\n<ul>\n<li><code>page</code> - Integer. Page number</li>\n<li><code>startRecord</code> - Integer. Number of first record on page.</li>\n<li><code>endRecord</code> - Integer. Number of last record on page.</li>\n</ul>\n<h3 id=\"example-\">Example:</h3>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> records = [{}, {}, ... {}]; <span class=\"hljs-comment\">// 23 records</span>\n<span class=\"hljs-keyword\">let</span> pageSize = <span class=\"hljs-number\">10</span>;\n<span class=\"hljs-keyword\">let</span> info = getPagingInfo(records.length, pageSize, <span class=\"hljs-number\">1</span>);\n\n<span class=\"hljs-comment\">/*\ninfo = {\n firstPage: null,\n previousPage: null,\n currentPage: {\n page: 1,\n startRecord: 1,\n endRecord: 10\n },\n nextPage: 2,\n lastPage: 3,\n totalPages: 3,\n pages: [\n {\n page: 1,\n startRecord: 1,\n endRecord: 10\n }, {\n page: 2,\n startRecord: 11,\n endRecord: 20\n }, {\n page: 3,\n startRecord: 21,\n endRecord: 23\n }\n ],\n firstRecord: 1,\n lastRecord: 23,\n totalRecords: 23\n}\n*/</span>\n\n<span class=\"hljs-comment\">// filter records to current page</span>\n<span class=\"hljs-keyword\">let</span> recordsToShow = records.filter(<span class=\"hljs-function\">(<span class=\"hljs-params\">record, index</span>) =&gt;</span> {\n <span class=\"hljs-keyword\">let</span> recordNumber = index + <span class=\"hljs-number\">1</span>;\n <span class=\"hljs-keyword\">return</span> info.currentPage.startRecord &lt;= recordNumber\n &amp;&amp; recordNumber &lt;= info.currentPage.endRecord;\n});\n\n<span class=\"hljs-comment\">// message to display</span>\n<span class=\"hljs-keyword\">let</span> message = <span class=\"hljs-string\">`Showing <span class=\"hljs-subst\">${info.currentPage.startRecord}</span> to <span class=\"hljs-subst\">${info.currentPage.endRecord}</span> of <span class=\"hljs-subst\">${info.totalRecords}</span> records.`</span>;\n<span class=\"hljs-comment\">// message = 'Showing 1 to 10 of 23 records.'</span>\n\n<span class=\"hljs-comment\">// to go to next page</span>\n<span class=\"hljs-keyword\">if</span> (info.nextPage !== <span class=\"hljs-literal\">null</span>) {\n info = getPagingInfo(records.length, pageSize, info.nextPage);\n}\n\n<span class=\"hljs-comment\">// to go to last page</span>\n<span class=\"hljs-keyword\">if</span> (info.lastPage !== <span class=\"hljs-literal\">null</span>) {\n info = getPagingInfo(records.length, pageSize, info.lastPage);\n}\n\n<span class=\"hljs-comment\">// etc...</span>\n</code></pre>\n",
"lib/redux-component-base.md": "<h1 id=\"redux-component-base\">redux-component-base</h1>\n<p>This class is used as a base class for components, to provide common methods for interacting with the redux store\nNew components can be generated via the command <code>au generate redux-component</code>.</p>\n<p>This will create component js, html and test files. It will also create a markdown file for documentation, and a sass file for styling. Optionally, reducers for json data and app state (plus associated tests) can also be created.</p>\n<h2 id=\"-mapstate-newstate-\"><code>mapState(newState)</code></h2>\n<p>If you define a function called <code>mapState</code>, your component will subscribe to the redux store, and <code>mapState</code> will get called every time the store changes with the <strong>whole</strong> of the new state.</p>\n<p>The <code>mapState</code> function should set the components&#39; properties with the data they need from the state. <strong>This should be the only place your component deals directly with the redux store</strong></p>\n<p><code>mapState</code> is optional. If your component gets all it&#39;s data passed via <code>@bindable</code> properties (e.g. a <em>dumb</em> sub-component), then you can remove the <code>mapState</code> function.</p>\n<p><code>mapState</code> is based on the <code>mapStateToProperties</code> function used for connecting React components to redux: <a href=\"http://redux.js.org/docs/basics/UsageWithReact.html\">http://redux.js.org/docs/basics/UsageWithReact.html</a></p>\n<h2 id=\"dispatching-actions\">dispatching actions</h2>\n<p>The components will also have access to the redux <code>dispatch</code> function.\nThe two most likely uses of this will be:</p>\n<ul>\n<li>dispatching a POPULATE action in the constructor to request initial data</li>\n<li>dispatching actions to change state when the user interacts with the UI e.g. clicks a button</li>\n</ul>\n<h2 id=\"fund-specific\">fund specific</h2>\n<p>If the component displays information for a specific fund at a time, then it should either have a <code>@bindable fundId</code> property, or set it&#39;s <code>fundId</code> from an element attribute set by the JSP page.</p>\n<p>In your <code>mapState</code> function, you can use the helper function <code>getFundState</code> to get the fund spefici slice of state e.g.</p>\n<pre><code class=\"hljs\">let fundState = getFundState(newState, this.fundId);\n</code></pre>\n<h2 id=\"non-fund-specific\">non fund specific</h2>\n<p>If your component is not fund specific i.e. displays data for several funds at once, then you can delete references to <code>fundId</code> and <code>getFundState</code>.</p>\n<h2 id=\"-logger-\"><code>logger</code></h2>\n<p>As the <code>ReduxComponentBase</code> class inherits from the <code>ComponentBase</code> class, it already has the <code>LogManager</code> injected into it.\nThis enables you to debug to the console via:\n<code>this.logger.debug(&#39;My message&#39;)</code></p>\n",
"lib/sort-utils.md": "<h1 id=\"sort-utils\">sort-utils</h1>\n<p>function library to help sorting an array of objects</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-javascript\">[{<span class=\"hljs-attr\">foo</span>: <span class=\"hljs-string\">'bar'</span>}, ...].sort(createCompare(<span class=\"hljs-string\">'foo'</span>, <span class=\"hljs-string\">'ASC'</span>, {}))\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><code>createCompare(dataKey, direction, options)</code></p>\n<ul>\n<li><strong>returns</strong> a <code>function</code> suitable for use in an array&#39;s <code>sort()</code> method</li>\n<li><code>dataKey</code> is the name of the property object property on which to sort</li>\n<li><code>direction</code> can be <code>ASC</code> or <code>DESC</code></li>\n<li><code>options</code> an object with the following properties:<ul>\n<li><code>isNumeric</code> - Optional. if true, treats the values as numeric data and tries to parse them</li>\n<li><code>isDate</code> - Optional. if true, treats the values as date data and tries to parse them</li>\n<li><code>dateFormat</code> - String. Required if <code>&quot;isDate&quot;: true</code>. The date format used to parse the card values e.g. <code>&quot;dateFormat&quot;: &quot;MMM DD, YYYY&quot;</code>. See <a href=\"https://momentjs.com/docs/#/parsing/string-format/\">Moment docs</a> for possible values</li>\n<li><code>secondaryCompare</code> - Optional. Function used to sort values when initial sort renders them equal. This function is likely to have been created by a previous call to <code>createcompare()</code></li>\n</ul>\n</li>\n</ul>\n<p>This library also contains private functions that are used internally for sorting strings, dates and numbers</p>\n",
"lib/test-utils.md": "<h1 id=\"test-utils\">test-utils</h1>\n<p>Function to help with UI unit testing</p>\n<h2 id=\"-simulateinputchange-element-value-\"><code>simulateInputChange(element, value)</code></h2>\n<p>Use this function to simulate changing the value of a <code>&lt;select&gt;</code> or other <code>&lt;input&gt;</code> element</p>\n<pre><code class=\"hljs lang-javascript\"> <span class=\"hljs-keyword\">let</span> input;\n component.boundTo(mock);\n component.create(bootstrap)\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> {\n input = <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'test1'</span>).getElementsByTagName(<span class=\"hljs-string\">'input'</span>)[<span class=\"hljs-number\">0</span>];\n })\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> simulateInputChange(input, <span class=\"hljs-string\">'FREEX'</span>))\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> {\n expect(....).toBe(...);\n })\n .then(done);\n</code></pre>\n<h2 id=\"-wait-delay-0-\"><code>wait(delay = 0)</code></h2>\n<p>Use this function to pause execution for a number of milliseconds. This is often used to allow Aurelia to redraw before testing the component</p>\n<pre><code class=\"hljs lang-javascript\"> component.create(bootstrap)\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> {\n component.viewModel.mapState(mockState);\n })\n .then(wait())\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> {\n expect(...).toBe(...);\n })\n .then(done);\n</code></pre>\n<h2 id=\"-getendlessobject-\"><code>getEndlessObject()</code></h2>\n<p>Use this function to give a object that can mimic any shape, with any evaluation always returning a object that be evaluated via any variable name.\nThis is often used to mimic a generic bean config for testing the component</p>\n<pre><code class=\"hljs lang-javascript\"> <span class=\"hljs-keyword\">let</span> minic = getEndlessObject();\n <span class=\"hljs-built_in\">console</span>.log(minic.doesnt.mind.what.variable.is.called);\n</code></pre>\n<pre><code class=\"hljs lang-javascript\"> component.configure = <span class=\"hljs-function\">(<span class=\"hljs-params\">aurelia</span>) =&gt;</span> {\n ...\n aurelia.container.registerInstance(<span class=\"hljs-string\">'Beans'</span>, getEndlessObject());\n ...\n };\n</code></pre>\n<h2 id=\"-getmockstore-mockstate-\"><code>getMockStore(mockState = {})</code></h2>\n<p>Use this function to give a generic store mock for testing the component</p>\n<p>A default initial state can be easily given, and dispatch spyed on</p>\n<pre><code class=\"hljs lang-javascript\"> <span class=\"hljs-keyword\">let</span> mockStore = getMockStore({<span class=\"hljs-attr\">foo</span>: <span class=\"hljs-string\">'bar'</span>});\n ...\n component.configure = <span class=\"hljs-function\">(<span class=\"hljs-params\">aurelia</span>) =&gt;</span> {\n ...\n aurelia.container.registerInstance(<span class=\"hljs-string\">'Store'</span>, mockStore);\n ...\n };\n ...\n console.log(mockStore.getState().foo); <span class=\"hljs-comment\">// output bar</span>\n ...\n mockStore.dispatch({<span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'hello'</span>, <span class=\"hljs-attr\">cid</span>: <span class=\"hljs-string\">'world'</span>});\n expect(mockStore.dispatch).toHaveBeenCalledWith({<span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'hello'</span>, <span class=\"hljs-attr\">cid</span>: <span class=\"hljs-string\">'world'</span>});\n</code></pre>\n",
"configuration/il8n/il8n.md": "<h1 id=\"internationalisation\">Internationalisation</h1>\n<p>Apon adding new languages ensure that the appropriate highcharts and moment\nconfiguration is in place.</p>\n<p>Currency symbols table for international has been moved to \nthis configuration folder.</p>\n<h2 id=\"how-to-add-a-new-locale\">How to add a new locale</h2>\n<ul>\n<li><p>get the language locale code </p>\n<p>Format : [2 digit ISO-639 language][dash + optional ISO 3166 country code]</p>\n<p>Example : en-gb ([ENGLISH]-[GREAT BRITAIN])</p>\n</li>\n<li><p>ensure moment-il8n has a entry</p>\n<p>there should be majority of language available as importable presets &#39;moment/locale/it&#39;;</p>\n<p>warning: only import what you need, each import costs 4-6k to bundle size</p>\n<p>if customisations are require these moment locales can be manually created (see moment documentation for details)</p>\n</li>\n<li><p>ensure highcharts-il8n has a entry</p>\n<p>you need to know the decimal and number delimiter values for that locale</p>\n</li>\n<li><p>ensure all fund currencies are available in currency.js</p>\n<p>warning: the mapping is off what PDS gives us not actually what the typical use case is</p>\n<p>if you get this wrong you&#39;ll see double currency encode </p>\n<p>e.g ¥CNH44.44 instead of CNH44.44 or ¥44.44</p>\n</li>\n<li><p>apon finding a new number style or date format of course code changes might be required</p>\n<p>HC SVNT DRACONES</p>\n</li>\n</ul>\n<h2 id=\"improvements-wishlist\">Improvements Wishlist</h2>\n<ul>\n<li><p>plumb PDS data directly into high charts</p>\n<p>This could be done by passing a 2nd parameters on formatted locale \nstrings for tooltip display</p>\n<p>This work was preferred over current solution but unfortunately since \naxises needed to be in locale, anyway, locale formatting is done by highcharts.</p>\n</li>\n</ul>\n",
"developer-notes/general/browser-compatibilty.md": "<h1 id=\"browser-compatibility\">Browser compatibility</h1>\n<p>see sharepoint site:\n<a href=\"http://sp.frk.com/teams/GAS_Technology_Web_Services/GWSUS%20Knowledge%20Repository/Forms/AllItems.aspx?RootFolder=%2Fteams%2FGAS%5FTechnology%5FWeb%5FServices%2FGWSUS%20Knowledge%20Repository%2FBrowser%20Compatibility&amp;FolderCTID=0x0120005840D7E4862CB14E8927200BF38C9F79&amp;View=%7B69756C31%2D87C8%2D446F%2D9032%2D949310E25629%7D\">Sharepoint</a></p>\n<p>This has metrics on current usage which define the standard -\nbut to summarise, we only fully support browsers that 5% of our current\nusers use.</p>\n<p>It begs the question of how a new browser could ever be\nsupported because it is highly unlikely that people will come back to\nthe site if it is broken in their browser so how could that browser ever\nbreak the 5% threshold? But anyway...</p>\n<p>as of beginning 2017 it could be defined as follows:</p>\n<ul>\n<li>IE11</li>\n<li>Edge</li>\n<li>Firefox 48+</li>\n<li>Chrome 53+</li>\n<li>Safari 9+</li>\n<li>Mobile Safari</li>\n</ul>\n<p>And it seems that only Chrome and Mobile Safari are supported on mobile devices.</p>\n",
"developer-notes/general/build-and-deployment.md": "<h1 id=\"build-and-deployment\">Build and Deployment</h1>\n<h2 id=\"introduction\">Introduction</h2>\n<p>There are a number of potential pitfalls in building javascript that\nneed to be taken into account, including the time to load and parse the\njavascript, old javascript getting cached in browser or CDN or weblogic,\nand how much logging and debugging we want for each environment.</p>\n<p>These constraints can be cast into the following set of aims:</p>\n<p>1) To minimize size of the bundles.</p>\n<p>2) To minimize the time before aurelia bootstrapping is complete.</p>\n<p>3) To build web-platform once and then deploy and\nconfigure for specific runtimes and environments.</p>\n<p>4) To provide debugging, logging, source-maps in all environments except\nProduction for external users i.e. Apache.</p>\n<p>5) To allow aggressive caching of javascript in every layer.</p>\n<p>6) To allow new releases of web-platform without users having to empty\ntheir browser caches.</p>\n<h2 id=\"tools\">Tools</h2>\n<p>Currently we are using aurelia-cli to build the javascript and require-js\nto implement the bundling. This could change in the future e.g. move to\nweb-pack, but major changes are unlikely to happen for some time.</p>\n<p>Bamboo runs the same build using aurelia-cli as the local build.</p>\n<h2 id=\"to-do\">To Do</h2>\n<p>1) Create optimised bundles for different web-sites. This needs a\ncorresponding to the server side PlatformProvider which adds the\njavascript to the page.</p>\n<p>2) Create versioned build so users do not have to refresh their caches.\nThis also need PlatformProvider changes, plus deployment changes to\nmake available the latest build version to the PlatformProvider.</p>\n<p>3) Allow deployments to all runtimes with full debugging and logging and\nonly turn off for apache builds to Prod and Performance environments.</p>\n",
"developer-notes/general/chrome-plugins.md": "<h1 id=\"chrome-plugins\">Chrome Plugins</h1>\n<h2 id=\"aurelia-inspector\">Aurelia Inspector</h2>\n<p><a href=\"https://chrome.google.com/webstore/detail/aurelia-inspector/ofemgdknaajmpeoblfdjkenbpcfbdefg?hl=en\">https://chrome.google.com/webstore/detail/aurelia-inspector/ofemgdknaajmpeoblfdjkenbpcfbdefg?hl=en</a></p>\n<h2 id=\"cross-origin-resource-sharing\">Cross Origin Resource Sharing</h2>\n<p>Allows fonts to work when developing locally. Sometimes this stops, but turning off and on again seems to fix it</p>\n<p><a href=\"https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-GB\">https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-GB</a></p>\n<p>Add &quot;<a href=\"http://pattern-library.corp.frk.com/\">http://pattern-library.corp.frk.com/</a>&quot; to the Intercepted URLS or URL patterns to solve any font cors issues.</p>\n",
"developer-notes/general/environments.md": "<h1 id=\"environments\">Environments</h1>\n<h2 id=\"us-dev\">US Dev</h2>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>These docs</td>\n<td><a href=\"http://pattern-library.corp.frk.com/docs.html\">http://pattern-library.corp.frk.com/docs.html</a></td>\n</tr>\n<tr>\n<td>livesite instance</td>\n<td>us-dev-5</td>\n</tr>\n<tr>\n<td>New web-platform site</td>\n<td><a href=\"http://rcovlnx0191:6205/en-us-gw/investor/\">http://rcovlnx0191:6205/en-us-gw/investor/</a></td>\n</tr>\n<tr>\n<td>Old US site</td>\n<td><a href=\"http://rcovlnx0191:6205/en-us-retail/investor/\">http://rcovlnx0191:6205/en-us-retail/investor/</a></td>\n</tr>\n<tr>\n<td>Livesite cache</td>\n<td><a href=\"http://rcovlnx0191:6205/iw/admin/JCS.jsp\">http://rcovlnx0191:6205/iw/admin/JCS.jsp</a></td>\n</tr>\n<tr>\n<td>Coverage report</td>\n<td><a href=\"http://pattern-library.corp.frk.com/coverage/\">http://pattern-library.corp.frk.com/coverage/</a></td>\n</tr>\n</tbody>\n</table>\n<p>The old US site can be used to regression test components.</p>\n<h2 id=\"international-dev\">International Dev</h2>\n<p>This gets updated automatically after every Bamboo build (eventually)</p>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>livesite instance</td>\n<td>international-dev-2</td>\n</tr>\n<tr>\n<td>franklintempletonglobal site</td>\n<td><a href=\"http://rcovlnx0191:8222/en-gb/investor/\">http://rcovlnx0191:8222/en-gb/investor/</a></td>\n</tr>\n</tbody>\n</table>\n<p>New sites not created yet.</p>\n<h2 id=\"sites\">Sites</h2>\n<h3 id=\"en-gb\">EN-GB</h3>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>EN-GB Dev</td>\n<td><a href=\"http://rcovlnx0191:8222/en-gb/\">http://rcovlnx0191:8222/en-gb/</a></td>\n</tr>\n<tr>\n<td>EN-GB QA</td>\n<td><a href=\"http://rcovlnx0192:8322/en-gb/\">http://rcovlnx0192:8322/en-gb/</a></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"de-de\">DE-DE</h3>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>DE-DE Dev</td>\n<td><a href=\"http://rcovlnx0191:8222/de-de/\">http://rcovlnx0191:8222/de-de/</a></td>\n</tr>\n<tr>\n<td>DE-DE QA</td>\n<td><a href=\"http://rcovlnx0192:8322/de-de/\">http://rcovlnx0192:8322/de-de/</a></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"etf-gb\">ETF-GB</h3>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>ETF-GB Dev</td>\n<td><a href=\"http://rcovlnx0191:8222/etf-gb/\">http://rcovlnx0191:8222/etf-gb/</a></td>\n</tr>\n<tr>\n<td>ETF-GB QA</td>\n<td><a href=\"http://rcovlnx0192:8322/etf-gb/\">http://rcovlnx0192:8322/etf-gb/</a></td>\n</tr>\n<tr>\n<td>ETF-GB Preview</td>\n<td><a href=\"http://rcovlnx0188:8202/etf-gb/\">http://rcovlnx0188:8202/etf-gb/</a></td>\n</tr>\n<tr>\n<td>ETF-GB Prod</td>\n<td><a href=\"http://www.libertyshares.co.uk\">http://www.libertyshares.co.uk</a></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"etf-de\">ETF-DE</h3>\n<table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>ETF-DE Dev</td>\n<td><a href=\"http://rcovlnx0191:8222/etf-de/\">http://rcovlnx0191:8222/etf-de/</a></td>\n</tr>\n<tr>\n<td>ETF-DE QA</td>\n<td><a href=\"http://rcovlnx0192:8322/etf-de/\">http://rcovlnx0192:8322/etf-de/</a></td>\n</tr>\n<tr>\n<td>ETF-DE Preview</td>\n<td><a href=\"http://rcovlnx0188:8202/etf-de/\">http://rcovlnx0188:8202/etf-de/</a></td>\n</tr>\n<tr>\n<td>ETF-DE Prod</td>\n<td><a href=\"http://www.libertyshares.de\">http://www.libertyshares.de</a></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"bamboo-continuous-integration-ci-\">Bamboo - Continuous Integration (CI)</h2>\n<p><a href=\"http://rcovlnx0157.noam.corp.frk.com:8085/browse/USPI-FR35\">http://rcovlnx0157.noam.corp.frk.com:8085/browse/USPI-FR35</a></p>\n<h2 id=\"svn-repository\">SVN Repository</h2>\n<p>This link can also be used in browser if no svn client\n<a href=\"https://sourcemgmtsvn.noam.corp.frk.com:18080/svn/globalweb/branches/GW-Maintenance/frontend-projects/web-platform\">https://sourcemgmtsvn.noam.corp.frk.com:18080/svn/globalweb/branches/GW-Maintenance/frontend-projects/web-platform</a></p>\n<h2 id=\"intl-responsive-wireframes\">Intl Responsive Wireframes</h2>\n<p><a href=\"https://cx2rjv.axshare.com/#g=1&amp;p=mutual_funds_page_performance_v4\">https://cx2rjv.axshare.com/#g=1&amp;p=mutual_funds_page_performance_v4</a>\npassword: responsive</p>\n<h2 id=\"etf-wireframes\">ETF Wireframes</h2>\n<p><a href=\"https://x4kl1b.axshare.com/#p=our_etfs_-_fund_explorer&amp;g=1&amp;view=c\">https://x4kl1b.axshare.com/#p=our_etfs_-_fund_explorer&amp;g=1&amp;view=c</a>\npassword: etfs</p>\n",
"developer-notes/general/generators.md": "<h1 id=\"code-generators\">Code generators</h1>\n<p>Code generators allow you to quick create stubs for multiple files.</p>\n<p>To see available generators run: <code>au generate</code></p>\n<p>To run a generator, run e.g.: <code>au generate redux-component</code></p>\n<p>The generator code can be found in <code>aurelia_project/generators</code>.</p>\n<p>The basic pattern is to set up the directory structure you will need\nand then, for each directory, for each file, create a function that\nreturns the stub text for that file.</p>\n<p>See the redux-component for an example.</p>\n",
"developer-notes/general/page-lifecyle.md": "<h1 id=\"page-life-cycle\">Page life cycle</h1>\n<p>A page request goes off to livesite and the html is returned.</p>\n<p>At the top of the body you will see something like:</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">'site-config'</span> <span class=\"hljs-attr\">aurelia-app</span>=<span class=\"hljs-string\">'configuration/gw/main'</span> <span class=\"hljs-attr\">site</span>=<span class=\"hljs-string\">'de-de'</span> <span class=\"hljs-attr\">segment</span>=<span class=\"hljs-string\">'privatanleger'</span> <span class=\"hljs-attr\">hide-site</span>=<span class=\"hljs-string\">'www.franklintempleton.de'</span> <span class=\"hljs-attr\">locale</span>=<span class=\"hljs-string\">'de-de'</span> <span class=\"hljs-attr\">short-date</span>=<span class=\"hljs-string\">'dd/mm/yyyy'</span> <span class=\"hljs-attr\">long-date</span>=<span class=\"hljs-string\">'dd MMMM yyyy'</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n<p>The aurelia-app attribute is the entry point to our javascript code.\nIn this case it is configuration/gw/main.js</p>\n<p>main.js typically configures the following:</p>\n<ul>\n<li>the beans needed (i.e ajax requests for json data)</li>\n<li>the reducers that redux should call when actions are dispatched</li>\n<li>the set of custom elements to register with aurelia</li>\n<li>the initial default state of the redux store</li>\n</ul>\n<p>and it passes all these to commonConfigure in\nconfiguration/common/configure.js</p>\n<p>commonConfigure creates the redux store and adds it to\nthe dependency injection container so it is available to all\nthe components. It then bootstraps aurelia.</p>\n<p>aurelia then searches the page for all the custom elements and attributes\nthat have been registered. For each one it finds, it instantiates it\nand calls the constructor.</p>\n<p>For our redux components, the constructor first gets the store\nand the bean configuration passed in through dependency injection.\nThe store is passed to the parent class which subscribes this\ncomponent to changes in the redux state.</p>\n<p>Then the constructor usually dispatches an action with beans associated.\nRedux middleware sends off ajax requests to get the beans if\nnecessary and then dispatches new actions with the returned json.</p>\n<p>The new actions pass through all the reducers which update the state.\nAs the custom element is subscribed to redux state changes, its&#39;\nmapState(newState) method is called. Note this will be called\nwhenever the state is updated - not just when its own particular\naction is reduced. The mapState function then updates the local component\nstate (by updating <code>this</code>).</p>\n<p>When aurelia instantiated the custom element it started watching any fields\nreferenced from the custom element&#39;s template (e.g. through <code>bind</code> statements).\nIf mapState updates the values of any of these then aurelia\nwill then update the DOM to render those changes.</p>\n<p>And that is how a component is initially rendered on the page.</p>\n",
"developer-notes/general/setup.md": "<h1 id=\"local-setup\">Local Setup</h1>\n<p>The web-platform builds the js and teh pattern-library builds the css and other assets.\nSo to run locally, you either need to run 2 web projects or run one and link to the\nbuilt resources of the other project.</p>\n<p>Add a chrome extension so you can load the fonts (otherwise you get cross origin access errors):\n<a href=\"https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US\">https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US</a></p>\n<h2 id=\"running-web-platform-locally-against-built-pattern-library\">Running web-platform locally against <em>built</em> pattern-library</h2>\n<ol>\n<li>Edit <code>aurelia_project/environments/dev.js</code> and set <code>cssRoot: &#39;http://pattern-library.corp.frk.com&#39;</code></li>\n<li>Edit your test page to load css with following:\n<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;http://pattern-library.corp.frk.com/assets/css/core.css&quot; type=&quot;text/css&quot;/&gt;</code></li>\n</ol>\n<h2 id=\"running-web-platform-locally-against-local-pattern-library\">Running web-platform locally against <em>local</em> pattern-library</h2>\n<ol>\n<li>Edit <code>aurelia_project/environments/dev.js</code> and set <code>cssRoot: &#39;http://localhost:3000&#39;</code></li>\n<li>Edit your test page to load css with following:\n<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;http://localhost:3000/assets/css/core.css&quot; type=&quot;text/css&quot;/&gt;</code></li>\n</ol>\n<p>You may need to stop and start your server to pick up the environment.js change.</p>\n",
"developer-notes/general/stub-data.md": "<h1 id=\"stub-data\">Stub data</h1>\n<p>You can download stub json data by appending the spring bean name to the end of the following request:</p>\n<p><a href=\"http://rcovlnx0191:6205/en-us-gw/investor/?bid=\">http://rcovlnx0191:6205/en-us-gw/investor/?bid=</a></p>\n<p>e.g. <a href=\"http://rcovlnx0191:6205/en-us-retail/investor/?bid=us.closed-end-funds-labels\">http://rcovlnx0191:6205/en-us-retail/investor/?bid=us.closed-end-funds-labels</a></p>\n<p>Note that for production data you will want to go to\n<a href=\"https://www.franklintempleton.com/investor/?bid=bean.id\">https://www.franklintempleton.com/investor/?bid=bean.id</a></p>\n<p>But the code to convert xml files (e.g. labels) is not in prod yet, so\nyou will need to use the server above for now.</p>\n<h2 id=\"service-data\">Service data</h2>\n<h3 id=\"international\">International</h3>\n<p>193 <a href=\"http://rcovlnx0193:5111/gw-data-admin/serviceTestIntl\">http://rcovlnx0193:5111/gw-data-admin/serviceTestIntl</a></p>\n<p>194 (more stable) <a href=\"http://rcovlnx0194:5111/gw-data-admin/serviceTestIntl\">http://rcovlnx0194:5111/gw-data-admin/serviceTestIntl</a></p>\n<h3 id=\"etf\">ETF</h3>\n<p>193 <a href=\"http://rcovlnx0193:5111/gw-data-admin/serviceTestEtf\">http://rcovlnx0193:5111/gw-data-admin/serviceTestEtf</a></p>\n<p>194 (more stable) <a href=\"http://rcovlnx0194:5111/gw-data-admin/serviceTestEtf.do\">http://rcovlnx0194:5111/gw-data-admin/serviceTestEtf.do</a></p>\n",
"developer-notes/general/vs-code.md": "<h1 id=\"visual-studio-code\">Visual Studio Code</h1>\n<p><a href=\"https://code.visualstudio.com/\">VS Code</a> is the recommended (free) editor for Aurelia development.</p>\n<h2 id=\"installation\">Installation</h2>\n<h3 id=\"if-you-have-admin-rights\">If you have admin rights</h3>\n<p>Just download the .exe file from <a href=\"https://code.visualstudio.com/Download\">https://code.visualstudio.com/Download</a></p>\n<h3 id=\"if-you-don-t-have-admin-rights\">If you don&#39;t have admin rights</h3>\n<ol>\n<li>Download the zip file available from <a href=\"https://code.visualstudio.com/Download\">https://code.visualstudio.com/Download</a></li>\n<li>Extract the zip contents, and copy the folder somewhere. <em>It dosen&#39;t have to be copied to <code>program files</code> like it says in the documentation</em></li>\n<li>Double-click <code>Code.exe</code> in the folder to start</li>\n<li>(Optionally) set your <code>%PATH%</code> variable as described in <a href=\"https://code.visualstudio.com/docs/setup/windows\">https://code.visualstudio.com/docs/setup/windows</a>, although that may need admin rights</li>\n</ol>\n<h2 id=\"extensions\">Extensions</h2>\n<h3 id=\"recomended-extensions-for-frontend-projects\">Recomended extensions for frontend projects</h3>\n<ul>\n<li>Aurelia - Aurelia support</li>\n<li>Aurelia Snippets - Snippets for Aurelia</li>\n<li>js-beautify - Code formating which can help with ESLint issues</li>\n<li>Debugger for Chrome - alows debuging in Chrome</li>\n<li>Document This - Helps with documenting JS code</li>\n<li>ESLint - Checks ESLint rules on the fly</li>\n<li>VS Code JavaScript (ES6) snippets - Snippets for ES6</li>\n<li>sass-lint - Another linting support</li>\n<li>SonarQube support for Visual Studio Code - Allows connection to SonarQube (requires additional configuration described below)</li>\n<li>stylelint - Linting tool for SASS (usefull in pattern-lab)</li>\n<li>TortoiseSVN - Includes TortoiseSVN functionality in VS Code</li>\n<li>Project Manager - Helps with multiple projects managing</li>\n<li>vscode-icons - Additioanl icons</li>\n<li>mustache - Support for Mustache (usefull in pattern-lab)</li>\n<li>Handlebars for Visual Studio Code - Support for Handlebars</li>\n<li>Visual Studio Code HTML Snippets - Snippets for HTML</li>\n<li>markdownlint - Limting tool for MD documentation</li>\n<li>Auto-Open Markdown Preview - PReview for MD documentation</li>\n</ul>\n<h3 id=\"eslint\">ESLint</h3>\n<p>Just install this extension: <a href=\"https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\">https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint</a></p>\n<p>It will automatically pick up the project&#39;s <code>.eslintrc.json</code> file and highlight code that breaks our eslint rules.</p>\n<p>To automatically fix ESLint errors when you save a file, got to <code>File / Preferences / Settings</code> and add <code>&quot;eslint.autoFixOnSave&quot;: true</code> to your user settings</p>\n<h3 id=\"aurelia\">Aurelia</h3>\n<p>Plugin is here: <a href=\"https://github.com/aurelia/vscode-extension/wiki\">https://github.com/aurelia/vscode-extension/wiki</a>\nBlog post describing it here: <a href=\"http://blog.aurelia.io/2016/10/11/introducing-the-aurelia-vs-code-plugin/\">http://blog.aurelia.io/2016/10/11/introducing-the-aurelia-vs-code-plugin/</a></p>\n<p>After installing extension, go to <code>File / Preferences / Color theme</code> and chose one of the following themes:</p>\n<ul>\n<li>Aurelia Dark</li>\n<li>Aurelia Dark+</li>\n<li>Aurelia Light</li>\n<li>Aurelia Light+</li>\n</ul>\n<h3 id=\"minimap\">Minimap</h3>\n<p>To enable the <strong>minimap</strong> feature to navigate code (like you get with Sublime Text), go to <code>File / Preferences / Settings</code> and add <code>&quot;editor.minimap.enabled&quot;: true</code> to your user settings</p>\n<h3 id=\"auto-open-markdown-preview\">Auto-Open Markdown Preview</h3>\n<p>Splits pane when editing markdown files to give a live preview</p>\n<p>Plugin here: <a href=\"https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview\">https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview</a></p>\n<h3 id=\"sonarqube-support-for-visual-studio-code\">SonarQube support for Visual Studio Code</h3>\n<p>After installation following steps are required (commands can be executed form VSCode commands accessed by pressing F1):</p>\n<ul>\n<li>Create global config via SonarQube Inject: Create global config with credentials to servers and fill the values</li>\n<li>Create project config via SonarQube Inject: Create local sonarlint config with project binding and fill the values</li>\n<li>Update project bindings via SonarQube Inject: Update bindings to SonarQube server - it can take a lot of time (~1-2 min) on first binding</li>\n</ul>\n<p>Global configuration needs to be set to:</p>\n<pre><code class=\"hljs lang-json\">{\n <span class=\"hljs-attr\">\"servers\"</span>: [\n {\n <span class=\"hljs-attr\">\"id\"</span>: <span class=\"hljs-string\">\"rcolnx89006\"</span>,\n <span class=\"hljs-attr\">\"url\"</span>: <span class=\"hljs-string\">\"http://rcolnx89006:9005\"</span>,\n <span class=\"hljs-attr\">\"token\"</span>: <span class=\"hljs-string\">\"\"</span>\n }\n ]\n}\n</code></pre>\n<p>Local configuration (sonarlint.json) needs to be set to:</p>\n<pre><code class=\"hljs lang-json\">{\n <span class=\"hljs-attr\">\"serverId\"</span>: <span class=\"hljs-string\">\"rcolnx89006\"</span>,\n <span class=\"hljs-attr\">\"projectKey\"</span>: <span class=\"hljs-string\">\"sonar:web-platform:0.1.0\"</span>\n}\n</code></pre>\n<p>It can be stored in SVN so we don’t need to change it for project.</p>\n",
"developer-notes/general/writing-documentation.md": "<h1 id=\"writing-documentation\">Writing documentation</h1>\n<p>Documentation is written in markdown. Markdown files end in .md</p>\n<p>see <a href=\"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet\">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> for\nall the codes.</p>\n<p>See the Visual Studio Code notes for details of a markdown preview plugin</p>\n<p>Documentation should live as close to the thing it is documenting as possible.\ne.g. if you are documenting a component then add the md file to the same\ndirectory as the component and name it the same except for the <code>.md</code> extension.</p>\n<p>Generic documentation should live under <code>src/developer-notes</code>.</p>\n<p>The documentation is converted to html using <code>marked</code> with the following settings:</p>\n<table>\n<thead>\n<tr>\n<th>Setting</th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>gfm</td>\n<td>true</td>\n</tr>\n<tr>\n<td>tables</td>\n<td>true</td>\n</tr>\n<tr>\n<td>breaks</td>\n<td>false</td>\n</tr>\n<tr>\n<td>pedantic</td>\n<td>false</td>\n</tr>\n<tr>\n<td>sanitize</td>\n<td>false</td>\n</tr>\n<tr>\n<td>smartLists</td>\n<td>true</td>\n</tr>\n<tr>\n<td>smartypants</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><code>gfm</code> includes all the markdown extensions produced by github.</p>\n<p>To generate the documentation locally run: <code>au process-docs</code></p>\n<p>This generates a docs.json file under the assets folder of the project.</p>\n<p>The index is defined in <code>aurelia.json</code> and is used\nto populate the navigation. Each section can have subsections, and all\nsections and subsections have a regex to determine which documents\nbelong to that section.</p>\n<p>e.g.</p>\n<pre><code class=\"hljs lang-json\"> {\n <span class=\"hljs-attr\">\"section\"</span>: <span class=\"hljs-string\">\"Products\"</span>,\n <span class=\"hljs-attr\">\"pages\"</span>: [],\n <span class=\"hljs-attr\">\"subs\"</span>: [\n {\n <span class=\"hljs-attr\">\"section\"</span>: <span class=\"hljs-string\">\"General\"</span>,\n <span class=\"hljs-attr\">\"pages\"</span>: [\n <span class=\"hljs-string\">\"developer-notes/products/useful-links.md\"</span>,\n <span class=\"hljs-string\">\"developer-notes/products/product-components-overview.md\"</span>\n ],\n <span class=\"hljs-attr\">\"regex\"</span>: <span class=\"hljs-string\">\"^developer-notes/products\"</span>\n },\n ...\n</code></pre>\n<p>So with the above, all docs under developer-notes/products and its\nsubdirectories will go into the Products - General subsection.</p>\n<p>The json file can be edited to add new sections and to reorder pages and\nsections - it is read by the process-docs task and docs are only added\nif they do not already exist in a section (in which case they are just\nappended to the end of the pages array for that section.</p>\n<p>Still to do:</p>\n<ol>\n<li>make specific docs linkable so we can have cross-references.</li>\n<li>improve styling.</li>\n<li>auto generate links to test pages and style guide.</li>\n</ol>\n",
"developer-notes/products/fund-labels.md": "<h1 id=\"fund-labels\">Fund Labels</h1>\n<p>Some fund labels come from PDS and some come from TeamSite.\nEven the labels that come from PDS can be overridden in TeamSite.</p>\n<p>In TeamSite - there are 2 label DCRs:</p>\n<p>1) templatedata/gw-config/labels/data/content-international/<site>/products/fund-labels\n2) templatedata/gw-config/labels/data/content-international/en-gb/products/teamsite-pds-overrides</p>\n<p>The set of labels sent back in the request to gw.fund-labels consists of:</p>\n<p>the fund-labels DCR + the labels sent from PDS + the teamsite-pds-overrides DCR.</p>\n<p>Each addition overwrites any labels previously set with the same keys.</p>\n<p>So it could be hard to tell where a particular label comes from.\nTo facilitate this there are 2 debug parameters to give help:</p>\n<p>debug=labelSource\ndebug=labelKeys</p>\n<p>Append these to the end of a page url after a question mark (?) or ampersand (&amp;)\nif there is already a request parameter.</p>\n<p>e.g. <a href=\"http://rcovlnx0192:8322/etf-us/investor/products/price-and-performance?debug=labelSource\">http://rcovlnx0192:8322/etf-us/investor/products/price-and-performance?debug=labelSource</a>\nor <a href=\"http://rcovlnx0192:8322/etf-us/investor/products/performance?FundID=21560&amp;debug=labelSource\">http://rcovlnx0192:8322/etf-us/investor/products/performance?FundID=21560&amp;debug=labelSource</a></p>\n<p>debug=labelSource appends either (T), (P) or (O) to each label.</p>\n<p>(T) - defined in teamsite fund-labels DCR\n(P) - comes from PDS\n(O) - defined in teamsite teamsite-pds-overrides DCR</p>\n<p>debug=labelKeys just returns the keys as the values so you can see which\nlabel is being referenced.</p>\n<p>So there are now 7 possible views of a label on a page:</p>\n<ol>\n<li>[!!label-key!!] - no labels loaded</li>\n<li>[label-key] - label with label-key not found</li>\n<li>label-key - label key returned by adding ?debug=labelKeys</li>\n<li>Label Value(T) - label source is TeamSite (?debug=labelSource)</li>\n<li>Label Value(P) - label source is PDS (?debug=labelSource)</li>\n<li>Label Value(O) - label source is TeamSite overriding PDS (?debug=labelSource)</li>\n<li>Label Value - as the end user is supposed to see it</li>\n</ol>\n<p>You can view the entire set of fund labels for a site with a request like:\n<a href=\"http://rcovlnx0192:8322/en-gb/investor/data/gw.fund-labels\">http://rcovlnx0192:8322/en-gb/investor/data/gw.fund-labels</a></p>\n<p>and you can append the debug parameter here as well:\n<a href=\"http://rcovlnx0192:8322/en-gb/investor/data/gw.fund-labels?debug=labelSource\">http://rcovlnx0192:8322/en-gb/investor/data/gw.fund-labels?debug=labelSource</a></p>\n",
"developer-notes/products/product beans.md": "<h1 id=\"product-beans\">Product beans</h1>\n<p>For International (including ETF) all product beans are defined in:\n<a href=\"https://sourcemgmtsvn:18080/svn/globalweb/branches/IWS-INTERNATIONAL/teamsite-customisation/livesite-customer-src/etc/classes/conf/international/international-funds-services-application-context.xml\">https://sourcemgmtsvn:18080/svn/globalweb/branches/IWS-INTERNATIONAL/teamsite-customisation/livesite-customer-src/etc/classes/conf/international/international-funds-services-application-context.xml</a></p>\n<p>Currently these include:</p>\n<h2 id=\"delegating-beans\">Delegating beans</h2>\n<ol>\n<li><strong>gw.ppss</strong> - generic ppss bean that will delegate to another service</li>\n<li><strong>gw.fund-details</strong> - generic fund details bean that delegates to another bean</li>\n</ol>\n<p>In future, to allow a mixture of ETF and Mutual funds on same site all\nbeans will probably have delegating equivalents.</p>\n<h2 id=\"common-beans\">Common beans</h2>\n<ol>\n<li><strong>gw.fund-config</strong> - centralised site fund configuration</li>\n</ol>\n<h2 id=\"international-beans\">International Beans</h2>\n<ol>\n<li><strong>iw.ppss</strong> - ppss from international service</li>\n<li><strong>iw.fund-details</strong> - fund details from international service</li>\n<li><strong>gw.price-distribution</strong></li>\n<li><strong>gw.portfolio</strong></li>\n<li><strong>gw.performance</strong></li>\n<li><strong>gw.performance-history</strong></li>\n<li><strong>gw.nav-history</strong></li>\n<li><strong>gw.overview</strong></li>\n<li><strong>gw.fund-labels</strong> - combined labels from PDS merged with Teamsite overrides and additions</li>\n</ol>\n<h2 id=\"etf-beans\">ETF Beans</h2>\n<ol>\n<li><strong>etf.ppss</strong> - fund explorer from etf service</li>\n<li><strong>etf.fund-details</strong> - fund details from etf service</li>\n<li><strong>etf.overview</strong></li>\n<li><strong>etf.price</strong></li>\n<li><strong>etf.price-history</strong></li>\n<li><strong>etf.distribution-history</strong></li>\n<li><strong>etf.performance</strong></li>\n<li><strong>etf.performance-history</strong></li>\n<li><strong>etf.portfolio</strong></li>\n<li><strong>etf.fund-labels</strong> - will eventually be merged with gw.fund-labels</li>\n</ol>\n",
"developer-notes/products/product-components-overview.md": "<h1 id=\"product-components-overview\">Product components overview</h1>\n<p>For product components we are using Redux for our state storage.\n see <a href=\"http://redux.js.org/\">http://redux.js.org/</a></p>\n<p>Typically, each product component will send off an action to populate\nits state and subscribe to changes in the redux store.\nWhen the state changes e.g. once the ajax requests have returned,\nthe component will be notified.</p>\n<p>The component will then map the bits of the state it needs into its own\nlocal member variables and aurelia binding will then update the UI\nautomatically.</p>\n<p>So a key part of a component is to supply a reducer which will map the\ndata returned from the ajax requests and create a new version of the\nstate. The data and logic are likely to be country or site specific,\nso normally, the reducer is placed into a sub folder of the lib folder\nand we use site configuration to set it up.</p>\n<h2 id=\"folder-structure\">Folder structure</h2>\n<ul>\n<li>src/ <ul>\n<li>components/ <ul>\n<li>products/<ul>\n<li>category/ (or page)<ul>\n<li>ft-component-name/<ul>\n<li>ft-component-name.js <em>- the main component js file</em><ul>\n<li>ft-component-name.html <em>- the main component template</em></li>\n<li>ft-component-name.md <em>- developer documentation</em></li>\n<li>ft-component-name.spec.js <em>- unit test</em></li>\n<li>ft-sub-Component.js <em>- a sub-component of this component</em></li>\n<li>ft-sub-component.html <em>- template for subComponent</em></li>\n<li>lib/<ul>\n<li>common-reducer.js <em>- a reducer that can be used across sites.</em></li>\n<li>site/ <em>(or group of sites) e.g. en-us-retail</em><ul>\n<li>component-name.js <em>- top level reducer</em></li>\n<li>another-reducer.js <em>- another reducer used by this component</em></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"converting-a-us-fund-component\">Converting a US fund component</h2>\n<ol>\n<li>identify the beans required for the component.</li>\n<li>identify the xsl for the component.\nThis will be converted into a redux reducer and an aurelia component\nthat shows the data on the page.</li>\n<li>update <code>src/configuration/en-us-retail/beans.js</code>\nAdd a new attribute under <code>components</code> for your component with\na list of the beans discovered in the earlier step. For any bean that\nis fund specific, you also need to add an entry under the <code>beans</code>\nattribute (lower down).</li>\n<li>edit <code>aurelia_project/tasks/get-stub-data.js</code> to add the beans\nfor which you need stub data and then run: <code>au get-stub-data</code>.\nYou should see your beans under <code>test/data</code> or <code>test/data/&lt;fund-id&gt;</code>\ndepending on whether they need a fund id or not. If they are in the\nwrong place, move them.</li>\n<li>run: <code>au generate redux-component</code>\nand follow the prompts. This will generate a whole load of\nfiles for you under <code>src/components/products/&lt;page&gt;/&lt;ft-&lt;component-name&gt;</code></li>\n<li>convert the xsl into the reducer and the component.</li>\n<li>write unit tests for the component and the reducer.</li>\n<li>write up component documentation in the md file.</li>\n<li>commit all changes and set up code review.</li>\n</ol>\n<h3 id=\"redux-links\">redux Links</h3>\n<p><a href=\"https://medium.com/@alexandereardon/the-middleware-listener-pattern-better-asynchronous-actions-in-redux-16164fb6186f\">Middleware Listener Pattern</a></p>\n<p><a href=\"https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44\">10 Redux Tips</a></p>\n",
"developer-notes/products/product-state.md": "<h1 id=\"product-state\">Product State</h1>\n<h2 id=\"common-state-variables\">Common state variables</h2>\n<p>In src/configuration/common/configure.js, an array of initialiser actions\nis created which is passed to the middleware. These actions will always be\ndispatched before any actions for other data service responses are dispatched.\nIn other words the requests will all go off to the server as they do now\nbut the reducers to process the replies will be queued until the\ninitialiser actions are complete.</p>\n<p>For non fund pages (including PPSS and German tax),\nthe initialiser actions are: &#39;POPULATE_CAVEATS_SUCCESS&#39; and &#39;LOAD_LABELS_MARKETING_SUCCESS&#39;.\nFor fund pages the following are added: &#39;LOAD_LABELS_SUCCESS&#39; and &#39;LOAD_CONFIGURATION_SUCCESS&#39;.</p>\n<p>Note that initialiser actions cannot be allowed to fail so the SUCCESS\naction reducers must also handle the error scenarios.\nThis is necessary because otherwise all subsequent requests would be\nblocked for ever more, and currently an error on the caveats service is a valid scenario.</p>\n<p>Also note that for fund pages POPULATE_CAVEATS also loads the\nfund details bean and the currentAssetClass and currentInvestmentVehicleCode\nare set in products.app (along with currentShareClassCode and fundId).\nThis is the place in the state that these values should always be read from,\nand you can safely access them from any reducer or mapState without any checks.\nYou still need to be careful in component constructors, but there is now\nNO need to pass any of these values in actions.</p>\n<p>products.app.currentShareClass\nproducts.app.currentInvestmentVehicleCode\nproducts.app.currentAssetClass</p>\n",
"developer-notes/products/useful-links.md": "<h1 id=\"useful-links\">Useful links</h1>\n<h2 id=\"path-to-top-of-products-xsl\">Path to top of Products XSL</h2>\n<p>iw-mount: international/main/admin/resources/WORKAREA/ALL/iwov-resources/xsl/gw/components/products</p>\n<h2 id=\"path-to-us-spring-bean-configuration\">Path to US spring bean configuration</h2>\n<p>livesite-customer-src: etc/classes/conf/us/products/us-products-application-context.xml</p>\n",
"components/common/attributes/ft-tooltip.md": "<h1 id=\"ft-tooltip\">ft-tooltip</h1>\n<p>This attribute can be added to any element, but ideally the info icon. When clicked, a tooltip will appear.</p>\n<h2 id=\"usage\">Usage</h2>\n<h3 id=\"html-content-only\">html content only</h3>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">ft-tooltip</span>=<span class=\"hljs-string\">\"&lt;strong&gt;hello&lt;/strong&gt; &lt;em&gt;world&lt;/em&gt;\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"ft-icon ft-icon-info\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n</code></pre>\n<h3 id=\"content-bound-to-variable\">content bound to variable</h3>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">ft-tooltip.bind</span>=<span class=\"hljs-string\">\"myContent\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"ft-icon ft-icon-info\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n</code></pre>\n<h3 id=\"html-content-and-title\">html content and title</h3>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">ft-tooltip</span>=<span class=\"hljs-string\">\"content.bind: '&lt;strong&gt;hello&lt;/strong&gt; &lt;em&gt;world&lt;/em&gt;'; title.bind: 'A title for this tooltip';\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"ft-icon ft-icon-info\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>If only content is required, then attribute value is straightforward. If title is also required, need to use the aurelia options binding sytntax described here: <a href=\"http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-attributes/5\">http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-attributes/5</a></p>\n",
"components/products/lib/date-util.md": "<h1 id=\"date-utils\">date-utils</h1>\n<p>This library contains helper functions for dates, and locale dates</p>\n<h2 id=\"-formatstddatetolocaleday-val-\"><code>formatStdDateToLocaleDay(val)</code></h2>\n<p>clean up different date formats and convert to common DD/MM/YYYY</p>\n<p><code>val</code> - val date in format DD/MM/YYYY or YYYY-MM-DD</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> value = formatDateToDay(<span class=\"hljs-string\">'1982-11-18 01:11:11'</span>); <span class=\"hljs-comment\">// returns 18/11/1982</span>\n</code></pre>\n",
"components/products/lib/reducer-utils.md": "<h1 id=\"reducer-utils\">reducer-utils</h1>\n<p>This library contains helper functions for reducers</p>\n<h2 id=\"-navdirection-val-\"><code>navDirection(val)</code></h2>\n<p>This is used to determine the nav direction for a string</p>\n<p><code>val</code> - the nav change. The function will automatically parse out the number</p>\n<p><strong>Returns</strong> <code>GAIN</code>, <code>LOSS</code> or <code>STATIC</code> depending on parsed numerical value. Returns <code>&#39;&#39;</code> if can&#39;t be parsed</p>\n<h2 id=\"-navchangeclass-direction-\"><code>navChangeClass(direction)</code></h2>\n<p>This is used to determine the class for a NAV direction. When applied to an html element, the class will apply a triangle pointing up, down or right, and set the text color to green, red or grey, for GAIN, LOSS or STATIC</p>\n<p><code>direction</code> - String. Required. Either GAIN, LOSS or STATIC</p>\n<p><strong>Returns</strong> <code>gain</code>, <code>loss</code> or <code>static</code></p>\n<h2 id=\"-getuniqoptions-property-\"><code>getUniqOptions(property)</code></h2>\n<p>This returns a function that can be applied to an array of funds to get an array of the unique options. This example will return the unique values of property <code>foo</code>:</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> funds = [{<span class=\"hljs-attr\">foo</span>: <span class=\"hljs-number\">1</span>, <span class=\"hljs-attr\">bar</span>: <span class=\"hljs-string\">'A'</span>}, {<span class=\"hljs-attr\">foo</span>: <span class=\"hljs-number\">2</span>, <span class=\"hljs-attr\">bar</span>: <span class=\"hljs-string\">'B'</span>}, {<span class=\"hljs-attr\">foo</span>: <span class=\"hljs-number\">1</span>, <span class=\"hljs-attr\">bar</span>: <span class=\"hljs-string\">'C'</span>}, ];\n<span class=\"hljs-keyword\">let</span> myFunction = getUniqOptions(<span class=\"hljs-string\">'foo'</span>);\n<span class=\"hljs-keyword\">let</span> uniqueFooValues = myFunction(funds); <span class=\"hljs-comment\">// returns [1, 2]</span>\n</code></pre>\n<p> This function is used to get options for dropdown filters</p>\n<h2 id=\"-formatcusip-val-\"><code>formatCusip(val)</code></h2>\n<p>This function changes the format of a 9 character string to XXX XXX XXX. Any other length of string is returned unchanged</p>\n<p><code>val</code> - the original CUSIP value</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> formattedCusip = formatCusip(<span class=\"hljs-string\">'G3658U329'</span>); <span class=\"hljs-comment\">// returns G36 58U 329</span>\n</code></pre>\n<h2 id=\"-formatcurrency-val-currency-\"><code>formatCurrency(val, currency)</code></h2>\n<p>Return value followed by currency symbol if numeric, otherwise return dash.</p>\n<p><code>val</code> - the currency amount\n<code>currency</code> - the currency value</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> value = formatCurrency(<span class=\"hljs-string\">'55.10'</span>, <span class=\"hljs-string\">'USD'</span>); <span class=\"hljs-comment\">// returns $55.10</span>\n</code></pre>\n<h2 id=\"-formatpercentage-val-\"><code>formatPercentage(val)</code></h2>\n<p>Return value preceeded by % symbol if numeric, otherwise return dash.</p>\n<p><code>val</code> - the currency amount</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> value = formatPercentage(<span class=\"hljs-string\">'55.10'</span>); <span class=\"hljs-comment\">// returns 55.10%</span>\n<span class=\"hljs-keyword\">let</span> value = formatPercentage(<span class=\"hljs-string\">'boo'</span>); <span class=\"hljs-comment\">// returns -</span>\n</code></pre>\n<h2 id=\"-formatstring-val-\"><code>formatString(val)</code></h2>\n<p>Return dash if empty otherwise return val.</p>\n<p><code>val</code> - the currency amount</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">let</span> value = formatPercentage(<span class=\"hljs-string\">'hello world'</span>); <span class=\"hljs-comment\">// returns hello world</span>\n<span class=\"hljs-keyword\">let</span> value = formatPercentage(<span class=\"hljs-string\">'55.10'</span>); <span class=\"hljs-comment\">// returns 55.10</span>\n<span class=\"hljs-keyword\">let</span> value = formatPercentage(<span class=\"hljs-string\">''</span>); <span class=\"hljs-comment\">// returns -</span>\n</code></pre>\n",
"components/products/ppss/ft-ppss-table-base.md": "<h1 id=\"ft-ppss-table-base\">ft-ppss-table-base</h1>\n<p>This is an abstract component class file. It contains common functionality for PPSS table sub-components.</p>\n<p>Current implementations include:</p>\n<ul>\n<li>ft-ppss-fund-identifiers</li>\n<li>ft-ppss-performance</li>\n<li>ft-ppss-ratings</li>\n<li>ft-ppss-yield</li>\n</ul>\n<h2 id=\"usage\">Usage</h2>\n<p><strong> This should not be used directly! </strong> Instead, extend this class to create a table sub-component</p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>This class provides a <code>changeSort(name)</code> function that dispatches the following action:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_SORT'</span>,\n <span class=\"hljs-attr\">columnName</span>: name\n}\n</code></pre>\n<p>It is passed to <code>ft-th-sortable</code> instances, to call when they are clicked.</p>\n",
"components/common/elements/ft-back-to-top/ft-back-to-top.md": "<h1 id=\"ft-back-to-top\">ft-back-to-top</h1>\n<p>Displays back to top button, on scrolling down the page</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-back-to-top</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-back-to-top</span>&gt;</span>\n</code></pre>\n",
"components/common/elements/ft-carousel/ft-carousel.md": "<h1 id=\"ft-carousel\">ft-carousel</h1>\n<p>This uses the bootstrap carousel. The carousel is created in the attached() method (where jquery is available.</p>\n<p>A unique id is created using a timestamp and passed to the data-target attributes of the navigation elements.\nThe element that we are going to create the carousel on is passed to the component using <code>ref</code>.\nThe actual content of each slide is passed in using <em>transclusion</em> ie a slot. It is assumed that each slide will be\nenclosed in a div with a <code>item</code> class and a <code>slide-title</code> attribute.</p>\n<p>The next and previous buttons are added through sub-elements <code>ft-carousel-navigation</code>. These elements gain a\nreference to the parent through dependency injection, but initialisation parameters for labels and whether left or right\nare passed through bindings.</p>\n",
"components/common/elements/ft-date-dropdown/ft-date-dropdown.md": "<h1 id=\"ft-date-dropdown\">ft-date-dropdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-date-dropdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-date-dropdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/common/elements/ft-datepicker/ft-datepicker.md": "<h1 id=\"ft-datepicker\">ft-datepicker</h1>\n<p>Based on the jQuery UI component: <a href=\"https://jqueryui.com/datepicker/\">https://jqueryui.com/datepicker/</a></p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-datepicker</span> <span class=\"hljs-attr\">value.two-way</span>=<span class=\"hljs-string\">\"value\"</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span> <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"myoptions\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-datepicker</span>&gt;</span>\n</code></pre>\n<ul>\n<li>value date in std format YYYY-MM-DD</li>\n<li>label is daisy chained map of locale text</li>\n<li>options are defined here: <a href=\"http://api.jqueryui.com/datepicker/\">http://api.jqueryui.com/datepicker/</a></li>\n</ul>\n",
"components/common/elements/ft-historical-modal/ft-historical-modal.md": "<h1 id=\"ft-historical-modal\">ft-historical-modal</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-historical-modal</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-historical-modal</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/common/elements/ft-label/ft-label.md": "<h1 id=\"ft-label\">ft-label</h1>\n<p><strong>Labels can include html</strong>. Therefore, it is <strong>not</strong> safe to bind them with <code>${ label[&#39;labelKey&#39;] }</code>, as the html will be escaped.</p>\n<p>One alternative is to bind the innerHTML of the parent element to the label - e.g.</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th</span> <span class=\"hljs-attr\">innerHTML.bind</span>=<span class=\"hljs-string\">\"label[ 'total-label' ]\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">th</span>&gt;</span>\n</code></pre>\n<p>But that can only be done when the label is the <strong>only</strong> child of the parent. In other cases, use the <code>&lt;ft-label&gt;</code> component.</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th</span> <span class=\"hljs-attr\">scope</span>=<span class=\"hljs-string\">\"col\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-label</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label['pay-date-label']\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-label</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-footnote</span> <span class=\"hljs-attr\">placement</span>=<span class=\"hljs-string\">\"MyFootnote\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-footnote</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">th</span>&gt;</span>\n</code></pre>\n",
"components/common/elements/ft-modal/ft-modal.md": "<h1 id=\"ft-modal\">ft-modal</h1>\n<p>This compontent sits somewhere on the page, and is openned by dispatching &#39;OPEN_MODAL&#39;</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-modal</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-modal</span>&gt;</span>\n</code></pre>\n<p>Redux calls</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-keyword\">this</span>.dispatch({\n <span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'OPEN_MODAL'</span>,\n <span class=\"hljs-attr\">title</span>: <span class=\"hljs-string\">'Modal Title'</span>,\n <span class=\"hljs-attr\">contents</span>: <span class=\"hljs-string\">'Content message'</span>,\n <span class=\"hljs-attr\">footer</span>: <span class=\"hljs-string\">`&lt;a href=\"<span class=\"hljs-subst\">${link}</span>\" class=\"btn btn-primary\"&gt;OK&lt;/a&gt;`</span>\n});\n</code></pre>\n<h2 id=\"livesite-js\">LiveSite JS</h2>\n<p>This component is also called via the &#39;LiveSite&#39; file &#39;src\\livesite\\ft-leaving-site.js&#39;.\nThis displays a message when anyone clicks on a link with the class &#39;.external-link&#39;</p>\n",
"components/common/elements/ft-modal-inline/ft-modal-inline.md": "<h1 id=\"ft-modal-inline\">ft-modal-inline</h1>\n<p>This is a way of adding a modal, where the content is taken from the main component html and pushed into a slot within the modal</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-modal-inline</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"test1\"</span> <span class=\"hljs-attr\">view-model.ref</span>=<span class=\"hljs-string\">\"modal\"</span> <span class=\"hljs-attr\">title.bind</span>=<span class=\"hljs-string\">\"title\"</span> <span class=\"hljs-attr\">close.bind</span>=<span class=\"hljs-string\">\"close\"</span> &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">slot</span>=<span class=\"hljs-string\">\"body\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p</span>&gt;</span>contents<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">slot</span>=<span class=\"hljs-string\">\"footer\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p</span>&gt;</span>contents<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-modal-inline</span>&gt;</span>\n</code></pre>\n<p>The modal has slots for:</p>\n<ul>\n<li>body - required</li>\n<li>footer - optional</li>\n</ul>\n<p>And bound attributes for</p>\n<ul>\n<li>Title</li>\n<li>Close button text</li>\n</ul>\n<h1 id=\"opening-the-modal\">Opening the Modal</h1>\n<p>In your component controller, use this.modal.openModal(); to open the modal. this.modal relates to the veiw-modal.ref=&quot;modal&quot; on the ft-modal-inline component, and calls a function within the modal component.</p>\n",
"components/common/elements/ft-owl-carousel/ft-owl-carousel.md": "<h1 id=\"ft-owl-carousel\">ft-owl-carousel</h1>\n<p>This uses the OWL carousel. The carousel is created in the attached() method where jquery is available.</p>\n<p>A unique id is created using a timestamp and passed to the data-target attributes of the navigation elements.\nThe element that we are going to create the carousel on is passed to the component using <code>ref</code>.\nThe actual content of each slide is passed in using <em>transclusion</em> ie a slot. It is assumed that each slide will be\nenclosed in a div with a <code>owl-item</code> class and nested div with <code>item</code> class.\nExample: <code>&lt;div class=&quot;owl-item&quot;&gt;&lt;div class=&quot;item&quot;&gt;Content&lt;/div&gt;&lt;/div&gt;</code></p>\n<p>Carousel configuration is is in <code>ft-owl-carousel.js</code></p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-owl-carousel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-item\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"item\"</span> &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3</span>&gt;</span>Title1<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">h3</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#\"</span>&gt;</span>Link Text<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-item\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"item\"</span> &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3</span>&gt;</span>Title2<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">h3</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#\"</span>&gt;</span>Link Text<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-owl-carousel</span>&gt;</span>\n</code></pre>\n",
"components/common/elements/ft-owl-tabbed/ft-owl-tabbed.md": "<h1 id=\"ft-owl-tabbed\">ft-owl-tabbed</h1>\n<p>This uses the OWL carousel. The carousel is created in the attached() method where jquery is available.</p>\n<p>A unique id is created using a timestamp and passed to the data-target attributes of the navigation elements.\nThe element that we are going to create the carousel on is passed to the component using <code>ref</code>.\nThe actual content of each slide is passed in using <em>transclusion</em> ie a slot. It is assumed that each slide will be\nenclosed in a li with a <code>owl-tab</code> class and nested <code>a</code> with link to corresponding tab.\nAdditionally ft-owl-tabbed can have <code>class=&quot;hidden&quot;</code> to hide list of items during framework load. This class will be removed after tabbed carousel initialization.\nTabs content needs to be defined separately.\nCarousel configuration is is in <code>ft-owl-tabbed.js</code></p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-owl-tabbed</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li</span> <span class=\"hljs-attr\">role</span>=<span class=\"hljs-string\">\"presentation\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-tab active\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#tabs-content-1\"</span> <span class=\"hljs-attr\">aria-controls</span>=<span class=\"hljs-string\">\"tabs-content-1\"</span> <span class=\"hljs-attr\">data-toggle</span>=<span class=\"hljs-string\">\"tab\"</span> <span class=\"hljs-attr\">aria-expanded</span>=<span class=\"hljs-string\">\"true\"</span>&gt;</span>Title 1<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">li</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li</span> <span class=\"hljs-attr\">role</span>=<span class=\"hljs-string\">\"presentation\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-tab \"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#tabs-content-2\"</span> <span class=\"hljs-attr\">aria-controls</span>=<span class=\"hljs-string\">\"tabs-content-2\"</span> <span class=\"hljs-attr\">data-toggle</span>=<span class=\"hljs-string\">\"tab\"</span> <span class=\"hljs-attr\">aria-expanded</span>=<span class=\"hljs-string\">\"true\"</span>&gt;</span>Title 2<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">a</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">li</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-owl-tabbed</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"panel-body tab-content\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">role</span>=<span class=\"hljs-string\">\"tabpane\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"tab-pane active\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"tabs-content-1\"</span>&gt;</span>\n Content 1\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">role</span>=<span class=\"hljs-string\">\"tabpane\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"tab-pane\"</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"tabs-content-2\"</span>&gt;</span>\n Content 2\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n",
"components/common/elements/ft-pagination/ft-pagination.md": "<h1 id=\"ft-pagination\">ft-pagination</h1>\n<p>Displays pagination information requires </p>\n<ul>\n<li>PagingInfo Object from paging-utils.js</li>\n<li>goToPage Function which should update PagingInfo binding once finished getting data</li>\n<li>language specific labels passed through</li>\n</ul>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-pagination</span>\n <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">paging-info.bind</span>=<span class=\"hljs-string\">\"pagingInfo &amp; debounce:0\"</span>\n <span class=\"hljs-attr\">go-to-page.call</span>=<span class=\"hljs-string\">\"goToPage(page)\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-pagination</span>&gt;</span>\n</code></pre>\n",
"components/common/elements/ft-tab-collapse/ft-tab-collapse.md": "<h1 id=\"ft-tab-collapse\">ft-tab-collapse</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-tab-collapse</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-tab-collapse</span>&gt;</span>\n</code></pre>\n<p><em>Component required to execute Tab Collapse functionality retuired for change tabs to accordion should be used once.</em></p>\n",
"components/common/elements/ft-th-sortable/ft-th-sortable.md": "<h1 id=\"ft-th-sortable\">ft-th-sortable</h1>\n<p>This component creates a <code>&lt;th&gt;</code> that the user can click on to sort.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th</span> <span class=\"hljs-attr\">scope</span>=<span class=\"hljs-string\">\"col\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"fund\"</span>\n <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-th-sortable\"</span>\n <span class=\"hljs-attr\">title.one-time</span>=<span class=\"hljs-string\">\"getLabel('fund-name')\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort.columns.get('FUND_NAME')\"</span>\n <span class=\"hljs-attr\">click-callback.call</span>=<span class=\"hljs-string\">\"changeSort('FUND_NAME')\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">th</span>&gt;</span>\n</code></pre>\n<ul>\n<li><p><code>clickCallback</code> - This is a function on the parent component that will be called when the user click the <code>&lt;th&gt;</code>.</p>\n</li>\n<li><p><code>sort</code> - This is an object of the form:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">dataKey</span>: <span class=\"hljs-string\">'fundNameFull'</span>,\n <span class=\"hljs-attr\">direction</span>: <span class=\"hljs-string\">'ASC'</span>,\n <span class=\"hljs-attr\">isNumeric</span>: <span class=\"hljs-literal\">false</span>\n}\n</code></pre>\n</li>\n<li><p><code>dataKey</code> - This is the property on the fund that the sort will apply to.</p>\n</li>\n<li><p><code>direction</code> - Can be <code>ASC</code>, <code>DESC</code> or <code>null</code>. If <code>null</code>, then the data is not currently sorted by this column</p>\n</li>\n<li><p><code>isNumeric</code> - If true, data in the property will be treated as numeric, parsed (if necessary), and sorted numerically. Otherwise, it will be sorted as a <code>String</code></p>\n</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/common/elements/ft-visual-hint/ft-visual-hint.md": "<h1 id=\"ft-visual-hint\">ft-visual-hint</h1>\n<p>visual hint is a indicator which should be added to tables which are very wide and can be crushed.</p>\n<p>This will display a indicator for the user that the table has content to the right.</p>\n<p>Can be added to any table or other content that might require scrolling on a mobile browser</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"table-responsive\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-visual-hint</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-visual-hint</span>&gt;</span>\n <span class=\"hljs-comment\">&lt;!-- very wide table --&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"table-1\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"table table-striped responsive\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">thead</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">tbody</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">table</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n",
"components/marketing/common/value-converters/ft-format-grid-cell.md": "<h1 id=\"ft-format-grid-cell\">ft-format-grid-cell</h1>\n<p>value-converter</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td</span> <span class=\"hljs-attr\">innerhtml.bind</span>=<span class=\"hljs-string\">\"dataObj | ftFormatGridCell:dataKey\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">td</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>dataObj</code> is an object with properties</li>\n<li><p><code>dataKey</code> is the name of the property on <code>dataObj</code> to display</p>\n</li>\n<li><p>If there is an associated url property, then a link will be outputted</p>\n</li>\n<li>If the value is pipe <code>|</code> delimited, then the values will be outputted delimited by <code>&lt;br /&gt;</code> tags</li>\n<li>If the value is empty or undefined, then a dash character will be outputted</li>\n<li>Otherwise, the value of the property will be outputted</li>\n</ul>\n",
"components/marketing/common/value-converters/ft-format-subscription-input-names.md": "<h1 id=\"ft-format-subscription-input-names\">ft-format-subscription-input-names</h1>\n<p> For use with subscriptions chooser, specific rules applied for GuideText , OptionText arrays are mapped\n on a dynamicaly built form built by parsing json. These input fields require unique names that are based on their teamsite component labels with an additional parameter for a unique identifier and stripping out the space chars as input naming conventions shouldnt contain spaces.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"checkbox\"</span> <span class=\"hljs-attr\">name.bind</span>=<span class=\"hljs-string\">\"labeltext\"</span> | <span class=\"hljs-attr\">ftFormatSubscriptionInputNames:</span>'<span class=\"hljs-attr\">OPTION_</span>'\"&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>labeltext</code> is the text value adjacent to the input/checkbox element.</li>\n<li><code>OPTION_</code> is the name of the unique identifier to append to the returned string, it will allow differentiation.</li>\n</ul>\n<p>Ultimately this converter is purely to be able to differentiate between multiple labels and apply them to dynamicaly created form elements as name attributes which will allow their values to be parsed and sent onwards.</p>\n",
"components/marketing/grids/ft-grid-filter/ft-grid-filter.md": "<h1 id=\"ft-grid-filter\">ft-grid-filter</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-grid-filter</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"unqiue_ref\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">slot</span>=<span class=\"hljs-string\">\"config\"</span> <span class=\"hljs-attr\">type</span>=<span class=\"hljs-string\">\"application/json\"</span>&gt;</span><span class=\"actionscript\">\n {\n <span class=\"hljs-string\">\"cardsPerPage\"</span>: <span class=\"hljs-number\">3</span>,\n <span class=\"hljs-string\">\"currentView\"</span>: <span class=\"hljs-string\">\"GRID\"</span>,\n <span class=\"hljs-string\">\"showViewToggle\"</span>: <span class=\"hljs-literal\">true</span>,\n <span class=\"hljs-string\">\"filters\"</span>: [...],\n <span class=\"hljs-string\">\"columns\"</span>: [...]\n }\n </span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden all Macro-News christopher-j-molumphy-cfa col-sm-6 col-md-4 col-lg-3 no\"</span>\n <span class=\"hljs-attr\">card-title</span>=<span class=\"hljs-string\">\"Global Economic Perspective: March 2017\"</span>\n <span class=\"hljs-attr\">card-title-url</span>=<span class=\"hljs-string\">\"https://www.franklintempleton.com/investor/insights/commentary?commentaryPath=en-us/en-us-retail/GEP&amp;amp;commentaryType=Macro News\"</span>\n <span class=\"hljs-attr\">commentary-type</span>=<span class=\"hljs-string\">\"Macro News\"</span>\n <span class=\"hljs-attr\">speaker-name</span>=<span class=\"hljs-string\">\"Christopher J. Molumphy, CFA|John Smith|Jane Doe\"</span>\n <span class=\"hljs-attr\">published-date</span>=<span class=\"hljs-string\">\"Mar 23, 2017\"</span>\n <span class=\"hljs-attr\">nav</span>=<span class=\"hljs-string\">\"$1.23\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"card card-speaker card-small\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n ...\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden all Global-Market-Viewpoints col-sm-6 col-md-4 col-lg-3 no\"</span>\n <span class=\"hljs-attr\">card-title</span>=<span class=\"hljs-string\">\"Commodities Overview: February 2017\"</span>\n <span class=\"hljs-attr\">card-title-url</span>=<span class=\"hljs-string\">\"https://www.franklintempleton.com/investor/insights/commentary?commentaryPath=en-us/en-us-retail/CommoditiesOverview_Feb17&amp;amp;commentaryType=Global Market Viewpoints\"</span>\n <span class=\"hljs-attr\">commentary-type</span>=<span class=\"hljs-string\">\"Global Market Viewpoints|Other News\"</span>\n <span class=\"hljs-attr\">speaker-name</span>=<span class=\"hljs-string\">\"\"</span>\n <span class=\"hljs-attr\">published-date</span>=<span class=\"hljs-string\">\"Feb 28, 2017\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"card card-image dark card-small\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-grid-filter</span>&gt;</span>\n</code></pre>\n<h2 id=\"json-options\">JSON Options</h2>\n<p>The <code>&lt;script&gt;</code> tag should contain a valid JSON snippet with options on how the grid should display and work. If something doesn&#39;t work, check the snippet is <a href=\"http://jsonlint.com/\">valid JSON</a>.</p>\n<ul>\n<li><code>cardsPerPage</code> - Integer. Optional. Default 4. Determines how many more cards should be displayed when <em>Load More</em> button is pressed.</li>\n<li><code>currentView</code> - String. Optional. Default &#39;GRID&#39;. Determines whether TABLE or GRID view should be displayed initially.</li>\n<li><code>showViewToggle</code> - Boolean. Optional. Default true. Determines if the GRID/TABLE toggle buttons are displayed. If false, then the view is stuck on the initial value of <code>currentView</code>.</li>\n<li><code>filters</code> - Array. Optional. Ordered array of dropdown filter config objects. See below for details.</li>\n<li><code>columns</code> - Array. Optional. Ordered array of column config objects for use in the table view. See below for details.</li>\n</ul>\n<h3 id=\"filter-config-object\">filter config object</h3>\n<p>Add one of these for each dropdown filter you want to display</p>\n<pre><code class=\"hljs lang-json\">{\n <span class=\"hljs-attr\">\"name\"</span>: <span class=\"hljs-string\">\"COMMENTARY_TYPE\"</span>,\n <span class=\"hljs-attr\">\"type\"</span>: <span class=\"hljs-string\">\"DROPDOWN\"</span>,\n <span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Category\"</span>,\n <span class=\"hljs-attr\">\"dataKey\"</span>: <span class=\"hljs-string\">\"commentaryType\"</span>,\n <span class=\"hljs-attr\">\"selected\"</span>: <span class=\"hljs-string\">\"ALL\"</span>,\n <span class=\"hljs-attr\">\"options\"</span>: [\n {<span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Category: All\"</span>, <span class=\"hljs-attr\">\"value\"</span>: <span class=\"hljs-string\">\"ALL\"</span>},\n {<span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Global Market Viewpoints\"</span>, <span class=\"hljs-attr\">\"value\"</span>: <span class=\"hljs-string\">\"Global Market Viewpoints\"</span>},\n {<span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Macro News\"</span>, <span class=\"hljs-attr\">\"value\"</span>: <span class=\"hljs-string\">\"Macro News\"</span>},\n {<span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Other News\"</span>, <span class=\"hljs-attr\">\"value\"</span>: <span class=\"hljs-string\">\"Other News\"</span>}\n ]\n}\n</code></pre>\n<ul>\n<li><code>name</code> - String. Constant. used to identify the filter</li>\n<li><code>type</code> - String. DROPDOWN|YEAR_DROPDOWN.</li>\n<li><code>label</code> - String. Not used currently?</li>\n<li><code>dataKey</code> - String. <a href=\"https://en.wikipedia.org/wiki/Letter_case#Special_case_styles\">camelCase</a> version of the data attribute on the card containing the value to display in the <code>&lt;td&gt;</code> <strong>NB: When the column contains a link, append <code>.value</code> to the <code>dataKey</code>. Ie. <code>&quot;dataKey&quot;: &quot;title&quot;</code> becomes <code>&quot;dataKey&quot;: &quot;title.value&quot;</code></strong></li>\n<li><code>selected</code> - String. Default selected option value</li>\n<li><code>dateFormat</code> - String. Required if <code>&quot;type&quot;: &quot;YEAR_DROPDOWN&quot;</code>. The date format used to parse the card values e.g. <code>&quot;dateFormat&quot;: &quot;MMM DD, YYYY&quot;</code>. See <a href=\"https://momentjs.com/docs/#/parsing/string-format/\">Moment docs</a> for possible values</li>\n<li><code>options</code> - Array of label/value objects that the user can select.\n <em>NB</em> This is a predefined list of options that can be displayed. If the option doesn&#39;t exist on a card, it won&#39;t be displayed. If a value exists on a card with out a corresponding configured option, then the user cannot select that value either<ul>\n<li><code>ALL</code> - When this option is selected, no filtering will be performed</li>\n<li><code>12_MONTHS</code> - When a YEAR_DROPDOWN, this will filter the last 12 months of cards based on today&#39;s date.</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"column-config-object\">column config object</h3>\n<p>Add one of these for each column you want the table to display</p>\n<pre><code class=\"hljs lang-json\">{\n <span class=\"hljs-attr\">\"name\"</span>: <span class=\"hljs-string\">\"SPEAKER_NAME\"</span>,\n <span class=\"hljs-attr\">\"label\"</span>: <span class=\"hljs-string\">\"Speaker\"</span>,\n <span class=\"hljs-attr\">\"dataKey\"</span>: <span class=\"hljs-string\">\"speakerName\"</span>,\n <span class=\"hljs-attr\">\"class\"</span>: <span class=\"hljs-string\">\"speaker\"</span>,\n <span class=\"hljs-attr\">\"isNumeric\"</span>: <span class=\"hljs-literal\">false</span>,\n <span class=\"hljs-attr\">\"isDate\"</span>: <span class=\"hljs-literal\">false</span>\n}\n</code></pre>\n<ul>\n<li><code>name</code> - String. Constant. Used to identify the column</li>\n<li><code>label</code> - String. The column title displayed to the user</li>\n<li><code>dataKey</code> - String. <a href=\"https://en.wikipedia.org/wiki/Letter_case#Special_case_styles\">camelCase</a> version of the data attribute on the card containing the value to display in the <code>&lt;td&gt;</code> <strong>NB: When the column contains a link, append <code>.value</code> to the <code>dataKey</code>. Ie. <code>&quot;dataKey&quot;: &quot;speakerName&quot;</code> becomes <code>&quot;dataKey&quot;: &quot;speakerName.value&quot;</code></strong></li>\n<li><code>class</code> - String. Optional. Any class(es) to add to the column <code>&lt;td&gt;</code>s.</li>\n<li><code>isNumeric</code> - Boolean. Optional. Default false. Set to true if the column contains numeric data. This affects sorting</li>\n<li><code>isDate</code> - Boolean. Optional. Default false. Set to true if the column contains dates</li>\n<li><code>dateFormat</code> - String. Required if <code>&quot;isDate&quot;: true</code>. The date format used to parse the card values e.g. <code>&quot;dateFormat&quot;: &quot;MMM DD, YYYY&quot;</code>. See <a href=\"https://momentjs.com/docs/#/parsing/string-format/\">Moment docs</a> for possible values</li>\n</ul>\n<h2 id=\"card-elements\">Card Elements</h2>\n<p>The minimum markup required for a card is:</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n<h3 id=\"notes\">Notes</h3>\n<ul>\n<li>If there is a <code>class</code> attribute on the <code>&lt;div&gt;</code>, the classes will be copied over.</li>\n<li>If a <code>hidden</code> class is added, then the cards will be hidden during the initial page load, so the user doesn&#39;t see the page jumping.</li>\n<li>Any data attributes that are required by filters or table columns, should be added to the <code>&lt;div&gt;</code> in <a href=\"https://en.wikipedia.org/wiki/Letter_case#Special_case_styles\">kebab-case</a> format e.g:<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span> <span class=\"hljs-attr\">foo-bar</span>=<span class=\"hljs-string\">\"baz\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n</li>\n<li>Multiple values should be separated with the pipe <code>|</code> character e.g:<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span> <span class=\"hljs-attr\">foo-bar</span>=<span class=\"hljs-string\">\"alpha|beta|gamma\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n</li>\n<li>Links should have an additional attribute to hold the url. The attribute should have the same name, but with suffix <code>-url</code> e.g:<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>\n <span class=\"hljs-attr\">title</span>=<span class=\"hljs-string\">\"My fantastic article\"</span>\n <span class=\"hljs-attr\">title-url</span>=<span class=\"hljs-string\">\"/my-fantastic-article.html\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\nor<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>\n <span class=\"hljs-attr\">title</span>=<span class=\"hljs-string\">\"My fantastic article\"</span>\n <span class=\"hljs-attr\">title-url</span>=<span class=\"hljs-string\">\"http://www.abc.com/my-fantastic-article.html\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n</li>\n</ul>\n<h2 id=\"actions\">Actions</h2>\n<p>Dispatches this example action when the &#39;load more&#39; button is clicked:</p>\n<pre><code class=\"hljs lang-json\">{\n type: 'GRID_LOAD_MORE'\n}\n</code></pre>\n<p>Dispatches this example action when a table column header is clicked:</p>\n<pre><code class=\"hljs lang-json\">{\n type: 'GRID_CHANGE_SORT',\n columnName: 'COMMENTARY_TYPE'\n}\n</code></pre>\n",
"components/marketing/grids/ft-grid-filter-dropdown/ft-grid-filter-dropdown.md": "<h1 id=\"ft-grid-filter-dropdown\">ft-grid-filter-dropdown</h1>\n<p>This component generates a grid filter dropdown control</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-grid-filter-dropdown</span>\n <span class=\"hljs-attr\">filter.bind</span>=<span class=\"hljs-string\">\"filter\"</span>\n <span class=\"hljs-attr\">selected.bind</span>=<span class=\"hljs-string\">\"selected\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-grid-filter-dropdown</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>filter</code> - This is an object with properties describing how the dropdown and it&#39;s options should render. See the documentation for <code>&lt;ft-grid-filter&gt;</code> for full details</li>\n<li><code>selected</code> - The currently selected value for this filter</li>\n</ul>\n<p>Dispatches the following example action when the dropdown is changed:</p>\n<pre><code class=\"hljs lang-json\">{\n type: 'GRID_CHANGE_DROPDOWN',\n name: 'COMMENTARY_TYPE',\n newValue: 'Macro News'\n}\n</code></pre>\n",
"components/marketing/grids/ft-grid-filter-form/ft-grid-filter-form.md": "<h1 id=\"ft-grid-filter-form\">ft-grid-filter-form</h1>\n<p>This component generates a grid filter form, used for filtering the results of a grid/table, and toggling between the grid/table views</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-grid-filter-form</span> <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span>\n <span class=\"hljs-attr\">show-view-toggle.bind</span>=<span class=\"hljs-string\">\"showViewToggle\"</span>\n <span class=\"hljs-attr\">current-view.bind</span>=<span class=\"hljs-string\">\"currentView\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-grid-filter-form</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>filters</code> - Array of filter objects describing the dropdowns to be rendered</li>\n<li><code>showViewToggle</code> - Boolean. Detrmines if the grid/table toggle buttons are visible</li>\n<li><code>currentView</code> - <code>GRID</code> or <code>TABLE</code>. Determines which view should be visible</li>\n</ul>\n<p>Dispatches the following action when a toggle button is clicked:</p>\n<pre><code class=\"hljs lang-json\">{\n type: 'GRID_CHANGE_VIEW',\n view: 'TABLE'\n}\n</code></pre>\n",
"components/marketing/layouts/ft-choose-subscription/ft-choose-subscription.md": "<h1 id=\"ft-choose-subscription\">ft-choose-subscription</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-choose-subscription</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-choose-subscription</span>&gt;</span>\n</code></pre>\n<p>Marketing component to allow users to choose various subscriptions.</p>\n<p>Uses &#39;aurelia-fetch-client&#39; to post data to end point after step 2.</p>\n",
"components/marketing/lists/ft-document-lister/ft-document-lister.md": "<h1 id=\"ft-document-lister\">ft-document-lister</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-document-lister</span>&gt;</span>\n SERVER SIDE RENDERED CONTENT\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-document-lister</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>This component is server side rendered.</em></p>\n<p>This component is unlike other components in that the content and data are server side rendered upfront.</p>\n<p>Test page: &#39;test\\pages\\en-gb\\doclister.html&#39;</p>\n<p><em>Note:</em> If making updates, ensure doc-lister component in pattern library is kept up to date, as this is the HMTL &#39;single source of the truth&#39; that the XLS backed team work from.</p>\n<p>See further dev notes in pattern library</p>\n",
"components/marketing/lists/ft-report-archive-a/ft-report-archive-a.md": "<h1 id=\"ft-report-archive-a\">ft-report-archive-a</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-report-archive-a</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-report-archive-a</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/marketing/lists/ft-report-archive-b/ft-report-archive-b.md": "<h1 id=\"ft-report-archive-a\">ft-report-archive-a</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-report-archive-a</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-report-archive-a</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/marketing/lists/ft-report-archive-c/ft-report-archive-c.md": "<h1 id=\"ft-report-archive-c\">ft-report-archive-c</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-report-archive-c</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-report-archive-c</span>&gt;</span>\n</code></pre>\n",
"components/marketing/lists/ft-report-archive-d/ft-report-archive-d.md": "<h1 id=\"ft-report-archive-d\">ft-report-archive-d</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-report-archive-d</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-report-archive-d</span>&gt;</span>\n</code></pre>\n",
"components/marketing/video/ft-video-switch/ft-video-switch.md": "<h1 id=\"ft-video-switch\">ft-video-switch</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-video-switch</span> <span class=\"hljs-attr\">transcript-url</span>=<span class=\"hljs-string\">\"http://www.franklintempleton.co.uk\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"video\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden\"</span> <span class=\"hljs-attr\">language</span>=<span class=\"hljs-string\">\"English\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"video-container\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"video\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden\"</span> <span class=\"hljs-attr\">language</span>=<span class=\"hljs-string\">\"German\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"video-container\"</span>&gt;</span>...<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-video-switch</span>&gt;</span>\n</code></pre>\n<h2 id=\"attributes\">Attributes</h2>\n<ul>\n<li><code>transcript-url</code> - (Optional). Link to transcript of the video(s)</li>\n</ul>\n<h2 id=\"video-elements\">Video Elements</h2>\n<p>The minimum markup required is:</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"video\"</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden\"</span> <span class=\"hljs-attr\">language</span>=<span class=\"hljs-string\">\"German\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n</code></pre>\n<p>Notes</p>\n<ul>\n<li><code>data-fti-component=&quot;video&quot;</code> is required for aurelia to parse out the video</li>\n<li><code>class=&quot;hidden&quot;</code> This is optional. It means the user won&#39;t get a flash of content while the page initialises</li>\n<li>The <code>language</code> attribute is parsed by aurelia, and the values used to create the dropdown switch. The <code>language</code> attributes should have unique values.</li>\n</ul>\n",
"components/products/common/attributes/ft-share-class-refresh-listener.md": "<p><strong>Share class refresh listener</strong></p>\n<p>This is a custom attribute which listens for click event of anchor tags which have the \n<em>share-class-refresh-listener</em> attribute. This event is raised when selecting a different class in the <em>ft-share-class-filter</em> custom element, present on individual Fund pages.</p>\n<p>Upon a state change, it compares the current href query string parameters against those in the store, and if the current ones differ from the store, it runs a routine to refresh the page.</p>\n",
"components/products/common/attributes/share-class-link-listener.md": "<p><strong>Share class link listener</strong></p>\n<p>This is a custom attribute which listens for changes made to the href attributes of anchor tags which have the \n<em>share-class-link-listener</em> attribute. These changes to the href are made from selecting a different class in the <em>ft-share-class-filter</em> \ncustom element, present on individual Fund pages.</p>\n<p>Upon a state change, it compares the current href query string parameters against those in the store, and if the current \n ones differ from the store, it runs a routine to update the params accordingly.</p>\n",
"components/products/performance/ft-calendar-year-returns/ft-calendar-year-returns.md": "<h1 id=\"ft-calendar-year-returns\">ft-calendar-year-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-calendar-year-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">show-chart</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">span-row</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-calendar-year-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Handoff from Jason: Fairly complete from the looks of it, aside from expected label issues.</p>\n",
"components/products/performance/ft-discrete-returns/ft-discrete-returns.md": "<h1 id=\"ft-discrete-returns\">ft-discrete-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-discrete-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-discrete-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/performance/ft-performance-annualised/ft-performance-annualised.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-annualised</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"15846\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-annualised</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/performance/ft-performance-cumulative/ft-performance-cumulative.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Component and reducer for cumulative performance data. As it sits currently, in need of Hyptothetical graph data.</p>\n",
"components/products/performance/ft-performance-risk-statistics/ft-performance-risk-statistics.md": "<h1 id=\"ft-performance-risk-statistics\">ft-performance-risk-statistics</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-risk-statistics</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"18000\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-risk-statistics</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>This file converts the riskStatsList datanode from performance bean and creates 3 tables of Risk Statistics. It&#39;s pretty much what it says on the tin. </p>\n",
"components/products/overview/ft-fund-ratings/ft-fund-ratings.md": "<h1 id=\"ft-fund-ratings\">ft-fund-ratings</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-ratings</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-ratings</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/overview/ft-fund-static-bar/ft-fund-static-bar.md": "<h1 id=\"ft-fund-static-bar\">ft-fund-static-bar</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-static-bar</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-static-bar</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>A lot of work has been done to provide the data for any of the other components which might appear inside the fund static bar.</p>\n<p>However at the moment, this is not required, so the majority of the code has been commented out.</p>\n<p>This includes a number of functions which gather other pieces of data.</p>\n<p>If the data is required in the future then the code just needs to be uncommented.</p>\n",
"components/products/overview/ft-performance-snapshot/ft-performance-snapshot.md": "<h1 id=\"ft-performance-snapshot\">ft-performance-snapshot</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-snapshot</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-snapshot</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>This component re-uses the view models and reducers of the various performance types and just supplies new view models.</p>\n",
"components/products/portfolio/ft-market-capitalisation/ft-market-capitalisation.md": "<h1 id=\"ft-market-capitalisation\">ft-market-capitalisation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-market-capitalisation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-market-capitalisation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-market-capitalisation Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n<h3 id=\"structures\">Structures</h3>\n<h4 id=\"en-gb\">EN-GB</h4>\n<pre><code class=\"hljs lang-json\">{\n<span class=\"hljs-attr\">\"breakdown\"</span>: {\n <span class=\"hljs-attr\">\"brkdwnDet\"</span>: [\n {\n <span class=\"hljs-attr\">\"asOfDate\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"31/12/2016\"</span>\n },\n <span class=\"hljs-attr\">\"brkDwnLst\"</span>: {\n <span class=\"hljs-attr\">\"lstDtls\"</span>: [\n {\n <span class=\"hljs-attr\">\"name\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"&lt;2.0 Billion\"</span>\n },\n <span class=\"hljs-attr\">\"val\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"11.91\"</span>\n }\n }\n ]\n },\n <span class=\"hljs-attr\">\"type\"</span>: <span class=\"hljs-string\">\"MARKET_CAPITAL_ALLOCATION\"</span>\n }\n ]\n }\n }\n</code></pre>\n<h4 id=\"etf\">ETF</h4>\n<pre><code class=\"hljs lang-json\">{\n<span class=\"hljs-attr\">\"breakdown\"</span>: {\n <span class=\"hljs-attr\">\"brkdwnDet\"</span>: [\n {\n <span class=\"hljs-attr\">\"asOfDate\"</span>: {\n <span class=\"hljs-attr\">\"lbl\"</span>: <span class=\"hljs-string\">\"As of\"</span>,\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"2017-04-26\"</span>\n },\n <span class=\"hljs-attr\">\"brkDwnLst\"</span>: {\n <span class=\"hljs-attr\">\"lstDtls\"</span>: [\n {\n <span class=\"hljs-attr\">\"name\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"10.0-25.0 Billion\"</span>\n },\n <span class=\"hljs-attr\">\"rank\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"4\"</span>\n },\n <span class=\"hljs-attr\">\"val\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"16.58320\"</span>\n },\n <span class=\"hljs-attr\">\"valStd\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"16.5832\"</span>\n }\n }\n ]\n },\n <span class=\"hljs-attr\">\"type\"</span>: <span class=\"hljs-string\">\"MARKET_CAPITAL_ALLOCATION\"</span>,\n <span class=\"hljs-attr\">\"asOfDateStd\"</span>: {\n <span class=\"hljs-attr\">\"val\"</span>: <span class=\"hljs-string\">\"2017-04-26\"</span>\n }\n }\n ]\n }\n}\n</code></pre>\n",
"components/products/portfolio/ft-portfolio-allocation/ft-portfolio-allocation.md": "<h1 id=\"ft-portfolio-allocation\">ft-portfolio-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-portfolio-no-data-message/ft-portfolio-no-data-message.md": "<h1 id=\"ft-portfolio-no-data-message\">ft-portfolio-no-data-message</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-no-data-message</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-portfolio-no-data-message</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-top-exposures/ft-top-exposures.md": "<h1 id=\"ft-portfolio-exposure\">ft-portfolio-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/util/util.md": "<h2 id=\"portfolio-utils\">Portfolio Utils</h2>\n<p>Exposes a number of utilities which are used in Sector Breakdown components.</p>\n<h3 id=\"usage\">Usage</h3>\n<p>Imported as:</p>\n<pre><code class=\"hljs\">import {portfolioUtils} from '../../../util/util';\n</code></pre>\n<p>This exposes the the portfolioUtils object.</p>\n<p>Using the function from </p>\n",
"components/products/ppss/ft-find-a-fund/ft-find-a-fund.md": "<h1 id=\"ft-find-a-fund\">ft-find-a-fund</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-find-a-fund</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-find-a-fund</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-find-a-fund-btn/ft-find-a-fund-btn.md": "<h1 id=\"ft-find-a-fund-btn\">ft-find-a-fund-btn</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-find-a-fund-btn</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-find-a-fund-btn</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-etf/ft-ppss-etf.md": "<h1 id=\"ft-ppss-etf\">ft-ppss-etf</h1>\n<p>This PPSS sub-component displays the ETF table.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-etf</span>\n <span class=\"hljs-attr\">funds.bind</span>=<span class=\"hljs-string\">\"funds\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort\"</span>\n <span class=\"hljs-attr\">nav-as-of-date.one-time</span>=<span class=\"hljs-string\">\"navAsOfDate\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-etf</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>funds</code> - filtered array of PPSS funds to display</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>sort</code> - object to configure the sortable <code>&lt;th&gt;</code>s</li>\n<li><code>navAsOfDate</code> - string with the NAV date</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-favorite/ft-ppss-favorite.md": "<h1 id=\"ft-ppss-favorite\">ft-ppss-favorite</h1>\n<p>This sub-component is used to generate a <em>favorites</em> <code>&lt;td&gt;</code> cell.</p>\n<p><strong>NB:</strong> <em>Favorites</em> is currently just a feature of US sites, but will be left in International sites in case they want this in the future.</p>\n<p><strong>TODO:</strong> This feature has still to be implemented in web-platform</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td</span> <span class=\"hljs-attr\">if.one-time</span>=<span class=\"hljs-string\">\"config.showFavorites\"</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"favorites hidden-print\"</span>\n <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-ppss-favorite\"</span>\n <span class=\"hljs-attr\">fund.bind</span>=<span class=\"hljs-string\">\"fund\"</span>\n <span class=\"hljs-attr\">user.one-time</span>=<span class=\"hljs-string\">\"user\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">td</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-fund-filter/ft-ppss-fund-filter.md": "<h1 id=\"ft-ppss-fund-filter\">ft-ppss-fund-filter</h1>\n<p>This PPSS sub-component allows the user to filter the list of funds displayed by various criteria.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-fund-filter</span> <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span> <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-fund-filter</span>&gt;</span>\n</code></pre>\n<p><code>filter</code> is an object describing which filter inputs should be displayed, their options and currently selected values e.g:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">favorites</span>: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-comment\">// {myFavoritesOnly: true},</span>\n dropdowns: [{\n <span class=\"hljs-attr\">name</span>: <span class=\"hljs-string\">'ASSET_CLASS'</span>,\n <span class=\"hljs-attr\">labelKey</span>: <span class=\"hljs-string\">'assetclass'</span>,\n <span class=\"hljs-attr\">dataKey</span>: <span class=\"hljs-string\">'assetClass'</span>,\n <span class=\"hljs-attr\">selected</span>: {<span class=\"hljs-attr\">value</span>: <span class=\"hljs-string\">'Equity'</span>, <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'Equity'</span>},\n <span class=\"hljs-attr\">options</span>: [\n {<span class=\"hljs-string\">\"label\"</span>: <span class=\"hljs-string\">\"Equity\"</span>, <span class=\"hljs-string\">\"value\"</span>: <span class=\"hljs-string\">\"Equity\"</span>},\n {<span class=\"hljs-string\">\"label\"</span>: <span class=\"hljs-string\">\"Fixed Income\"</span>, <span class=\"hljs-string\">\"value\"</span>: <span class=\"hljs-string\">\"Fixed Income\"</span>}\n ]\n }, {\n ...\n }, {\n <span class=\"hljs-attr\">name</span>: <span class=\"hljs-string\">'SHARE_CLASS'</span>,\n <span class=\"hljs-attr\">labelKey</span>: <span class=\"hljs-string\">'shareclass'</span>,\n <span class=\"hljs-attr\">dataKey</span>: <span class=\"hljs-string\">'shareClass'</span>,\n <span class=\"hljs-attr\">selected</span>: {<span class=\"hljs-attr\">value</span>: [<span class=\"hljs-string\">'C'</span>, <span class=\"hljs-string\">'C1'</span>], <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'C &amp; C1'</span>},\n <span class=\"hljs-attr\">options</span>: [\n {<span class=\"hljs-attr\">value</span>: [<span class=\"hljs-string\">'A'</span>, <span class=\"hljs-string\">'A1'</span>], <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'A &amp; A1'</span>},\n {<span class=\"hljs-attr\">value</span>: [<span class=\"hljs-string\">'C'</span>, <span class=\"hljs-string\">'C1'</span>], <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'C &amp; C1'</span>},\n {<span class=\"hljs-attr\">value</span>: <span class=\"hljs-string\">'R'</span>, <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'R'</span>},\n {<span class=\"hljs-attr\">value</span>: <span class=\"hljs-string\">'R6'</span>, <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'R6'</span>},\n {<span class=\"hljs-attr\">value</span>: [<span class=\"hljs-string\">'Advisor'</span>, <span class=\"hljs-string\">'Z'</span>], <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'Advisor/Z'</span>}\n ]\n }],\n <span class=\"hljs-attr\">keywords</span>: {\n <span class=\"hljs-attr\">searchKeys</span>: [<span class=\"hljs-string\">'symbol'</span>, <span class=\"hljs-string\">'fundShortName'</span>, <span class=\"hljs-string\">'fundId'</span>, <span class=\"hljs-string\">'fundLegalName'</span>],\n <span class=\"hljs-attr\">searchString</span>: <span class=\"hljs-string\">''</span>\n }\n}\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>favorites</code> - Currently US only. Still to be developed</li>\n<li><code>dropdowns</code> - array of dropdown filters (in order) that are available\nEach dropdown config object has the following properties:<ul>\n<li><code>name</code> - constant used to identify the filter</li>\n<li><code>labelkey</code> - key used to get the dropdown&#39;s title to display from the <code>label</code> object</li>\n<li><code>dataKey</code> - corresponds to the <code>fund</code> property that will be compared when filtering</li>\n<li><code>selected</code> - label/value object that corresponds ot the currently selected option</li>\n<li><code>options</code> - Array of label/value objects representing options the user can select. <strong>NB</strong> value could be an array e.g. <code>{value: [&#39;A&#39;, &#39;A1&#39;], label: &#39;A &amp; A1&#39;}</code>. If this option were selected, funds that had a property with value &#39;A&#39; <strong>OR</strong> &#39;A1&#39; will be displayed.</li>\n</ul>\n</li>\n<li><code>keywords</code> - This isn&#39;t currently used in the <code>ft-ppss-fund-filter</code> component. Instead, it is used in the table components to provide a basic keyword search filter</li>\n</ul>\n",
"components/products/ppss/ft-ppss-fund-identifiers/ft-ppss-fund-identifiers.md": "<h1 id=\"ft-ppss-fund-identifiers\">ft-ppss-fund-identifiers</h1>\n<p>This PPSS sub-component display the Fund Identifiers table.</p>\n<p><strong>TODO:</strong> This has still to be fully developed</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-fund-identifiers</span>\n <span class=\"hljs-attr\">funds.bind</span>=<span class=\"hljs-string\">\"funds\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-fund-identifiers</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>funds</code> - filtered array of PPSS funds to display</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>filters</code> - reference to the filters config object, in case the <code>keywords</code> filter is to be shown</li>\n<li><code>sort</code> - object to configure the sortable <code>&lt;th&gt;</code>s</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-fund-name/ft-ppss-fund-name.md": "<h1 id=\"ft-ppss-fund-name\">ft-ppss-fund-name</h1>\n<p>This sub-component is used to generate a <em>fund name</em> <code>&lt;td&gt;</code> cell.</p>\n<p>It creates a link to the fund&#39;s product page, it displays hard or soft closure messages if present, and (optionally) it displays sales charges and expenses information in an expandable panel.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"fund-name\"</span>\n <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-ppss-fund-name\"</span>\n <span class=\"hljs-attr\">fund.bind</span>=<span class=\"hljs-string\">\"fund\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">tab</span>=<span class=\"hljs-string\">\"performance\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">td</span>&gt;</span>\n</code></pre>\n<p><code>tab</code> - this is used to create a unique id name, if there are multiple tabs available</p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The template uses <code>&lt;template view-cache=&quot;*&quot;&gt;</code> to cache the component, and increase rendering speed.</p>\n",
"components/products/ppss/ft-ppss-performance/ft-ppss-performance.md": "<h1 id=\"ft-ppss-performance\">ft-ppss-performance</h1>\n<p>This PPSS sub-component displays the Performance table.</p>\n<p>(Optionally) this sub-component displays a dropdown to swap between Month-end and Quarter-end data.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-performance</span>\n <span class=\"hljs-attr\">funds.bind</span>=<span class=\"hljs-string\">\"funds\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort\"</span>\n <span class=\"hljs-attr\">user.bind</span>=<span class=\"hljs-string\">\"user\"</span>\n <span class=\"hljs-attr\">performance-view.bind</span>=<span class=\"hljs-string\">\"performanceView\"</span>\n <span class=\"hljs-attr\">ytd-as-of-date.one-time</span>=<span class=\"hljs-string\">\"ytdAsOfDate\"</span>\n <span class=\"hljs-attr\">period-end.bind</span>=<span class=\"hljs-string\">\"display.periodEnd\"</span>\n <span class=\"hljs-attr\">nav-as-of-date-month.one-time</span>=<span class=\"hljs-string\">\"navAsOfDateMonth\"</span>\n <span class=\"hljs-attr\">nav-as-of-date-quarter.one-time</span>=<span class=\"hljs-string\">\"navAsOfDateQuarter\"</span>\n <span class=\"hljs-attr\">include-sales-charges.bind</span>=<span class=\"hljs-string\">\"display.includeSalesCharges\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-performance</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>funds</code> - filtered array of PPSS funds to display</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>filters</code> - reference to the filters config object, in case the <code>keywords</code> filter is to be shown</li>\n<li><code>sort</code> - object to configure the sortable <code>&lt;th&gt;</code>s</li>\n<li><code>performanceView</code> - which Performance View is currently being displayed</li>\n<li><code>periodEnd</code> - QUARTER_END/MONTH_END</li>\n<li><code>includeSalesCharges</code> - true/false current state of sales charges toggle</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>For Int&#39;l sites, funds are grouped by Investment vehicle. This is done by having several <code>&lt;tbody&gt;</code> sections, each with a sortable header row, and multiple Performance data rows.</p>\n<p>To optimise the performance at which this component renders when displaying lots of rows, all possible sortable <code>&lt;th&gt;</code>s are created, and the contents shown/hidden when the <code>performanceView</code> updates.</p>\n<p>This seems to work faster than destroying the <code>&lt;th&gt;</code>s and creating new ones.</p>\n<h3 id=\"refactored-row-component\">Refactored row component</h3>\n<p>There was initially a separate row component, that had to be refactored back in to support IE.</p>\n<p>To optimise the performance at which this component renders when displaying lots of rows, 7 data <code>&lt;td&gt;</code>s are created, and the contents changed when the <code>performanceView</code> updates.</p>\n<p>This seems to work faster than destroying or hiding the <code>&lt;td&gt;</code>s and creating new ones.</p>\n",
"components/products/ppss/ft-ppss/ft-ppss.md": "<h1 id=\"ft-ppss\">ft-ppss</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Most of the work (filtering, sorting etc) of the PPSS data is done in the <code>mapState()</code> function of the <code>ft-ppss.js</code> component file. There are various private functions in this file to help process the data.</p>\n",
"components/products/ppss/ft-ppss-ratings/ft-ppss-ratings-row.md": "<h1 id=\"ft-ppss-ratings-row\">ft-ppss-ratings-row</h1>\n<p>This PPSS sub-component displays a row of the Ratings table. For some funds, a message will be displayed instead of data.</p>\n<p>So far, this is only used on the US site</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr</span> <span class=\"hljs-attr\">repeat.for</span>=<span class=\"hljs-string\">\"fund of funds\"</span>\n <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-ppss-ratings-row\"</span>\n <span class=\"hljs-attr\">fund.bind</span>=<span class=\"hljs-string\">\"fund\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">tr</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>fund</code> - the specific fund object this row will display data for</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The template uses <code>&lt;template view-cache=&quot;*&quot;&gt;</code> to cache the component, and increase rendering speed.</p>\n",
"components/products/ppss/ft-ppss-ratings/ft-ppss-ratings.md": "<h1 id=\"ft-ppss-ratings\">ft-ppss-ratings</h1>\n<p>This PPSS sub-component displays the Ratings table.</p>\n<p>So far, this is only used on the US site.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-ratings</span>\n <span class=\"hljs-attr\">funds.bind</span>=<span class=\"hljs-string\">\"funds\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort\"</span>\n <span class=\"hljs-attr\">user.bind</span>=<span class=\"hljs-string\">\"user\"</span>\n <span class=\"hljs-attr\">morningstar-as-of-date.one-time</span>=<span class=\"hljs-string\">\"morningstarAsOfDate\"</span>\n <span class=\"hljs-attr\">fund-category-as-of-date.one-time</span>=<span class=\"hljs-string\">\"fundCategoryAsOfDate\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-ratings</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>funds</code> - filtered array of PPSS funds to display</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>filters</code> - reference to the filters config object, in case the <code>keywords</code> filter is to be shown</li>\n<li><code>sort</code> - object to configure the sortable <code>&lt;th&gt;</code>s</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-search-box/ft-ppss-search-box.md": "<h1 id=\"ft-ppss-search-box\">ft-ppss-search-box</h1>\n<p>This PPSS sub-component is used to perform keyword search filtering to funds</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-search-box</span> <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">search-string.bind</span>=<span class=\"hljs-string\">\"filters.keywords.searchString\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-search-box</span>&gt;</span>\n</code></pre>\n<p><code>searchString</code> - The search string that is currently being filtered on. This should be an empty string if no keyword filtering is currently being applied.</p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Dispatches the following action when user changes input:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_KEYWORDS'</span>,\n <span class=\"hljs-attr\">newSearchString</span>: <span class=\"hljs-string\">'foo'</span>\n}\n</code></pre>\n<p>Currently this is hard-coded with a <strong>500ms debounce</strong> i.e. the action won&#39;t be dispatched until the user has stopped typing for half a second.</p>\n",
"components/products/ppss/ft-ppss-tab-header/ft-ppss-tab-header.md": "<h1 id=\"ft-ppss-tab-header\">ft-ppss-tab-header</h1>\n<p>This PPSS sub-component displays the tabs which users can click on to see different data tables.</p>\n<p>It can also be configured to show toggles for the Performance View or Sales Charges</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-tab-header</span> <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">current-table.bind</span>=<span class=\"hljs-string\">\"currentTable\"</span>\n <span class=\"hljs-attr\">show-performance-toggle.bind</span>=<span class=\"hljs-string\">\"config.showPerformanceToggle\"</span>\n <span class=\"hljs-attr\">performance-view.bind</span>=<span class=\"hljs-string\">\"display.performanceView\"</span>\n <span class=\"hljs-attr\">show-sales-charge-toggle.bind</span>=<span class=\"hljs-string\">\"config.showSalesChargeToggle\"</span>\n <span class=\"hljs-attr\">include-sales-charges.bind</span>=<span class=\"hljs-string\">\"display.includeSalesCharges\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-tab-header</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>config</code> - PPSS config object</li>\n<li><code>currentTable</code> - String determining which tab to display e.g. PERFORMANCE/FUND_IDENTIFIERS/RATINGS/YIELD</li>\n<li><code>showPerformanceToggle</code> - TODO: this should come directly from config</li>\n<li><code>showSalesChargeToggle</code> - TODO: this should come directly from config</li>\n<li><code>performanceView</code> - current performance view to show</li>\n<li><code>includeSalesCharges</code> - true/false current state of sales charges toggle</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>3 different actions can be dispatched:</p>\n<ol>\n<li><p>When a tab is clicked</p>\n<pre><code class=\"hljs lang-javascript\">{\n<span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_TAB'</span>,\n<span class=\"hljs-attr\">tab</span>: key\n}\n</code></pre>\n</li>\n<li><p>When the performance view is changed:</p>\n<pre><code class=\"hljs lang-js\">{\n<span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_PERFORMANCE_VIEW'</span>,\n<span class=\"hljs-attr\">data</span>: val\n}\n</code></pre>\n</li>\n<li><p>When the sales charges are toggled on or off:</p>\n<pre><code class=\"hljs lang-js\">{\n<span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_SALES_CHARGES'</span>,\n<span class=\"hljs-attr\">data</span>: val\n}\n</code></pre>\n</li>\n</ol>\n",
"components/products/ppss/ft-ppss-table-toolbar/ft-ppss-table-toolbar.md": "<h1 id=\"ft-ppss-table-toolbar\">ft-ppss-table-toolbar</h1>\n<p>This PPSS sub-component allows the user to compare funds, remove or add it to their favorites, and add the factsheet to their cart.</p>\n<p><strong>TODO:</strong> This has still to be developed in web-platform</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr</span> <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-ppss-table-toolbar\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">user.bind</span>=<span class=\"hljs-string\">\"user\"</span>\n <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"table-toolbar hidden\"</span>\n <span class=\"hljs-attr\">data-ppss-favorite</span>=<span class=\"hljs-string\">\"tool-bar\"</span>\n <span class=\"hljs-attr\">data-fti-sticky-item</span>=<span class=\"hljs-string\">\"yield\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">tr</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/ppss/ft-ppss-yield/ft-ppss-yield-row.md": "<h1 id=\"ft-ppss-yield-row\">ft-ppss-yield-row</h1>\n<p>This PPSS sub-component displays a row of the Yield table. For some funds, a message will be displayed instead of data.</p>\n<p>So far, this is only used on the US site</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr</span> <span class=\"hljs-attr\">repeat.for</span>=<span class=\"hljs-string\">\"fund of funds\"</span>\n <span class=\"hljs-attr\">as-element</span>=<span class=\"hljs-string\">\"ft-ppss-yield-row\"</span>\n <span class=\"hljs-attr\">fund.bind</span>=<span class=\"hljs-string\">\"fund\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">include-sales-charges.bind</span>=<span class=\"hljs-string\">\"includeSalesCharges\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">tr</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>fund</code> - the specific fund object this row will display data for</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>includeSalesCharges</code> - determines whether to show distribution rates at NAV or POP</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The template uses <code>&lt;template view-cache=&quot;*&quot;&gt;</code> to cache the component, and increase rendering speed.</p>\n",
"components/products/ppss/ft-ppss-yield/ft-ppss-yield.md": "<h1 id=\"ft-ppss-yield\">ft-ppss-yield</h1>\n<p>This PPSS sub-component displays the Yield table.</p>\n<p>So far, this is only used on the US site.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-ppss-yield</span>\n <span class=\"hljs-attr\">funds.bind</span>=<span class=\"hljs-string\">\"funds\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">config.one-time</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">filters.bind</span>=<span class=\"hljs-string\">\"filters\"</span>\n <span class=\"hljs-attr\">sort.bind</span>=<span class=\"hljs-string\">\"sort\"</span>\n <span class=\"hljs-attr\">user.bind</span>=<span class=\"hljs-string\">\"user\"</span>\n <span class=\"hljs-attr\">dist-rate-nav-as-of-date.one-time</span>=<span class=\"hljs-string\">\"distRateNavAsOfDate\"</span>\n <span class=\"hljs-attr\">standard-yield-as-of-date.one-time</span>=<span class=\"hljs-string\">\"standardYieldAsOfDate\"</span>\n <span class=\"hljs-attr\">standard-yield-as-of-date-money-fund.one-time</span>=<span class=\"hljs-string\">\"standardYieldAsOfDateMoneyFund\"</span>\n <span class=\"hljs-attr\">include-sales-charges.bind</span>=<span class=\"hljs-string\">\"display.includeSalesCharges\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-ppss-yield</span>&gt;</span>\n</code></pre>\n<ul>\n<li><code>funds</code> - filtered array of PPSS funds to display</li>\n<li><code>config</code> - reference to the PPSS config object</li>\n<li><code>filters</code> - reference to the filters config object, in case the <code>keywords</code> filter is to be shown</li>\n<li><code>sort</code> - object to configure the sortable <code>&lt;th&gt;</code>s</li>\n<li><code>includeSalesCharges</code> - determines whether to show distribution rates at NAV or POP</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/pricing-distribution/ft-dividends/ft-dividends.md": "<h1 id=\"ft-dividends\">ft-dividends</h1>\n<p>Displays dividend information for different share classes in the fund</p>\n<p><strong>NB</strong> Only share classes with distribution information should be passed in</p>\n<p><strong>NBB</strong> Component will not display at all if no share classes are passed</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-dividends</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"shareClass\"</span>\n <span class=\"hljs-attr\">dividend-share-classes.bind</span>=<span class=\"hljs-string\">\"dividendShareClasses\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-dividends</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>dividend-as-of-date</code> String. Date at which data is taken</li>\n<li><code>dividend-share-classes</code> Array of Objects. Share classes with dividend data.\n Each object should be of form:<pre><code class=\"hljs lang-js\"> {\n <span class=\"hljs-attr\">className</span>: <span class=\"hljs-string\">'Z (Ydis) EUR-H1'</span>,\n <span class=\"hljs-attr\">currency</span>: <span class=\"hljs-string\">'EUR'</span>,\n <span class=\"hljs-attr\">dividend</span>: {\n <span class=\"hljs-attr\">distributionDate</span>: <span class=\"hljs-string\">'07/07/2016'</span>,\n <span class=\"hljs-attr\">dividendsPerShare</span>: <span class=\"hljs-string\">'€0.229'</span>,\n <span class=\"hljs-attr\">exDividendDate</span>: <span class=\"hljs-string\">'01/07/2016'</span>,\n <span class=\"hljs-attr\">recordDate</span>: <span class=\"hljs-string\">'30/06/2016'</span>\n }\n }\n</code></pre>\n</li>\n</ul>\n",
"components/products/pricing-distribution/ft-dividends-historical/ft-dividends-historical.md": "<h1 id=\"ft-dividends-historical\">ft-dividends-historical</h1>\n<p>Displays dividend information for different share classes in the fund</p>\n<p><strong>NB</strong> Only share classes with historical dividend information should be passed in</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-dividends-historical</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">pd-data.bind</span>=<span class=\"hljs-string\">\"pdData\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"currentShareClass\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-dividends-historical</span>&gt;</span>\n</code></pre>\n",
"components/products/pricing-distribution/ft-nav-high-low/ft-nav-high-low.md": "<h1 id=\"ft-nav-high-low\">ft-nav-high-low</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-nav-high-low</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">pd-data.bind</span>=<span class=\"hljs-string\">\"pdData\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"shareClass\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-nav-high-low</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>label</code> Object. key/value label text pairs</li>\n<li><code>pd-data</code> Object. Settings for Pricing &amp; Distributions components.\n Object should be of form:<pre><code class=\"hljs lang-js\"> {\n <span class=\"hljs-attr\">showHighLowOnDate</span>: <span class=\"hljs-literal\">true</span>\n }\n</code></pre>\n<ul>\n<li><code>showHighLowOnDate</code> determines if the &quot;on 01/05/2017&quot; dates should appear under NAV prices (if they exist)</li>\n</ul>\n</li>\n<li><code>share-class</code> Object. Details of the share class to display High/Low NAV data for.\n Object should be of form:<pre><code class=\"hljs lang-js\"> {\n <span class=\"hljs-attr\">asOfDate</span>: <span class=\"hljs-string\">'01/05/2017'</span>,\n <span class=\"hljs-attr\">highLowNav</span>: [\n {\n <span class=\"hljs-attr\">year</span>: <span class=\"hljs-string\">'2017'</span>,\n <span class=\"hljs-attr\">highNav</span>: <span class=\"hljs-string\">'£12.34'</span>,\n <span class=\"hljs-attr\">highNavDate</span>: <span class=\"hljs-string\">'02/03/2017'</span>,\n <span class=\"hljs-attr\">lowNav</span>: <span class=\"hljs-string\">'£9.87'</span>,\n <span class=\"hljs-attr\">lowNavDate</span>: <span class=\"hljs-string\">'24/03/2017'</span>\n },\n ....\n {\n <span class=\"hljs-attr\">year</span>: <span class=\"hljs-string\">'2008'</span>,\n <span class=\"hljs-attr\">highNav</span>: <span class=\"hljs-string\">'£23.45'</span>,\n <span class=\"hljs-attr\">highNavDate</span>: <span class=\"hljs-string\">'13/10/2016'</span>,\n <span class=\"hljs-attr\">lowNav</span>: <span class=\"hljs-string\">'£22.33'</span>,\n <span class=\"hljs-attr\">lowNavDate</span>: <span class=\"hljs-string\">'18/04/2016'</span>\n }\n ]\n }\n</code></pre>\n<ul>\n<li><code>highNavDate</code> and <code>lowNavDate</code> are optional</li>\n</ul>\n</li>\n</ul>\n",
"components/products/pricing-distribution/ft-price-chart/ft-price-chart.md": "<h1 id=\"ft-price-chart\">ft-price-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-price-chart</span>\n <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"currentShareClass\"</span>\n <span class=\"hljs-attr\">price-chart-data.bind</span>=<span class=\"hljs-string\">\"priceChartData\"</span>\n <span class=\"hljs-attr\">date-range-options.bind</span>=<span class=\"hljs-string\">\"dateRangeOptions\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-price-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/pricing-distribution/ft-price-historical/ft-price-historical.md": "<h1 id=\"ft-price-historical\">ft-price-historical</h1>\n<p>Displays price nav information for different share classes in the fund</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-price-historical</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">pd-data.bind</span>=<span class=\"hljs-string\">\"pdData\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"currentShareClass\"</span>\n <span class=\"hljs-attr\">nav-history.bind</span>=<span class=\"hljs-string\">\"navHistory\"</span>\n <span class=\"hljs-attr\">date-picker-from-opts.bind</span>=<span class=\"hljs-string\">\"datePickerFromOpts\"</span>\n <span class=\"hljs-attr\">date-picker-to-opts.bind</span>=<span class=\"hljs-string\">\"datePickerToOpts\"</span>\n <span class=\"hljs-attr\">date-range-options.bind</span>=<span class=\"hljs-string\">\"dateRangeOptions\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-price-historical</span>&gt;</span>\n</code></pre>\n",
"components/products/pricing-distribution/ft-pricing-distribution/ft-pricing-distribution.md": "<h1 id=\"ft-pricing-distribution\">ft-pricing-distribution</h1>\n<p>Top Level component for the Pricing and Distributions Tab</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-pricing-distribution</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"12904\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-pricing-distribution</span>&gt;</span>\n</code></pre>\n",
"components/products/pricing-distribution/ft-share-prices/ft-share-prices.md": "<h1 id=\"ft-share-prices\">ft-share-prices</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-share-prices</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"currentShareClass\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-share-prices</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<ul>\n<li><code>label</code> Object. key/value label text pairs</li>\n<li><code>share-class</code> Object. Details of the share class to display NAV Price data for.\n Object should be of form:<pre><code class=\"hljs lang-js\"> {\n <span class=\"hljs-attr\">asOfDate</span>: <span class=\"hljs-string\">'01/05/2017'</span>,\n <span class=\"hljs-attr\">nav</span>: <span class=\"hljs-string\">'$10.95'</span>,\n <span class=\"hljs-attr\">navChange</span>: <span class=\"hljs-string\">'$0.21'</span>,\n <span class=\"hljs-attr\">navChangeDirection</span>: <span class=\"hljs-string\">'GAIN'</span>,\n <span class=\"hljs-attr\">navChangePercent</span>: <span class=\"hljs-string\">\"-0.01\"</span>\n ...\n }\n</code></pre>\n</li>\n</ul>\n<p><code>navChangePercent</code> is optional</p>\n",
"components/products/tax/ft-german-tax/ft-german-tax.md": "<h1 id=\"ft-german-tax\">ft-german-tax</h1>\n<p>Basic component for display of german tax ramifications of various funds</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-german-tax</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-german-tax</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/common/elements/charting/ft-bar-chart/ft-bar-chart.md": "<h1 id=\"ft-bar-chart\">ft-bar-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-bar-chart</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n <span class=\"hljs-attr\">suffix.bind</span>=<span class=\"hljs-string\">\"suffix\"</span>\n <span class=\"hljs-attr\">valPrefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">altlabel.bind</span>=<span class=\"hljs-string\">\"true/false\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-bar-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>FIXME: should be refactored to work as per ft-chart\n<em>options</em> [broken/optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p><em>series</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n<p><em>suffix</em> [optional] used in tooltip</p>\n<p><em>valPrefix</em> [optional] used in tooltip</p>\n<p>WORKAROUND: once options works this can be refactored / removed\n<em>altlabel</em> [optional] should the label be outside or inside bar row</p>\n",
"components/common/elements/charting/ft-chart/ft-chart.md": "<h1 id=\"ft-chart\">ft-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-chart</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n<p><em>options</em> [optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p><em>series</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n",
"components/common/elements/charting/ft-column-chart/ft-column-chart.md": "<h1 id=\"ft-column-chart\">ft-column-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-column-chart</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">suffix.bind</span>=<span class=\"hljs-string\">\"suffix\"</span>\n <span class=\"hljs-attr\">valPrefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">categories.bind</span>=<span class=\"hljs-string\">\"categories\"</span>\n <span class=\"hljs-attr\">ytitle.bind</span>=<span class=\"hljs-string\">\"ytitle\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-column-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n<p>FIXME: should be refactored to work as per ft-chart\n<em>options</em> [broken/optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p><em>series</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>suffix</em> [optional] used in tooltip</p>\n<p><em>valPrefix</em> [optional] used in tooltip</p>\n<p><em>categories</em> [optional] used to set chart categories,\nsee <a href=\"http://api.highcharts.com/highcharts/xAxis.categories\">http://api.highcharts.com/highcharts/xAxis.categories</a></p>\n<p>WORKAROUND: once options works this can be refactored / removed\n<em>ytitle</em> [optional] used to set chart y axis title,\nsee <a href=\"http://api.highcharts.com/highcharts/xAxis.title\">http://api.highcharts.com/highcharts/xAxis.title</a></p>\n",
"components/common/elements/charting/ft-multi-bar-chart/ft-multi-bar-chart.md": "<h1 id=\"ft-bar-chart\">ft-bar-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-bar-chart</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">data.bind</span>=<span class=\"hljs-string\">\"data\"</span>\n <span class=\"hljs-attr\">suffix.bind</span>=<span class=\"hljs-string\">\"suffix\"</span>\n <span class=\"hljs-attr\">prefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-bar-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>FIXME: should be refactored to work as per ft-chart\n<em>options</em> [broken/optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p>FIXME: looks like a bug workaround, default options are ignored as are binded options, for a getter\n<em>series</em> [broken] accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p>FIXME: looks like a bug workaround who ever built this originally wasn&#39;t familiar with highcharts, should be only series\n<em>data</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>suffix</em> [optional] used in tooltip</p>\n<p><em>prefix</em> [optional] used in tooltip</p>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n",
"components/common/elements/charting/ft-performance-cumulative-chart/ft-performance-cumulative-chart.md": "<h1 id=\"ft-performance-cumulative-chart\">ft-performance-cumulative-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative-chart</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">data.bind</span>=<span class=\"hljs-string\">\"data\"</span>\n <span class=\"hljs-attr\">valPrefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">navDecimal.bind</span>=<span class=\"hljs-string\">\"navDecimal\"</span>\n <span class=\"hljs-attr\">graphNames.bind</span>=<span class=\"hljs-string\">\"graphNames\"</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n &gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>options</em> [optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p>FIXME: looks like a bug workaround, should be only series\n<em>series</em> [broken] accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p>FIXME: looks like a bug workaround who ever built this originally wasn&#39;t familiar with highcharts, should be only series\n<em>data</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>valPrefix</em> [optional] used in tooltip,\n@see <a href=\"http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valuePrefix\">http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valuePrefix</a></p>\n<p><em>navDecimal</em> [optional] used in tooltip,\n@see <a href=\"http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valueDecimals\">http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valueDecimals</a></p>\n<p>FIXME: looks like a bug workaround, should be only series, this should be in series\n<em>graphNames</em> [optional] used in series generation</p>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n",
"components/common/elements/charting/ft-pie-chart/ft-pie-chart.md": "<h1 id=\"ft-pie-chart\">ft-pie-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-pie-chart</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">data.bind</span>=<span class=\"hljs-string\">\"data\"</span>\n <span class=\"hljs-attr\">prefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">suffix.bind</span>=<span class=\"hljs-string\">\"suffix\"</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n &gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-pie-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>options</em> [optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p>FIXME: looks like a bug workaround, should be only series\n<em>series</em> [broken] accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p>FIXME: looks like a bug workaround who ever built this originally wasn&#39;t familiar with highcharts, should be only series\n<em>data</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>prefix</em> [optional] used in tooltip</p>\n<p><em>suffix</em> [optional] used in tooltip</p>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n",
"components/marketing/common/elements/ft-multi-select-bar/ft-multi-select-bar.md": "<h1 id=\"ft-multi-select-bar\">ft-multi-select-bar</h1>\n<p>This bar is used by doc listers and doc archive marketting components.\nIt shoulds a bar with options to download, edit, email and subscribe (removed for now).</p>\n<p>Requires:</p>\n<ul>\n<li>multiselect - a boolean to say if multi section is turn on</li>\n<li>selected - a list of documents</li>\n<li>onSelectDocument - a function in the parent component to handle actions on selcting a document</li>\n</ul>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-multi-select-bar</span> <span class=\"hljs-attr\">multiselect.two-way</span>=<span class=\"hljs-string\">\"multiselect\"</span> <span class=\"hljs-attr\">selected.bind</span>=<span class=\"hljs-string\">\"selected\"</span> <span class=\"hljs-attr\">on-selected.bind</span>=<span class=\"hljs-string\">\"onSelectDocument\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-multi-select-bar</span>&gt;</span>\n</code></pre>\n",
"components/marketing/common/elements/ft-gateway/ft-gateway.md": "<h1 id=\"ft-gateway\">ft-gateway</h1>\n<h2 id=\"usage\">Usage</h2>\n",
"components/products/distributions/en-us-retail/ft-distributions/ft-distributions.md": "<h1 id=\"ft-distributions\">ft-distributions</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-distributions</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-distributions</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/distributions/en-us-retail/ft-distributions-ytd/ft-distributions-ytd.md": "<h1 id=\"ft-distributions-ytd\">ft-distributions-ytd</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-distributions-ytd</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-distributions-ytd</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/common/elements/ft-caveats/ft-caveats.md": "<h1 id=\"ft-caveats\">ft-caveats</h1>\n<p>This component displays important legal imformation and (optionally) footnotes for the page. You can have multiple instances on a page, as long as the <code>placement</code> is unique.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-caveats</span> <span class=\"hljs-attr\">placement</span>=<span class=\"hljs-string\">\"PPSSTop\"</span> <span class=\"hljs-attr\">footnotes</span>=<span class=\"hljs-string\">\"No\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-caveats</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><code>footnotes</code> attribute (default &#39;Yes&#39;) determines if footnotes will be displayed in this instance (if they exist). The user might set this to &#39;No&#39; if an instance was being placed at the top of the page, to show legal info only.</p>\n<p>To view debug info, appeand <code>?debug=caveats</code> to the page URL.</p>\n<p>Filtering by segment, fund id etc has already been done in the caveats reducer.</p>\n",
"components/products/common/elements/ft-dropdown/ft-dropdown.md": "<h1 id=\"ft-dropdown\">ft-dropdown</h1>\n<p>TODO: update docs!!\nThis common component creates a dropdown filter that the user can change.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-dropdown</span> <span class=\"hljs-attr\">filter.bind</span>=<span class=\"hljs-string\">\"filter\"</span>\n <span class=\"hljs-attr\">selected.bind</span>=<span class=\"hljs-string\">\"filter.selected\"</span>\n <span class=\"hljs-attr\">label.one-time</span>=<span class=\"hljs-string\">\"label\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-dropdown</span>&gt;</span>\n</code></pre>\n<p><code>filter</code> - is an object describing the dropdown&#39;s state e.g:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">name</span>: <span class=\"hljs-string\">'ASSET_CLASS'</span>,\n <span class=\"hljs-attr\">labelKey</span>: <span class=\"hljs-string\">'assetclass'</span>,\n <span class=\"hljs-attr\">dataKey</span>: <span class=\"hljs-string\">'assetClass'</span>,\n <span class=\"hljs-attr\">selected</span>: {<span class=\"hljs-attr\">value</span>: <span class=\"hljs-string\">'Equity'</span>, <span class=\"hljs-attr\">label</span>: <span class=\"hljs-string\">'Equity'</span>},\n <span class=\"hljs-attr\">options</span>: [\n {<span class=\"hljs-string\">\"label\"</span>: <span class=\"hljs-string\">\"Equity\"</span>, <span class=\"hljs-string\">\"value\"</span>: <span class=\"hljs-string\">\"Equity\"</span>},\n {<span class=\"hljs-string\">\"label\"</span>: <span class=\"hljs-string\">\"Fixed Income\"</span>, <span class=\"hljs-string\">\"value\"</span>: <span class=\"hljs-string\">\"Fixed Income\"</span>}\n ]\n}\n</code></pre>\n<ul>\n<li><code>name</code> - constant used to identify the filter</li>\n<li><code>labelkey</code> - key used to get the dropdown&#39;s title to display from the <code>label</code> object</li>\n<li><code>dataKey</code> - corresponds to the <code>fund</code> property that will be compared when filtering</li>\n<li><code>selected</code> - label/value object that corresponds ot the currently selected option</li>\n<li><code>options</code> - Array of label/value objects representing options the user can select. <strong>NB</strong> value could be an array e.g. <code>{value: [&#39;A&#39;, &#39;A1&#39;], label: &#39;A &amp; A1&#39;}</code>. If this option were selected, funds that had a property with value &#39;A&#39; <strong>OR</strong> &#39;A1&#39; will be displayed.</li>\n</ul>\n<p><code>selected</code> - <strong>TODO</strong> This is a shortcut to the <code>filter</code>&#39;s <code>selected</code> property, so that binding will update when it changes. Ideally, this should not be needed if it&#39;s possible to watch the property.</p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>So far, this is only used inside the <code>ft-ppss-fund-filter</code> component.</p>\n<p>Filters will always have an <code>All</code> option.</p>\n<p>Dispatches the following action when user changes the value:</p>\n<pre><code class=\"hljs lang-javascript\">{\n <span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'PPSS_CHANGE_DROPDOWN'</span>,\n <span class=\"hljs-attr\">name</span>: <span class=\"hljs-keyword\">this</span>.filter.name,\n <span class=\"hljs-attr\">newValue</span>: option\n}\n</code></pre>\n",
"components/products/common/elements/ft-footnote/ft-footnote.md": "<h1 id=\"ft-footnote\">ft-footnote</h1>\n<p>This component provides a placeholder for a footnote superscript. One footnote tag can be associated with multiple footnotes. You can have multiple instances on a page, and the <code>fund-id</code> can be used to apply different footnotes to different instances.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-footnote</span> <span class=\"hljs-attr\">placement</span>=<span class=\"hljs-string\">\"DailyFundPricesPriceDistribution\"</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"123\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-footnote</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><code>placement</code> - id for this footnote. Matches a value defined in Sebastian&#39;s <a href=\"http://pc.frk.com/projects/Digital_Access_and_Enablement/Documents/Caveats-Matrix.xlsx?Web=1\">matrix</a></p>\n<p><code>fund-id</code> - (Optional) If set, the visible footnotes will be filtered further to those tagged with the fund-id, or DISPLAY-ALL.</p>\n<p>NB: the <code>placement</code> and <code>fund-id</code> are combined to form a unique <code>key</code>. If the <code>fund-id</code> is not set, the <code>key</code> will just be the <code>placement</code></p>\n<p><strong>NBB:</strong> If the <code>fund-id</code> attribute is used on a product specific page (ie <code>FundID</code> in the URL), then the <code>fund-id</code> attribute will be ignored.</p>\n<p>When the tag is attached to the DOM, it dispatches an action. If the caveat reducer finds corresponding footnotes defined, then they will appear inside a <code>&lt;ft-caveats&gt;</code> on the page and this tag will be passed the corresponding footnote number to display.</p>\n<p>To view debug info, appeand <code>?debug=caveats</code> to the page URL.</p>\n<p>Filtering by segment, fund id etc has already been done in the caveats reducer.</p>\n",
"components/products/common/elements/ft-fund-alert/ft-fund-alert.md": "<h1 id=\"ft-fund-alert\">ft-fund-alert</h1>\n<p>This component displays any fund alerts that match the <code>fundId</code> and (optionally) <code>ShareClass</code>.\nThe alert contents can be toggled open/close.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-alert</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-alert</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Uses <code>fund-id</code> attribute to filter appropriate alerts.\nThe <code>ShareClass</code> comes from a url param via the state.</p>\n",
"components/products/common/elements/ft-fund-alert-banner/ft-fund-alert-banner.md": "<h1 id=\"ft-fund-alert-banner\">ft-fund-alert-banner</h1>\n<p>This component displays a yellow fund alert under the fund title, that matches the <code>fundId</code> and (optionally) <code>ShareClass</code>.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-alert-banner</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-alert-banner</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Uses <code>fund-id</code> attribute to filter appropriate alerts.\nThe <code>ShareClass</code> comes from a url param via the state.</p>\n",
"components/products/common/elements/ft-labels/ft-labels.md": "<h1 id=\"ft-labels\">ft-labels</h1>\n<p><em><code>&lt;ft-labels&gt;</code> is a label related component.</em></p>\n<p>The sole purpose of ft-labels is to load the correct labels for the page.</p>\n<p>It requires a specific bean <em>labels</em></p>\n<pre><code class=\"hljs lang-json\">component: {\n labels: [\n 'etf.labels'\n ]\n }\n</code></pre>\n<p>It should be placed on the page before any other components to ensure that the labels are loaded before anything else.</p>\n<h3 id=\"example-usage\">Example usage</h3>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-labels</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-labels</span>&gt;</span>\n</code></pre>\n",
"components/products/common/elements/ft-proximal/ft-proximal.md": "<h1 id=\"ft-proximal\">ft-proximal</h1>\n<p>Proximals are usually placed at the top and bottom of each component or section. However, in theory you can have as many positions as you like.</p>\n<p>A single proximal tag can display multiple proximals if there are several defined for it in teamsite.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-proximal</span> <span class=\"hljs-attr\">placement</span>=<span class=\"hljs-string\">\"DailyPricesProximal\"</span> <span class=\"hljs-attr\">position</span>=<span class=\"hljs-string\">\"top\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-proximal</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><code>placement</code> and <code>position</code> attributes are required. The placement corresponds to the <em>Taxonomy ID</em> in the Caveats Matrix.</p>\n<p>To view debug info, appeand <code>?debug=caveats</code> to the page URL.</p>\n<p>Filtering by segment, fund id etc has already been done in the caveats reducer.</p>\n",
"components/products/historical/en-us-retail/ft-historical-average-annual-total-returns/ft-historical-average-annual-total-returns.md": "<h1 id=\"ft-historical-average-annual-total-returns\">ft-historical-average-annual-total-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-historical-average-annual-total-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-historical-average-annual-total-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/historical/en-us-retail/ft-historical-cumulative-total-returns/ft-historical-cumulative-total-returns.md": "<h1 id=\"ft-historical-cumulative-total-returns\">ft-historical-cumulative-total-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-historical-cumulative-total-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-historical-cumulative-total-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/lib/reducers/fund-config/config-loader.reducer.md": "<h1 id=\"config-loader-reducer\">Config-loader Reducer</h1>\n<p>Loads the configuration data for the components.</p>\n<h3 id=\"how-to-access-configuration-data\">How to access configuration data</h3>\n<p>In your component file, you have to get access to the currentState to be able to access the configuration data.</p>\n<pre><code class=\"hljs lang-js\"><span class=\"hljs-keyword\">const</span> currentState = store.getState();\n</code></pre>\n<p>Should be added after super(store).</p>\n<p>Then in the dispatch object, you should add a new reference to actor &amp; config.</p>\n<pre><code class=\"hljs lang-js\">actor: currentState.general.segment,\n<span class=\"hljs-attr\">config</span>: currentState.products.config\n</code></pre>\n<p>So your constructor should be similar to the following:</p>\n<pre><code class=\"hljs lang-js\"><span class=\"hljs-keyword\">constructor</span>(store, beans, element) {\n <span class=\"hljs-comment\">// add logging and integration with the data store</span>\n <span class=\"hljs-keyword\">super</span>(store);\n <span class=\"hljs-keyword\">const</span> currentState = store.getState();\n <span class=\"hljs-keyword\">this</span>.fundId = element.getAttribute(<span class=\"hljs-string\">'fund-id'</span>);\n <span class=\"hljs-keyword\">this</span>.cid = element.getAttribute(<span class=\"hljs-string\">'cid'</span>);\n <span class=\"hljs-keyword\">this</span>.portfolioComponent = <span class=\"hljs-string\">'sector-allocation'</span>;\n <span class=\"hljs-keyword\">this</span>.assetClass = <span class=\"hljs-string\">'Equity'</span>;\n <span class=\"hljs-keyword\">this</span>.portfolioBeans = beans.component.portfolioSectorAllocation;\n <span class=\"hljs-keyword\">this</span>.portfolioBeans.push(<span class=\"hljs-keyword\">this</span>.cid);\n\n <span class=\"hljs-comment\">// This is a top level component so we need to initiate the population</span>\n <span class=\"hljs-keyword\">this</span>.dispatch({\n <span class=\"hljs-attr\">type</span>: <span class=\"hljs-string\">'POPULATE_SECTOR_ALLOCATION'</span>,\n <span class=\"hljs-attr\">beans</span>: <span class=\"hljs-keyword\">this</span>.portfolioBeans,\n <span class=\"hljs-attr\">fundId</span>: <span class=\"hljs-keyword\">this</span>.fundId,\n <span class=\"hljs-attr\">cid</span>: <span class=\"hljs-keyword\">this</span>.cid,\n <span class=\"hljs-attr\">portfolioComponent</span>: <span class=\"hljs-keyword\">this</span>.portfolioComponent,\n <span class=\"hljs-attr\">assetClass</span>: <span class=\"hljs-keyword\">this</span>.assetClass,\n <span class=\"hljs-attr\">actor</span>: currentState.general.segment,\n <span class=\"hljs-attr\">config</span>: currentState.products.config\n });\n }\n</code></pre>\n<p>When this is done, the configuration data becomes available to reducers through the action object:</p>\n<pre><code class=\"hljs lang-js\">\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">_getFundStaticBarData</span>(<span class=\"hljs-params\">action</span>) </span>{\n <span class=\"hljs-keyword\">const</span> [rawPrice] = action.json;\n <span class=\"hljs-keyword\">const</span> config = action.config;\n}\n</code></pre>\n<h2 id=\"testing\">Testing</h2>\n<p>This modification will affect UI tests, as the component will now require configuration data and a <em>state</em> to be passed into it.</p>\n<p>To do so a stateMock must be added to the UI test, for example:</p>\n<pre><code class=\"hljs lang-js\"><span class=\"hljs-keyword\">const</span> stateMock = {\n <span class=\"hljs-attr\">general</span>: {\n <span class=\"hljs-attr\">segment</span>: <span class=\"hljs-string\">'investor'</span>\n },\n <span class=\"hljs-attr\">products</span>: {\n <span class=\"hljs-attr\">config</span>: {\n <span class=\"hljs-attr\">general</span>: {\n <span class=\"hljs-attr\">segment</span>: <span class=\"hljs-string\">'investor'</span>\n },\n <span class=\"hljs-attr\">products</span>: {\n <span class=\"hljs-attr\">config</span>: {\n <span class=\"hljs-string\">'all'</span>: {\n <span class=\"hljs-string\">'issuersList'</span>: [<span class=\"hljs-string\">'2183'</span>, <span class=\"hljs-string\">'4820'</span>, <span class=\"hljs-string\">'658'</span>],\n <span class=\"hljs-string\">'riskColumns'</span>: {<span class=\"hljs-string\">'riskColumn'</span>: [<span class=\"hljs-string\">'defensive'</span>, <span class=\"hljs-string\">'growth'</span>, <span class=\"hljs-string\">'stable'</span>, <span class=\"hljs-string\">'opportunistic'</span>]},\n <span class=\"hljs-string\">'showManagerLinks'</span>: <span class=\"hljs-literal\">true</span>,\n <span class=\"hljs-string\">'haveSuppressionSets'</span>: <span class=\"hljs-literal\">false</span>\n },\n <span class=\"hljs-string\">'investor'</span>: {\n <span class=\"hljs-string\">'showOpportunisticRisk'</span>: [<span class=\"hljs-string\">'18904'</span>, <span class=\"hljs-string\">'18905'</span>, <span class=\"hljs-string\">'18906'</span>, <span class=\"hljs-string\">'20815'</span>, <span class=\"hljs-string\">'17593'</span>, <span class=\"hljs-string\">'14933'</span>, <span class=\"hljs-string\">'11520'</span>],\n <span class=\"hljs-string\">'showGrowthRisk'</span>: [<span class=\"hljs-string\">'17594'</span>],\n <span class=\"hljs-string\">'suppressionSets'</span>: {\n <span class=\"hljs-string\">'suppressionSet'</span>: [{\n <span class=\"hljs-string\">'funds'</span>: [<span class=\"hljs-string\">'18905'</span>],\n <span class=\"hljs-string\">'id'</span>: <span class=\"hljs-string\">'equity-1'</span>,\n <span class=\"hljs-string\">'assetClasses'</span>: [<span class=\"hljs-string\">'Equity'</span>],\n <span class=\"hljs-string\">'portfolioComponents'</span>: [<span class=\"hljs-string\">'currency-breakdown'</span>, <span class=\"hljs-string\">'geographic-allocation'</span>, <span class=\"hljs-string\">'market-capitalisation'</span>]\n }, {\n <span class=\"hljs-string\">'funds'</span>: [<span class=\"hljs-string\">'4346'</span>, <span class=\"hljs-string\">'4345'</span>, <span class=\"hljs-string\">'2378'</span>, <span class=\"hljs-string\">'18896'</span>, <span class=\"hljs-string\">'21374'</span>, <span class=\"hljs-string\">'12378'</span>, <span class=\"hljs-string\">'658'</span>, <span class=\"hljs-string\">'2183'</span>, <span class=\"hljs-string\">'15848'</span>, <span class=\"hljs-string\">'21414'</span>],\n <span class=\"hljs-string\">'id'</span>: <span class=\"hljs-string\">'suppression-set-2'</span>,\n <span class=\"hljs-string\">'assetClasses'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'portfolioComponents'</span>: [<span class=\"hljs-string\">'asset-class-exposure'</span>, <span class=\"hljs-string\">'holdings'</span>, <span class=\"hljs-string\">'manager-roster-manager-allocation'</span>]\n }]\n },\n <span class=\"hljs-string\">'showDefensiveRisk'</span>: [<span class=\"hljs-string\">'18906'</span>, <span class=\"hljs-string\">'18318'</span>, <span class=\"hljs-string\">'18904'</span>],\n <span class=\"hljs-string\">'showStableRisk'</span>: [<span class=\"hljs-string\">'18904'</span>, <span class=\"hljs-string\">'18319'</span>, <span class=\"hljs-string\">'18906'</span>],\n <span class=\"hljs-string\">'haveSuppressionSets'</span>: <span class=\"hljs-literal\">true</span>\n },\n <span class=\"hljs-string\">'institutional'</span>: {\n <span class=\"hljs-string\">'showOpportunisticRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'showGrowthRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'suppressionSets'</span>: {\n <span class=\"hljs-string\">'suppressionSet'</span>: [{\n <span class=\"hljs-string\">'funds'</span>: [<span class=\"hljs-string\">'16673'</span>, <span class=\"hljs-string\">'18904'</span>, <span class=\"hljs-string\">'18905'</span>, <span class=\"hljs-string\">'18906'</span>, <span class=\"hljs-string\">'18318'</span>, <span class=\"hljs-string\">'18319'</span>],\n <span class=\"hljs-string\">'id'</span>: <span class=\"hljs-string\">'suppression-set-1'</span>,\n <span class=\"hljs-string\">'assetClasses'</span>: [<span class=\"hljs-string\">'Money Funds'</span>, <span class=\"hljs-string\">'Multi-Asset'</span>],\n <span class=\"hljs-string\">'portfolioComponents'</span>: [<span class=\"hljs-string\">'geographic-exposure'</span>]\n }]\n },\n <span class=\"hljs-string\">'showDefensiveRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'showStableRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'haveSuppressionSets'</span>: <span class=\"hljs-literal\">true</span>\n },\n <span class=\"hljs-string\">'adviser'</span>: {\n <span class=\"hljs-string\">'showOpportunisticRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'showGrowthRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'suppressionSets'</span>: {<span class=\"hljs-string\">'suppressionSet'</span>: <span class=\"hljs-string\">''</span>},\n <span class=\"hljs-string\">'showDefensiveRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'showStableRisk'</span>: [<span class=\"hljs-string\">''</span>],\n <span class=\"hljs-string\">'haveSuppressionSets'</span>: <span class=\"hljs-literal\">false</span>\n }\n }\n }\n }\n }\n };\n</code></pre>\n<p>This one is specific for Portfolio pages, other pages will be required to contain the correct data.</p>\n<p>The updated mockStore function should be included, as this includes the getState functionality.</p>\n<pre><code class=\"hljs lang-js\"><span class=\"hljs-keyword\">import</span> {getMockStore} <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'../../../../lib/test-utils.js'</span>;\n</code></pre>\n<p>It is then used in the before each like this:</p>\n<pre><code class=\"hljs lang-js\"> beforeEach(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =&gt;</span> {\n mockStore = getMockStore(stateMock);\n</code></pre>\n<p>Doing this will load the stateMock data into the mockStore and make it available to the component via <em>getState</em>.</p>\n",
"components/products/performance/en-us-retail/ft-average-annual-total-returns/ft-average-annual-total-returns.md": "<h1 id=\"ft-average-annual-total-returns\">ft-average-annual-total-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-average-annual-total-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-average-annual-total-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>So far only built for US market, have not seen analogue in other markets. Probably a bit too specific for replicatoin/\ndata changes. This was an early set of files, and much has been learned since.</p>\n",
"components/products/performance/en-us-retail/ft-after-tax-average-annual-returns/ft-after-tax-average-annual-returns.md": "<h1 id=\"ft-after-tax-average-annual-returns\">ft-after-tax-average-annual-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-after-tax-average-annual-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-after-tax-average-annual-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>So far only built for US market, have not seen analogue in other markets. Probably a bit too specific for replicatoin/\ndata changes. This was an early set of files, and much has been learned since.</p>\n",
"components/products/performance/en-us-retail/ft-expenses-volatility-benchmarks/ft-expenses-volatility-benchmarks.md": "<h1 id=\"ft-expenses-volatility-benchmarks\">ft-expenses-volatility-benchmarks</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-expenses-volatility-benchmarks</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-expenses-volatility-benchmarks</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/performance/ft-backtested-performance-annualised/etf/ft-backtested-performance-annualised.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Handoff from Jason: Fairly complete and good QA response so far for ETF. Will need modals and the like.</p>\n",
"components/products/performance/ft-backtested-performance-calendar/etf/ft-backtested-performance-calendar.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Handoff from Jason: Fairly complete and good QA response so far for ETF. Will need modals and the like.</p>\n",
"components/products/performance/ft-backtested-performance-cumulative/etf/ft-backtested-performance-cumulative.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>Handoff from Jason: Fairly complete and good QA response so far for ETF. Will need modals and the like.</p>\n",
"components/products/performance/ft-calendar-year-returns/en-us-retail/ft-calendar-year-returns.md": "<h1 id=\"ft-calendar-year-returns\">ft-calendar-year-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-calendar-year-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">show-chart</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">span-row</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-calendar-year-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/performance/ft-calendar-year-returns/etf/ft-calendar-year-returns.md": "<h1 id=\"ft-calendar-year-returns\">ft-calendar-year-returns</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-calendar-year-returns</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">show-chart</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">span-row</span>=<span class=\"hljs-string\">\"true\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-calendar-year-returns</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/performance/ft-performance-annualised/etf/ft-performance-annualised.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-annualised</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"21412\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-annualised</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>This is the reducer for ETF annualised performances, largely following the pattern of the later Performance pieces.</p>\n",
"components/products/performance/ft-performance-cumulative/en-us-retail/ft-performance-cumulative.md": "<h1 id=\"ft-performance-cumulative\">ft-performance-cumulative</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-performance-cumulative</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-performance-cumulative</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/overview/en-us-retails/ft-fund-mmfr-stable-nav-header/ft-fund-mmfr-stable-nav-header.md": "<h1 id=\"ft-fund-mmfr-stable-nav-header\">ft-fund-mmfr-stable-nav-header</h1>\n<h2 id=\"usage\">Usage</h2>\n<p>Not directly used, it is a sub component of ft-fund-static-bar</p>\n",
"components/products/overview/en-us-retails/ft-fund-nav-header/ft-fund-nav-header.md": "<h1 id=\"ft-fund-nav-header\">ft-fund-nav-header</h1>\n<h2 id=\"usage\">Usage</h2>\n<p>Not directly used, it is a sub component of ft-fund-static-bar</p>\n",
"components/products/overview/en-us-retails/ft-fund-price-header/ft-fund-price-header.md": "<h1 id=\"ft-fund-price-header\">ft-fund-price-header</h1>\n<h2 id=\"usage\">Usage</h2>\n<p>Not directly used, it is a sub component of ft-fund-static-bar</p>\n",
"components/products/overview/ft-fund-information/etf/ft-fund-information.md": "<h1 id=\"ft-fund-information\">ft-fund-information</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<p>Typically used with to create overview section like so</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"c6597806534352\"</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"25799\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/overview/ft-fund-information/gw/ft-fund-information.md": "<h1 id=\"ft-fund-information\">ft-fund-information</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<p>Typically used with to create overview section like so</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"c6597806534352\"</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"25799\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/overview/ft-fund-static-bar/en-us-retail/ft-fund-static-bar.md": "<h1 id=\"ft-fund-static-bar\">ft-fund-static-bar</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-static-bar</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-static-bar</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>A lot of work has been done to provide the data for any of the other components which might appear inside the fund static bar.</p>\n<p>However at the moment, this is not required, so the majority of the code has been commented out.</p>\n<p>This includes a number of functions which gather other pieces of data.</p>\n<p>If the data is required in the future then the code just needs to be uncommented.</p>\n",
"components/products/overview/ft-trading-information/etf/ft-trading-information.md": "<h1 id=\"ft-fund-information\">ft-fund-information</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<p>You can set the default exchange using the attribute &#39;default-exchange&#39;</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">default-exchange</span>=<span class=\"hljs-string\">\"London Stock Exchange\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-information</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-asset-class-exposure/ft-asset-class-exposure.md": "<h1 id=\"ft-asset-class-exposure\">ft-asset-class-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-asset-class-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-asset-class-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-asset-mix/ft-asset-mix.md": "<h1 id=\"ft-asset-mix\">ft-asset-mix</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-asset-mix</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-asset-mix</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-category-fund-list/ft-category-fund-list.md": "<h1 id=\"ft-category-fund-list\">ft-category-fund-list</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-category-fund-list</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-category-fund-list</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-commodities-sector-breakdown/ft-commodities-sector-breakdown.md": "<h1 id=\"ft-commodities-sector-breakdown\">ft-commodities-sector-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-commodities-sector-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-commodities-sector-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-coupon-rate-breakdown/ft-coupon-rate-breakdown.md": "<h1 id=\"ft-coupon-rate-breakdown\">ft-coupon-rate-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-coupon-rate-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-coupon-rate-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-credit-quality-exposure/ft-credit-quality-exposure.md": "<h1 id=\"ft-credit-quality-exposure\">ft-credit-quality-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-credit-quality-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-credit-quality-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-currency-distribution/ft-currency-distribution.md": "<h1 id=\"ft-currency-distribution\">ft-currency-distribution</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-currency-distribution</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-currency-distribution</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-fixed-income-sector-breakdown/ft-fixed-income-sector-breakdown.md": "<h1 id=\"ft-fixed-income-sector-breakdown\">ft-fixed-income-sector-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fixed-income-sector-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fixed-income-sector-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-geographic-exposure/ft-geographic-exposure.md": "<h1 id=\"ft-geographic-exposure\">ft-geographic-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-geographic-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-maturity-breakdown/ft-maturity-breakdown.md": "<h1 id=\"ft-maturity-breakdown\">ft-maturity-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-maturity-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-maturity-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-manager-roster/ft-manager-roster.md": "<h1 id=\"ft-manager-roster\">ft-manager-roster</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-manager-roster</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-manager-roster</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-quality-breakdown/ft-quality-breakdown.md": "<h1 id=\"ft-quality-breakdown\">ft-quality-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-quality-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-quality-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-sector-breakdown/ft-sector-breakdown.md": "<h1 id=\"ft-daily-prices-and-breakpoints\">ft-daily-prices-and-breakpoints</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-sector-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-sector-breakdown</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-sector-exposure/ft-sector-exposure.md": "<h1 id=\"ft-sector-exposure\">ft-sector-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-sector-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-sector-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>This component comes includes 2 versions, one with chart and table, one with collapsing table.</p>\n<p>eg:</p>\n<ul>\n<li><a href=\"https://www.franklintempleton.com/investor/products/mutual-funds/portfolio?FundID=948\">https://www.franklintempleton.com/investor/products/mutual-funds/portfolio?FundID=948</a></li>\n<li><a href=\"https://www.franklintempleton.com/investor/products/mutual-funds/portfolio?FundID=283\">https://www.franklintempleton.com/investor/products/mutual-funds/portfolio?FundID=283</a></li>\n</ul>\n",
"components/products/portfolio/en-us-retail/ft-statistics-and-positions/ft-statistics-and-positions.md": "<h1 id=\"ft-statistics-and-positions\">ft-statistics-and-positions</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-statistics-and-positions</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-statistics-and-positions</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-strategy-breakdown/ft-strategy-breakdown.md": "<h1 id=\"ft-strategy-breakdown\">ft-strategy-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-strategy-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-strategy-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/en-us-retail/ft-top-exposures/ft-top-exposures.md": "<h1 id=\"ft-top-exposures\">ft-top-exposures</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-top-exposures</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-top-exposures</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-asset-allocation/gw/ft-asset-allocation.md": "<h1 id=\"ft-asset-allocation\">ft-asset-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-asset-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-asset-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-asset-allocation Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-asset-class-exposure/gw/ft-asset-class-exposure.md": "<h1 id=\"ft-asset-class-exposure\">ft-asset-class-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-asset-class-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-asset-class-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-average-portfolio-exposure/gw/ft-average-portfolio-exposure.md": "<h1 id=\"average-portfolio-exposure\">average-portfolio-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">average-portfolio-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">average-portfolio-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-currency-breakdown/gw/ft-currency-breakdown.md": "<h1 id=\"ft-currency-breakdown\">ft-currency-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-currency-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-currency-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-currency-breakdown Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-fund-measures/gw/ft-fund-measures.md": "<h1 id=\"ft-fund-measures\">ft-fund-measures</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-fund-measures</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-fund-measures</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-geographic-allocation/etf/ft-geographic-allocation.md": "<h1 id=\"ft-geographic-allocation\">ft-geographic-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-geographic-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-geographic-breakdown/gw/ft-geographic-breakdown.md": "<h1 id=\"ft-geographic-breakdown\">ft-geographic-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-geographic-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-geographic-breakdown Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-geographic-breakdown/en-us-retail/ft-geographic-breakdown.md": "<h1 id=\"ft-geographic-breakdown\">ft-geographic-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-geographic-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<pre><code class=\"hljs\">sumBy(lstDtls, (o) => { return (o.val.alt * 100); } ) / 100;\n</code></pre>\n<p>The chart data is totaled using values multiplied by 100 to avoid doing maths on decimal numbers.</p>\n",
"components/products/portfolio/ft-geographic-exposure/gw/ft-geographic-exposure.md": "<h1 id=\"ft-geographic-exposure\">ft-geographic-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-geographic-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-geographic-breakdown Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-manager-roster/gw/ft-manager-roster.md": "<h1 id=\"ft-manager-roster-and-allocation\">ft-manager-roster-and-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-manager-roster-and-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-manager-roster-and-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-holdings/etf/ft-holdings.md": "<h1 id=\"ft-holdings\">ft-holdings</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-holdings</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"25802\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-holdings</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The holdings component displays a filterable and pageable table, listing all holdings for this fund.</p>\n<p>Configuration is done in the redux state at <code>products.app.holdings</code>.</p>\n",
"components/products/portfolio/ft-portfolio-exposure/gw/ft-portfolio-exposure.md": "<h1 id=\"portfolio-exposure\">portfolio-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">portfolio-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">portfolio-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-portfolio-risk-and-return-analysis/gw/ft-portfolio-risk-and-return-analysis.md": "<h1 id=\"ft-portfolio-risk-and-return-analysis\">ft-portfolio-risk-and-return-analysis</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-risk-and-return-analysis</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-geographic-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-portfolio-statistics-and-positions/en-us-retail/ft-portfolio-statistics-and-positions.md": "<h1 id=\"ft-portfolio-statistics-and-positions\">ft-portfolio-statistics-and-positions</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-portfolio-statistics-and-positions/etf/ft-portfolio-statistics-and-positions.md": "<h1 id=\"ft-portfolio-statistics-and-positions\">ft-portfolio-statistics-and-positions</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-portfolio-statistics-and-positions/gw/ft-portfolio-statistics-and-positions.md": "<h1 id=\"ft-portfolio-statistics-and-positions\">ft-portfolio-statistics-and-positions</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-risk-contribution/gw/ft-risk-contribution.md": "<h1 id=\"ft-risk-contribution\">ft-risk-contribution</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-risk-contribution</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-risk-contribution</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-risk-contribution Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-sector-allocation/etf/ft-sector-allocation.md": "<h1 id=\"ft-sector-allocation\">ft-sector-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-sector-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-sector-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-sector-allocation/gw/ft-sector-allocation.md": "<h1 id=\"ft-sector-allocation\">ft-sector-allocation</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-sector-allocation</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-sector-allocation</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-sector-allocation Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-sector-exposure/gw/ft-sector-exposure.md": "<h1 id=\"ft-sector-exposure\">ft-sector-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-sector-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-sector-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-sector-exposure Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-security-type-exposure/gw/ft-security-type-exposure.md": "<h1 id=\"ft-security-type-exposure\">ft-security-type-exposure</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-security-type-exposure</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-security-type-exposure</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>ft-security-type-exposure Int &amp; ETF use the same front end Aurelia component, they have separate reducers.</p>\n",
"components/products/portfolio/ft-strategy-breakdown/gw/ft-strategy-breakdown.md": "<h1 id=\"ft-strategy-breakdown\">ft-strategy-breakdown</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-strategy-breakdown</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-currency-breakdown</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-top-risk-allocation-by-asset-class/gw/ft-top-risk-allocation-by-asset-class.md": "<h1 id=\"ft-top-risk-allocation-by-asset-class\">ft-top-risk-allocation-by-asset-class</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-top-risk-allocation-by-asset-class</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-top-risk-allocation-by-asset-class</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-top-ten-holdings/en-us-retail/ft-top-ten-holdings.md": "<h1 id=\"ft-top-ten-holdings\">ft-top-ten-holdings</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-top-ten-holdings</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-top-ten-holdings</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-top-ten-holdings/gw/ft-top-ten-holdings.md": "<h1 id=\"ft-top-ten-holdings\">ft-top-ten-holdings</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-top-ten-holdings</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"800\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-top-ten-holdings</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/portfolio/ft-value-at-risk/gw/ft-value-at-risk.md": "<h1 id=\"ft-value-at-risk\">ft-value-at-risk</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-value-at-risk</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-value-at-risk</span>&gt;</span>\n</code></pre>\n<p><em>The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.</em></p>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/pricing/en-us-retail/ft-daily-prices-and-breakpoints/ft-daily-prices-and-breakpoints.md": "<h1 id=\"ft-daily-prices-and-breakpoints\">ft-daily-prices-and-breakpoints</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-daily-prices-and-breakpoints</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">historical-data-url</span>=<span class=\"hljs-string\">\"/en-us-retail/investor/products/mutual-funds/historical/historical-distributions.page?FundID=325\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-daily-prices-and-breakpoints</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/pricing/en-us-retail/ft-pricing-at-nav/ft-pricing-at-nav.md": "<h1 id=\"ft-pricing-at-nav\">ft-pricing-at-nav</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-pricing-at-nav</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-pricing-at-nav</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/tax/en-us-retail/ft-additional-tax-information/ft-additional-tax-information.md": "<h1 id=\"ft-additional-tax-information\">ft-additional-tax-information</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-additional-tax-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-additional-tax-information</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/tax/en-us-retail/ft-tax-information/ft-tax-information.md": "<h1 id=\"ft-tax-information\">ft-tax-information</h1>\n<p>placeholder</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-tax-information</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"817\"</span> <span class=\"hljs-attr\">tax-year</span>=<span class=\"hljs-string\">\"2016\"</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-tax-information</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
"components/products/pricing/en-us-retail/ft-pricing-at-nav/charting/ft-pricing-at-nav-chart.md": "<h1 id=\"ft-pricing-at-nav-chart\">ft-pricing-at-nav-chart</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ft-pricing-at-nav-chart</span>\n <span class=\"hljs-attr\">hide-sm</span>=<span class=\"hljs-string\">\"true/false\"</span>\n <span class=\"hljs-attr\">options.bind</span>=<span class=\"hljs-string\">\"chartOptions\"</span>\n <span class=\"hljs-attr\">series.bind</span>=<span class=\"hljs-string\">\"chartSeries\"</span>\n <span class=\"hljs-attr\">data.bind</span>=<span class=\"hljs-string\">\"data\"</span>\n <span class=\"hljs-attr\">prefix.bind</span>=<span class=\"hljs-string\">\"prefix\"</span>\n <span class=\"hljs-attr\">navDecimal.bind</span>=<span class=\"hljs-string\">\"navDecimal\"</span>\n <span class=\"hljs-attr\">seriesName.bind</span>=<span class=\"hljs-string\">\"seriesName\"</span>\n &gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">ft-pricing-at-nav-chart</span>&gt;</span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p><em>hide-sm</em> [optional, defaults to false] is true/false, hides chart in small view ports</p>\n<p><em>options</em> [optional] is a standard high charts Object,\nsee <a href=\"http://api.highcharts.com/highcharts/\">http://api.highcharts.com/highcharts/</a></p>\n<p><em>series</em> [broken] accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p><em>data</em> accommodates single series as Object or Multiple Series as Array of Objects,\nsee <a href=\"http://api.highcharts.com/highcharts/series%3Cline%3E\">http://api.highcharts.com/highcharts/series%3Cline%3E</a></p>\n<p>FIXME: looks like a bug workaround, should be only series</p>\n<p><em>prefix</em> [optional] used in tooltip,\n@see <a href=\"http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valuePrefix\">http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valuePrefix</a></p>\n<p><em>navDecimal</em> [optional] used in tooltip,\n@see <a href=\"http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valueDecimals\">http://api.highcharts.com/highcharts/plotOptions.area.tooltip.valueDecimals</a></p>\n<p><em>seriesName</em> [optional] looks like a bug workaround, should be only series</p>\n<p>FIXME: looks like a bug workaround, should be only series, this should be in series</p>\n"
}
}
Reference in New Issue View Git Blame Copy Permalink