mirror of
https://gitlab.silvrtree.co.uk/martind2000/ft.git
synced 2025-01-11 00:05:08 +00:00
319 lines
183 KiB
JSON
319 lines
183 KiB
JSON
{
|
|
"index": [
|
|
{
|
|
"section": "General",
|
|
"regex": "^README.md|developer-notes/general|lib",
|
|
"pages": [
|
|
"README.md",
|
|
"lib/component-base.md",
|
|
"lib/paging-utils.md",
|
|
"lib/redux-component-base.md",
|
|
"lib/sort-utils.md",
|
|
"lib/test-utils.md",
|
|
"developer-notes/general/chrome-plugins.md",
|
|
"developer-notes/general/environments.md",
|
|
"developer-notes/general/generators.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/reducer-utils.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Common Components",
|
|
"regex": "^components/common",
|
|
"pages": [
|
|
"components/common/attributes/share-class-link-listener.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-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-th-sortable/ft-th-sortable.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Marketing",
|
|
"regex": "^components/marketing",
|
|
"pages": [
|
|
"components/marketing/common/value-converters/ft-format-grid-cell.md",
|
|
"components/marketing/layouts/ft-choose-subscription/ft-choose-subscription-step1.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/grids/ft-grid-filter/ft-grid-filter.md",
|
|
"components/marketing/grids/ft-grid-filter-form/ft-grid-filter-form.md",
|
|
"components/marketing/grids/ft-grid-filter-dropdown/ft-grid-filter-dropdown.md",
|
|
"components/marketing/video/ft-video-switch/ft-video-switch.md",
|
|
"components/marketing/common/elements/ft-gateway/ft-gateway.md",
|
|
"components/marketing/common/elements/ft-multi-select-bar/ft-multi-select-bar.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Products",
|
|
"subs": [
|
|
{
|
|
"section": "General",
|
|
"regex": "^developer-notes/products",
|
|
"pages": [
|
|
"developer-notes/products/product-components-overview.md",
|
|
"developer-notes/products/useful-links.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Common components",
|
|
"regex": "^components/products/common/elements",
|
|
"pages": [
|
|
"components/products/common/elements/ft-footnote/ft-footnote.md",
|
|
"components/products/common/elements/ft-labels/ft-labels.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-ppss/ft-ppss.md",
|
|
"components/products/ppss/ft-ppss-favorite/ft-ppss-favorite.md",
|
|
"components/products/ppss/ft-ppss-etf/ft-ppss-etf-row.md",
|
|
"components/products/ppss/ft-ppss-etf/ft-ppss-etf.md",
|
|
"components/products/ppss/ft-ppss-fund-filter/ft-ppss-dropdown.md",
|
|
"components/products/ppss/ft-ppss-fund-filter/ft-ppss-fund-filter.md",
|
|
"components/products/ppss/ft-ppss-fund-identifiers/ft-ppss-fund-identifiers-row.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-row.md",
|
|
"components/products/ppss/ft-ppss-performance/ft-ppss-performance.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-yield/ft-ppss-yield-row.md",
|
|
"components/products/ppss/ft-ppss-yield/ft-ppss-yield.md",
|
|
"components/products/ppss/ft-ppss-table-toolbar/ft-ppss-table-toolbar.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Overview",
|
|
"regex": "^components/products/overview",
|
|
"pages": [
|
|
"components/products/overview/ft-fund-mmfr-stable-nav-header/ft-fund-mmfr-stable-nav-header.md",
|
|
"components/products/overview/ft-fund-price-header/ft-fund-price-header.md",
|
|
"components/products/overview/ft-fund-information/ft-fund-information.md",
|
|
"components/products/overview/ft-fund-nav-header/ft-fund-nav-header.md",
|
|
"components/products/overview/ft-fund-static-bar/ft-fund-static-bar.md",
|
|
"components/products/overview/ft-fund-trading-characteristics/ft-fund-trading-characteristics.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Portfolio",
|
|
"regex": "^components/products/portfolio",
|
|
"pages": [
|
|
"components/products/portfolio/ft-asset-class-exposure/ft-asset-class-exposure.md",
|
|
"components/products/portfolio/ft-commodities-sector-breakdown/ft-commodities-sector-breakdown.md",
|
|
"components/products/portfolio/ft-category-fund-list/ft-category-fund-list.md",
|
|
"components/products/portfolio/ft-coupon-rate-breakdown/ft-coupon-rate-breakdown.md",
|
|
"components/products/portfolio/ft-credit-quality-exposure/ft-credit-quality-exposure.md",
|
|
"components/products/portfolio/ft-currency-distribution/ft-currency-distribution.md",
|
|
"components/products/portfolio/ft-fixed-income-sector-breakdown/ft-fixed-income-sector-breakdown.md",
|
|
"components/products/portfolio/ft-geographic-allocation/ft-geographic-allocation.md",
|
|
"components/products/portfolio/ft-geographic-breakdown/ft-geographic-breakdown.md",
|
|
"components/products/portfolio/ft-holdings/ft-holdings.md",
|
|
"components/products/portfolio/ft-manager-roster/ft-manager-roster.md",
|
|
"components/products/portfolio/ft-market-capitalisation/ft-market-capitalisation.md",
|
|
"components/products/portfolio/ft-maturity-breakdown/ft-maturity-breakdown.md",
|
|
"components/products/portfolio/ft-portfolio-statistics-and-positions/ft-portfolio-statistics-and-positions.md",
|
|
"components/products/portfolio/ft-quality-breakdown/ft-quality-breakdown.md",
|
|
"components/products/portfolio/ft-sector-allocation/ft-sector-allocation.md",
|
|
"components/products/portfolio/ft-sector-exposure/ft-sector-exposure.md",
|
|
"components/products/portfolio/ft-strategy-breakdown/ft-strategy-breakdown.md",
|
|
"components/products/portfolio/ft-top-exposures/ft-top-exposures.md",
|
|
"components/products/portfolio/ft-top-ten-holdings/ft-top-ten-holdings.md",
|
|
"components/products/portfolio/util/util.md",
|
|
"components/products/portfolio/ft-geographic-breakdown/en-us-retail/ft-geographic-breakdown.md",
|
|
"components/products/portfolio/ft-portfolio-statistics-and-positions/en-us-retail/ft-portfolio-statistics-and-positions.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Performance",
|
|
"regex": "^components/products/performance|components/products/historical",
|
|
"pages": [
|
|
"components/products/historical/ft-historical-average-annual-total-returns/ft-historical-average-annual-total-returns.md",
|
|
"components/products/historical/ft-historical-cumulative-total-returns/ft-historical-cumulative-total-returns.md",
|
|
"components/products/performance/ft-after-tax-average-annual-returns/ft-after-tax-average-annual-returns.md",
|
|
"components/products/performance/ft-average-annual-total-returns/ft-average-annual-total-returns.md",
|
|
"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-backtested-performance-annualised/etf/ft-backtested-performance-annualised.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-backtested-performance-cumulative/etf/ft-backtested-performance-cumulative.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",
|
|
"components/products/performance/ft-performance-cumulative/etf/ft-performance-cumulative.md",
|
|
"components/products/performance/ft-backtested-performance-calendar/etf/ft-backtested-performance-calendar.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Pricing & Distribution",
|
|
"regex": "^components/products/pricing-distribution",
|
|
"pages": [
|
|
"components/products/pricing-distribution/ft-dividends-historical/ft-dividends-historical.md",
|
|
"components/products/pricing-distribution/ft-dividends/ft-dividends.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-pricing-distribution/ft-pricing-distribution.md",
|
|
"components/products/pricing-distribution/ft-share-prices/ft-share-prices.md"
|
|
]
|
|
},
|
|
{
|
|
"section": "Price",
|
|
"regex": "^components/products/pricing",
|
|
"pages": []
|
|
},
|
|
{
|
|
"section": "Distributions",
|
|
"regex": "^components/products/distributions",
|
|
"pages": []
|
|
},
|
|
{
|
|
"section": "Documents",
|
|
"regex": "^components/products/documents",
|
|
"pages": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"section": "Uncategorized",
|
|
"pages": []
|
|
}
|
|
],
|
|
"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 > 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><del>copy built assets folder from responsive-web to assets</del></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><del>Add flag <code>--alan</code> to only rebuild css, assets and markup when developing. This speeds up the rebuild.</del></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 --use-test-server</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).\n<del>Append a spec filename to this command to run that suite only e.g. <code>au test src\\components\\products\\common\\elements\\ft-footnote.spec.js</code></del></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.\n<del>Append a spec filename to this command to run that suite only e.g. <code>au test src\\components\\products\\common\\elements\\ft-footnote.spec.js --ui</code></del>\nNB: Doesn'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.\n<del>Append a spec filename to this command to run that suite only e.g. <code>au test --bl src\\components\\products\\distributions\\ft-distributions\\lib\\en-us-retail\\distribution-rate.spec.js</code></del>\nNB: 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 '.eslintrc' and based on the Aurelia eslint configuration.</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'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",
|
|
"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\"><ft-label label.bind=<span class=\"hljs-string\">\"label['as-of']\"</span>><span class=\"xml\"><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-label</span>></span>\n\n${label['as-of']}</span>\n</code></pre>\n<p>with</p>\n<pre><code class=\"hljs lang-javascript\"><ft-label label.bind=<span class=\"hljs-string\">\"getLabel('as-of')\"</span>><span class=\"xml\"><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-label</span>></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['key'] to getLabels('key'), 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/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 'first' button would take you to i.e. 1. Returns <code>null</code> if the first page isn't available e.g. you are already on the first page</li>\n<li><code>previousPage</code> - Integer. The page number clicking a 'previous' button would take you to. Returns <code>null</code> if the previous page isn't available.</li>\n<li><code>nextPage</code> - Integer. The page number clicking a 'next' button would take you to. Returns <code>null</code> if the next page isn't available.</li>\n<li><code>lastPage</code> - Integer. The page number clicking a 'last' button would take you to. Returns <code>null</code> if the last page isn'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>) =></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 <= recordNumber\n && recordNumber <= 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' 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'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'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('My message')</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'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>"isDate": true</code>. The date format used to parse the card values e.g. <code>"dateFormat": "MMM DD, YYYY"</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><select></code> or other <code><input></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> =></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> =></span> simulateInputChange(input, <span class=\"hljs-string\">'FREEX'</span>))\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =></span> {\n expect(....).toBe(...);\n })\n .then(done);\n</code></pre>\n<h2 id=\"-wait-delay-10-\"><code>wait(delay = 10)</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> =></span> {\n component.viewModel.mapState(mockState);\n })\n .then(wait(<span class=\"hljs-number\">25</span>))\n .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =></span> {\n expect(...).toBe(...);\n })\n .then(done);\n</code></pre>\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 "<a href=\"http://pattern-library.corp.frk.com/\">http://pattern-library.corp.frk.com/</a>" 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<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-testgw/investor/\">http://rcovlnx0191:8222/en-gb-testgw/investor/</a></td>\n</tr>\n</tbody>\n</table>\n<p>New sites not created yet.</p>\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&p=mutual_funds_page_performance_v4\">https://cx2rjv.axshare.com/#g=1&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&g=1&view=c\">https://x4kl1b.axshare.com/#p=our_etfs_-_fund_explorer&g=1&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/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: 'http://pattern-library.corp.frk.com'</code></li>\n<li>Edit your test page to load css with following:\n<code><link rel="stylesheet" href="http://pattern-library.corp.frk.com/assets/css/core.css" type="text/css"/></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: 'http://localhost:3000'</code></li>\n<li>Edit your test page to load css with following:\n<code><link rel="stylesheet" href="http://localhost:3000/assets/css/core.css" type="text/css"/></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><a href=\"http://rcovlnx0193:5111/gw-data-admin/serviceTestIntl\">http://rcovlnx0193:5111/gw-data-admin/serviceTestIntl</a></p>\n<h3 id=\"etf\">ETF</h3>\n<p><a href=\"http://rcovlnx0193:5111/gw-data-admin/serviceTestEtf\">http://rcovlnx0193:5111/gw-data-admin/serviceTestEtf</a></p>\n<p><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'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'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=\"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'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>"eslint.autoFixOnSave": 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>"editor.minimap.enabled": 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",
|
|
"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/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/<fund-id></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/<page>/<ft-<component-name></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",
|
|
"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/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/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>''</code> if can'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=\"-formatdatetoday-val-\"><code>formatDateToDay(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/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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-date-dropdown</span>></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\"><<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\">options.bind</span>=<span class=\"hljs-string\">\"myoptions\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-datepicker</span>></span>\n</code></pre>\n<p>Options are defined here: <a href=\"http://api.jqueryui.com/datepicker/\">http://api.jqueryui.com/datepicker/</a></p>\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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-historical-modal</span>></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['labelKey'] }</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\"><<span class=\"hljs-name\">th</span> <span class=\"hljs-attr\">innerHTML.bind</span>=<span class=\"hljs-string\">\"label[ 'total-label' ]\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">th</span>></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><ft-label></code> component.</p>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">th</span> <span class=\"hljs-attr\">scope</span>=<span class=\"hljs-string\">\"col\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">ft-label</span> <span class=\"hljs-attr\">label.bind</span>=<span class=\"hljs-string\">\"label['pay-date-label']\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-label</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">ft-footnote</span> <span class=\"hljs-attr\">section</span>=<span class=\"hljs-string\">\"Tax\"</span> <span class=\"hljs-attr\">element</span>=<span class=\"hljs-string\">\"Pay date\"</span> <span class=\"hljs-attr\">caveats.bind</span>=<span class=\"hljs-string\">\"caveats\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-footnote</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">th</span>></span>\n</code></pre>\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\"><<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> ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">slot</span>=<span class=\"hljs-string\">\"body\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span>></span>contents<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">slot</span>=<span class=\"hljs-string\">\"footer\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">p</span>></span>contents<span class=\"hljs-tag\"></<span class=\"hljs-name\">p</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-modal-inline</span>></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="modal" 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><div class="owl-item"><div class="item">Content</div></div></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\"><<span class=\"hljs-name\">ft-owl-carousel</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-item\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"item\"</span> ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">h3</span>></span>Title1<span class=\"hljs-tag\"></<span class=\"hljs-name\">h3</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#\"</span>></span>Link Text<span class=\"hljs-tag\"></<span class=\"hljs-name\">a</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"owl-item\"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"item\"</span> ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">h3</span>></span>Title2<span class=\"hljs-tag\"></<span class=\"hljs-name\">h3</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">a</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">\"#\"</span>></span>Link Text<span class=\"hljs-tag\"></<span class=\"hljs-name\">a</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-owl-carousel</span>></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="hidden"</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\"><<span class=\"hljs-name\">ft-owl-tabbed</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"hidden\"</span>></span>\n <span class=\"hljs-tag\"><<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>></span>\n <span class=\"hljs-tag\"><<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>></span>Title 1<span class=\"hljs-tag\"></<span class=\"hljs-name\">a</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">li</span>></span>\n <span class=\"hljs-tag\"><<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>></span>\n <span class=\"hljs-tag\"><<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>></span>Title 2<span class=\"hljs-tag\"></<span class=\"hljs-name\">a</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">li</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-owl-tabbed</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"panel-body tab-content\"</span>></span>\n <span class=\"hljs-tag\"><<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>></span>\n Content 1\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<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>></span>\n Content 2\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n</code></pre>\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><th></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">th</span>></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><th></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\">'fundNameOrder'</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/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\"><<span class=\"hljs-name\">td</span> <span class=\"hljs-attr\">innerhtml.bind</span>=<span class=\"hljs-string\">\"dataObj | ftFormatGridCell:dataKey\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">td</span>></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><br /></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/layouts/ft-choose-subscription/ft-choose-subscription-step1.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\"><<span class=\"hljs-name\">ft-choose-subscription</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-choose-subscription</span>></span>\n</code></pre>\n<p>Marketing component to allow users to choose various subscriptions.</p>\n<p>Uses 'aurelia-fetch-client' 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\"><<span class=\"hljs-name\">ft-document-lister</span>></span>\n SERVER SIDE RENDERED CONTENT\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-document-lister</span>></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: 'test\\pages\\en-gb\\doclister.html'</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 'single source of the truth' 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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-report-archive-a</span>></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-report-archive-a</span>></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\"><<span class=\"hljs-name\">ft-report-archive-c</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-report-archive-c</span>></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\"><<span class=\"hljs-name\">ft-report-archive-d</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-report-archive-d</span>></span>\n</code></pre>\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\"><<span class=\"hljs-name\">ft-grid-filter</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"unqiue_ref\"</span>></span>\n <span class=\"hljs-tag\"><<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>></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\"></<span class=\"hljs-name\">script</span>></span>\n <span class=\"hljs-tag\"><<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;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>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"card card-speaker card-small\"</span>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n ...\n <span class=\"hljs-tag\"><<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;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>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"card card-image dark card-small\"</span>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-grid-filter</span>></span>\n</code></pre>\n<h2 id=\"json-options\">JSON Options</h2>\n<p>The <code><script></code> tag should contain a valid JSON snippet with options on how the grid should display and work. If something doesn'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 'GRID'. 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><td></code> <strong>NB: When the column contains a link, append <code>.value</code> to the <code>dataKey</code>. Ie. <code>"dataKey": "title"</code> becomes <code>"dataKey": "title.value"</code></strong></li>\n<li><code>selected</code> - String. Default selected option value</li>\n<li><code>dateFormat</code> - String. Required if <code>"type": "YEAR_DROPDOWN"</code>. The date format used to parse the card values e.g. <code>"dateFormat": "MMM DD, YYYY"</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't exist on a card, it won'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'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><td></code> <strong>NB: When the column contains a link, append <code>.value</code> to the <code>dataKey</code>. Ie. <code>"dataKey": "speakerName"</code> becomes <code>"dataKey": "speakerName.value"</code></strong></li>\n<li><code>class</code> - String. Optional. Any class(es) to add to the column <code><td></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>"isDate": true</code>. The date format used to parse the card values e.g. <code>"dateFormat": "MMM DD, YYYY"</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\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">data-fti-component</span>=<span class=\"hljs-string\">\"card\"</span>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></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><div></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'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><div></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\"><<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>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></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\"><<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>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></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\"><<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>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n</code></pre>\nor<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<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>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n</code></pre>\n</li>\n</ul>\n<h2 id=\"actions\">Actions</h2>\n<p>Dispatches this example action when the 'load more' 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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-grid-filter-form</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-grid-filter-dropdown</span>></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's options should render. See the documentation for <code><ft-grid-filter></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/products/historical/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-historical-average-annual-total-returns</span>></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/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\"><<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>></span>\n <span class=\"hljs-tag\"><<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>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"video-container\"</span>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<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>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">\"video-container\"</span>></span>...<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-video-switch</span>></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n</code></pre>\n<p>Notes</p>\n<ul>\n<li><code>data-fti-component="video"</code> is required for aurelia to parse out the video</li>\n<li><code>class="hidden"</code> This is optional. It means the user won'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/historical/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-historical-cumulative-total-returns</span>></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-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/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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-fund-information</span>></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-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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-fund-static-bar</span>></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-fund-trading-characteristics/ft-fund-trading-characteristics.md": "<h1 id=\"ft-trading-characteristics\">ft-trading-characteristics</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">ft-trading-characteristics</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-trading-characteristics</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-asset-class-exposure</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-commodities-sector-breakdown</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-category-fund-list</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-coupon-rate-breakdown</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-credit-quality-exposure</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-currency-distribution</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-fixed-income-sector-breakdown</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-geographic-allocation</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-geographic-breakdown</span>></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>The bulk of this functionality is now moved into src/components/products/portfolio/util/util.js.</p>\n<pre><code class=\"hljs lang-javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">_infoBuilder</span>(<span class=\"hljs-params\">action</span>) </span>{\n <span class=\"hljs-keyword\">let</span> [rawPortfolio] = action.json;\n <span class=\"hljs-comment\">// const config = portfolioUtils.getConfig(rawConfig);</span>\n <span class=\"hljs-keyword\">const</span> rawBreakdowns = get(rawPortfolio, <span class=\"hljs-string\">'globalProductsValue.portfolioIntlValue.breakdown.brkdwnDet'</span>);\n <span class=\"hljs-keyword\">const</span> breakdown = portfolioUtils.findObjInArray(rawBreakdowns, <span class=\"hljs-string\">'COUNTRY_ALLOCATION'</span>);\n <span class=\"hljs-keyword\">const</span> visible = (<span class=\"hljs-keyword\">typeof</span> breakdown !== <span class=\"hljs-string\">'undefined'</span>);\n <span class=\"hljs-keyword\">let</span> obj = {\n <span class=\"hljs-attr\">caveatSecName</span>: <span class=\"hljs-string\">'Portfolio'</span>, <span class=\"hljs-attr\">tableID</span>: <span class=\"hljs-string\">'geographic-breakdown-data'</span>, <span class=\"hljs-attr\">visible</span>: visible\n };\n\n <span class=\"hljs-keyword\">if</span> (visible) {\n <span class=\"hljs-keyword\">let</span> tempBreakdown = portfolioUtils.getIntlSimplifiedBreakdown(breakdown);\n\n obj = <span class=\"hljs-built_in\">Object</span>.assign({}, obj, tempBreakdown);\n\n obj.showChart = <span class=\"hljs-literal\">true</span>;\n obj.spanRow = <span class=\"hljs-literal\">true</span>;\n }\n <span class=\"hljs-keyword\">return</span> obj;\n}\n</code></pre>\n<h5 id=\"things-that-should-be-changed-when-using-this-as-a-base\">Things that should be changed when using this as a base</h5>\n<p>_'COUNTRY<em>ALLOCATION'</em> - This is the breakdown that needs to be displayed. The value should match the type in the Portfolio file.</p>\n<p><em>'geographic-breakdown-data'</em> - This is the id of the Caveat to be displayed.</p>\n",
|
|
"components/products/portfolio/ft-holdings/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\"><<span class=\"hljs-name\">ft-holdings</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"25802\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-holdings</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-manager-roster</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-market-capitalisation</span>></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 & 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\">\"<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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-maturity-breakdown</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-quality-breakdown</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-sector-allocation</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-sector-exposure</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-strategy-breakdown</span>></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-top-exposures\">ft-top-exposures</h1>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">ft-top-exposures</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-top-exposures</span>></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/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\"><<span class=\"hljs-name\">ft-top-ten-holdings</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-top-ten-holdings</span>></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/performance/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-after-tax-average-annual-returns</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-average-annual-total-returns</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-calendar-year-returns</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-discrete-returns</span>></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\"><<span class=\"hljs-name\">ft-performance-annualised</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"15846\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-annualised</span>></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-find-a-fund</span>></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/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\"><<span class=\"hljs-name\">ft-ppss</span> <span class=\"hljs-attr\">cid</span>=<span class=\"hljs-string\">\"uniqueId\"</span>\n <span class=\"hljs-attr\">product-page-url</span>=<span class=\"hljs-string\">\"http://www.franklintempleton.co.uk/en_GB/investor/funds/fund-detail/\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss</span>></span>\n</code></pre>\n<p><code>product-page-url</code> will have the fundId appended to it to form links to individual product pages. <em>In future, the productPageUrl variable may be set via configuration json or some other process.</em></p>\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-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><td></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">td</span>></span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
|
|
"components/products/ppss/ft-ppss-etf/ft-ppss-etf-row.md": "<h1 id=\"ft-ppss-etf-row\">ft-ppss-etf-row</h1>\n<p>This PPSS sub-component displays a row of the ETF table.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<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-etf-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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">tr</span>></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>productPageUrl</code> - will have <code>fundId</code> appended to create link to fund product page</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The template uses <code><template view-cache="*"></code> to cache the component, and increase rendering speed.</p>\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\"><<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>\n <span class=\"hljs-attr\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-etf</span>></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><th></code>s</li>\n<li><code>navAsOfDate</code> - string with the NAV date</li>\n<li><code>productPageUrl</code> - will have <code>fundId</code> appended to create links to fund product pages</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n",
|
|
"components/products/ppss/ft-ppss-fund-filter/ft-ppss-dropdown.md": "<h1 id=\"ft-ppss-dropdown\">ft-ppss-dropdown</h1>\n<p>This PPSS sub-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\"><<span class=\"hljs-name\">ft-ppss-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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-dropdown</span>></span>\n</code></pre>\n<p><code>filter</code> - is an object describing the dropdown'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'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: ['A', 'A1'], label: 'A & A1'}</code>. If this option were selected, funds that had a property with value 'A' <strong>OR</strong> 'A1' will be displayed.</li>\n</ul>\n<p><code>selected</code> - <strong>TODO</strong> This is a shortcut to the <code>filter</code>'s <code>selected</code> property, so that binding will update when it changes. Ideally, this should not be needed if it'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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-fund-filter</span>></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 & 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 & 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 & 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'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: ['A', 'A1'], label: 'A & A1'}</code>. If this option were selected, funds that had a property with value 'A' <strong>OR</strong> 'A1' will be displayed.</li>\n</ul>\n</li>\n<li><code>keywords</code> - This isn'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-row.md": "<h1 id=\"ft-ppss-fund-identifiers-row\">ft-ppss-fund-identifiers-row</h1>\n<p>This PPSS sub-component displays a row of 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\"><<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-fund-identifiers-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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></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>productPageUrl</code> - will have <code>fundId</code> appended to create link to fund product page</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\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\"><<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>\n <span class=\"hljs-attr\">user.bind</span>=<span class=\"hljs-string\">\"user\"</span>\n <span class=\"hljs-attr\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-fund-identifiers</span>></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><th></code>s</li>\n<li><code>productPageUrl</code> - will have <code>fundId</code> appended to create links to fund product pages</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><td></code> cell.</p>\n<p>It creates a link to the fund'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\"><<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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">td</span>></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><template view-cache="*"></code> to cache the component, and increase rendering speed.</p>\n",
|
|
"components/products/ppss/ft-ppss-performance/ft-ppss-performance-row.md": "<h1 id=\"ft-ppss-performance-row\">ft-ppss-performance-row</h1>\n<p>This PPSS sub-component displays a row of the Performance table.</p>\n<h2 id=\"usage\">Usage</h2>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<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-performance-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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>\n <span class=\"hljs-attr\">performance-view.bind</span>=<span class=\"hljs-string\">\"performanceView\"</span>></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>productPageUrl</code> - will have <code>fundId</code> appended to create link to fund product page</li>\n<li><code>performanceView</code> - which Performance View is currently being displayed</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>To optimise the performance at which this component renders when displaying lots of rows, 7 data <code><td></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><td></code>s and creating new ones.</p>\n<p>The template also uses <code><template view-cache="*"></code> to cache the component, and increase rendering speed.</p>\n<p><strong>en-us-retail</strong> has it's own version of this component</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\"><<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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-performance</span>></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><th></code>s</li>\n<li><code>performanceView</code> - which Performance View is currently being displayed</li>\n<li><code>productPageUrl</code> - will have <code>fundId</code> appended to create links to fund product pages</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'l sites, funds are grouped by Investment vehicle. This is done by having several <code><tbody></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><th></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><th></code>s and creating new ones.</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\"><<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>\n <span class=\"hljs-attr\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">tr</span>></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>productPageUrl</code> - will have <code>fundId</code> appended to create link to fund product page</li>\n</ul>\n<h2 id=\"developer-notes\">Developer notes</h2>\n<p>The template uses <code><template view-cache="*"></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\"><<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>\n <span class=\"hljs-attr\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-ratings</span>></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><th></code>s</li>\n<li><code>productPageUrl</code> - will have <code>fundId</code> appended to create links to fund product pages</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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-search-box</span>></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'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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-tab-header</span>></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-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\"><<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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</span>\n <span class=\"hljs-attr\">include-sales-charges.bind</span>=<span class=\"hljs-string\">\"includeSalesCharges\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">tr</span>></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>productPageUrl</code> - will have <code>fundId</code> appended to create link to fund product page</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><template view-cache="*"></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\"><<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\">product-page-url.one-time</span>=<span class=\"hljs-string\">\"productPageUrl\"</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-ppss-yield</span>></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><th></code>s</li>\n<li><code>productPageUrl</code> - will have <code>fundId</code> appended to create links to fund product pages</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-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\"><<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\">config.bind</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"currentShareClass\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-dividends-historical</span>></span>\n</code></pre>\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\"><<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\">dividend-share-classes.bind</span>=<span class=\"hljs-string\">\"dividendShareClasses\"</span>\n <span class=\"hljs-attr\">dividend-as-of-date.bind</span>=<span class=\"hljs-string\">\"dividendAsOfDate\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-dividends</span>></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-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\"><<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\">config.bind</span>=<span class=\"hljs-string\">\"config\"</span>\n <span class=\"hljs-attr\">share-class.bind</span>=<span class=\"hljs-string\">\"shareClass\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-nav-high-low</span>></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>config</code> Object. Settings for Pricing & 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 "on 01/05/2017" 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\"><<span class=\"hljs-name\">ft-price-chart</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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-price-chart</span>></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-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\"><<span class=\"hljs-name\">ft-pricing-distribution</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"12904\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-pricing-distribution</span>></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-share-prices</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">tr</span>></span>\n</code></pre>\n<h2 id=\"developer-notes\">Developer notes</h2>\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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-multi-select-bar</span>></span>\n</code></pre>\n",
|
|
"components/products/common/elements/ft-footnote/ft-footnote.md": "<h1 id=\"ft-footnote\">ft-footnote</h1>\n<p><em><code><ft-footnote></code> is a caveat related component. See 'todo Caveats overview'\nfor general details on caveat processing.</em></p>\n<p>Other components will use this component to identify a particular\nelement in the page which could contain a reference\n(if specified by the data),\nto a a particular footnote at the bottom of the page.</p>\n<p>The ft-footnote component adds a <code><sup id="66666666"></code> tag <strong>for each</strong>\nmatching caveat.</p>\n<p>The caveats component (todo add ref) will\nfind these and insert the correct footnote number, (and add the caveat\ncontent to the foot of the page).</p>\n<p><em>The numbers in the super text do not currently link to the actual\nfootnotes.</em></p>\n<p>In common with other caveat related components (see #ft-proximal),\nthe component has 3 bindings:</p>\n<ol>\n<li>section - a string (usually hard-coded) to indicate the section to\ntake the caveat from.</li>\n<li>element - a string (usually hard-coded) which acts as a key\n(shared with business) to identify the specific caveat to show.</li>\n<li>footnotes (todo change to the actual attribute name) - the object\ncontaining the caveat data.</li>\n</ol>\n<h3 id=\"example-usage\">Example usage</h3>\n<pre><code class=\"hljs lang-html\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">ft-footnote</span> <span class=\"hljs-attr\">section</span>=<span class=\"hljs-string\">\"Distribution Information\"</span> <span class=\"hljs-attr\">element</span>=<span class=\"hljs-string\">\"Capital Gain Distributions\"</span> <span class=\"hljs-attr\">footnotes.bind</span>=<span class=\"hljs-string\">\"footnotes\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-footnote</span>></span>\n</code></pre>\n",
|
|
"components/products/common/elements/ft-labels/ft-labels.md": "<h1 id=\"ft-labels\">ft-labels</h1>\n<p><em><code><ft-labels></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\"><<span class=\"hljs-name\">ft-labels</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-labels</span>></span>\n</code></pre>\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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-geographic-breakdown</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-portfolio-statistics-and-positions</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-calendar-year-returns</span>></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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-calendar-year-returns</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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\"><<span class=\"hljs-name\">ft-performance-annualised</span> <span class=\"hljs-attr\">fund-id</span>=<span class=\"hljs-string\">\"15846\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-annualised</span>></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/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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/etf/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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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-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\"><<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>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">ft-performance-cumulative</span>></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"
|
|
}
|
|
} |