\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
See how it works
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import { render } from \"./MapWalkthroughMobile.vue?vue&type=template&id=5d909855&scoped=true\"\nimport script from \"./MapWalkthroughMobile.vue?vue&type=script&lang=js\"\nexport * from \"./MapWalkthroughMobile.vue?vue&type=script&lang=js\"\n\nimport \"./MapWalkthroughMobile.vue?vue&type=style&index=0&id=5d909855&lang=scss&scoped=true\"\n\nimport exportComponent from \"D:\\\\bamboo-home\\\\xml-data\\\\build-dir\\\\AS-REL-JOB1\\\\code\\\\src\\\\Web\\\\AS.Presentation\\\\apps\\\\map\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-5d909855\"]])\n\nexport default __exports__","import { render } from \"./Home.vue?vue&type=template&id=3a3781db\"\nimport script from \"./Home.vue?vue&type=script&lang=js\"\nexport * from \"./Home.vue?vue&type=script&lang=js\"\n\nimport \"./Home.vue?vue&type=style&index=0&id=3a3781db&lang=scss\"\n\nimport exportComponent from \"D:\\\\bamboo-home\\\\xml-data\\\\build-dir\\\\AS-REL-JOB1\\\\code\\\\src\\\\Web\\\\AS.Presentation\\\\apps\\\\map\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import { render } from \"./App.vue?vue&type=template&id=03ccb019\"\nimport script from \"./App.vue?vue&type=script&lang=js\"\nexport * from \"./App.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"D:\\\\bamboo-home\\\\xml-data\\\\build-dir\\\\AS-REL-JOB1\\\\code\\\\src\\\\Web\\\\AS.Presentation\\\\apps\\\\map\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","function hexToHSL (H) {\r\n // Convert hex to RGB first\r\n let r = 0\r\n let g = 0\r\n let b = 0\r\n\r\n if (H.length === 4) {\r\n r = '0x' + H[1] + H[1]\r\n g = '0x' + H[2] + H[2]\r\n b = '0x' + H[3] + H[3]\r\n } else if (H.length === 7) {\r\n r = '0x' + H[1] + H[2]\r\n g = '0x' + H[3] + H[4]\r\n b = '0x' + H[5] + H[6]\r\n }\r\n\r\n // then to HSL\r\n r /= 255\r\n g /= 255\r\n b /= 255\r\n\r\n const cmin = Math.min(r, g, b)\r\n const cmax = Math.max(r, g, b)\r\n const delta = cmax - cmin\r\n let h = 0\r\n let s = 0\r\n let l = 0\r\n\r\n if (delta === 0) {\r\n h = 0\r\n } else if (cmax === r) {\r\n h = ((g - b) / delta) % 6\r\n } else if (cmax === g) {\r\n h = (b - r) / delta + 2\r\n } else {\r\n h = (r - g) / delta + 4\r\n }\r\n\r\n h = Math.round(h * 60)\r\n\r\n if (h < 0) {\r\n h += 360\r\n }\r\n\r\n l = (cmax + cmin) / 2\r\n s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))\r\n s = +(s * 100).toFixed(1)\r\n l = +(l * 100).toFixed(1)\r\n\r\n // return `hsl(${h}, ${s}%, ${l}%)`\r\n return `${h}, ${s}%`\r\n}\r\n\r\nexport { hexToHSL }\r\n","import { createStore } from 'vuex'\r\nimport { hexToHSL } from '@/utils/hexToHSL'\r\nimport axios from 'axios'\r\nimport mapSidebarWalkthrough from '@/assets/data/data-map-sidebar-walkthrough.json'\r\n\r\nexport default createStore({\r\n state: {\r\n appPreloader: true,\r\n chartInteraction: false,\r\n mapData: null,\r\n appWidth: null,\r\n appHeight: null,\r\n appWalkthrough: true,\r\n mapWalkthroughStep: 0,\r\n pointName: 'Europe',\r\n pointValue: 0,\r\n sideBarScroll: false,\r\n sideBarESGRatingInfo: false,\r\n sideBarCountry: '',\r\n sideBarCountryClicked: 0,\r\n sideBarCountries: [],\r\n sideBarRegion: [],\r\n sideBarRegionClicked: 0,\r\n sideBarRegions: [],\r\n sideBarCompanies: false,\r\n sideBarCompaniesSearch: [],\r\n sideBarCompaniesUserSearch: [],\r\n sideBarIndustriesList: [],\r\n sideBarInvestmentOptions: [],\r\n activeCountryIndex: 0,\r\n activeInvestmentsSearchFilter: 'all',\r\n activeInvestmentsSearchRegion: '',\r\n activeInvestmentsSearchCountry: '',\r\n activeInvestmentOption: null,\r\n countryBottomOptions: false,\r\n mapSidebarWalkthrough: mapSidebarWalkthrough,\r\n walkthroughToken: '',\r\n activeRegionId: null,\r\n activeInvestmentOptionId: null,\r\n totalRegionInvestment: null,\r\n mapTitle: '',\r\n introText: '',\r\n introProxyText: ''\r\n },\r\n getters: {\r\n sideBarRegionTitleAbbreviation (state) {\r\n if (state.sideBarRegion.length) {\r\n return state.sideBarRegion[0].title.slice(0, 2).toUpperCase()\r\n } else {\r\n return ''\r\n }\r\n },\r\n sideBarRegionTitle (state) {\r\n if (state.sideBarRegion.length) {\r\n return state.sideBarRegion[0].title\r\n } else {\r\n return ''\r\n }\r\n }\r\n },\r\n mutations: {\r\n setAppPreloader (state, payload) {\r\n state.appPreloader = payload\r\n },\r\n setWalkthroughToken (state, payload) {\r\n state.walkthroughToken = payload\r\n },\r\n setChartType (state, payload) {\r\n state.chart = payload\r\n },\r\n setChartInteraction (state, payload) {\r\n state.chartInteraction = payload\r\n },\r\n setMapData (state, payload) {\r\n state.mapData = payload\r\n },\r\n setAppWidth (state, payload) {\r\n state.appWidth = payload\r\n },\r\n setAppHeight (state, payload) {\r\n state.appHeight = payload\r\n },\r\n setPointName (state, payload) {\r\n state.pointName = payload\r\n },\r\n setSideBarScroll (state, payload) {\r\n state.sideBarScroll = payload\r\n },\r\n setPointValue (state, payload) {\r\n state.pointValue = payload\r\n },\r\n setsideBarCountry (state, payload) {\r\n state.sideBarCountry = payload\r\n },\r\n setSideBarCountryClicked (state) {\r\n state.sideBarCountryClicked++\r\n },\r\n setSideBarCountries (state, payload) {\r\n state.sideBarCountries = payload\r\n },\r\n setSidebarRegion (state, payload) {\r\n state.sideBarRegion = payload\r\n },\r\n setSideBarRegionClicked (state) {\r\n state.sideBarRegionClicked++\r\n },\r\n setSidebarRegions (state, payload) {\r\n state.sideBarRegions = payload\r\n },\r\n setActiveCountryIndex (state, payload) {\r\n state.activeCountryIndex = payload\r\n },\r\n setAppWalkthrough (state, payload) {\r\n state.appWalkthrough = payload\r\n },\r\n setMapSideBarWalkthrough (state, payload) {\r\n state.mapSidebarWalkthrough = payload\r\n },\r\n incrementMapWalkthroughStep (state) {\r\n state.mapWalkthroughStep++\r\n },\r\n setAppSidebarESGRatingInfo (state, payload) {\r\n state.sideBarESGRatingInfo = payload\r\n },\r\n setSideBarCompanies (state, payload) {\r\n state.sideBarCompanies = payload\r\n },\r\n setSideBarIndustriesList (state, payload) {\r\n state.sideBarIndustriesList = payload\r\n },\r\n setMapSidebarInvestmentOptions (state, payload) {\r\n state.sideBarInvestmentOptions = payload\r\n },\r\n setSideBarCompaniesSearch (state, payload) {\r\n state.sideBarCompaniesSearch = payload\r\n },\r\n setSideBarCompaniesUserSearch (state, payload) {\r\n state.sideBarCompanies = true\r\n state.sideBarCompaniesUserSearch = payload\r\n },\r\n setActiveFilter (state, payload) {\r\n state.activeInvestmentsSearchFilter = payload\r\n },\r\n setActiveRegion (state, payload) {\r\n state.activeInvestmentsSearchRegion = payload\r\n },\r\n setActiveCountry (state, payload) {\r\n state.activeInvestmentsSearchCountry = payload\r\n },\r\n setActiveInvestmentOption (state, payload) {\r\n state.activeInvestmentOption = payload\r\n },\r\n setCountryBottomOptions (state, payload) {\r\n state.countryBottomOptions = payload\r\n },\r\n toggleCountryBottomOptions (state) {\r\n state.countryBottomOptions = !state.countryBottomOptions\r\n },\r\n setActiveRegionId (state, payload) {\r\n state.activeRegionId = payload\r\n },\r\n setActiveInvestmentOptionId (state, payload) {\r\n state.activeInvestmentOptionId = payload\r\n },\r\n setTotalInvestmentPercentage (state, payload) {\r\n state.totalRegionInvestment = payload\r\n },\r\n setMapTitle (state, payload) {\r\n state.mapTitle = payload\r\n },\r\n setIntroText (state, payload) {\r\n state.introText = payload\r\n },\r\n setIntroProxyText (state, payload) {\r\n state.introProxyText = payload\r\n }\r\n },\r\n actions: {\r\n setWalkthroughToken: ({ commit }) => {\r\n if (localStorage.getItem('showWalkthrough', 'value') !== 'shown') {\r\n localStorage.setItem('showWalkthrough', 'shown')\r\n commit('setWalkthroughToken', true)\r\n } else {\r\n commit('setWalkthroughToken', false)\r\n commit('setChartInteraction', true)\r\n }\r\n },\r\n fetchRegion: ({ commit }) => {\r\n axios.get(`${process.env.VUE_APP_API_REGION}`)\r\n .then(res => {\r\n const data = []\r\n const chartData = res.data\r\n\r\n console.log('chartData', chartData)\r\n\r\n // get centerpoint id and push new chartData\r\n const chartDataFiltered = chartData.map(item => {\r\n const centrePoints = item.countries.filter(country => country.id === item.centreCountry)\r\n let centrePoint = null\r\n\r\n if (centrePoints.length > 0) {\r\n // centrePoint = centrePoints[0].code2\r\n centrePoint = centrePoints[0].code3\r\n }\r\n\r\n return {\r\n parentId: item.id,\r\n id: centrePoint,\r\n title: item.title,\r\n colour: item.colour,\r\n centrePoint,\r\n countries: item.countries.map(country => {\r\n return {\r\n countryId: country.id,\r\n countryName: country.name,\r\n code2: country.code2,\r\n code3: country.code3\r\n }\r\n })\r\n }\r\n })\r\n\r\n console.log('chartDataFiltered', chartDataFiltered)\r\n\r\n commit('setSidebarRegions', chartDataFiltered)\r\n\r\n // set default region\r\n if (typeof window.mapData.regionId !== 'undefined') {\r\n const defaultRegion = chartDataFiltered.filter(region => region.parentId === window.mapData.regionId)\r\n commit('setSidebarRegion', defaultRegion)\r\n\r\n const defaultRegionCountries = defaultRegion[0].countries\r\n // console.log('defaultRegionCountries', defaultRegionCountries)\r\n const sideBarCountries = defaultRegionCountries.map(country => {\r\n return {\r\n id: country.code3,\r\n colour: defaultRegion[0].colour,\r\n countryId: country.countryId,\r\n countryName: country.countryName,\r\n code2: country.code2,\r\n code3: country.code3\r\n }\r\n })\r\n commit('setSideBarCountries', sideBarCountries)\r\n }\r\n\r\n for (let i = 0; i < chartDataFiltered.length; i++) {\r\n const countryMap = chartDataFiltered[i].countries.map(country => {\r\n return {\r\n id: country.code3,\r\n color: `hsl(${hexToHSL(chartDataFiltered[i].colour)}, ${Math.floor(Math.random() * (65 - 35 + 1) + 35)}%)`,\r\n countryName: country.countryName,\r\n code2: country.code2,\r\n code3: country.code3\r\n }\r\n })\r\n data.push(...countryMap)\r\n }\r\n\r\n commit('setMapData', data)\r\n })\r\n },\r\n fetchIndustriesList: ({ state, commit }) => {\r\n // axios.get(`${process.env.VUE_APP_API_INDUSTRIES_LIST}/${state.activeInvestmentOptionId}/${state.activeRegionId}/${state.activeCountryIndex === null ? 0 : state.activeCountryIndex}`)\r\n axios.get(`${process.env.VUE_APP_API_INDUSTRIES_LIST}/${state.activeInvestmentOptionId}/${state.activeRegionId}/${state.sideBarCountry.countryId === undefined ? 0 : state.sideBarCountry.countryId}`)\r\n .then(res => {\r\n const industriesList = res.data\r\n console.log('industriesList ===', industriesList)\r\n\r\n function addKeyValue (arr, key, value) {\r\n for (let i = 0; i < arr.length; i++) {\r\n const obj = arr[i]\r\n obj[key] = value\r\n }\r\n return arr\r\n }\r\n\r\n commit('setSideBarIndustriesList', addKeyValue(industriesList, 'level', 1))\r\n })\r\n },\r\n fetchInvestmentOptions: ({ commit }) => {\r\n axios.get(`${process.env.VUE_APP_API_INVESTMENT_OPTIONS}`)\r\n .then(res => {\r\n const investmentOptions = res.data\r\n commit('setMapSidebarInvestmentOptions', res.data)\r\n\r\n if (typeof window.mapData.investmentOptionId !== 'undefined') {\r\n const activeInvestments = investmentOptions.filter(investment => investment.id === window.mapData.investmentOptionId)\r\n\r\n if (activeInvestments.length > 0) {\r\n commit('setActiveInvestmentOption', activeInvestments[0])\r\n }\r\n\r\n commit('setActiveInvestmentOptionId', window.mapData.investmentOptionId)\r\n }\r\n })\r\n },\r\n fetchTotalInvestments: ({ commit }) => {\r\n if (typeof window.mapData.investmentOptionId !== 'undefined' || typeof window.mapData.regionId !== 'undefined') {\r\n axios.get(`${process.env.VUE_APP_API_SECURITY_INVESTMENTS}/${window.mapData.investmentOptionId}/${window.mapData.regionId}`)\r\n .then(res => {\r\n console.log('5. fetchTotalInvestments', res.data)\r\n const data = res.data\r\n const investmentPercentage = data.map(country => country.investmentPercentage).reduce((partialSum, a) => partialSum + a, 0)\r\n console.log('5.1 fetchTotalInvestments total', investmentPercentage)\r\n commit('setTotalInvestmentPercentage', investmentPercentage)\r\n })\r\n }\r\n },\r\n fetchTotalInvestmentsByInvestmentOption: ({ state, commit }, payload) => {\r\n if (typeof window.mapData.investmentOptionId !== 'undefined') {\r\n axios.get(`${process.env.VUE_APP_API_SECURITY_INVESTMENTS}/${payload}/${state.activeRegionId}`)\r\n .then(res => {\r\n console.log('5. fetchTotalInvestments', res.data)\r\n const data = res.data\r\n const investmentPercentage = data.map(country => country.investmentPercentage).reduce((partialSum, a) => partialSum + a, 0)\r\n console.log('5.1 fetchTotalInvestments total', investmentPercentage)\r\n commit('setTotalInvestmentPercentage', investmentPercentage)\r\n })\r\n }\r\n },\r\n fetchTotalInvestmentsByCountry: ({ state, commit }, payload) => {\r\n // console.log('country selected in store ===', state.sideBarCountry.countryId)\r\n // change state.activeInvestmentOptionId to country code\r\n // axios.get(`${process.env.VUE_APP_API_SECURITY_INVESTMENTS}/${state.activeRegionId}/${state.activeInvestmentOptionId}`)\r\n axios.get(`${process.env.VUE_APP_API_SECURITY_INVESTMENTS}/${state.activeInvestmentOptionId}/${state.activeRegionId}`)\r\n .then(res => {\r\n const data = res.data\r\n console.log('total investments by country ===', data)\r\n const matchedDataPercentage = data.filter(country => country.countryCode === payload)[0].investmentPercentage\r\n commit('setTotalInvestmentPercentage', matchedDataPercentage)\r\n })\r\n },\r\n fetchTotalInvestmentsByRegion: ({ state, commit }, payload) => {\r\n if (typeof window.mapData.regionId !== 'undefined') {\r\n axios.get(`${process.env.VUE_APP_API_SECURITY_INVESTMENTS}/${state.activeInvestmentOptionId}/${payload}`)\r\n .then(res => {\r\n console.log('5. fetchTotalInvestments', res.data)\r\n const data = res.data\r\n const investmentPercentage = data.map(country => country.investmentPercentage).reduce((partialSum, a) => partialSum + a, 0)\r\n console.log('5.1 fetchTotalInvestments total', investmentPercentage)\r\n commit('setTotalInvestmentPercentage', investmentPercentage)\r\n })\r\n }\r\n },\r\n fetchCompaniesUserSearch: ({ state, commit }, payload) => {\r\n // axios.get(`${process.env.VUE_APP_API_INDUSTRIES_SEARCH}/${payload}?numResults=5`)\r\n axios.get(`${process.env.VUE_APP_API_INDUSTRIES_LIST}/${state.activeInvestmentOptionId}/${state.activeRegionId}/${state.activeCountryIndex === null ? 0 : state.activeCountryIndex}/search/${payload}?numResults=5`)\r\n .then(res => {\r\n console.log('fetch companies user search ===', res.data)\r\n commit('setSideBarCompaniesUserSearch', res.data)\r\n })\r\n },\r\n fetchMapVariables: ({ commit }) => {\r\n if (typeof window.mapData !== 'undefined') {\r\n if (typeof window.mapData.title !== 'undefined') {\r\n commit('setMapTitle', window.mapData.title)\r\n }\r\n if (typeof window.mapData.investmentOptionId !== 'undefined') {\r\n commit('setActiveInvestmentOptionId', window.mapData.investmentOptionId)\r\n }\r\n if (typeof window.mapData.regionId !== 'undefined') {\r\n commit('setActiveRegionId', window.mapData.regionId)\r\n }\r\n }\r\n },\r\n fetchIntroContent: ({ commit, state }, payload) => {\r\n axios.get(`${process.env.VUE_APP_API_DATAVIS_CONTENT}`)\r\n .then(res => {\r\n const resData = res.data\r\n commit('setIntroText', resData.IntroText)\r\n commit('setIntroProxyText', resData.ProxyVotingText)\r\n })\r\n },\r\n async fetchApis ({ dispatch }) {\r\n await dispatch('fetchRegion')\r\n console.log('01. fetch region')\r\n await dispatch('fetchMapVariables')\r\n console.log('02. fetch map variables')\r\n await dispatch('fetchIndustriesList')\r\n console.log('03. fetch industries list')\r\n await dispatch('fetchInvestmentOptions')\r\n console.log('04. fetch investment options')\r\n await dispatch('fetchTotalInvestments')\r\n console.log('05. fetch total investments')\r\n await dispatch('fetchIntroContent')\r\n }\r\n },\r\n modules: {\r\n }\r\n})\r\n","import 'dotenv/config'\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport store from './store'\r\n\r\nconst app = createApp(App)\r\n\r\nasync function initApp () {\r\n console.log('00. fetchApis')\r\n await store.dispatch('fetchApis')\r\n await store.dispatch('setWalkthroughToken')\r\n await app.use(store)\r\n await app.mount('#map-app')\r\n}\r\n\r\ninitApp()\r\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"[data-v-771c5475]:root{--primary-mint:#d6f8e5;--primary-eucalyptus:#003822;--primary-budgie:#9adf2a;--primary-lorikeet:#51bb18;--primary-gum-blossom:#ffe3d8;--primary-galah:#f18ea5;--secondary-purple:#9989ed;--secondary-dark-purple:#5332a6;--secondary-red:#ff6165;--secondary-dark-red:#b80707;--secondary-orange:#f6b111;--secondary-dark-orange:#cf4b00;--secondary-teal:#3eb6a8;--secondary-dark-teal:#207b70;--secondary-grey:#98a5b3;--secondary-dark-grey:#5e666f;--secondary-footer-grey:#38424d;--tertiary-sage:#beceb2;--tertiary-mint:#addc91;--tertiary-burnt-orange:#d06528;--tertiary-peach:#e2a17d;--tertiary-violet:#4b3048;--tertiary-lavender:#b7acb6;--tertiary-yellow:#ffca00;--copy-bg-white:#666;--copy-bg-coloured:#333;--copy-bg-light-pink:#000;--background:#f5f5f5;--poppins:\\\"Poppins\\\",sans-serif;--londrina-solid:\\\"Londrina Solid\\\",cursive;--copy-heading:0.9rem;--copy-body:0.6rem}*[data-v-771c5475]{margin:0;padding:0;font-family:var(--poppins);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app[data-v-771c5475],body[data-v-771c5475],html[data-v-771c5475]{width:100%}input[data-v-771c5475]:focus{outline:none!important;border:0}[data-v-771c5475]::-moz-selection{background:var(--primary-mint)}[data-v-771c5475]::selection{background:var(--primary-mint)}.map-sidebar-companies-search[data-v-771c5475]{position:relative;display:flex;flex-direction:column;width:100%;border:none}.map-sidebar-companies-search .container[data-v-771c5475]{padding:1rem 2rem}@media(max-width:480px){.map-sidebar-companies-search .container[data-v-771c5475]{padding:.8rem .8rem}}.map-sidebar-companies-search .container .top[data-v-771c5475]{display:flex;justify-content:space-between;margin-bottom:1rem}.map-sidebar-companies-search .container .top .close-company-results[data-v-771c5475]{display:flex;align-items:center;font-weight:700}.map-sidebar-companies-search .container .top .top-close[data-v-771c5475]{border-bottom:2px solid var(--primary-eucalyptus);cursor:pointer}.map-sidebar-companies-search .container .top .top-close-icon[data-v-771c5475]{width:16px;height:16px;margin-left:1rem;cursor:pointer;transition:.2s}.map-sidebar-companies-search .container .top .top-close-icon[data-v-771c5475]:hover{transform:rotate(90deg)}.map-sidebar-companies-search .container .top .title[data-v-771c5475]{font-weight:700;border-bottom:2px solid transparent}.map-sidebar-companies-search .container .bottom[data-v-771c5475]{position:relative;display:flex;align-items:center;flex-direction:column}.map-sidebar-companies-search .container .bottom .companies-list[data-v-771c5475],.map-sidebar-companies-search .container .bottom .industries-list[data-v-771c5475]{display:flex;flex-direction:column;width:100%;margin-top:1rem}[data-v-771c5475] .search-parent:last-child .search-parent-header{border:none}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a
![\"arrow\"](\"@/assets/img/arrow-up.svg\")
\r\n ![\"arrow\"](\"@/assets/img/arrow-down.svg\")
\r\n ![](\"@/assets/img/icon-close.svg\"){kind=icon}
\r\n ![](\"@/assets/img/arrow-right.svg\"/){kind=icon}
\r\n \r\n ![](\"@/assets/img/icon-close.svg\"/){kind=icon}
\r\n ![](\"@/assets/img/icon-search.svg\"/){kind=icon}
\r\n ![](\"@/assets/img/icon-company.svg\"/){kind=icon}
\r\n