The build creates web-platform.js in the assets/js folder
\nau runRuns the build process, then starts a local dev server on port 9000 i.e. http://localhost:9000/
\n--js to only rebuild javascript and markup when developing. This speeds up the rebuild.--alan to only rebuild css, assets and markup when developing. This speeds up the rebuild.--dev to only transpile js and process markup without linting when developing. This speeds up the rebuild. Run a full build before committing.--docs to only build the markdown files. This speeds up the documentation. Run a full build before committing.
\nau run --watchSame as au run, but will rebuild when code changes\nSee au run task for --js and --docs and --dev flags
au run --watch --use-test-serverSame as au run --watch --use-test-server, but will use test server data\nType au help run for more details
au buildRuns the build process. This includes linting, processing, transpiling and bundling, but not tests\nSee au run task for --js and --docs and --dev flags
au testRuns ALL test suites (*.spec.js files).\nAppend a spec filename to this command to run that suite only e.g. au test src\\components\\products\\common\\elements\\ft-footnote.spec.js
au test --uiRuns test suites for UI components using Jasmine and Karma. This will open and close a browser window while running tests.\nAppend a spec filename to this command to run that suite only e.g. \nNB: Doesn't run the Business Logic (reducer) test suites.au test src\\components\\products\\common\\elements\\ft-footnote.spec.js --ui
au test --blRuns test suites for Business Logic JS files (reducers, value-converters etc) using Jest.\nAppend a spec filename to this command to run that suite only e.g. \nNB: These tests run very fast, as they only use NodeJS.au test --bl src\\components\\products\\distributions\\ft-distributions\\lib\\en-us-retail\\distribution-rate.spec.js
au lint-cssLints all scss files within src folder using http://stylelint.io/\nConfiguration is based on stylelint-config-standard with custom configuration in .stylelintrc file
au lint-jsUses ESLint to lint all .js files within src and test folders.\nConfiguration is on '.eslintrc' and based on the Aurelia eslint configuration.
au lint-markupLints html files using gulp-lintspaces\nAll this really lints is whitespace and indentation, but at the moment there aren't any suitable html snippet linters.
\nau process-assetsAt present, this just copies the bootstrap fonts from the node_modules folder to assets.\nIn future it will likely copy more font and image files as part of the build.
au process-cssThis applies the following to the scss files in the src folder:
lint-css taskassets folderau process-markupThis just applies the lint-markup task, before passing the markup off to the bundler
au generate redux-componentThis is used to generate a redux component or sub-component. Tests, documentation, sass and (optionally) reducer files are also generated. See lib/redux-component-base.md for more details.
au proxy-serverThis is used to test the dev assets against the live or dev site.
\nExample proxying live site with dev css assets
\nau proxy-server --proxy-target http://rcovlnx0188:8202 --dev-css-assets-server http://pattern-library.corp.frk.com/
\nExample proxying dev site with dev css assets
\nau proxy-server --dev-css-assets-server http://pattern-library.corp.frk.com/
\nExample proxying live site with dev js assets, and aurelia etf config
\nau proxy-server --override-aurelia-config configuration/etf/main --dev-js-assets-server http://localhost:9000/
\n", "lib/component-base.md": "This class is used as a base class for components.
\nIt provides access to an instance of the Aurelia LogManager.
this.logger.debug('my debug message');\nThis should be used to retrieve the labels from the redux object. It should replace the use of :
\n<ft-label label.bind=\"label['as-of']\"></ft-label>\n\n${label['as-of']}\nwith
\n<ft-label label.bind=\"getLabel('as-of')\"></ft-label>\n\n$getLabel('as-of')}\nAs 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]
\nThis can help to highlight missing labels on the page.
\nTo change a page from label['key'] to getLabels('key'), a regex can be performed:
\nsearch: (label\\[)(.+)(\\])\n\nreplace: getLabel($2)\ngetPagingInfo(totalRecords, pageSize = 10, pageNumber = 1)Use this function returns an object with data that can be used for paging a recordset.
\nCall it every time you go to a new page, to get info on the page and navigation options.
\ntotalRecords - Integer. Required. The total number of records you want to page over.pageSize - Integer. Optional, default 10. The number of records per page.pageNumber - Integer. Optional, default 1. The current page you wish to display.firstPage - Integer. The page number clicking a 'first' button would take you to i.e. 1. Returns null if the first page isn't available e.g. you are already on the first pagepreviousPage - Integer. The page number clicking a 'previous' button would take you to. Returns null if the previous page isn't available.nextPage - Integer. The page number clicking a 'next' button would take you to. Returns null if the next page isn't available.lastPage - Integer. The page number clicking a 'last' button would take you to. Returns null if the last page isn't available e.g. you are already on the last pagecurrentPage- Page Object (see below). Returns a page object with details for the current page. returns null if no current page e.g. totalrecord equals 0.totalPages - Integer. Total number of pages available.pages - Array of Page objects (see below). Array with information about every possible page.firstRecord - 1 (or 0 if totalRecords equals 0)lastRecord - Integer. Same value as totalRecordstotalRecords - Integer. Total number of records available i.e. what was passed in as an argument.Page Object:
\npage - Integer. Page numberstartRecord - Integer. Number of first record on page.endRecord - Integer. Number of last record on page.let records = [{}, {}, ... {}]; // 23 records\nlet pageSize = 10;\nlet info = getPagingInfo(records.length, pageSize, 1);\n\n/*\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*/\n\n// filter records to current page\nlet recordsToShow = records.filter((record, index) => {\n let recordNumber = index + 1;\n return info.currentPage.startRecord <= recordNumber\n && recordNumber <= info.currentPage.endRecord;\n});\n\n// message to display\nlet message = `Showing ${info.currentPage.startRecord} to ${info.currentPage.endRecord} of ${info.totalRecords} records.`;\n// message = 'Showing 1 to 10 of 23 records.'\n\n// to go to next page\nif (info.nextPage !== null) {\n info = getPagingInfo(records.length, pageSize, info.nextPage);\n}\n\n// to go to last page\nif (info.lastPage !== null) {\n info = getPagingInfo(records.length, pageSize, info.lastPage);\n}\n\n// etc...\nThis 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 au generate redux-component.
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.
\nmapState(newState)If you define a function called mapState, your component will subscribe to the redux store, and mapState will get called every time the store changes with the whole of the new state.
The mapState function should set the components' properties with the data they need from the state. This should be the only place your component deals directly with the redux store
mapState is optional. If your component gets all it's data passed via @bindable properties (e.g. a dumb sub-component), then you can remove the mapState function.
mapState is based on the mapStateToProperties function used for connecting React components to redux: http://redux.js.org/docs/basics/UsageWithReact.html
The components will also have access to the redux dispatch function.\nThe two most likely uses of this will be:
If the component displays information for a specific fund at a time, then it should either have a @bindable fundId property, or set it's fundId from an element attribute set by the JSP page.
In your mapState function, you can use the helper function getFundState to get the fund spefici slice of state e.g.
let fundState = getFundState(newState, this.fundId);\nIf your component is not fund specific i.e. displays data for several funds at once, then you can delete references to fundId and getFundState.
loggerAs the ReduxComponentBase class inherits from the ComponentBase class, it already has the LogManager injected into it.\nThis enables you to debug to the console via:\nthis.logger.debug('My message')
function library to help sorting an array of objects
\n[{foo: 'bar'}, ...].sort(createCompare('foo', 'ASC', {}))\ncreateCompare(dataKey, direction, options)
function suitable for use in an array's sort() methoddataKey is the name of the property object property on which to sortdirection can be ASC or DESCoptions an object with the following properties:isNumeric - Optional. if true, treats the values as numeric data and tries to parse themisDate - Optional. if true, treats the values as date data and tries to parse themdateFormat - String. Required if "isDate": true. The date format used to parse the card values e.g. "dateFormat": "MMM DD, YYYY". See Moment docs for possible valuessecondaryCompare - 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 createcompare()This library also contains private functions that are used internally for sorting strings, dates and numbers
\n", "lib/test-utils.md": "Function to help with UI unit testing
\nsimulateInputChange(element, value)Use this function to simulate changing the value of a <select> or other <input> element
let input;\n component.boundTo(mock);\n component.create(bootstrap)\n .then(() => {\n input = document.getElementById('test1').getElementsByTagName('input')[0];\n })\n .then(() => simulateInputChange(input, 'FREEX'))\n .then(() => {\n expect(....).toBe(...);\n })\n .then(done);\nwait(delay = 10)Use this function to pause execution for a number of milliseconds. This is often used to allow Aurelia to redraw before testing the component
\n component.create(bootstrap)\n .then(() => {\n component.viewModel.mapState(mockState);\n })\n .then(wait(25))\n .then(() => {\n expect(...).toBe(...);\n })\n .then(done);\nhttps://chrome.google.com/webstore/detail/aurelia-inspector/ofemgdknaajmpeoblfdjkenbpcfbdefg?hl=en
\nAllows fonts to work when developing locally. Sometimes this stops, but turning off and on again seems to fix it
\n\nAdd "http://pattern-library.corp.frk.com/" to the Intercepted URLS or URL patterns to solve any font cors issues.
\n", "developer-notes/general/environments.md": "| \n | \n |
|---|---|
| These docs | \nhttp://pattern-library.corp.frk.com/docs.html | \n
| livesite instance | \nus-dev-5 | \n
| New web-platform site | \nhttp://rcovlnx0191:6205/en-us-gw/investor/ | \n
| Old US site | \nhttp://rcovlnx0191:6205/en-us-retail/investor/ | \n
| Livesite cache | \nhttp://rcovlnx0191:6205/iw/admin/JCS.jsp | \n
| Coverage report | \nhttp://pattern-library.corp.frk.com/coverage/ | \n
The old US site can be used to regression test components.
\n| \n | \n |
|---|---|
| livesite instance | \ninternational-dev-2 | \n
| franklintempletonglobal site | \nhttp://rcovlnx0191:8222/en-gb-testgw/investor/ | \n
New sites not created yet.
\nhttp://rcovlnx0157.noam.corp.frk.com:8085/browse/USPI-FR35
\nThis link can also be used in browser if no svn client\nhttps://sourcemgmtsvn.noam.corp.frk.com:18080/svn/globalweb/branches/GW-Maintenance/frontend-projects/web-platform
\nhttps://cx2rjv.axshare.com/#g=1&p=mutual_funds_page_performance_v4\npassword: responsive
\nhttps://x4kl1b.axshare.com/#p=our_etfs_-_fund_explorer&g=1&view=c\npassword: etfs
\n", "developer-notes/general/generators.md": "Code generators allow you to quick create stubs for multiple files.
\nTo see available generators run: au generate
To run a generator, run e.g.: au generate redux-component
The generator code can be found in aurelia_project/generators.
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.
\nSee the redux-component for an example.
\n", "developer-notes/general/setup.md": "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.
\nAdd a chrome extension so you can load the fonts (otherwise you get cross origin access errors):\nhttps://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US
\naurelia_project/environments/dev.js and set cssRoot: 'http://pattern-library.corp.frk.com'<link rel="stylesheet" href="http://pattern-library.corp.frk.com/assets/css/core.css" type="text/css"/>aurelia_project/environments/dev.js and set cssRoot: 'http://localhost:3000'<link rel="stylesheet" href="http://localhost:3000/assets/css/core.css" type="text/css"/>You may need to stop and start your server to pick up the environment.js change.
\n", "developer-notes/general/stub-data.md": "You can download stub json data by appending the spring bean name to the end of the following request:
\nhttp://rcovlnx0191:6205/en-us-gw/investor/?bid=
\ne.g. http://rcovlnx0191:6205/en-us-retail/investor/?bid=us.closed-end-funds-labels
\nNote that for production data you will want to go to\nhttps://www.franklintempleton.com/investor/?bid=bean.id
\nBut 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.
\nhttp://rcovlnx0193:5111/gw-data-admin/serviceTestIntl
\nhttp://rcovlnx0193:5111/gw-data-admin/serviceTestEtf
\nhttp://rcovlnx0194:5111/gw-data-admin/serviceTestEtf.do
\n", "developer-notes/general/vs-code.md": "VS Code is the recommended (free) editor for Aurelia development.
\nJust download the .exe file from https://code.visualstudio.com/Download
\nprogram files like it says in the documentationCode.exe in the folder to start%PATH% variable as described in https://code.visualstudio.com/docs/setup/windows, although that may need admin rightsJust install this extension: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
\nIt will automatically pick up the project's .eslintrc.json file and highlight code that breaks our eslint rules.
To automatically fix ESLint errors when you save a file, got to File / Preferences / Settings and add "eslint.autoFixOnSave": true to your user settings
Plugin is here: https://github.com/aurelia/vscode-extension/wiki\nBlog post describing it here: http://blog.aurelia.io/2016/10/11/introducing-the-aurelia-vs-code-plugin/
\nAfter installing extension, go to File / Preferences / Color theme and chose one of the following themes:
To enable the minimap feature to navigate code (like you get with Sublime Text), go to File / Preferences / Settings and add "editor.minimap.enabled": true to your user settings
Splits pane when editing markdown files to give a live preview
\nPlugin here: https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview
\n", "developer-notes/general/writing-documentation.md": "Documentation is written in markdown. Markdown files end in .md
\nsee https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet for\nall the codes.
\nSee the Visual Studio Code notes for details of a markdown preview plugin
\nDocumentation 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 .md extension.
Generic documentation should live under src/developer-notes.
The documentation is converted to html using marked with the following settings:
| Setting | \nValue | \n
|---|---|
| gfm | \ntrue | \n
| tables | \ntrue | \n
| breaks | \nfalse | \n
| pedantic | \nfalse | \n
| sanitize | \nfalse | \n
| smartLists | \ntrue | \n
| smartypants | \nfalse | \n
gfm includes all the markdown extensions produced by github.
To generate the documentation locally run: au process-docs
This generates a docs.json file under the assets folder of the project.
\nThe index is defined in aurelia.json 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.
e.g.
\n {\n \"section\": \"Products\",\n \"pages\": [],\n \"subs\": [\n {\n \"section\": \"General\",\n \"pages\": [\n \"developer-notes/products/useful-links.md\",\n \"developer-notes/products/product-components-overview.md\"\n ],\n \"regex\": \"^developer-notes/products\"\n },\n ...\nSo with the above, all docs under developer-notes/products and its\nsubdirectories will go into the Products - General subsection.
\nThe 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.
\nStill to do:
\nFor product components we are using Redux for our state storage.\n see http://redux.js.org/
\nTypically, 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.
\nThe 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.
\nSo 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.
\nsrc/configuration/en-us-retail/beans.js\nAdd a new attribute under components 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 beans\nattribute (lower down).aurelia_project/tasks/get-stub-data.js to add the beans\nfor which you need stub data and then run: au get-stub-data.\nYou should see your beans under test/data or test/data/<fund-id>\ndepending on whether they need a fund id or not. If they are in the\nwrong place, move them.au generate redux-component\nand follow the prompts. This will generate a whole load of\nfiles for you under src/components/products/<page>/<ft-<component-name>iw-mount: international/main/admin/resources/WORKAREA/ALL/iwov-resources/xsl/gw/components/products
\nlivesite-customer-src: etc/classes/conf/us/products/us-products-application-context.xml
\n", "components/common/attributes/share-class-link-listener.md": "Share class link listener
\nThis is a custom attribute which listens for changes made to the href attributes of anchor tags which have the \nshare-class-link-listener attribute. These changes to the href are made from selecting a different class in the ft-share-class-filter \ncustom element, present on individual Fund pages.
\nUpon 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.
\n", "components/products/lib/reducer-utils.md": "This library contains helper functions for reducers
\nnavDirection(val)This is used to determine the nav direction for a string
\nval - the nav change. The function will automatically parse out the number
Returns GAIN, LOSS or STATIC depending on parsed numerical value. Returns '' if can't be parsed
navChangeClass(direction)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
\ndirection - String. Required. Either GAIN, LOSS or STATIC
Returns gain, loss or static
getUniqOptions(property)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 foo:
let funds = [{foo: 1, bar: 'A'}, {foo: 2, bar: 'B'}, {foo: 1, bar: 'C'}, ];\nlet myFunction = getUniqOptions('foo');\nlet uniqueFooValues = myFunction(funds); // returns [1, 2]\nThis function is used to get options for dropdown filters
\nformatCusip(val)This function changes the format of a 9 character string to XXX XXX XXX. Any other length of string is returned unchanged
\nval - the original CUSIP value
let formattedCusip = formatCusip('G3658U329'); // returns G36 58U 329\nformatCurrency(val, currency)Return value followed by currency symbol if numeric, otherwise return dash.
\nval - the currency amount\ncurrency - the currency value
let value = formatCurrency('55.10', 'USD'); // returns $55.10\nformatDateToDay(val)clean up different date formats and convert to common DD/MM/YYYY
\nval - val date in format DD/MM/YYYY or YYYY-MM-DD
let value = formatDateToDay('1982-11-18 01:11:11'); // returns 18/11/1982\nThis is an abstract component class file. It contains common functionality for PPSS table sub-components.
\nCurrent implementations include:
\nThis should not be used directly! Instead, extend this class to create a table sub-component
\nThis class provides a changeSort(name) function that dispatches the following action:
{\n type: 'PPSS_CHANGE_SORT',\n columnName: name\n}\nIt is passed to ft-th-sortable instances, to call when they are clicked.
This uses the bootstrap carousel. The carousel is created in the attached() method (where jquery is available.
\nA 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 ref.\nThe actual content of each slide is passed in using transclusion ie a slot. It is assumed that each slide will be\nenclosed in a div with a item class and a slide-title attribute.
The next and previous buttons are added through sub-elements ft-carousel-navigation. 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.
<ft-date-dropdown fund-id=\"817\" cid=\"uniqueId\"></ft-date-dropdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nBased on the jQuery UI component: https://jqueryui.com/datepicker/
\n<ft-datepicker value.two-way=\"value\" options.bind=\"myoptions\"></ft-datepicker>\nOptions are defined here: http://api.jqueryui.com/datepicker/
\n", "components/common/elements/ft-historical-modal/ft-historical-modal.md": "<ft-historical-modal fund-id=\"817\" cid=\"uniqueId\"></ft-historical-modal>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nLabels can include html. Therefore, it is not safe to bind them with ${ label['labelKey'] }, as the html will be escaped.
One alternative is to bind the innerHTML of the parent element to the label - e.g.
\n<th innerHTML.bind=\"label[ 'total-label' ]\"></th>\nBut that can only be done when the label is the only child of the parent. In other cases, use the <ft-label> component.
<th scope=\"col\">\n <ft-label label.bind=\"label['pay-date-label']\"></ft-label>\n <ft-footnote section=\"Tax\" element=\"Pay date\" caveats.bind=\"caveats\"></ft-footnote>\n</th>\nThis 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
\n<ft-modal-inline id=\"test1\" view-model.ref=\"modal\" title.bind=\"title\" close.bind=\"close\" >\n <div slot=\"body\">\n <p>contents</p>\n </div>\n <div slot=\"footer\">\n <p>contents</p>\n </div>\n</ft-modal-inline>\nThe modal has slots for:
\nAnd bound attributes for
\nIn 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.
\n", "components/common/elements/ft-owl-carousel/ft-owl-carousel.md": "This uses the OWL carousel. The carousel is created in the attached() method where jquery is available.
\nA 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 ref.\nThe actual content of each slide is passed in using transclusion ie a slot. It is assumed that each slide will be\nenclosed in a div with a owl-item class and nested div with item class.\nExample: <div class="owl-item"><div class="item">Content</div></div>
Carousel configuration is is in ft-owl-carousel.js
<ft-owl-carousel>\n <div class=\"owl-item\">\n <div class=\"item\" >\n <h3>Title1</h3>\n <a href=\"#\">Link Text</a>\n </div>\n </div>\n <div class=\"owl-item\">\n <div class=\"item\" >\n <h3>Title2</h3>\n <a href=\"#\">Link Text</a>\n </div>\n </div>\n</ft-owl-carousel>\nThis uses the OWL carousel. The carousel is created in the attached() method where jquery is available.
\nA 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 ref.\nThe actual content of each slide is passed in using transclusion ie a slot. It is assumed that each slide will be\nenclosed in a li with a owl-tab class and nested a with link to corresponding tab.\nAdditionally ft-owl-tabbed can have class="hidden" 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 ft-owl-tabbed.js
\n<ft-owl-tabbed class=\"hidden\">\n <li role=\"presentation\" class=\"owl-tab active\">\n <a href=\"#tabs-content-1\" aria-controls=\"tabs-content-1\" data-toggle=\"tab\" aria-expanded=\"true\">Title 1</a>\n </li>\n <li role=\"presentation\" class=\"owl-tab \">\n <a href=\"#tabs-content-2\" aria-controls=\"tabs-content-2\" data-toggle=\"tab\" aria-expanded=\"true\">Title 2</a>\n </li>\n</ft-owl-tabbed>\n<div class=\"panel-body tab-content\">\n <div role=\"tabpane\" class=\"tab-pane active\" id=\"tabs-content-1\">\n Content 1\n </div>\n <div role=\"tabpane\" class=\"tab-pane\" id=\"tabs-content-2\">\n Content 2\n </div>\n</div>\nThis component creates a <th> that the user can click on to sort.
<th scope=\"col\" class=\"fund\"\n as-element=\"ft-th-sortable\"\n title.one-time=\"getLabel('fund-name')\"\n sort.bind=\"sort.columns.get('FUND_NAME')\"\n click-callback.call=\"changeSort('FUND_NAME')\"></th>\nclickCallback - This is a function on the parent component that will be called when the user click the <th>.
sort - This is an object of the form:
{\n dataKey: 'fundNameOrder',\n direction: 'ASC',\n isNumeric: false\n}\ndataKey - This is the property on the fund that the sort will apply to.
direction - Can be ASC, DESC or null. If null, then the data is not currently sorted by this column
isNumeric - If true, data in the property will be treated as numeric, parsed (if necessary), and sorted numerically. Otherwise, it will be sorted as a String
value-converter
\n<td innerhtml.bind=\"dataObj | ftFormatGridCell:dataKey\"></td>\ndataObj is an object with propertiesdataKey is the name of the property on dataObj to display
If there is an associated url property, then a link will be outputted
\n| delimited, then the values will be outputted delimited by <br /> tags<ft-choose-subscription></ft-choose-subscription>\nMarketing component to allow users to choose various subscriptions.
\nUses 'aurelia-fetch-client' to post data to end point after step 2.
\n", "components/marketing/lists/ft-document-lister/ft-document-lister.md": "<ft-document-lister>\n SERVER SIDE RENDERED CONTENT\n</ft-document-lister>\nThis component is server side rendered.
\nThis component is unlike other components in that the content and data are server side rendered upfront.
\nTest page: 'test\\pages\\en-gb\\doclister.html'
\nNote: 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.
\nSee further dev notes in pattern library
\n", "components/marketing/lists/ft-report-archive-a/ft-report-archive-a.md": "<ft-report-archive-a fund-id=\"817\" cid=\"uniqueId\"></ft-report-archive-a>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-report-archive-a fund-id=\"817\" cid=\"uniqueId\"></ft-report-archive-a>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-report-archive-c></ft-report-archive-c>\n<ft-report-archive-d></ft-report-archive-d>\n<ft-grid-filter cid=\"unqiue_ref\">\n <script slot=\"config\" type=\"application/json\">\n {\n \"cardsPerPage\": 3,\n \"currentView\": \"GRID\",\n \"showViewToggle\": true,\n \"filters\": [...],\n \"columns\": [...]\n }\n </script>\n <div data-fti-component=\"card\"\n class=\"hidden all Macro-News christopher-j-molumphy-cfa col-sm-6 col-md-4 col-lg-3 no\"\n card-title=\"Global Economic Perspective: March 2017\"\n card-title-url=\"https://www.franklintempleton.com/investor/insights/commentary?commentaryPath=en-us/en-us-retail/GEP&commentaryType=Macro News\"\n commentary-type=\"Macro News\"\n speaker-name=\"Christopher J. Molumphy, CFA|John Smith|Jane Doe\"\n published-date=\"Mar 23, 2017\"\n nav=\"$1.23\">\n <div class=\"card card-speaker card-small\">...</div>\n </div>\n ...\n <div data-fti-component=\"card\"\n class=\"hidden all Global-Market-Viewpoints col-sm-6 col-md-4 col-lg-3 no\"\n card-title=\"Commodities Overview: February 2017\"\n card-title-url=\"https://www.franklintempleton.com/investor/insights/commentary?commentaryPath=en-us/en-us-retail/CommoditiesOverview_Feb17&commentaryType=Global Market Viewpoints\"\n commentary-type=\"Global Market Viewpoints|Other News\"\n speaker-name=\"\"\n published-date=\"Feb 28, 2017\">\n <div class=\"card card-image dark card-small\">...</div>\n </div>\n</ft-grid-filter>\nThe <script> 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 valid JSON.
cardsPerPage - Integer. Optional. Default 4. Determines how many more cards should be displayed when Load More button is pressed.currentView - String. Optional. Default 'GRID'. Determines whether TABLE or GRID view should be displayed initially.showViewToggle - 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 currentView.filters - Array. Optional. Ordered array of dropdown filter config objects. See below for details.columns - Array. Optional. Ordered array of column config objects for use in the table view. See below for details.Add one of these for each dropdown filter you want to display
\n{\n \"name\": \"COMMENTARY_TYPE\",\n \"type\": \"DROPDOWN\",\n \"label\": \"Category\",\n \"dataKey\": \"commentaryType\",\n \"selected\": \"ALL\",\n \"options\": [\n {\"label\": \"Category: All\", \"value\": \"ALL\"},\n {\"label\": \"Global Market Viewpoints\", \"value\": \"Global Market Viewpoints\"},\n {\"label\": \"Macro News\", \"value\": \"Macro News\"},\n {\"label\": \"Other News\", \"value\": \"Other News\"}\n ]\n}\nname - String. Constant. used to identify the filtertype - String. DROPDOWN|YEAR_DROPDOWN.label - String. Not used currently?dataKey - String. camelCase version of the data attribute on the card containing the value to display in the <td> NB: When the column contains a link, append .value to the dataKey. Ie. "dataKey": "title" becomes "dataKey": "title.value"selected - String. Default selected option valuedateFormat - String. Required if "type": "YEAR_DROPDOWN". The date format used to parse the card values e.g. "dateFormat": "MMM DD, YYYY". See Moment docs for possible valuesoptions - Array of label/value objects that the user can select.\n NB 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 eitherALL - When this option is selected, no filtering will be performed12_MONTHS - When a YEAR_DROPDOWN, this will filter the last 12 months of cards based on today's date.Add one of these for each column you want the table to display
\n{\n \"name\": \"SPEAKER_NAME\",\n \"label\": \"Speaker\",\n \"dataKey\": \"speakerName\",\n \"class\": \"speaker\",\n \"isNumeric\": false,\n \"isDate\": false\n}\nname - String. Constant. Used to identify the columnlabel - String. The column title displayed to the userdataKey - String. camelCase version of the data attribute on the card containing the value to display in the <td> NB: When the column contains a link, append .value to the dataKey. Ie. "dataKey": "speakerName" becomes "dataKey": "speakerName.value"class - String. Optional. Any class(es) to add to the column <td>s.isNumeric - Boolean. Optional. Default false. Set to true if the column contains numeric data. This affects sortingisDate - Boolean. Optional. Default false. Set to true if the column contains datesdateFormat - String. Required if "isDate": true. The date format used to parse the card values e.g. "dateFormat": "MMM DD, YYYY". See Moment docs for possible valuesThe minimum markup required for a card is:
\n<div data-fti-component=\"card\">...</div>\nclass attribute on the <div>, the classes will be copied over.hidden class is added, then the cards will be hidden during the initial page load, so the user doesn't see the page jumping.<div> in kebab-case format e.g:<div data-fti-component=\"card\" foo-bar=\"baz\">...</div>\n| character e.g:<div data-fti-component=\"card\" foo-bar=\"alpha|beta|gamma\">...</div>\n-url e.g:<div data-fti-component=\"card\"\n title=\"My fantastic article\"\n title-url=\"/my-fantastic-article.html\">...</div>\n<div data-fti-component=\"card\"\n title=\"My fantastic article\"\n title-url=\"http://www.abc.com/my-fantastic-article.html\">...</div>\nDispatches this example action when the 'load more' button is clicked:
\n{\n type: 'GRID_LOAD_MORE'\n}\nDispatches this example action when a table column header is clicked:
\n{\n type: 'GRID_CHANGE_SORT',\n columnName: 'COMMENTARY_TYPE'\n}\nThis component generates a grid filter form, used for filtering the results of a grid/table, and toggling between the grid/table views
\n<ft-grid-filter-form filters.bind=\"filters\"\n show-view-toggle.bind=\"showViewToggle\"\n current-view.bind=\"currentView\"></ft-grid-filter-form>\nfilters - Array of filter objects describing the dropdowns to be renderedshowViewToggle - Boolean. Detrmines if the grid/table toggle buttons are visiblecurrentView - GRID or TABLE. Determines which view should be visibleDispatches the following action when a toggle button is clicked:
\n{\n type: 'GRID_CHANGE_VIEW',\n view: 'TABLE'\n}\nThis component generates a grid filter dropdown control
\n<ft-grid-filter-dropdown\n filter.bind=\"filter\"\n selected.bind=\"selected\"></ft-grid-filter-dropdown>\nfilter - This is an object with properties describing how the dropdown and it's options should render. See the documentation for <ft-grid-filter> for full detailsselected - The currently selected value for this filterDispatches the following example action when the dropdown is changed:
\n{\n type: 'GRID_CHANGE_DROPDOWN',\n name: 'COMMENTARY_TYPE',\n newValue: 'Macro News'\n}\n<ft-historical-average-annual-total-returns fund-id=\"817\" cid=\"uniqueId\"></ft-historical-average-annual-total-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-video-switch transcript-url=\"http://www.franklintempleton.co.uk\">\n <div data-fti-component=\"video\" class=\"hidden\" language=\"English\">\n <div class=\"video-container\">...</div>\n </div>\n <div data-fti-component=\"video\" class=\"hidden\" language=\"German\">\n <div class=\"video-container\">...</div>\n </div>\n</ft-video-switch>\ntranscript-url - (Optional). Link to transcript of the video(s)The minimum markup required is:
\n<div data-fti-component=\"video\" class=\"hidden\" language=\"German\"></div>\nNotes
\ndata-fti-component="video" is required for aurelia to parse out the videoclass="hidden" This is optional. It means the user won't get a flash of content while the page initialiseslanguage attribute is parsed by aurelia, and the values used to create the dropdown switch. The language attributes should have unique values.<ft-historical-cumulative-total-returns fund-id=\"817\" cid=\"uniqueId\"></ft-historical-cumulative-total-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nNot directly used, it is a sub component of ft-fund-static-bar
\n", "components/products/overview/ft-fund-price-header/ft-fund-price-header.md": "Not directly used, it is a sub component of ft-fund-static-bar
\n", "components/products/overview/ft-fund-information/ft-fund-information.md": "<ft-fund-information fund-id=\"817\" cid=\"uniqueId\"></ft-fund-information>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nNot directly used, it is a sub component of ft-fund-static-bar
\n", "components/products/overview/ft-fund-static-bar/ft-fund-static-bar.md": "<ft-fund-static-bar fund-id=\"817\" cid=\"uniqueId\"></ft-fund-static-bar>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nA lot of work has been done to provide the data for any of the other components which might appear inside the fund static bar.
\nHowever at the moment, this is not required, so the majority of the code has been commented out.
\nThis includes a number of functions which gather other pieces of data.
\nIf the data is required in the future then the code just needs to be uncommented.
\n", "components/products/overview/ft-fund-trading-characteristics/ft-fund-trading-characteristics.md": "<ft-trading-characteristics fund-id=\"817\" cid=\"uniqueId\"></ft-trading-characteristics>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-asset-class-exposure fund-id=\"817\" cid=\"uniqueId\"></ft-asset-class-exposure>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-commodities-sector-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-commodities-sector-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-category-fund-list fund-id=\"817\" cid=\"uniqueId\"></ft-category-fund-list>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-coupon-rate-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-coupon-rate-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-credit-quality-exposure fund-id=\"817\" cid=\"uniqueId\"></ft-credit-quality-exposure>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-currency-distribution fund-id=\"817\" cid=\"uniqueId\"></ft-currency-distribution>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-fixed-income-sector-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-fixed-income-sector-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-geographic-allocation fund-id=\"817\" cid=\"uniqueId\"></ft-geographic-allocation>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-geographic-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-geographic-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nThe bulk of this functionality is now moved into src/components/products/portfolio/util/util.js.
\nfunction _infoBuilder(action) {\n let [rawPortfolio] = action.json;\n // const config = portfolioUtils.getConfig(rawConfig);\n const rawBreakdowns = get(rawPortfolio, 'globalProductsValue.portfolioIntlValue.breakdown.brkdwnDet');\n const breakdown = portfolioUtils.findObjInArray(rawBreakdowns, 'COUNTRY_ALLOCATION');\n const visible = (typeof breakdown !== 'undefined');\n let obj = {\n caveatSecName: 'Portfolio', tableID: 'geographic-breakdown-data', visible: visible\n };\n\n if (visible) {\n let tempBreakdown = portfolioUtils.getIntlSimplifiedBreakdown(breakdown);\n\n obj = Object.assign({}, obj, tempBreakdown);\n\n obj.showChart = true;\n obj.spanRow = true;\n }\n return obj;\n}\n_'COUNTRYALLOCATION' - This is the breakdown that needs to be displayed. The value should match the type in the Portfolio file.
\n'geographic-breakdown-data' - This is the id of the Caveat to be displayed.
\n", "components/products/portfolio/ft-holdings/ft-holdings.md": "<ft-holdings fund-id=\"25802\"></ft-holdings>\nThe holdings component displays a filterable and pageable table, listing all holdings for this fund.
\nConfiguration is done in the redux state at products.app.holdings.
<ft-manager-roster fund-id=\"817\" cid=\"uniqueId\"></ft-manager-roster>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-market-capitalisation fund-id=\"817\" cid=\"uniqueId\"></ft-market-capitalisation>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nft-market-capitalisation Int & ETF use the same front end Aurelia component, they have separate reducers.
\n{\n\"breakdown\": {\n \"brkdwnDet\": [\n {\n \"asOfDate\": {\n \"val\": \"31/12/2016\"\n },\n \"brkDwnLst\": {\n \"lstDtls\": [\n {\n \"name\": {\n \"val\": \"<2.0 Billion\"\n },\n \"val\": {\n \"val\": \"11.91\"\n }\n }\n ]\n },\n \"type\": \"MARKET_CAPITAL_ALLOCATION\"\n }\n ]\n }\n }\n{\n\"breakdown\": {\n \"brkdwnDet\": [\n {\n \"asOfDate\": {\n \"lbl\": \"As of\",\n \"val\": \"2017-04-26\"\n },\n \"brkDwnLst\": {\n \"lstDtls\": [\n {\n \"name\": {\n \"val\": \"10.0-25.0 Billion\"\n },\n \"rank\": {\n \"val\": \"4\"\n },\n \"val\": {\n \"val\": \"16.58320\"\n },\n \"valStd\": {\n \"val\": \"16.5832\"\n }\n }\n ]\n },\n \"type\": \"MARKET_CAPITAL_ALLOCATION\",\n \"asOfDateStd\": {\n \"val\": \"2017-04-26\"\n }\n }\n ]\n }\n}\n<ft-maturity-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-maturity-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-portfolio-statistics-and-positions fund-id=\"817\" cid=\"uniqueId\"></ft-portfolio-statistics-and-positions>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-quality-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-quality-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-sector-allocation fund-id=\"817\" cid=\"uniqueId\"></ft-sector-allocation>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-sector-exposure fund-id=\"817\" cid=\"uniqueId\"></ft-sector-exposure>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nThis component comes includes 2 versions, one with chart and table, one with collapsing table.
\neg:
\n<ft-strategy-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-strategy-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-top-exposures fund-id=\"817\" cid=\"uniqueId\"></ft-top-exposures>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-top-ten-holdings fund-id=\"817\" cid=\"uniqueId\"></ft-top-ten-holdings>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nExposes a number of utilities which are used in Sector Breakdown components.
\nImported as:
\nimport {portfolioUtils} from '../../../util/util';\nThis exposes the the portfolioUtils object.
\nUsing the function from
\n", "components/products/performance/ft-after-tax-average-annual-returns/ft-after-tax-average-annual-returns.md": "<ft-after-tax-average-annual-returns fund-id=\"817\" cid=\"uniqueId\"></ft-after-tax-average-annual-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-average-annual-total-returns fund-id=\"817\" cid=\"uniqueId\"></ft-average-annual-total-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-calendar-year-returns fund-id=\"817\" show-chart=\"true\" span-row=\"true\" cid=\"uniqueId\"></ft-calendar-year-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-discrete-returns fund-id=\"817\" cid=\"uniqueId\"></ft-discrete-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-annualised fund-id=\"15846\"></ft-performance-annualised>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-find-a-fund fund-id=\"817\" cid=\"uniqueId\"></ft-find-a-fund>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-ppss cid=\"uniqueId\"\n product-page-url=\"http://www.franklintempleton.co.uk/en_GB/investor/funds/fund-detail/\"></ft-ppss>\nproduct-page-url will have the fundId appended to it to form links to individual product pages. In future, the productPageUrl variable may be set via configuration json or some other process.
The cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nMost of the work (filtering, sorting etc) of the PPSS data is done in the mapState() function of the ft-ppss.js component file. There are various private functions in this file to help process the data.
This sub-component is used to generate a favorites <td> cell.
NB: Favorites is currently just a feature of US sites, but will be left in International sites in case they want this in the future.
\nTODO: This feature has still to be implemented in web-platform
\n<td if.one-time=\"config.showFavorites\"\n class=\"favorites hidden-print\"\n as-element=\"ft-ppss-favorite\"\n fund.bind=\"fund\"\n user.one-time=\"user\"></td>\nThis PPSS sub-component displays a row of the ETF table.
\n<tr repeat.for=\"fund of funds\"\n as-element=\"ft-ppss-etf-row\"\n fund.bind=\"fund\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n product-page-url.one-time=\"productPageUrl\"></tr>\nfund - the specific fund object this row will display data forconfig - reference to the PPSS config objectproductPageUrl - will have fundId appended to create link to fund product pageThe template uses <template view-cache="*"> to cache the component, and increase rendering speed.
This PPSS sub-component displays the ETF table.
\n<ft-ppss-etf\n funds.bind=\"funds\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n sort.bind=\"sort\"\n nav-as-of-date.one-time=\"navAsOfDate\"\n product-page-url.one-time=\"productPageUrl\"></ft-ppss-etf>\nfunds - filtered array of PPSS funds to displayconfig - reference to the PPSS config objectsort - object to configure the sortable <th>snavAsOfDate - string with the NAV dateproductPageUrl - will have fundId appended to create links to fund product pagesThis PPSS sub-component creates a dropdown filter that the user can change.
\n<ft-ppss-dropdown filter.bind=\"filter\"\n selected.bind=\"filter.selected\"\n label.one-time=\"label\"></ft-ppss-dropdown>\nfilter - is an object describing the dropdown's state e.g:
{\n name: 'ASSET_CLASS',\n labelKey: 'assetclass',\n dataKey: 'assetClass',\n selected: {value: 'Equity', label: 'Equity'},\n options: [\n {\"label\": \"Equity\", \"value\": \"Equity\"},\n {\"label\": \"Fixed Income\", \"value\": \"Fixed Income\"}\n ]\n}\nname - constant used to identify the filterlabelkey - key used to get the dropdown's title to display from the label objectdataKey - corresponds to the fund property that will be compared when filteringselected - label/value object that corresponds ot the currently selected optionoptions - Array of label/value objects representing options the user can select. NB value could be an array e.g. {value: ['A', 'A1'], label: 'A & A1'}. If this option were selected, funds that had a property with value 'A' OR 'A1' will be displayed.selected - TODO This is a shortcut to the filter's selected property, so that binding will update when it changes. Ideally, this should not be needed if it's possible to watch the property.
So far, this is only used inside the ft-ppss-fund-filter component.
Filters will always have an All option.
Dispatches the following action when user changes the value:
\n{\n type: 'PPSS_CHANGE_DROPDOWN',\n name: this.filter.name,\n newValue: option\n}\nThis PPSS sub-component allows the user to filter the list of funds displayed by various criteria.
\n<ft-ppss-fund-filter filters.bind=\"filters\" label.one-time=\"label\"></ft-ppss-fund-filter>\nfilter is an object describing which filter inputs should be displayed, their options and currently selected values e.g:
{\n favorites: true, // {myFavoritesOnly: true},\n dropdowns: [{\n name: 'ASSET_CLASS',\n labelKey: 'assetclass',\n dataKey: 'assetClass',\n selected: {value: 'Equity', label: 'Equity'},\n options: [\n {\"label\": \"Equity\", \"value\": \"Equity\"},\n {\"label\": \"Fixed Income\", \"value\": \"Fixed Income\"}\n ]\n }, {\n ...\n }, {\n name: 'SHARE_CLASS',\n labelKey: 'shareclass',\n dataKey: 'shareClass',\n selected: {value: ['C', 'C1'], label: 'C & C1'},\n options: [\n {value: ['A', 'A1'], label: 'A & A1'},\n {value: ['C', 'C1'], label: 'C & C1'},\n {value: 'R', label: 'R'},\n {value: 'R6', label: 'R6'},\n {value: ['Advisor', 'Z'], label: 'Advisor/Z'}\n ]\n }],\n keywords: {\n searchKeys: ['symbol', 'fundShortName', 'fundId', 'fundLegalName'],\n searchString: ''\n }\n}\nfavorites - Currently US only. Still to be developeddropdowns - array of dropdown filters (in order) that are available\nEach dropdown config object has the following properties:name - constant used to identify the filterlabelkey - key used to get the dropdown's title to display from the label objectdataKey - corresponds to the fund property that will be compared when filteringselected - label/value object that corresponds ot the currently selected optionoptions - Array of label/value objects representing options the user can select. NB value could be an array e.g. {value: ['A', 'A1'], label: 'A & A1'}. If this option were selected, funds that had a property with value 'A' OR 'A1' will be displayed.keywords - This isn't currently used in the ft-ppss-fund-filter component. Instead, it is used in the table components to provide a basic keyword search filterThis PPSS sub-component displays a row of the Fund Identifiers table.
\nTODO: This has still to be fully developed
\n<tr repeat.for=\"fund of funds\"\n as-element=\"ft-ppss-fund-identifiers-row\"\n fund.bind=\"fund\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n product-page-url.one-time=\"productPageUrl\">\nfund - the specific fund object this row will display data forconfig - reference to the PPSS config objectproductPageUrl - will have fundId appended to create link to fund product pageThis PPSS sub-component display the Fund Identifiers table.
\nTODO: This has still to be fully developed
\n<ft-ppss-fund-identifiers\n funds.bind=\"funds\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n filters.bind=\"filters\"\n sort.bind=\"sort\"\n user.bind=\"user\"\n product-page-url.one-time=\"productPageUrl\"></ft-ppss-fund-identifiers>\nfunds - filtered array of PPSS funds to displayconfig - reference to the PPSS config objectfilters - reference to the filters config object, in case the keywords filter is to be shownsort - object to configure the sortable <th>sproductPageUrl - will have fundId appended to create links to fund product pagesThis sub-component is used to generate a fund name <td> cell.
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.
\n<td class=\"fund-name\"\n as-element=\"ft-ppss-fund-name\"\n fund.bind=\"fund\"\n product-page-url.one-time=\"productPageUrl\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n tab=\"performance\"></td>\ntab - this is used to create a unique id name, if there are multiple tabs available
The template uses <template view-cache="*"> to cache the component, and increase rendering speed.
This PPSS sub-component displays a row of the Performance table.
\n<tr repeat.for=\"fund of funds\"\n as-element=\"ft-ppss-performance-row\"\n fund.bind=\"fund\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n product-page-url.one-time=\"productPageUrl\"\n performance-view.bind=\"performanceView\">\nfund - the specific fund object this row will display data forconfig - reference to the PPSS config objectproductPageUrl - will have fundId appended to create link to fund product pageperformanceView - which Performance View is currently being displayedTo optimise the performance at which this component renders when displaying lots of rows, 7 data <td>s are created, and the contents changed when the performanceView updates.
This seems to work faster than destroying or hiding the <td>s and creating new ones.
The template also uses <template view-cache="*"> to cache the component, and increase rendering speed.
en-us-retail has it's own version of this component
\n", "components/products/ppss/ft-ppss-performance/ft-ppss-performance.md": "This PPSS sub-component displays the Performance table.
\n(Optionally) this sub-component displays a dropdown to swap between Month-end and Quarter-end data.
\n<ft-ppss-performance\n funds.bind=\"funds\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n filters.bind=\"filters\"\n sort.bind=\"sort\"\n user.bind=\"user\"\n performance-view.bind=\"performanceView\"\n product-page-url.one-time=\"productPageUrl\"\n ytd-as-of-date.one-time=\"ytdAsOfDate\"\n period-end.bind=\"display.periodEnd\"\n nav-as-of-date-month.one-time=\"navAsOfDateMonth\"\n nav-as-of-date-quarter.one-time=\"navAsOfDateQuarter\"\n include-sales-charges.bind=\"display.includeSalesCharges\"></ft-ppss-performance>\nfunds - filtered array of PPSS funds to displayconfig - reference to the PPSS config objectfilters - reference to the filters config object, in case the keywords filter is to be shownsort - object to configure the sortable <th>sperformanceView - which Performance View is currently being displayedproductPageUrl - will have fundId appended to create links to fund product pagesperiodEnd - QUARTER_END/MONTH_ENDincludeSalesCharges - true/false current state of sales charges toggleFor Int'l sites, funds are grouped by Investment vehicle. This is done by having several <tbody> sections, each with a sortable header row, and multiple Performance data rows.
To optimise the performance at which this component renders when displaying lots of rows, all possible sortable <th>s are created, and the contents shown/hidden when the performanceView updates.
This seems to work faster than destroying the <th>s and creating new ones.
This PPSS sub-component displays a row of the Ratings table. For some funds, a message will be displayed instead of data.
\nSo far, this is only used on the US site
\n<tr repeat.for=\"fund of funds\"\n as-element=\"ft-ppss-ratings-row\"\n fund.bind=\"fund\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n product-page-url.one-time=\"productPageUrl\"></tr>\nfund - the specific fund object this row will display data forconfig - reference to the PPSS config objectproductPageUrl - will have fundId appended to create link to fund product pageThe template uses <template view-cache="*"> to cache the component, and increase rendering speed.
This PPSS sub-component displays the Ratings table.
\nSo far, this is only used on the US site.
\n<ft-ppss-ratings\n funds.bind=\"funds\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n filters.bind=\"filters\"\n sort.bind=\"sort\"\n user.bind=\"user\"\n morningstar-as-of-date.one-time=\"morningstarAsOfDate\"\n fund-category-as-of-date.one-time=\"fundCategoryAsOfDate\"\n product-page-url.one-time=\"productPageUrl\"></ft-ppss-ratings>\nfunds - filtered array of PPSS funds to displayconfig - reference to the PPSS config objectfilters - reference to the filters config object, in case the keywords filter is to be shownsort - object to configure the sortable <th>sproductPageUrl - will have fundId appended to create links to fund product pagesThis PPSS sub-component is used to perform keyword search filtering to funds
\n<ft-ppss-search-box label.one-time=\"label\"\n search-string.bind=\"filters.keywords.searchString\"></ft-ppss-search-box>\nsearchString - The search string that is currently being filtered on. This should be an empty string if no keyword filtering is currently being applied.
Dispatches the following action when user changes input:
\n{\n type: 'PPSS_CHANGE_KEYWORDS',\n newSearchString: 'foo'\n}\nCurrently this is hard-coded with a 500ms debounce i.e. the action won't be dispatched until the user has stopped typing for half a second.
\n", "components/products/ppss/ft-ppss-tab-header/ft-ppss-tab-header.md": "This PPSS sub-component displays the tabs which users can click on to see different data tables.
\nIt can also be configured to show toggles for the Performance View or Sales Charges
\n<ft-ppss-tab-header config.one-time=\"config\"\n label.one-time=\"label\"\n current-table.bind=\"currentTable\"\n show-performance-toggle.bind=\"config.showPerformanceToggle\"\n performance-view.bind=\"display.performanceView\"\n show-sales-charge-toggle.bind=\"config.showSalesChargeToggle\"\n include-sales-charges.bind=\"display.includeSalesCharges\"></ft-ppss-tab-header>\nconfig - PPSS config objectcurrentTable - String determining which tab to display e.g. PERFORMANCE/FUND_IDENTIFIERS/RATINGS/YIELDshowPerformanceToggle - TODO: this should come directly from configshowSalesChargeToggle - TODO: this should come directly from configperformanceView - current performance view to showincludeSalesCharges - true/false current state of sales charges toggle3 different actions can be dispatched:
\nWhen a tab is clicked
\n{\ntype: 'PPSS_CHANGE_TAB',\ntab: key\n}\nWhen the performance view is changed:
\n{\ntype: 'PPSS_CHANGE_PERFORMANCE_VIEW',\ndata: val\n}\nWhen the sales charges are toggled on or off:
\n{\ntype: 'PPSS_CHANGE_SALES_CHARGES',\ndata: val\n}\nThis PPSS sub-component displays a row of the Yield table. For some funds, a message will be displayed instead of data.
\nSo far, this is only used on the US site
\n<tr repeat.for=\"fund of funds\"\n as-element=\"ft-ppss-yield-row\"\n fund.bind=\"fund\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n product-page-url.one-time=\"productPageUrl\"\n include-sales-charges.bind=\"includeSalesCharges\"></tr>\nfund - the specific fund object this row will display data forconfig - reference to the PPSS config objectproductPageUrl - will have fundId appended to create link to fund product pageincludeSalesCharges - determines whether to show distribution rates at NAV or POPThe template uses <template view-cache="*"> to cache the component, and increase rendering speed.
This PPSS sub-component displays the Yield table.
\nSo far, this is only used on the US site.
\n<ft-ppss-yield\n funds.bind=\"funds\"\n label.one-time=\"label\"\n config.one-time=\"config\"\n filters.bind=\"filters\"\n sort.bind=\"sort\"\n user.bind=\"user\"\n product-page-url.one-time=\"productPageUrl\"\n dist-rate-nav-as-of-date.one-time=\"distRateNavAsOfDate\"\n standard-yield-as-of-date.one-time=\"standardYieldAsOfDate\"\n standard-yield-as-of-date-money-fund.one-time=\"standardYieldAsOfDateMoneyFund\"\n include-sales-charges.bind=\"display.includeSalesCharges\"></ft-ppss-yield>\nfunds - filtered array of PPSS funds to displayconfig - reference to the PPSS config objectfilters - reference to the filters config object, in case the keywords filter is to be shownsort - object to configure the sortable <th>sproductPageUrl - will have fundId appended to create links to fund product pagesincludeSalesCharges - determines whether to show distribution rates at NAV or POPDisplays dividend information for different share classes in the fund
\nNB Only share classes with historical dividend information should be passed in
\n<ft-dividends-historical label.bind=\"label\"\n config.bind=\"config\"\n share-class.bind=\"currentShareClass\"></ft-dividends-historical>\nDisplays dividend information for different share classes in the fund
\nNB Only share classes with distribution information should be passed in
\nNBB Component will not display at all if no share classes are passed
\n<ft-dividends label.bind=\"label\"\n dividend-share-classes.bind=\"dividendShareClasses\"\n dividend-as-of-date.bind=\"dividendAsOfDate\"></ft-dividends>\ndividend-as-of-date String. Date at which data is takendividend-share-classes Array of Objects. Share classes with dividend data.\n Each object should be of form: {\n className: 'Z (Ydis) EUR-H1',\n currency: 'EUR',\n dividend: {\n distributionDate: '07/07/2016',\n dividendsPerShare: '€0.229',\n exDividendDate: '01/07/2016',\n recordDate: '30/06/2016'\n }\n }\n<ft-nav-high-low label.bind=\"label\"\n config.bind=\"config\"\n share-class.bind=\"shareClass\"></ft-nav-high-low>\nlabel Object. key/value label text pairsconfig Object. Settings for Pricing & Distributions components.\n Object should be of form: {\n showHighLowOnDate: true\n }\nshowHighLowOnDate determines if the "on 01/05/2017" dates should appear under NAV prices (if they exist)share-class Object. Details of the share class to display High/Low NAV data for.\n Object should be of form: {\n asOfDate: '01/05/2017',\n highLowNav: [\n {\n year: '2017',\n highNav: '£12.34',\n highNavDate: '02/03/2017',\n lowNav: '£9.87',\n lowNavDate: '24/03/2017'\n },\n ....\n {\n year: '2008',\n highNav: '£23.45',\n highNavDate: '13/10/2016',\n lowNav: '£22.33',\n lowNavDate: '18/04/2016'\n }\n ]\n }\nhighNavDate and lowNavDate are optional<ft-price-chart fund-id=\"817\" cid=\"uniqueId\"></ft-price-chart>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nTop Level component for the Pricing and Distributions Tab
\n<ft-pricing-distribution fund-id=\"12904\"></ft-pricing-distribution>\n<ft-share-prices label.bind=\"label\"\n share-class.bind=\"currentShareClass\"></ft-share-prices>\nlabel Object. key/value label text pairsshare-class Object. Details of the share class to display NAV Price data for.\n Object should be of form: {\n asOfDate: '01/05/2017',\n nav: '$10.95',\n navChange: '$0.21',\n navChangeDirection: 'GAIN',\n navChangePercent: \"-0.01\"\n ...\n }\nnavChangePercent is optional
This PPSS sub-component allows the user to compare funds, remove or add it to their favorites, and add the factsheet to their cart.
\nTODO: This has still to be developed in web-platform
\n<tr as-element=\"ft-ppss-table-toolbar\"\n label.one-time=\"label\"\n user.bind=\"user\"\n class=\"table-toolbar hidden\"\n data-ppss-favorite=\"tool-bar\"\n data-fti-sticky-item=\"yield\"></tr>\nThis 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).
\nRequires:
\n<ft-multi-select-bar multiselect.two-way=\"multiselect\" selected.bind=\"selected\" on-selected.bind=\"onSelectDocument\"></ft-multi-select-bar>\n<ft-footnote> is a caveat related component. See 'todo Caveats overview'\nfor general details on caveat processing.
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.
\nThe ft-footnote component adds a <sup id="66666666"> tag for each\nmatching caveat.
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).
\nThe numbers in the super text do not currently link to the actual\nfootnotes.
\nIn common with other caveat related components (see #ft-proximal),\nthe component has 3 bindings:
\n<ft-footnote section=\"Distribution Information\" element=\"Capital Gain Distributions\" footnotes.bind=\"footnotes\"></ft-footnote>\n<ft-labels> is a label related component.
The sole purpose of ft-labels is to load the correct labels for the page.
\nIt requires a specific bean labels
\ncomponent: {\n labels: [\n 'etf.labels'\n ]\n }\nIt should be placed on the page before any other components to ensure that the labels are loaded before anything else.
\n<ft-labels></ft-labels>\n<ft-geographic-breakdown fund-id=\"817\" cid=\"uniqueId\"></ft-geographic-breakdown>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\nsumBy(lstDtls, (o) => { return (o.val.alt * 100); } ) / 100;\nThe chart data is totaled using values multiplied by 100 to avoid doing maths on decimal numbers.
\n", "components/products/portfolio/ft-portfolio-statistics-and-positions/en-us-retail/ft-portfolio-statistics-and-positions.md": "<ft-portfolio-statistics-and-positions fund-id=\"817\" cid=\"uniqueId\"></ft-portfolio-statistics-and-positions>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-calendar-year-returns fund-id=\"817\" show-chart=\"true\" span-row=\"true\" cid=\"uniqueId\"></ft-calendar-year-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-calendar-year-returns fund-id=\"817\" show-chart=\"true\" span-row=\"true\" cid=\"uniqueId\"></ft-calendar-year-returns>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-annualised fund-id=\"15846\"></ft-performance-annualised>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n<ft-performance-cumulative fund-id=\"817\" cid=\"uniqueId\"></ft-performance-cumulative>\nThe cid is guaranteed to be unique to this page even if multiple instances of the component are added to the same page.
\n