

<!doctype html>
<html lang="fr-CA">


<head>
            

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Security-Policy"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<!-- https://www.rbcgam.com/fr/fr/ca/products/mutual-funds/ic-table -->
<!-- else -->
	 <title>IC Table</title>
<meta name="description" content=""/>

<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.rbcgam.com/fr/fr/ca/products/mutual-funds/ic-table" />
<meta property="og:title" content="IC Table"/>
<meta property="og:site_name" content="RBC Global Asset Management" />
 

<link rel="preload" href="/application/themes/vue-partial-theme/css/ishares.css" as="style">
<link rel="preload" href="/application/themes/vue-partial-theme/css/wmfw-style.min.css" as="style">
<link rel="preload" href="/application/themes/vue-partial-theme/css/ishares.css" as="style">
<link rel="preload" href="/application/themes/vue-partial-theme/css/overrides.css" as="style">

<link rel="dns-prefetch" href="https://maxcdn.bootstrapcdn.com">
<link rel="preconnect" href="https://maxcdn.bootstrapcdn.com" crossorigin>

<link rel="dns-prefetch" href="https://cdn.sterbcgam.com">
<link rel="preconnect" href="https://cdn.sterbcgam.com" crossorigin>

<link rel="dns-prefetch" href="https://cdn.rbcgam.com">
<link rel="preconnect" href="https://cdn.rbcgam.com" crossorigin>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="/application/themes/vue-partial-theme/css/wmfw-style.min.css">
<link rel="stylesheet" href="https://cdn.sterbcgam.com/assets/css/roboto.min.css">
<link rel="stylesheet" href="https://cdn.rbcgam.com/dist/gam/gam.min.css">
<link rel="stylesheet" href="/application/themes/vue-partial-theme/css/ishares.css">
<link rel="stylesheet" href="/application/themes/vue-partial-theme/css/overrides.css">

<script type="importmap">
    {"imports":{"vue":"/application/vue-lib/3.5.13/vue.esm-browser.js","wm":"/application/gamdx-comp-lib/dist/gam/wm.mjs","wm-utils":"/application/gamdx-comp-lib/dist/gam/utils.mjs","vite-esm/":"/application/vite-es-modules/dist/"}}
</script>
<script>
    window.process = window.process || {env: {NODE_ENV: 'prod'}};
      </script>
<!-- https://www.rbcgam.com/fr/fr/ca/products/mutual-funds/ic-table -->
<!-- else -->
	
<script >
    //main-dataLayer
    window.dataLayer = window.dataLayer || [];

               let QueryParamsObj = {};
            for (let pair of new URLSearchParams(window.location.search)) {
                QueryParamsObj[pair[0]] = pair[1];
            }
            const requiredKeys = ['currency','date','region','sort','sortorder','strategy','tab','type'];

            requiredKeys.forEach(key => {
                if (!QueryParamsObj.hasOwnProperty(key)) {
                    QueryParamsObj[key] = undefined;
                }
            });

            
            window.dataLayer.push (Object.assign({
    'page_redirect': '',
    'page_country': 'ca',
    'page_region': 'na',
    'page_language': 'fr',
    'page_channel': 'public',
    'page_category': 'home',
    'page_subcategory': null,
    'page_type': 'individualInvestor'
    }, QueryParamsObj))
            
                        
            // GOOGLE ANALYTICS 4
                    window.dataLayer.push({
            'page_country':'ca',
            'page_region':'na',
            'page_language':'fr',
            'page_channel':'public',
            'page_category':'home',
            'page_subcategory':undefined,
            'page_breadcrumb':'',
            'user_type':'individualInvestor',
            'page_LOB':'RBCGAM_3',
            'attribute_1':undefined ,
            'user_multiaccess':undefined ,
            'user_territory': ''? '': undefined,
            
                            'content_type': undefined,
                'content_name': undefined,
                        
                        
                                'publication':undefined,
                    'content_author':undefined,
                            
                'content_id':'f9bacc6983e95221a12ffd909de9400c',
                
                                        'content_date':undefined,
                            
                'GAM_AdvisorId':undefined,
                'GAM_AdvisorTerritory':undefined,
                'GAM_DealerCode':undefined,
                'GAM_RoleID': undefined,
            
                        ...QueryParamsObj})
</script>

    <script id="onetrust-policy-sdk" tabindex="-1" src="https://cdn.cookielaw.org/consent/75c21a75-8c61-41b5-bbb4-220ec5be96cc/otSDKStub.js" data-document-language="true" type="text/javascript" charset="UTF-8" data-domain-script="75c21a75-8c61-41b5-bbb4-220ec5be96cc" ></script>
  <script type="text/javascript">
    function OptanonWrapper() { }
</script>
        <script>
                            var dataLayer=window.dataLayer=window.dataLayer||[];dataLayer.push({"LOB":"RBCGAM_3"});
                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
                        var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-P5P6H55');
        </script>


<script type="module" src="/application/themes/vue-partial-theme/js/analytics-service.js"></script>

  </head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body id="ic-table"
            >
<aside>
    <a class="skip-main" aria-label="Skip to cookie banner" href="#onetrust-policy-sdk">Aller à la bannière des témoins</a>
    <a class="skip-main" aria-label="Skip to main content" href="#main">Aller au contenu</a>
    <a class="skip-main" aria-label="Skip to footer" href="#footers">Aller au pied de page</a>
</aside>
  <div class="content-wrap">
                              <main id="main"
                class="content-wrapper  ">
                                                <div id="ictableListHeaderRoot" class="container"></div>
  <div id="app_id_2272655" v-cloak>
    <Teleport to="#ictableListHeaderRoot">
        <br/>
        <br/>
        <rbc-top-nav
                id="icTopNav"
                :items="links"
                logo="https://cdn.rbcgam.com/assets/images/logos/rbc-gam-logo-fr.svg"
                logo-link="/fr/ca/"
                logo-label="RBC GAM logo"
                :full-width="false"
        ></rbc-top-nav>
        <rbc-hero title="Fonds communs de placement"></rbc-hero>
    </Teleport>
</div>
<script type="module">
    import {createApp} from 'vue'
    import {RbcHero, RbcTopNav} from 'wm'

    const pathname = new URL(location).pathname.replace(/\/(fr|en|zh|zh-hant)/, "").replace(/\/$/, "");

    createApp({
        components: {
            'rbc-hero': RbcHero,
            'rbc-top-nav': RbcTopNav,
        },
        data() {
            return {
                links: [
                                        {
                          name: "English",
                          link: `/en${pathname}`
                      }
                                  ],
            }
        }
    }).mount('#app_id_2272655')
</script>

<div id="ictableListFiltersRoot"></div>
    
  
<div id="app_id_3473262" v-cloak>
    <Teleport to="#ictableListFiltersRoot">
        <rbc-block
                grey
                class="mb-1 py-1"
                style="border-top: #fedf01 2px solid"
                data-location="Mutual fund filters"
        >
            <rbc-expandable
                    arrow
                    arrow-position-x="left"
                    expanded
                    toggle-show
            >
                <template #trigger>
                    <h2 class="h4 d-inline-block">Filtres</h2><span
                        v-if="selectedFilters > 0"> (<strong>{{selectedFilters}}</strong> sélectionné<span v-if="selectedFilters > 1 && 'fr' == 'fr'">s</span>)</span>
                </template>
                <template v-if="selectedFilters > 0" #trigger-right>
                    <rbc-button
                            outline
                            size="small"
                            @click.stop="resetFilters"
                    >Effacer tous les filtres</rbc-button>
                </template>
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <span class="h5 d-block">Catégorie d’actif et type</span>
                        <div class="row no-gutters">
                            <rbc-tag
                                    v-model="filterType.moneymarket"
                                    id="moneymarket"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterType"
                            >
                              Marché monétaire
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterType.balancedportfolio"
                                    id="balancedportfolio"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterType"
                            >
                              Fonds équilibrés et solutions de portefeuille
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterType.fixedincome"
                                    id="fixedincome"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterType"
                            >
                              Titres à revenu fixe
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterType.equity"
                                    id="equity"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterType"
                            >
                              Actions
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterType.liquidalternatives"
                                    id="liquidalternatives"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterType"
                            >
                              Placements alternatifs liquids
                            </rbc-tag>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <span class="h5 d-block mt-half mt-md-0">Régions</span>
                        <div class="row no-gutters">
                            <rbc-tag
                                    v-model="filterRegion.canada"
                                    id="canada"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterRegion"
                            >
                              Canada
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterRegion.unitedstates"
                                    id="unitedstates"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterRegion"
                            >
                              États-Unis
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterRegion.northamerica"
                                    id="northamerica"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterRegion"
                            >
                              Amérique du Nord
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterRegion.global"
                                    id="global"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterRegion"
                            >
                              Monde
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterRegion.internationalemergingmarkets"
                                    id="internationalemergingmarkets"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag col-6 pr-quarter"
                                    @checkboxupdate="updateFilterRegion"
                            >
                              Marchés internationaux et émergents
                            </rbc-tag>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-6">
                        <span class="h5 d-block mt-half mt-lg-0">Devise</span>
                        <div class="row no-gutters">
                            <rbc-tag
                                    v-model="filterCurrency.cad"
                                    id="cad"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag pr-quarter col-lg-12 col-4"
                                    @checkboxupdate="updateFilterCurrency"
                            >
                              CAD
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterCurrency.usd"
                                    id="usd"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag pr-quarter col-lg-12 col-4"
                                    @checkboxupdate="updateFilterCurrency"
                            >
                              USD
                            </rbc-tag>
                            <rbc-tag
                                    v-model="filterCurrency.hedged"
                                    id="hedged"
                                    :checkable="true"
                                    size="large"
                                    class="mb-quarter w-100-rbc-tag pr-quarter col-lg-12 col-4"
                                    @checkboxupdate="updateFilterCurrency"
                            >
                              Risque de change couvert
                            </rbc-tag>
                        </div>
                    </div>
                </div>
            </rbc-expandable>
        </rbc-block>
    </Teleport>
</div>
<script type="module">
    import {
        listenSearchParamDeep,
        updateURLSearchParams,
        addEventListenerPopState
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp} from 'vue';
    import {RbcBlock, RbcExpandable, RbcButton, RbcTag} from 'wm';

    const urlSearchParam$ = listenSearchParamDeep();
    const uspFilterKeys = ["type", "currency", "region", "searchkeyword"];

    const initialSearchParam = {
        type: '',
        region: '',
        currency: '',
        searchkeyword: ''
    };

    const urlSearchParamType$ = listenSearchParamDeep("type");
    const urlSearchParamRegion$ = listenSearchParamDeep("region");
    const urlSearchParamCurrency$ = listenSearchParamDeep("currency");
    const defaultFilterTagObjFactory = () => ({
        type: {
            moneymarket: false,
            balancedportfolio: false,
            fixedincome: false,
            equity: false,
            liquidalternatives: false,
        },
        region: {
            canada: false,
            unitedstates: false,
            northamerica: false,
            global: false,
            internationalemergingmarkets: false,
        },
        currency: {
            cad: false,
            usd: false,
            hedged: false,
        },
    });

    const getSpecificFilterTagObj = (filterKey) => {
        return defaultFilterTagObjFactory()[filterKey];
    };

    const getNumberOfItemsInCSV = (csv) => {
        return (csv || "").split(",").filter(_ => _ !== "").length;
    };

    const initialSelectedFilters = uspFilterKeys.reduce((acc, curr) => {
        if (curr === "searchkeyword") {
            const initialSearchKeyword = !!(initialSearchParam[curr] || "").trim() ? 1 : 0;
            return acc + initialSearchKeyword;
        }
        return acc + getNumberOfItemsInCSV(initialSearchParam[curr]);
    }, 0);

    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParamType$.subscribe(uspType => {
                this.filterType = this.filtersStrToObj(getSpecificFilterTagObj("type"), uspType);
            })
            urlSearchParamRegion$.subscribe(uspRegion => {
                this.filterRegion = this.filtersStrToObj(getSpecificFilterTagObj("region"), uspRegion);
            })
            urlSearchParamCurrency$.subscribe(uspCurrency => {
                this.filterCurrency = this.filtersStrToObj(getSpecificFilterTagObj("currency"), uspCurrency);
            })
            urlSearchParam$.subscribe(urlSearchParam => {
                this.selectedFilters = uspFilterKeys.reduce((acc, curr) => {
                    if (curr === "searchkeyword") {
                        const initialSearchKeyword = !!(urlSearchParam[curr] || "").trim() ? 1 : 0;
                        return acc + initialSearchKeyword;
                    }
                    return acc + getNumberOfItemsInCSV(urlSearchParam[curr]);
                }, 0);
            })
        },
        components: {
            'rbc-block': RbcBlock,
            'rbc-expandable': RbcExpandable,
            'rbc-button': RbcButton,
            'rbc-tag': RbcTag,
        },
        data() {
            return {
                selectedFilters: initialSelectedFilters,
                filterType: this.filtersStrToObj(getSpecificFilterTagObj("type"), initialSearchParam.type),
                filterRegion: this.filtersStrToObj(getSpecificFilterTagObj("region"), initialSearchParam.region),
                filterCurrency: this.filtersStrToObj(getSpecificFilterTagObj("currency"), initialSearchParam.currency),
            }
        },
        methods: {
            resetFilters(e) {
                const url = new URL(location);
                const searchParamObj = Object.fromEntries(url.searchParams)
                const otherSearchParams = uspFilterKeys.reduce((o, k) => {
                    const {[k]: _, ...r} = o;
                    return r
                }, searchParamObj)
                url.search = "?" + new URLSearchParams(otherSearchParams).toString();
                history.pushState({}, "", url);
                updateURLSearchParams(otherSearchParams);
            },
            filtersStrToObj(filterTagObj, searchParamStr) {
                const filterTagKeys = Object.keys(filterTagObj);
                return (searchParamStr || "").split(",").reduce((acc, curr) => {
                    if (filterTagKeys.includes(curr)) {
                        acc[curr] = true
                    }
                    return acc;
                }, filterTagObj)
            },
            updateFilter(filterKey, filterObj) {
                const url = new URL(location);
                const {[filterKey]: _, ...otherSearchParams} = Object.fromEntries(url.searchParams);
                const arrayOfTrueTags = Object.keys(getSpecificFilterTagObj(filterKey)).reduce((acc, curr) => {
                    if (filterObj[curr]) {
                        acc.push(curr)
                    }
                    return acc
                }, []);
                const updatedUSP = arrayOfTrueTags.length === 0 ? otherSearchParams : {
                    ...otherSearchParams,
                    [filterKey]: arrayOfTrueTags.join(",")
                }
                url.search = "?" + new URLSearchParams(updatedUSP).toString();
                history.pushState({[filterKey]: arrayOfTrueTags.join(",")}, "", url);
                updateURLSearchParams(updatedUSP);
            },
            updateFilterType(e) {
                this.updateFilter("type", this.filterType)
            },
            updateFilterRegion(e) {
                this.updateFilter("region", this.filterRegion)
            },
            updateFilterCurrency(e) {
                this.updateFilter("currency", this.filterCurrency)
            }
        },
        mounted() {

        },
        unmount() {
            urlSearchParam$.unsubscribe();
            urlSearchParamType$.unsubscribe()
            urlSearchParamRegion$.unsubscribe()
            urlSearchParamCurrency$.unsubscribe()
        }
    }).mount('#app_id_3473262')
</script>

<div id="ictableListTableHeaderRoot" class="container"></div>
  
<div id="app_id_2171093" v-cloak>
    <Teleport to="#ictableListTableHeaderRoot">
        <div class="row">
            <div class="col">
                <div class="mb-md-1-half"></div>
                <h3 class="header-alt"
                    v-if="totalFundsInSeries == filteredFunds || totalFundsInSeries === null || filteredFunds === null">
                  Affichage de <strong>{{ totalFundsInSeries }}</strong> fonds communs de placement
                </h3>
                <h3 class="header-alt" v-else>Affichage <strong>{{ filteredFunds }}</strong> de <strong>{{ totalFundsInSeries }}</strong> fonds communs de placement</h3>
            </div>
            <div class="col-lg-4 col-md-5 text-md-right order-first order-md-last">
                <rbc-input
                        v-model="searchKeyword"
                        id="globalSearch"
                        class="mb-1"
                        label="Recherche de fonds"
                        placeholder="Recherche par code de fonds ou nom de fonds"
                        search
                        @input="updateGlobalSearch"
                ></rbc-input>
            </div>
        </div>
    </Teleport>
</div>
<script type="module">
    import {
        listenSearchParamDeep,
        updateURLSearchParams,
        addEventListenerPopState,
        totalFundsInSeries$,
        filteredFunds$,
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp} from "vue"
    import {
        RbcInput
    } from "wm"
    import {
        debounce
    } from "wm-utils"

    const initialSelectedKeyword = new URL(location).searchParams.get("searchkeyword");
    const urlSearchParamKeyword$ = listenSearchParamDeep("searchkeyword");

    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParamKeyword$.subscribe(searchKeyword => {
                this.searchKeyword = searchKeyword;
            })
            totalFundsInSeries$.subscribe(val => {
                this.totalFundsInSeries = val;
            })
            filteredFunds$.subscribe(val => {
                this.filteredFunds = val;
            })
            this.updateGlobalSearch = debounce(searchkeyword => {
                this.updateSearchKeyword(searchkeyword);
            }, 300)
        },
        components: {
            'rbc-input': RbcInput
        },
        data() {
            return {
                searchKeyword: initialSelectedKeyword,
                totalFundsInSeries: null,
                filteredFunds: null,
            }
        },
        methods: {
            updateSearchKeyword(searchkeyword) {
                const url = new URL(location);

                const {searchkeyword: _, ...otherSearchParams} = Object.fromEntries(url.searchParams);
                const updatedUSP = searchkeyword.trim().length > 0 ? {
                    ...otherSearchParams, searchkeyword: searchkeyword
                } : otherSearchParams

                url.search = "?" + new URLSearchParams(updatedUSP).toString();
                history.pushState({searchkeyword: searchkeyword}, "", url);
                updateURLSearchParams(updatedUSP);
            },
        },
        mounted() {
        },
        unmount() {
            urlSearchParamKeyword$.unsubscribe();
            totalFundsInSeries$.unsubscribe();
            filteredFunds$.unsubscribe();
        }
    }).mount('#app_id_2171093')
</script>

<div id="ictableListTabsRoot" class="container"></div>
  
<div id="app_id_3801965" v-cloak>
    <Teleport to="#ictableListTabsRoot">
        <rbc-tab
                flush
                @tabupdate="updateTabId($event.active)"
                :current="selectedTab"
        >
            <rbc-tab-content
                    id="overview"
                    name="Aperçu"
            ></rbc-tab-content>
            <rbc-tab-content
                    id="prices"
                    name="Prix"
            ></rbc-tab-content>
            <rbc-tab-content
                    id="performance"
                    name="Rendement"
            ></rbc-tab-content>
            <rbc-tab-content
                    id="calendarperformance"
                    name="Rendement par année civile"
            ></rbc-tab-content>
            <rbc-tab-content
                    id="distributions"
                    name="Distributions"
            ></rbc-tab-content>
            <rbc-tab-content
                    id="documents"
                    name="Documents"
            ></rbc-tab-content>
        </rbc-tab>
    </Teleport>
</div>
<script type="module">
    import {
        listenSearchParamDeep,
        updateURLSearchParams,
        addEventListenerPopState,
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp} from "vue"
    import {
        RbcTab,
        RbcTabContent,
    } from "wm"

    const initialSelectedTab = new URL(location).searchParams.get("tab");
    const urlSearchParamTab$ = listenSearchParamDeep("tab");

    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParamTab$.subscribe(uspTab => {
                this.selectedTab = uspTab;
            })
        },
        components: {
            'rbc-tab': RbcTab,
            'rbc-tab-content': RbcTabContent,
        },
        data() {
            return {
                selectedTab: initialSelectedTab,
            }
        },
        methods: {
            updateTabId(tabId) {
                if (tabId !== this.selectedTab) {
                    const url = new URL(location);
                    url.searchParams.set("tab", tabId);
                    history.pushState({tab: tabId}, "", url);
                    updateURLSearchParams(Object.fromEntries(url.searchParams));
                }
            }
        },
        mounted() {
        },
        unmount() {
            urlSearchParamTab$.unsubscribe();
        }
    }).mount('#app_id_3801965')
</script>

<div id="ictableListTableSubheaderRoot" class="container"></div>
  
<div id="app_id_7860020" v-cloak>
    <Teleport to="#ictableListTableSubheaderRoot">
        <div class="row align-items-end py-1">
            <div class="col-12 col-sm-7 col-lg-4 order-1 mb-1 mb-sm-0">
                <span v-show="selectedTab === 'prices'">
                    <span v-if="!!pricesDateValue">
                        <span>Prix et rendement du fonds au</span> <strong class="nowrap">{{ asOfDatePrice }}</strong>
                    </span>
                    <rbc-alert
                            v-else
                            type="warning"
                            :closable="false"
                    >
                      Sélectionner une autre date
                    </rbc-alert>
                </span>
                <span v-show="selectedTab === 'performance'">
                    <span>Rendement au</span> <strong
                        class="nowrap">{{ asOfDatePortfolio }}</strong>
                </span>
                <span v-show="selectedTab === 'calendarperformance'">
                    <span>Rendement annuel cumulatif au</span> <strong class="nowrap">{{ asOfDatePortfolio }}</strong>
                </span>
            </div>
            <div v-show="selectedTab === 'prices'" class="col-12 col-sm-6 col-lg-3">
                <rbc-datepicker
                        :id="'prices-date'"
                        :label="'Sélectionner une autre date'"
                        :typeable="false"
                        :format="customDateFormatter"
                        @input="updateSelectedDate"
                        v-model="pricesDateValue"
                        :language="'fr'"
                        :disabled-dates="disabledDates"/>
            </div>
            <div v-show="showGenerateCSV" class="col-12 col-sm order-3 text-sm-right mb-0">
                <span class="nowrap">
                    <rbc-button
                            class="py-0 my-n1"
                            icon="file-excel"
                            icon-position-x="right"
                            color="transparent"
                            size="medium"
                            @click="generateCSV"
                    >
                        {{downloadText}}
                    </rbc-button>
                </span>
            </div>
        </div>
    </Teleport>
</div>
<script type="module">
    import {
        listenSearchParamDeep,
        updateURLSearchParams,
        addEventListenerPopState,
        globalAnalysisDate$,
        totalFundsInSeries$,
        filteredFunds$,
        updateCSVObj
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp} from "vue"
    import {
        RbcDatepicker,
        RbcButton,
    } from "wm"

    const initialSelectedTab = new URL(location).searchParams.get("tab");
    const urlSearchParamTab$ = listenSearchParamDeep("tab");
    const hoursOffset = -4 * 60 * 60 * 1000
    const today = new Date(Date.now() - hoursOffset);
    const yesterday = new Date(new Date().setDate(today.getDate() - 1));
    const prior120 = new Date(new Date().setDate(today.getDate() - 120));


    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParamTab$.subscribe(uspTab => {
                this.selectedTab = uspTab;
            })
            globalAnalysisDate$.subscribe(analysisDate => {
                this.analysisDate = analysisDate;
                if (!!this.analysisDate.price) {
                    const selectedDate = this.analysisDate.price.split("-")
                    const timezoneOffset = new Date().getTimezoneOffset() * 60 * 1000
                    this.pricesDateValue = new Date(Date.UTC(selectedDate[0], selectedDate[1] - 1, selectedDate[2]) + timezoneOffset)
                } else {
                    this.pricesDateValue = null
                }
            })
            totalFundsInSeries$.subscribe(val => {
                this.totalFundsInSeries = val;
            })
            filteredFunds$.subscribe(val => {
                this.filteredFunds = val;
            })
        },
        components: {
            'rbc-datepicker': RbcDatepicker,
            'rbc-button': RbcButton,
        },
        data() {
            return {
                selectedTab: initialSelectedTab,
                analysisDate: {},
                pricesDateValue: yesterday,
                disabledDates: {
                    to: prior120,
                    from: yesterday,
                    days: [6, 0],
                },
                totalFundsInSeries: 0,
                filteredFunds: 0,
            }
        },
        methods: {
            updateSelectedDate(selectedDate) {
                const dateStr = (selectedDate.getDate()).toString().padStart(2, '0');
                const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0');
                const year = selectedDate.getFullYear().toString();
                const compoundDate = `${year}${month}${dateStr}`

                const url = new URL(location);
                url.searchParams.set("date", compoundDate);
                history.pushState({date: compoundDate}, "", url)
                updateURLSearchParams(Object.fromEntries(url.searchParams));
            },
            customDateFormatter(date) {
                return date.toLocaleDateString('fr-FR', {
                    year: "numeric",
                    month: "short",
                    day: "numeric",
                    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
                });
            },
            generateCSV() {
                let CSVObj = {};
                if (this.selectedTab === 'prices') {
                    CSVObj.selectedTab = this.selectedTab;
                    CSVObj.asOfDate = this.asOfDatePrice;
                    CSVObj.fileName = 'Prix' + '.csv';
                }
                if (this.selectedTab === 'performance') {
                    CSVObj.selectedTab = this.selectedTab;
                    CSVObj.asOfDate = this.asOfDatePortfolio;
                    CSVObj.fileName = 'Rendement' + '.csv';
                }
                updateCSVObj(CSVObj);
            }
        },
        computed: {
            asOfDatePortfolio() {
                return !!this.analysisDate.performance ? new Date(this.analysisDate.performance).toLocaleDateString('fr-FR', {
                    year: "numeric",
                    month: "short",
                    day: "numeric",
                    timeZone: 'UTC'
                }) : null
            },
            asOfDatePrice() {
                return !!this.analysisDate.price ? new Date(this.analysisDate.price).toLocaleDateString('fr-FR', {
                    year: "numeric",
                    month: "short",
                    day: "numeric",
                    timeZone: 'UTC'
                }) : null
            },
            showGenerateCSV() {
                return ["prices", "performance"].includes(this.selectedTab);
            },
            downloadText() {
                let strBuilder = 'Télécharger ';
                switch (this.selectedTab) {
                    case "prices":
                        strBuilder += 'Prix'.toLowerCase();
                        break;
                    case "performance":
                        strBuilder += 'Rendement'.toLowerCase();
                        break;
                    default:
                        strBuilder = '';
                }
                return strBuilder;
            }
        },
        mounted() {
        },
        unmount() {
            urlSearchParamTab$.unsubscribe();
            globalAnalysisDate$.unsubscribe();
            totalFundsInSeries$.unsubscribe();
            filteredFunds$.unsubscribe();
        }
    }).mount('#app_id_7860020')
</script>

<div id="addToThemeRoot" class="container"></div>
  
<div id="app_id_1511079" v-cloak>
    <Teleport to="#addToThemeRoot">
        <div v-cloak>
            <rbc-modal
                    :active="themeModalOpen"
                    button-cancel="Annuler"
                    title="Ajouter au thème(s)"
                    button-size="medium"
                    @toggle="toggleThemeModal"
            >
                <p class="well bold px-1 py-1 mb-1">{{ themeModalContentToAdd.name }}</p>
                <rbc-tab class="mb-1" toggle-show @tabupdate="themeModalTabUpdate($event.active)">
                    <rbc-tab-content id="existing-themes" name="Thèmes existants">
                        <h4>Ajouter au(x) thème(s)</h4>
                        <rbc-multiselect
                                label="Thèmes existants"
                                id="themeMultiselect"
                                v-model="themeModalMyThemesSelect"
                                checked-text="sélectionnés"
                                placeholder="Choisir"
                        ></rbc-multiselect>
                    </rbc-tab-content>
                    <rbc-tab-content id="new-theme" name="Nouveau thème">
                        <h4>Ajouter à un nouveau thème ?</h4>
                        <rbc-input
                                id="themeNewTheme"
                                label="Nouveau thème"
                                type="text"
                                class="mb-1"
                                v-model="themeModalNewThemeName"
                        ></rbc-input>
                    </rbc-tab-content>
                </rbc-tab>
                <a href="/fr/ca/advisor-support/themes/how-themes-work" target="_blank"
                   class="link-ext">Besoin d’aide pour utiliser les thèmes ?</a>
                <template #buttons>
                    <rbc-button
                            @click="themeModalAddContent"
                    >
                      Enregistrer
                    </rbc-button>
                </template>
            </rbc-modal>
        </div>
    </Teleport>
</div>
<script type="module">
    import {
        fetchedThemeData$
    } from "vite-esm/add-to-theme.service.js";
    import {createApp} from "vue"
    import {
        RbcModal, RbcTab, RbcTabContent, RbcMultiselect, RbcInput, RbcButton
    } from "wm"

    createApp({
        created() {
            fetchedThemeData$.subscribe(httpResponse => {
                this.updateContentToAdd(httpResponse.getContentData);
                this.updateMyThemesSelect(httpResponse.getMyThemesData);
                this.themeModalOpen = true;
            });
        },
        components: {
            'rbc-modal': RbcModal,
            'rbc-tab': RbcTab,
            'rbc-tab-content': RbcTabContent,
            'rbc-multiselect': RbcMultiselect,
            'rbc-input': RbcInput,
            'rbc-button': RbcButton
        },
        data() {
            return {
                themeModalNewThemeName: null,
                themeModalMyThemesSelect: [],
                themeModalOpen: false,
                themeModalContentToAdd: {},
                themeModalCurrentTab: "existing-themes",
            }
        },
        methods: {
            toggleThemeModal() {
                this.themeModalOpen = !this.themeModalOpen;
            },
            themeModalTabUpdate(tabId) {
                this.themeModalCurrentTab = tabId;
            },
            updateContentToAdd(data) {
                this.themeModalContentToAdd = {
                    identifier: data.identifier,
                    name: data.name,
                    languageId: data.languageId,
                }
            },
            updateMyThemesSelect(data) {
                this.themeModalMyThemesSelect = (data && data.themes) ? data.themes.map(el => {
                    let selected = (el.listOfIdentifiers.indexOf(this.themeModalContentToAdd.identifier) !== -1);
                    return {
                        label: el.name,
                        value: el.identifier,
                        selected: selected,
                        disabled: selected,
                        listOfIdentifiers: el.listOfIdentifiers,
                        languageId: el.languageId
                    };
                }) : [];
            },
            themeModalAddContent() {
                if (this.themeModalCurrentTab === "existing-themes") {
                    this.updateSelectedThemes();
                } else {
                    this.addNewTheme();
                }
            },
            updateSelectedThemes() {
                if (!!this.themeModalMyThemesSelect) {
                    const selectedThemes = this.themeModalMyThemesSelect.filter(({selected}) => selected)
                    selectedThemes.forEach(el => {
                        const listOfIdentifiers = [].concat(el.listOfIdentifiers.split(','));
                        if (listOfIdentifiers.indexOf(this.themeModalContentToAdd.identifier) === -1) {
                            listOfIdentifiers.push(this.themeModalContentToAdd.identifier);
                        }
                        const url = '/ca/contentletapi?identifier=' + el.value + '&languageId=' + el.languageId + '&action=UPDATE&listOfIdentifiers=' + listOfIdentifiers;
                        fetch(url)
                                .then(function (response) {
                                    if (response.status === 200) {
                                        return response.json();
                                    } else {
                                        console.error('Error trying to update content httpStatus:' + response.status);
                                    }
                                })
                                .then(function (data) {
                                    console.log(data);
                                })
                                .catch(function (e) {
                                    console.error(e);
                                });
                    })
                    this.toggleThemeModal();
                }
            },
            addNewTheme() {
                var name = encodeURIComponent(this.themeModalNewThemeName);
                var uniqueId = (new Date()).getTime();
                var url = '/ca/contentletapi?action=CREATE&contentType=Themes&languageId=' + this.themeModalContentToAdd.languageId + '&advisorId=${advisorID}&uniqueidentifier=' + uniqueId + '&name=' + name + '&listOfIdentifiers=' + this.themeModalContentToAdd.identifier;
                fetch(url)
                        .then(function (response) {
                            if (response.status !== 200) {
                                throw new Error('Error while creating new theme httpStatus:' + response.status);
                            } else {
                                return response.json();
                            }
                        })
                        .then(function (data) {
                            console.log(data);
                        })
                        .catch(function (e) {
                            console.error(e);
                        });
                this.toggleThemeModal();
            }
        },
        mounted() {
        },
        unmount() {
            fetchedThemeData$.unsubscribe();
        }
    }).mount('#app_id_1511079')
</script>

<script data-velocimacro-holder="mfListgeneralSliceTableDefinitions">
        </script><script data-velocimacro-holder="overviewSliceTableDefinitions">
        </script><script data-velocimacro-holder="pricesSliceTableDefinitions">
        </script><script data-velocimacro-holder="performanceSliceTableDefinitions">
        </script><script data-velocimacro-holder="calendarperformanceSliceTableDefinitions">
        </script><script data-velocimacro-holder="distributionsSliceTableDefinitions">
        </script><script data-velocimacro-holder="documentsSliceTableDefinitions">
        </script>
<script data-velocimacro-holder="data-table-definitions">
        </script>
<div id="ictableListTableDataRoot" class="container"></div>
  
<div id="app_id_3712313" v-cloak>
    <Teleport to="#ictableListTableDataRoot">
        <div style="position:relative" data-location="fund table">
            <rbc-spinner v-if="spinnerOverlay" overlay></rbc-spinner>
            <rbc-datatable
                    id="fundList"
                    ref="fundListTable"
                    class="mb-1"
                    :columns="fundColumnsDefinition"
                    :rows="tableData.filteredRows"
                    :header-fixed="!notFixedHeader"
                    :height="500"
                    compact
                    sortable
                    :customizable-columns="false"
                    :global-search="false"
                    :components-to-register="componentsToRegister"
                    @onsortchanged="sortToUrl"
            >
            </rbc-datatable>
        </div>
    </Teleport>
</div>
<script type="module">
    import {
        getThemeData
    } from "vite-esm/add-to-theme.service.js";
    import {
        addEventListenerPopState,
        listenSearchParamDeep,
        unifiedDataService,
        updateFilteredFunds,
        updateFootnoteList,
        updateGlobalAnalysisDate,
        updateTotalFundsInSeries,
        updateUSPWithDebounce,
        URLSearchParamWithDebounce$,
        updateURLSearchParams,
        generateCSVObj$,
        downloadData
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp, nextTick, ref, markRaw} from "vue"
    import {
        RbcSpinner,
        RbcDatatable,
        RbcTooltip,
        RbcButton
    } from "wm"
    import {
        decimal
    } from "wm-utils"

    const urlSearchParamDate$ = listenSearchParamDeep("date");
    const urlSearchParams$ = listenSearchParamDeep();
    const unifiedDS = unifiedDataService();
      
                      const ictableColumnDefinitionGeneralSlice = [
        {
            header: "Ajouter au thème",
            srOnlyHeader: true,
            dataType: "vue",
            show: false,
            sortable: false,
            style: {
                width: "40px",
                minWidth: "40px !important",
                textAlign: "center"
            },
        },
        {
            header: "Code",
            dataType: "string",
            show: true,
            isMandatory: true,
            main: true,
            sortable: false,
            sortField: "key",
            style: {
                width: "80px",
                minWidth: "80px"
            }
        },
        {
            header: "Nom du fonds",
            dataType: "string",
            show: true,
            sortable: true,
            sortField: "key",
            style: {
                minWidth: "180px"
            }
        },
        {
            header: "Série",
            dataType: "string",
            show: true,
            style: {
                width: "55px",
                minWidth: "55px",
            }
        },
    ]
              const ictableColumnDefinitionOverviewSlice = [
        {
            header: "Type d’actif",
            dataType: "string",
            show: true,
            sortable: true,
            group: "overview",
            style: {
                width: "180px",
                minWidth: "180px"
            }
        },
        {
            header: "Risque",
            dataType: "string",
            sortField: "key",
            show: true,
            sortable: true,
            group: "overview",
            style: {
                width: "105px",
                minWidth: "105px"
            }
        },
        {
            header: "Frais de gestion",
            dataType: "number",
            dataUnit: " %",
            show: true,
            sortable: true,
            sortField: "key",
            group: "overview",
            style: {
                width: "95px",
                minWidth: "95px !important"
            }
        },
        {
            header: "RFG*",
            dataType: "number",
            formatNumber: true,
            formatNumberLang: "fr",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "overview",
            style: {
                width: "70px",
                minWidth: "70px",
            }
        },
        {
            header: "Date de<BR>création",
            dataType: "date",
            dataDateFormat: {
                year: "numeric",
                month: "short",
            },
            dataDateLocale: "fr-FR",
            show: true,
            sortable: true,
            group: "overview",
            style: {
                width: "90px",
                minWidth: "90px !important"
            }
        },
    ]
              const ictableColumnDefinitionPricesSlice = [
        {
            header: "Rendement en revenu ±",
            colored: true,
            arrow: true,
            dataType: "number",
            formatNumber: true,
            formatNumberLang: "fr",
            formatNumberDecimal: 4,
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "prices",
            style: {
                width: "110px",
                minWidth: "110px"
            }
        },
        {
            header: "Prix ($)",
            dataType: "number",
            formatNumber: true,
            formatNumberLang: "fr",
            formatNumberDecimal: 4,
            dataUnit: " $",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "prices",
            style: {
                width: "90px",
                minWidth: "90px"
            }
        },
        {
            header: "Variation nette",
            show: true,
            sortable: true,
            sortField: "key",
            group: "prices",
            style: {
                width: "100px",
                minWidth: "100px"
            }
        },
        {
            header: "% Variation",
            colored: true,
            signed: true,
            dataType: "number",
            formatNumber: true,
            formatNumberLang: "fr",
            formatNumberDecimal: 1,
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "prices",
            style: {
                width: "100px",
                minWidth: "100px"
            }
        }
    ]
              const ictableColumnDefinitionPerformanceSlice = [
        {
            header: "CA",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "1 mois",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "3 mois",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "6 mois",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "1 an",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "3 ans",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "5 ans",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "10 ans",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
        {
            header: "Depuis la création",
            searchable: false,
            show: true,
            sortable: true,
            dataType: "vue",
            sortField: 'key',
            group: "performance",
            style: {
                width: "60px",
                minWidth: "60px",
            }
        },
    ]
              const ictableColumnDefinitionCalendarperformanceSlice = [
        {
            header: "CA",
            searchable: false,
            dataType: "number",
            dataUnit: " %",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "calendarperformance",
            style: {
                width: "60px",
                minWidth: "60px"
            }
        },
                {
              header: "Year1",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year2",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year3",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year4",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year5",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year6",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year7",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year8",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year9",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
                {
              header: "Year10",
              searchable: false,
              dataType: "number",
              dataUnit: " %",
              dataUnitPosition: 'right',
              show: true,
              sortable: true,
              group: "calendarperformance",
              style: {
                  width: "65px",
                  minWidth: "65px"
              }
          },
          ]
              const ictableColumnDefinitionDistributionsSlice = [
        {
            header: "Dernière distr.",
            searchable: false,
            dataType: "number",
            formatNumber: true,
            formatNumberLang: "fr",
            formatNumberDecimal: 4,
            dataUnit: " $",
            dataUnitPosition: 'right',
            show: true,
            sortable: true,
            group: "distributions",
            style: {
                width: "115px",
                minWidth: "115px",
                whiteSpace: "nowrap"
            }
        },
        {
            header: "Date de distr.",
            searchable: false,
            dataType: "date",
            dataDateFormat: {
                year: "numeric",
                month: "short",
                day: "numeric"
            },
            dataDateLocale: "fr-FR",
            show: true,
            sortable: true,
            group: "distributions",
            style: {
                width: "110px",
                minWidth: "110px",
                whiteSpace: "nowrap"
            }
        },
    ]
              const ictableColumnDefinitionDocumentsSlice = [
        {
            header: "Documents",
            searchable: false,
            dataType: "vue",
            show: true,
            group: "documents",
            style: {
                width: "310px",
                minWidth: "150px"
            }
        }
    ]
    
    const columnDef = [
        ...ictableColumnDefinitionGeneralSlice,
        ...ictableColumnDefinitionOverviewSlice,
        ...ictableColumnDefinitionPricesSlice,
        ...ictableColumnDefinitionPerformanceSlice,
        ...ictableColumnDefinitionCalendarperformanceSlice,
        ...ictableColumnDefinitionDistributionsSlice,
        ...ictableColumnDefinitionDocumentsSlice,

    ].map(column => {
        return {
            ...column,
            searchable: ["Code", "Nom du fonds", "Série"].includes(column.header)
        }
    });
          
                const rowMapper = (fdsFundData, dcmsFundData) => {
        const thirteenMonthOffset = (30 + 365) * 24 * 60 * 60 * 1000;
        const thirteenMonthsAgo = new Date(Date.now() - thirteenMonthOffset);

        return fdsFundData.map((fdsData, index) => {
            const isAtleast13monthsOld = new Date(fdsData.inceptionDate) < thirteenMonthsAgo;
            const dcmsData = dcmsFundData.find(({fundCode}) => fundCode === fdsData.rbcFundCode);
            // const parentFundCode = fdsData.mrfpfsFundCode || fdsData.rbcFundCode;
            // const parentData = fdsFundData.find(({rbcFundCode}) => parentFundCode === rbcFundCode) || fdsData;
            // const parentIsAtleast13monthsOld = new Date(parentData.inceptionDate) < thirteenMonthsAgo;
            const parentIsAtleast13monthsOld = !!fdsData.showPerformance
            const fundCode = fdsData.rbcFundCode;
              const ictableRowMapperGeneralSlice = (fdsData, dcmsData) => {
        const langKey = 'fr'
        const fundCode = fdsData.rbcFundCode
        const addToThemeCell = `
            <span class="d-block text-center m-n1">
                <rbc-button
                    @click="addToTheme({fundCode: '${fundCode}'})"
                    id="${fundCode}-briefcase"
                    data-briefcase="${fundCode}"
                    aria-label="Add to theme ${fundCode}"
                    icon="briefcase"
                    size="small"
                    color="transparent"
                />
            </span>
            `;
        const fundCodeCellValue = `
                            <a href='/${langKey}/ca/products/mutual-funds/${fundCode}/detail'>
                                ${fundCode}
                            </a>
                        `;
        const defaultName = fdsData.fundName["en"];
        const seriesDisplay = `${(dcmsData.seriesDisplay.includes("t")) ? ` - ${dcmsData.seriesDisplay.toUpperCase()}` : ""}<br>`;
        const chineseSimplifiedName = dcmsData.chineseSimplifiedName + seriesDisplay;
        const chineseTraditionalName = dcmsData.chineseTraditionalName + seriesDisplay;
        const fundFootnotesArr = dcmsData.footnotes.split(",").sort((a, b) => parseInt(a) - parseInt(b)).filter(a => a.length > 0);
        const fundFootnotesStr = fundFootnotesArr.length > 0 ? fundFootnotesArr.join(", ") : "";
        let displayedFundName = ""
        switch (langKey) {
            case "zh":
                displayedFundName = chineseSimplifiedName + defaultName;
                break;
            case "zh-hant":
                displayedFundName = chineseTraditionalName + defaultName;
                break;
            case "fr":
                displayedFundName = fdsData.fundName["fr"]
                break;
            default:
                displayedFundName = defaultName;
                break;
        }
        const fundNameCellValue = `
  <a href='/${langKey}/ca/products/mutual-funds/${fundCode}/detail' class="fund-link">
      ${displayedFundName}
  </a>
  ${(fundFootnotesArr.length > 0) ? `
    <sup>
      <a href='#footnotes' class="footnote-link" aria-label="Footnote ${fundFootnotesStr}">
        ${fundFootnotesStr}
      </a>
    </sup>` : ""}
`;

        let seriesCellText = (!!dcmsData.series ? dcmsData.seriesDisplay : fdsData.series).toUpperCase();
        seriesCellText = seriesCellText === "ADV" ? '(FAD)' : seriesCellText;
        return [
            addToThemeCell,
            {
                key: fundCode,
                value: fundCodeCellValue
            },
            {
                key: langKey === "fr" ? fdsData.fundName[langKey] : fdsData.fundName["en"],
                value: fundNameCellValue
            },
            seriesCellText,
        ]
    }
                const generalSliceArr = ictableRowMapperGeneralSlice(fdsData, dcmsData);
              const ictableRowMapperOverviewSlice = (fdsData, dcmsData) => {
        const langKey = 'fr'
        let riskRatingKey = 0;
        switch (dcmsData.risk) {
            case "noriskrating":
                riskRatingKey = 0;
                break;
            case "low":
                riskRatingKey = 1;
                break;
            case "lowtomedium":
                riskRatingKey = 2;
                break;
            case "medium":
                riskRatingKey = 3;
                break;
            case "mediumtohigh":
                riskRatingKey = 4;
                break;
            case "high":
                riskRatingKey = 5;
                break;
            default:
                break;
        }
        const managementFeeKey = ((parseInt(dcmsData.managementFees * 100000) || 0) / 1000).toFixed(2);
        let managementFeeValue = "";
        if (!!dcmsData.managementFees && dcmsData.managementFees !== "-1" && dcmsData.managementFees !== "neg") {
            managementFeeValue = `${dcmsData.managementFeesPrefixText} ` || managementFeeValue;
            const formatOptions = {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            };
            const formattedNumber = new Intl.NumberFormat(langKey, formatOptions).format((parseInt(dcmsData.managementFees * 100000) || 0) / 1000);
            managementFeeValue += formattedNumber;
        }
        const merValue = !!dcmsData.mer && dcmsData.mer !== "-1" && dcmsData.mer !== "neg" ? ((parseInt(dcmsData.mer * 100000) || 0) / 1000).toFixed(2) : null;
        return [
            dcmsData.fundAssetClass,
            {
                key: riskRatingKey,
                value: !!dcmsData.riskText ? dcmsData.riskText : null,
            },
            {
                key: managementFeeKey,
                value: managementFeeValue,
            },
            merValue,
            fdsData.inceptionDate,
        ]
    }
                const overviewSliceArr = ictableRowMapperOverviewSlice(fdsData, dcmsData);
              const ictableRowMapperPricesSlice = (fdsData, dcmsData) => {
        const coloredWrapper = (key, value) => {
            let color = ""
            if (key > 0) {
                color = "c-alert-green"
            } else if (key < 0) {
                color = "c-alert-red"
            }
            return `<span class="d-flex justify-content-end ${color}">${value}</span>`
        };
        const langKey = 'fr';
        const addCurrencyWrapper = (value) => {
            let sign = ""
            if (value > 0) {
                sign = "+"
            } else if (value < 0) {
                sign = "-"
            }
            value = decimal(Math.abs(value), 4)
            if (langKey === 'fr') {
                return `${sign}${value} $`
            } else {
                return `${sign}$${value}`
            }
        }
        const whenNull = `<span class="d-flex justify-content-end">-</span>`
        if (fdsData.assetClassFilter === "moneyMarketFunds") {
            const priceAsOf = fdsData.analysisDate.price
            const priceInDate = new Date(priceAsOf);
            let currentLatestAsOf = null;
            Object.keys(fdsData.yields).forEach(date => {
                const currYieldDate = new Date(date);
                if (currYieldDate > new Date(currentLatestAsOf) && priceInDate > currYieldDate) {
                    currentLatestAsOf = date;
                }
            })
            const yieldData = fdsData.yields[priceAsOf];
            const diffChange = fdsData.yields[priceAsOf] - fdsData.yields[currentLatestAsOf]
            const netChange = diffChange !== 0 ? decimal(diffChange, 4) : "0.0000"
            const key = netChange
            const value = !!netChange ? coloredWrapper(key, netChange) : whenNull

            return [yieldData, null, {key, value}, null]
        } else {
            return [
                null,
                decimal(fdsData.price, 4),                {
                    key: fdsData.netChange,
                    value: !!fdsData.netChange ? coloredWrapper(fdsData.netChange, addCurrencyWrapper(fdsData.netChange)) : whenNull
                },
                decimal(fdsData.pctChange),            ]
        }
    }
                const pricesSliceArr = ictableRowMapperPricesSlice(fdsData, dcmsData);
              const performanceNumberFormatter = (val, fraxDig) => {
        const langKey = 'fr' || 'en';
        const formatOptions = {
            minimumFractionDigits: Number(fraxDig),
            maximumFractionDigits: Number(fraxDig)
        };
        return !!val ? new Intl.NumberFormat(langKey, formatOptions).format(val) : "";
    }

    const ictableRowMapperPerformanceSlice = (fdsData, dcmsData, parentIsAtleast13monthsOld) => {
        const performanceDecimal = fdsData.assetClassFilter === "moneyMarketFunds" ? 2 : 1;
        const performanceKeys = ['YTD', '1Mth', '3Mth', '6Mth', '1Yr', '3Yr', '5Yr', '10Yr'];
        const emptyArr = [...performanceKeys.map(_ => ""), {
            key: 0,
            value: `<span class='d-flex justify-content-end'>-</span>`
        }];
        const tooltip = `
                <span class="mx-n1">
                <rbc-tooltip
                    :hoverable="true"
                    :clickable="true"
                    icon="info-circle"
                    text="${fdsData.inceptionDate}"
                    position="left"
                />
                </span>
            `
        const sinceInceptionData = !!fdsData.performance ? fdsData.performance.sinceInception : null
        const sinceInceptionCellValue = `
                <span class='d-flex justify-content-end text-nowrap'>
                    ${(!!sinceInceptionData) ? `${(performanceNumberFormatter(sinceInceptionData, performanceDecimal))} %${tooltip}` : "-"}
                </span>
            `;
        return parentIsAtleast13monthsOld && !!fdsData.performance ? [...performanceKeys.map(key => {
            return performanceNumberFormatter(fdsData.performance[key], performanceDecimal);
        }), {
            key: isNaN(sinceInceptionData) ? 0 : sinceInceptionData,
            value: sinceInceptionCellValue,
        }] : emptyArr
    }
                const performanceSliceArr = ictableRowMapperPerformanceSlice(fdsData, dcmsData, parentIsAtleast13monthsOld);
              const calPerfNumberFormatter = (val, fraxDig) => {
        const langKey = 'fr' || 'en';
        const formatOptions = {
            minimumFractionDigits: Number(fraxDig),
            maximumFractionDigits: Number(fraxDig)
        };
        return !!val ? new Intl.NumberFormat(langKey, formatOptions).format(val) : "";
    }

    const ictableRowMapperCalendarperformanceSlice = (fdsData, dcmsData, isAtleast13monthsOld) => {
        const performanceDecimal = fdsData.assetClassFilter === "moneyMarketFunds" ? 2 : 1;
        const ytdPerformance = fdsData && fdsData.performance ? fdsData.performance["YTD"] : null;
        const calReturns = fdsData.calendarReturns;
        const calReturnsArray = (!!calReturns ? Array.from({length: 10}, (_, i) => i + 1).map(index => {
            const calYearReturn = calReturns[`Year${index}`];
            return !!calYearReturn ? calPerfNumberFormatter(calYearReturn, performanceDecimal) : "";
        }) : Array.from({length: 10}, (_) => ""))

        return isAtleast13monthsOld ? [
            !!ytdPerformance ? calPerfNumberFormatter(ytdPerformance, performanceDecimal) : "",
            ...calReturnsArray
        ] : Array.from({length: 11}, (_) => "");
    }
                const calendarperformanceSliceArr = ictableRowMapperCalendarperformanceSlice(fdsData, dcmsData, isAtleast13monthsOld);
              const ictableRowMapperDistributionsSlice = (fdsData, dcmsData) => {
        const distribLast = !!fdsData.distribLast ? decimal(fdsData.distribLast, 4) : "";
        const distribLastDate = !!fdsData.distribLastDate ? fdsData.distribLastDate : "";
        return [distribLast, distribLastDate];
    }
                const distributionsSliceArr = ictableRowMapperDistributionsSlice(fdsData, dcmsData);
              const ictableRowMapperDocumentsSlice = (fdsData, dcmsData) => {
        const createRbcButton = (link, label) => {
            return `
                    <rbc-button
                        link="${link}"
                        link-target="_blank"
                        icon="file-pdf"
                        icon-position-x="right"
                        size="small"
                        color="transparent"
                        aria-label="${label}"
                    >
                        ${label}
                    </rbc-button>
                `;
        };
              const langKey = 'fr'
        const languagePDFLetter = langKey === "fr" ? "f" : "e";
        const fundFactsText = "Aperçu du fonds";
        const quarterlyupdateText = "Rapport trimestriel";
        const monthlyupdateText = "Rapport mensuel";

        const fundfactsButton = createRbcButton(`http://funds.rbcgam.com/pdf/fund-facts/funds/${dcmsData.fundFactsCode.toLowerCase()}_f.pdf`, fundFactsText);
        let monthlyPdfCodeInnerHTML = "";
        if (!!dcmsData.monthlyPdfCode) {
            const quarterlyButton = createRbcButton(`http://funds.rbcgam.com/pdf/fund-pages/quarterly/${dcmsData.monthlyPdfCode.toLowerCase()}_f.pdf`, quarterlyupdateText);
            const monthlyButton = createRbcButton(`http://funds.rbcgam.com/pdf/fund-pages/monthly/${dcmsData.monthlyPdfCode.toLowerCase()}_f.pdf`, monthlyupdateText);
            monthlyPdfCodeInnerHTML = `
                <span class='d-block d-md-inline nowrap'>
                    ${quarterlyButton}
                    <br>
                    ${monthlyButton}
                </span>
            `;
        }
        const documentsCellValue = `
                <span class='d-md-flex'>
                    <span class='mr-md-3 d-block d-md-inline nowrap'>
                        ${fundfactsButton}
                    </span>
                    ${monthlyPdfCodeInnerHTML}
                </span>
            `
        return [
            documentsCellValue
        ]
    }
                const documentsSliceArr = ictableRowMapperDocumentsSlice(fdsData, dcmsData);

            return {
                id: fundCode,
                dcmsData: dcmsData,
                showInExcel: fdsData.inceptionDate && (thirteenMonthsAgo < new Date(fdsData.inceptionDate)),
                cells: [
                    ...generalSliceArr,
                    ...overviewSliceArr,
                    ...pricesSliceArr,
                    ...performanceSliceArr,
                    ...calendarperformanceSliceArr,
                    ...distributionsSliceArr,
                    ...documentsSliceArr,
                ],
                methods: [
                    {
                        addToTheme: () => {
                            const queryParams = {
                                lang: 3,
                                identifier: dcmsData.identifier,
                                advisorID: "",
                                userPersonaTag: "individualinvestor",
                            }
                            getThemeData(queryParams);
                        }
                    }
                ]
            }
        })
    }
    
    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParamDate$.subscribe(_ => {
                this.filterServerSide();
            });
            urlSearchParams$.subscribe(_ => {
                this.searchParamsUpdated();
            });
            URLSearchParamWithDebounce$.subscribe(usp => {
                this.filterClientSide(usp);
            });
            unifiedDS.httpResponse$.subscribe(fundData => {
                this.handleServerSideResponse(fundData);
            });
            generateCSVObj$.subscribe(csvObj => {
                if (!!csvObj && csvObj !== {}) {
                const asOfText = 'Au ';
                    let extract = [asOfText + csvObj.asOfDate.replace(",", "") + ''];
                                        extract.push('"Les données suivantes ont été téléchargées à partir du site Web rbcgam.com et sont à jour à la date indiquée."');
                      extract.push('"L’utilisateur est responsable de l’utilisation des données téléchargées."');
                      extract.push('"RBC Gestion mondiale d’actifs Inc. et ses sociétés affiliées ne sont pas responsables de toute inexactitude découlant de cette utilisation."');
                      extract.push('"Les données n’ont pas pour but de vous offrir des conseils financiers, de placement, fiscaux, juridiques ou comptables et ne devraient pas être considérées comme telles."');
                      extract.push('"Vous ne pouvez agir sur la foi des données sans demander l’avis d’un professionnel."');
                                      var headers = this.fundColumnsDefinition.filter(function (el, index) {return el.show}).map(function (el) {
                        return '"' + el.header.split('"').join('""') + '"';
                    });
                    extract.push(headers.join(','));
 this.tableData.filteredRows
    .filter(function (row) {
        return !row.showInExcel;
    })
    .forEach((row, index) => {
        let tempRow = [];
        row.cells.forEach((val, columnIndex) => {
            if (this.fundColumnsDefinition[columnIndex].show ) {
                if (typeof this.fundColumnsDefinition[columnIndex].sortField !== "undefined") {
                    tempRow.push(
                        '"' +
                        String(val?.key || '').split('"').join('""') +
                        '"'
                    );
                } else {
                    tempRow.push(
                        '"' +
                        String(val || '').split('"').join('""') +
                        '"'
                    );
                }
            }
        });
        let formattedRow = tempRow.join(',');
        extract.push(formattedRow);
    });
                    if (csvObj.selectedTab === "performance") {
                                                extract.push('"Les fonds RBC, les fonds BlueBay et les fonds PH&N sont offerts par RBC Gestion mondiale d’actifs Inc. et distribués par des courtiers autorisés."');
                          extract.push('"Veuillez consulter votre conseiller et lire le prospectus ou le document Aperçu du fonds avant d’investir."');
                          extract.push('"Les placements en fonds communs peuvent entraîner des commissions, des frais de suivi et des frais et dépenses de gestion."');
                          extract.push('"Les fonds communs de placement ne sont pas garantis, leur valeur fluctue souvent et leurs rendements antérieurs ne se répètent pas nécessairement."');
                          extract.push('"Sauf avis contraire, les taux de rendement indiqués représentent l’historique des rendements totaux annuels composés pour les périodes indiquées."');
                          extract.push('"Pour les périodes de moins de un an, les taux de rendement sont des taux simples."');
                          extract.push('"Tous les taux de rendement tiennent compte des modifications de la valeur des parts ainsi que du réinvestissement des distributions, mais non des frais de vente,"');
                          extract.push('"de rachat et de distribution ou des frais facultatifs et de l’impôt sur le revenu exigible du porteur de parts, qui auraient diminué le rendement."');
                          extract.push('"Les fonds communs de placement ne sont ni garantis ni assurés par la Société d’assurance-dépôts du Canada ou tout autre fonds public d’assurance-dépôts."');
                          extract.push('"Rien ne garantit que les fonds du marché monétaire pourront maintenir une valeur liquidative unitaire fixe ou que le plein montant de vos placements dans ces fonds vous sera retourné."');
                          extract.push('"Les rendements antérieurs ne sont pas nécessairement répétés. Les fonds RBC, les fonds BlueBay et les fonds PH&N sont offerts par RBC Gestion mondiale d’actifs Inc. et distribués par des courtiers autorisés."');
                                          }
                    extract = extract.join('\n');
                    downloadData(extract, csvObj.fileName)
                }
            })
        },
        components: {
            'rbc-spinner': RbcSpinner,
            'rbc-datatable': RbcDatatable,
        },
        data() {
            return {
                spinnerOverlayFE: false,
                spinnerOverlayBE: false,
                isUSPSorted: false,
                fdsFundData: [],
                dcmsFundData: [],
                sysysFundData: null,
                searchParams: {},
                notFixedHeader: false,
                fundColumnsDefinition: columnDef,
                tableData: {
                    rows: [],
                    filteredRows: []
                },
                performanceAnalysisDate: "2024",
                componentsToRegister: markRaw({
                    'rbc-tooltip': RbcTooltip,
                    'rbc-button': RbcButton
                })
            }
        },
        methods: {
            filterServerSide() {
                const url = new URL(location);
                const usp = url.searchParams;
                const dateStr = usp.get("date");
                this.spinnerOverlayBE = true;
                updateFilteredFunds(null);
                updateTotalFundsInSeries(null);
                unifiedDS.get({
                    ...{langId: "3"}, ...(!!dateStr && {date: dateStr})
                });
            },
            handleServerSideResponse(fundData) {
                const isTableFunds = fundData.dotCMSData.fundData.map(fund => fund.fundCode);

                this.dcmsFundData = fundData.dotCMSData.fundData
                this.fdsFundData = fundData.fdsData.fundData.filter(({rbcFundCode}) => {
                    return isTableFunds.includes(rbcFundCode);
                });
                // delete after sysysdecom
                this.sysysFundData = fundData.sysysData.fundData.reduce((acc, curr) => {
                    acc[curr.rbcFundCode] = curr;
                    return acc;
                }, {});
                if (this.sysysFundData) {
                    this.fdsFundData = this.fdsFundData.map(fund => {
                        const rbcFundCode = fund.rbcFundCode;
                        const sysysFund = this.sysysFundData[rbcFundCode];
                        return {
                            ...fund, ...sysysFund
                        }
                    });
                }
                this.updateTotalFunds();
                this.updateAnalysisDate();
                this.updateFootnotes();
                this.updateRows();
                this.spinnerOverlayBE = false;
                // since there are new data from backend, run client side filter again
                this.searchParamsUpdated();
            },
            updateTotalFunds() {
                updateTotalFundsInSeries(this.fdsFundData.length);
            },
            updateAnalysisDate() {
                if (this.fdsFundData.length > 0) {
                    const adObj = this.fdsFundData[0].analysisDate;
                    this.performanceAnalysisDate = adObj && adObj.performance ? adObj.performance : this.performanceAnalysisDate;
                    updateGlobalAnalysisDate(adObj);
                }
            },
            updateFootnotes() {
                const fundListArr = this.dcmsFundData;
                const footnoteKeys = fundListArr.reduce((acc, curr) => {
                    const currFootnotesArr = (curr.footnotes || "")
                            .split(",")
                            .filter(str => str !== "")
                            .map(num => Number(num));
                    return new Set([...acc, ...currFootnotesArr])
                }, [])
                updateFootnoteList(Array.from(footnoteKeys));
            },
            updateRows() {
                this.tableData.rows = rowMapper(this.fdsFundData, this.dcmsFundData);
            },
            searchParamsUpdated() {
                this.spinnerOverlayFE = true;
                updateUSPWithDebounce();
            },
            async filterClientSide(usp) {
                this.searchParams = usp;
                this.updateColumnsToShow();
                this.updateRowsToShow();
                await nextTick();
                this.$refs.fundListTable.$_Datatable_onGlobalSearchTermUpdate({value: this.searchParams.searchkeyword || ""});
                await nextTick();
                this.updateTotalOfFilteredFunds();
                if (this.searchParams.sort && this.searchParams.sortorder) {
                    this.isUSPSorted = true;
                    const sortIndex = parseInt(this.searchParams.sort);
                    this.$refs.fundListTable.sortedColumn.value = this.fundColumnsDefinition[sortIndex];
                    this.$refs.fundListTable.sortedColumnIndex = sortIndex;
                    this.$refs.fundListTable.sortType = this.searchParams.sortorder;
                    this.$refs.fundListTable.$_Datatable_sort(this.$refs.fundListTable.sortedColumn.value, this.$refs.fundListTable.sortedColumnIndex, true);
                }
                this.spinnerOverlayFE = false;
            },
            updateColumnsToShow() {
                const tabToShow = this.searchParams.tab
                this.fundColumnsDefinition.forEach((col, index) => {
                    // update dynamic header name for calendar performance
                    if (col.group === "calendarperformance") {
                        col.header = this.calendarPerformanceHeaderHashMap[col.header] || col.header;
                    }
                    if (index > 3) {
                        col.show = col.group === tabToShow;
                    }
                })
            },
            updateRowsToShow() {
                this.tableData.filteredRows = this.tableData.rows.filter(rowData => {
                    const {type, region, currency, structure} = this.searchParams;
                    const dcmsData = rowData.dcmsData;
                    const typeFiltered = !!type ? type.split(",").includes(dcmsData.fundCategory) : true
                    const regionFiltered = !!region ? region.split(",").includes(dcmsData.region) : true
                    let currencyFiltered = true;
                    const currencyList = !!currency ? currency.split(",") : [];
                    if (currencyList.filter(str => str !== "hedged").length > 0) {
                        currencyFiltered = currencyFiltered && currencyList.includes(dcmsData.currency)
                    }
                    if (currencyList.includes("hedged")) {
                        currencyFiltered = currencyFiltered && dcmsData.currencyHedged
                    }
                    const structureFiltered = !!structure ? dcmsData.fiveg : true
                    return typeFiltered && regionFiltered && currencyFiltered && structureFiltered;
                });
            },
            updateTotalOfFilteredFunds() {
                const numberOfFunds = this.$refs.fundListTable.filteredRows.length;
                updateFilteredFunds(numberOfFunds);
            },
            sortToUrl(e) {
                const url = new URL(location);
                const existingSP = Object.fromEntries(url.searchParams);
                const sortParams = {
                    sort: e.sortedColumnIndex,
                    sortorder: e.sortType
                };
                const updatedUSP = {
                    ...existingSP,
                    ...sortParams
                };
                url.search = "?" + new URLSearchParams(updatedUSP).toString();
                if (!this.isUSPSorted) {
                    history.pushState(sortParams, "", url);
                    updateURLSearchParams(updatedUSP);
                }
                this.isUSPSorted = false;
            },
            mfListExpand(e) {
                // Add event to datalayer
            },
        },
        computed: {
            spinnerOverlay() {
                return this.spinnerOverlayFE || this.spinnerOverlayBE;
            },
            calendarPerformanceHeaderHashMap() {
                if (!!this.performanceAnalysisDate) {
                    const currYear = this.performanceAnalysisDate.split("-")[0];
                    return Array.from({length: 10}, (_, i) => i + 1).reduce((acc, curr) => {
                        const yearStr = `Year${curr}`
                        acc[yearStr] = currYear - curr;
                        return acc;
                    }, {})
                }
            }
        },
        mounted() {
            this.filterServerSide();
        },
        unmount() {
            urlSearchParamDate$.unsubscribe();
            urlSearchParams$.unsubscribe();
            URLSearchParamWithDebounce$.unsubscribe();
            unifiedDS.httpResponse$.unsubscribe();
            generateCSVObj$.unsubscribe();
        }
    }).mount('#app_id_3712313')
</script>

<div id="footnotesRoot" class="container"></div>
  
<div id="app_id_4620215" v-cloak>
    <Teleport to="#footnotesRoot">
        <div class="row my-1">
            <div class="col">
                <span class="anchor" id="footnotes" aria-hidden="true"></span>
                <rbc-expandable
                        arrow
                        arrow-position-x="left"
                        class="section-block-spacer-t-sm"
                >
                    <template #trigger>
                        <h3 class="h5">
                          Notes
                        </h3>
                    </template>
                    <ul class="list-links footnote">
                        <li v-show="selectedTab == 'overview'">
                            <sup>*</sup> Le RFG (en %) des fonds RBC, des fonds PH&N et des fonds BlueBay est calculé en données annualisées, compte tenu des frais réels de l’année civile précédente ou de la dernière période de six mois terminée le 30 juin et de la disponibilité des données à la date de publication. Les RFG (%) pour les parts de série O se trouvent dans l’Aperçu du fonds ou le Rapport de la direction sur le rendement des fonds et ne comprennent pas les frais de gestion. Les porteurs de parts de série O versent directement ou indirectement à RBC GMA des frais négociés.
                        </li>
                        <li v-show="selectedTab == 'prices'">
                          ± Le rendement courant correspond au rendement en revenu annualisé de la période de sept jours terminée à la date de l’analyse du rendement.
                        </li>
                        <li v-for="footnote in footnotes" :key="'footnote'+footnote.key">
                            <sup>{{footnote.key}}</sup> <span v-html="footnote.value"></span>
                        </li>
                    </ul>
                </rbc-expandable>
            </div>
        </div>
    </Teleport>
</div>
<script type="module">
        const footnotesKV = [        {
            key: 0, value: '$esc.javascript($footnote.content)'
        },            {
            key: 1, value: 'Si les gains en capital sont distribu\u00E9s, les parts suppl\u00E9mentaires \u00E9mises sont imm\u00E9diatement consolid\u00E9es afin que la valeur des parts du fonds reste \u00E0 10 $US. La distribution s\u2019ajoute au prix de base rajust\u00E9 de votre placement et vous devez inclure la distribution dans votre revenu imposable de l\u2019ann\u00E9e o\u00F9 le gain vous est vers\u00E9 ou payable.'
        },            {
            key: 10, value: 'Le conseiller en placement a chang\u00E9 le 8 juillet 2016.'
        },            {
            key: 11, value: 'L\'objectif de placement du fonds a \u00E9t\u00E9 chang\u00E9 le 30 juin 2017.'
        },            {
            key: 12, value: 'L\u2019objectif de placement du fonds a \u00E9t\u00E9 modifi\u00E9 en date du 9 avril 2019 et du 30 juin 2017.'
        },            {
            key: 13, value: 'L\u2019objectif de placement du fonds a \u00E9t\u00E9 modifi\u00E9 en date du 9 avril 2019 et du 30 juin 2017 et son indice de r\u00E9f\u00E9rence et de sous-conseiller a chang\u00E9 le 9 avril 2019.'
        },            {
            key: 14, value: 'Le changement du sous-conseiller du fonds a pris effet le 27 f\u00E9vrier 2020.'
        },            {
            key: 15, value: 'Ce fonds est le r\u00E9sultat d\'une fusion effectu\u00E9e le 30 avril 2020.'
        },            {
            key: 16, value: 'Le 25 juin 2021, ce fonds sera dissous. Consultez le communiqu\u00E9 de presse du 5 avril 2021 pour en savoir plus.'
        },            {
            key: 17, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds commun de placement alternatif offert depuis moins d\'un an.'
        },            {
            key: 18, value: 'Le changement de sous-conseiller du fonds a pris effet le 7 juin 2021.'
        },            {
            key: 19, value: 'Le fonds a chang\u00E9 de nom le 30 juin 2021.'
        },            {
            key: 2, value: 'Bien que le fonds ait \u00E9t\u00E9 cr\u00E9\u00E9 en juillet 1966, les donn\u00E9es de rendement de ce fonds \" depuis la cr\u00E9ation \" ne remontent pas avant octobre 1972.'
        },            {
            key: 20, value: 'Avec prise d\u2019effet le 11 avril 2022, les parts de cette s\u00E9rie du fonds deviendront des parts de s\u00E9rie T5.'
        },            {
            key: 21, value: 'Le 8 d\u00E9cembre 2021, RBC Gestion mondiale d\u2019actifs Inc. a annonc\u00E9 la liquidation des fonds Cat\u00E9gorie de soci\u00E9t\u00E9 RBC le 8 avril 2022 ou vers cette date. Pour obtenir plus de renseignements, veuillez consulter le <a href=\"\/ca\/about-us\/news-release\/rbc-gestion-mondiale-dactifs-inc-annonce-la-liquidation-des-fonds-categorie-de-societe-rbc\" target=\"_blank\">communiqu\u00E9 de presse<\/a>.'
        },            {
            key: 22, value: 'Avec prise d\u2019effet le 11 avril 2022, les parts de cette s\u00E9rie du fonds deviendront des parts de s\u00E9rie A.'
        },            {
            key: 23, value: 'Le Fonds a nomm\u00E9 un sous-conseiller suppl\u00E9mentaire qui est entr\u00E9 en fonction le 1er novembre 2021.'
        },            {
            key: 24, value: 'Le changement d\u2019appellation du fonds entre en vigueur le 24 janvier 2022.'
        },            {
            key: 25, value: '\u00C0 compter du 17 juin 2022, le Fonds fusionnera avec le Fonds d\'actions europ\u00E9ennes RBC.'
        },            {
            key: 26, value: ' \u00C0 compter du 30 juin 2016, les nouveaux investisseurs ne pourront plus acheter des parts de s\u00E9rie I du fonds. Les investisseurs actuels qui d\u00E9tiennent des parts de s\u00E9rie I du fonds peuvent continuer de faire des placements suppl\u00E9mentaires dans ce fonds.'
        },            {
            key: 27, value: 'Croiss 10 000 $ tracer non disponible. S\'il vous pla\u00EEt voir PDF mensuel de mise \u00E0 jour. '
        },            {
            key: 28, value: 'Le fonds a chang\u00E9 de nom le 29 juin 2022.'
        },            {
            key: 29, value: 'Depuis le 10 juin 2024, les nouveaux investisseurs peuvent acheter des parts de ce fonds. Il se peut que le fonds ne soit offert que pour une dur\u00E9e limit\u00E9e en raison d\u2019une capacit\u00E9 fixe d\u2019ajout de nouveaux investisseurs.'
        },            {
            key: 3, value: 'Il n\'est plus possible de souscrire des parts de ce fonds dans le cadre d\'un r\u00E9gime enregistr\u00E9 ou d\'un CELI, \u00E0 moins d\'avoir \u00E9tabli un r\u00E9gime de placements pr\u00E9autoris\u00E9s avant le 9 d\u00E9cembre 2005.'
        },            {
            key: 30, value: 'Ce fonds n\u2019est pas offert dans les r\u00E9gimes enregistr\u00E9s.'
        },            {
            key: 31, value: 'Au 8 ao\u00FBt 2023, la r\u00E9f\u00E9rence du fonds, l\u2019indice de r\u00E9f\u00E9rence sur mesure constitu\u00E9 \u00E0 50 % de l\u2019indice de dividendes compos\u00E9 S&P\/TSX (excluant les titres du secteur des mati\u00E8res) et \u00E0 50 % de l\u2019indice de dividendes compos\u00E9 S&P\/TSX (excluant les titres des secteurs de l\u2019\u00E9nergie et des mati\u00E8res, mais comprenant les sous-secteurs Raffinage et commercialisation de p\u00E9trole et de gaz et Entreposage et transport du p\u00E9trole et du gaz), est maintenant l\u2019indice compos\u00E9 \u00E0 dividendes \u00E9lev\u00E9s S&P\/TSX.'
        },            {
            key: 32, value: 'L\u2019analyse et les caract\u00E9ristiques du portefeuille sont fond\u00E9es sur le FNB d\u2019obligations de soci\u00E9t\u00E9s am\u00E9ricaines \u00E0 court terme RBC.'
        },            {
            key: 33, value: 'Ce fonds sera dissous le 14 juin 2024 et il cessera d\u2019accepter de nouvelles souscriptions \u00E0 compter du 1er avril 2024.'
        },            {
            key: 34, value: 'Ce fonds n\'\u00E9tait pas un \u00E9metteur assujetti avant le 27 juin 2024. Avant que le fonds ne soit offert par voie de prospectus, les parts de ce fonds n\'\u00E9taient offertes qu\'en vertu de certaines dispenses de prospectus conform\u00E9ment aux lois sur les valeurs mobili\u00E8res des provinces et des territoires du Canada.'
        },            {
            key: 35, value: 'Les parts de ce fonds sont vendues au public par voie de prospectus \u00E0 compter du 8 juillet 2024. Auparavant, elles n\u2019\u00E9taient offertes qu\u2019en vertu de certaines dispenses de prospectus conform\u00E9ment aux lois sur les valeurs mobili\u00E8res des provinces et des territoires du Canada.'
        },            {
            key: 36, value: 'Ce fonds est uniquement offert aux investisseurs qualifi\u00E9s.'
        },            {
            key: 37, value: 'Ce fonds est le r\u00E9sultat d\'une fusion effectu\u00E9e le 30 avril 2020.'
        },            {
            key: 38, value: 'Weighted average management fees are based on target strategy weights in the underlying fund. Series A has a 1.00% management fee and no performance fee at the top fund level. There are no management fees or performance fees at the top fund level for Series F and Series O.'
        },            {
            key: 39, value: '\u00C0 compter du 26 juin 2020, les parts de s\u00E9rie Conseillers seront plafonn\u00E9es. Les r\u00E9gimes de cotisations pr\u00E9autoris\u00E9es \u00E9tablis avant le 26 juin 2020 demeureront en vigueur jusqu\u2019au 4 ao\u00FBt 2020.. Le 4 ao\u00FBt 2020., les parts de s\u00E9rie Conseillers assorties de frais d\u2019acquisition initiaux et de frais d\u2019acquisition r\u00E9duits deviendront des parts de s\u00E9rie A. Les parts de s\u00E9rie Conseillers assorties de frais de rachat demeureront plafonn\u00E9es et investies selon leur calendrier de rachat existant.'
        },            {
            key: 4, value: 'Les nouveaux investisseurs ne peuvent pas acheter des parts du fonds. Les investisseurs actuels qui d\u00E9tiennent des parts du fonds peuvent continuer de faire des placements suppl\u00E9mentaires dans ce fonds.'
        },            {
            key: 40, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds de placement offert depuis moins d\'un an. Ce fonds a \u00E9t\u00E9 lanc\u00E9 le 27 avril 2020.'
        },            {
            key: 41, value: '\u00C0 compter du 26 juin 2020, les parts de s\u00E9rie Conseillers assorties de frais de rachat demeureront plafonn\u00E9es et investies selon leur calendrier de rachat existant.'
        },            {
            key: 42, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds de placement offert depuis moins d\'un an. Ce fonds a \u00E9t\u00E9 lanc\u00E9 le 6 juin 2020.'
        },            {
            key: 43, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds de placement offert depuis moins d\'un an. Ce fonds a \u00E9t\u00E9 lanc\u00E9 le 24 ao\u00FBt 2020.'
        },            {
            key: 44, value: ' \u00C0 compter du 30 juin 2016, les nouveaux investisseurs ne pourront plus acheter des parts de s\u00E9rie I du fonds. Les investisseurs actuels qui d\u00E9tiennent des parts de s\u00E9rie I du fonds peuvent continuer de faire des placements suppl\u00E9mentaires dans ce fonds.'
        },            {
            key: 45, value: 'De la cr\u00E9ation du fonds jusqu\u2019au 1er octobre 2023, la r\u00E9f\u00E9rence \u00E9tait l\u2019indice des obligations universelles FTSE Canada. Depuis le 1er octobre 2023, la r\u00E9f\u00E9rence est l\u2019indice des obligations globales \u00E0 court terme FTSE Canada.'
        },            {
            key: 46, value: 'Le RFG (en %) est calcul\u00E9 compte tenu des frais r\u00E9els de l\u2019ann\u00E9e allant du 1er janvier au 31 d\u00E9cembre 2018.'
        },            {
            key: 47, value: 'Le RFG (en %) des fonds Cat\u00E9gorie de soci\u00E9t\u00E9 RBC est calcul\u00E9 en donn\u00E9es annualis\u00E9es, compte tenu des frais r\u00E9els  du semestre allant du 1er avril au 30 septembre 2019.'
        },            {
            key: 48, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds de placement offert depuis moins d\'un an. Ce fonds a \u00E9t\u00E9 lanc\u00E9 le 9 octobre 2018.'
        },            {
            key: 5, value: '\u00C0 compter du 26 juin 2020, les parts de s\u00E9rie Conseillers assorties de frais de rachat demeureront plafonn\u00E9es et investies selon leur calendrier de rachat existant.'
        },            {
            key: 50, value: '\u00C0 compter du 27 juin 2019, les nouveaux investisseurs ne pourront plus acheter de parts de ce fonds. Le fonds pourrait rouvrir pour une dur\u00E9e limit\u00E9e s\'il dispose d\'une capacit\u00E9 additionnelle d\u00E9termin\u00E9e pour de nouveaux investisseurs.'
        },            {
            key: 51, value: 'Le rendement courant correspond au rendement en revenu annualis\u00E9 de la p\u00E9riode de sept jours termin\u00E9e \u00E0 la date de l\u2019analyse du rendement.\n<p>\n    <br>\n    Si les gains en capital sont distribu\u00E9s, les parts suppl\u00E9mentaires \u00E9mises sont imm\u00E9diatement consolid\u00E9es afin que la valeur des parts du fonds reste \u00E0 10 $US. La distribution s\u2019ajoute au prix de base rajust\u00E9 de votre placement et vous devez inclure la distribution dans votre revenu imposable de l\u2019ann\u00E9e o\u00F9 le gain vous est vers\u00E9 ou payable.\n<\/p>'
        },            {
            key: 6, value: 'La r\u00E9glementation sur les valeurs mobili\u00E8res nous interdit de publier le rendement d\u2019un fonds de placement offert depuis moins d\'un an.'
        },            {
            key: 7, value: 'L\'objectif de placement du fonds a \u00E9t\u00E9 chang\u00E9 le 28 novembre 2011.'
        },            {
            key: 8, value: 'L\'objectif de placement du fonds a \u00E9t\u00E9 chang\u00E9 le 23 juin 2014.'
        },            {
            key: 9, value: 'Le changement de sous-conseiller du fonds a pris effet \u00E0 la mi-ao\u00FBt 2014.'
        }        ]
    import {
        footnoteList$,
        addEventListenerPopState,
        listenSearchParamDeep,
    } from "vite-esm/ictable-mf-list.service.js";
    import {createApp} from "vue"
    import {
        RbcExpandable,
        RbcExpandableContainer
    } from "wm"

    const initialSelectedTab = new URL(location).searchParams.get("tab");
    const urlSearchParam$ = listenSearchParamDeep("tab");

    createApp({
        created() {
            addEventListenerPopState();
            urlSearchParam$.subscribe(urlSearchParam => {
                this.selectedTab = urlSearchParam;
            })
            footnoteList$.subscribe(dataIds => {
                this.footnotes = footnotesKV.filter((footnoteKV) => {
                    return dataIds.includes(footnoteKV.key)
                }).sort((a, b) => a.key - b.key)
            });
        },
        components: {
            'rbc-expandable': RbcExpandable,
            'rbc-expandable-container': RbcExpandableContainer
        },
        data() {
            return {
                footnotes: [],
                selectedTab: initialSelectedTab
            }
        },
        mounted() {
            this.selectedTab = new URL(location).searchParams.get("tab");
        },
        unmount() {
            footnoteList$.unsubscribe();
            urlSearchParam$.unsubscribe();
        }
    }).mount('#app_id_4620215')
</script>

          </main>
            </div>
          <div>
    

<section id="footerDisclaimerRoot"></section>
  
<div id="app_id_4843278" v-cloak>
    <Teleport to="#footerDisclaimerRoot">
          </Teleport>
</div>
<script type="module">
    import {createApp} from "vue"
    import {
        RbcBlock, RbcExpandable
    } from "wm"

    createApp({
        components: {
            "rbc-block": RbcBlock,
            "rbc-expandable": RbcExpandable
        }
    }).mount('#app_id_4843278')
</script>
<footer id="footers" class="footer style-focus-inverted"></footer>
          
          
<div id="app_id_2977992" v-cloak>
    <Teleport to="#footers">
        <div class="footer footer-top" data-location="Footer menu">            <div class="container">                <div class="row">                    <h2 class="sr-only">Footer</h2>
                    <div v-for="footerMenu in footerMenuArray" class="col-md-6" :class="columnWidthClass">
                    <div v-if='footerMenu?.links.length > 0'>
                        <h3 class="footer-header" :aria-label="footerMenu.header || null"
                            :aria-hidden="!footerMenu.header ? true : null">
                            {{ footerMenu.header }}
                        </h3>
                        <ul class="list-links footer-list">
                            <li v-for="footerMenuLink in footerMenu.links">
                                <a :href="footerMenuLink.value"
                                   :class="{'link-ext': footerMenuLink.value.startsWith('http')}"
                                   :target="footerMenuLink.value.startsWith('http') ? '_blank' : false"
                                >
                                    {{footerMenuLink.key}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="footer footer-bottom" data-location="Footer copyright">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 mb-lg-0 mb-1">
                        <span class="d-block" v-html="footerLegal.copyright"></span>
                        <ul class="list-separator footer-list-separator mt-half">
                            <template v-for="legalLink in footerLegal.legalLinks">
                                                                <li
                                          v-if="legalLink.key === 'Publicité et témoins'"
                                  >
                                <a
                                role="button"
                                tabindex="0"
                                @click="openCookieSettings($event)"
                                @keydown="handleKeydown"
                                >
                                {{legalLink.key}}
                                </a>
                                  </li>
                                                              <li v-if="legalLink.key !== 'Publicité et témoins'">
                                    <a :href="legalLink.value"
                                       :class="{'link-ext': legalLink.value.startsWith('http')}"
                                       :target="legalLink.value.startsWith('http') ? '_blank' : false"
                                    >
                                        {{legalLink.key}}
                                    </a>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div class="col-lg-3 mt-lg-0 mt-2 d-flex align-items-center justify-content-end">                        <ul class="list-inline footer-social-list ">                                                        <li class="footer-social-item">                                  <a                                                                                 href="https://twitter.com/rbcgamnews"                                                                                 target="_blank"                                             rel="noreferrer"                                            aria-label="Twitter"
                                  >                                      <svg role="img" class="icon x-twitter-icon" aria-label="twitter"
                                           xmlns="http://www.w3.org/2000/svg" height="16" width="16"
                                           viewBox="0 0 470 470">
                                          <path class="x-twitter-path" fill="#fff"
                                                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
                                      </svg>                                  </a>                              </li>                                                      <li class="footer-social-item" v-for="socialLink in footerLegal.socialLinks">
                                <a :href="socialLink.value"
                                   :aria-labelledby="socialLink.key"
                                   :aria-label="socialLink.key"
                                   target="_blank"                                    rel="noreferrer"                                >
                                    <rbc-icon :icon="socialLink.key" size="large" type="brand"></rbc-icon>

                                </a>
                                <p>
                            </li>
                        </ul>
                        <rbc-button                                 outline
                                link="#"                                size="small"                                 color="white"                        >                  Retour au début
                        </rbc-button>                    </div>                </div>            </div>        </div>
    </Teleport>
</div>
<script type="module">
    import {createApp} from "vue"
    import {
        RbcButton, RbcIcon
    } from "wm"

    const footerObj = {"menu":[{"header":"Produits","links":[{"key":"Fonds communs de placement","value":"/fr/ca/products/mutual-funds/"},{"key":"FNB RBC iShares","value":"/fr/ca/products/etfs/index?tab=overview"},{"key":"Placements alternatifs","value":"/fr/ca/products/alternative-investments/"}]},{"header":"Renseignements pour les investisseurs","links":[{"key":"Aperçu du fonds (Fonds communs de placement)","value":"/fr/ca/products/mutual-funds/?tab=documents&fundfacts=true"},{"key":"Aperçu du fonds (FNB RBC iShares)","value":"/fr/ca/products/etfs/index?fundfacts=true&tab=documents"},{"key":"Relevés SPEP","value":"/fr/ca/products/pfic-reporting"},{"key":"Documents réglementaires","value":"/fr/ca/products/financial-reports-prospectuses"},{"key":"Gouvernance des fonds","value":"/fr/ca/products/fund-governance/"},{"key":"Vote par procuration","value":"/fr/ca/products/proxy-voting/"},{"key":"Biens non réclamés","value":"/fr/ca/products/unclaimed-property"},{"key":"Renseignements importants pour les investisseurs","value":"/fr/ca/products/important-investor-information"}]},{"header":"À propos de RBC GMA","links":[{"key":"Notre société","value":"/fr/global/corporate-story/"},{"key":"Centre des médias","value":"/fr/ca/about-us/news-releases"},{"key":"Nous joindre","value":"/fr/ca/about-us/contact-us"},{"key":"Carrières","value":"https://jobs.rbc.com/ca/fr"}]},{"header":"Placements","links":[{"key":"Vous êtes prêt à investir ?","value":"/fr/ca/about-us/ready-to-invest"}]}],"legal":{"copyright":"<sup>®<\/sup> / <sup>MC<\/sup> Marque(s) de commerce de Banque Royale du Canada, utilisée(s) sous licence. iSHARES est une marque déposée de BlackRock, Inc. ou de ses filiales aux États-Unis et ailleurs, utilisée sous licence. © RBC Gestion mondiale d\u2019actifs Inc. et Gestion d\u2019actifs BlackRock Canada Limitée 2024. Tous droits réservés.","legalLinks":[{"key":"Protection des renseignements personnels et Sécurité","value":"https://www.rbc.com/rensperssecurite/ca/index.html"},{"key":"Accessibilité|","value":"http://www.rbc.com/accessibilite/"},{"key":"À propos de RBC|","value":"https://www.rbc.com/francais/about-rbc.html"},{"key":"Conditions d\u2019utilisation","value":"https://www.rbc.com/conditions-dutilisation/"},{"key":"Publicité et témoins","value":" "},{"key":"Modalités","value":"/fr/ca/terms-and-conditions"}],"socialLinks":[{"key":"linkedin-in","value":"https://www.linkedin.com/company/rbc-global-asset-management"}]}};

    createApp({
        data() {
            return {
                footerMenuArray: footerObj.menu,
                footerLegal: footerObj.legal
            }
        },
        components: {
            "rbc-button": RbcButton,
            "rbc-icon": RbcIcon
        },
        computed: {
            columnWidthClass() {
                const numberOfCol = this.footerMenuArray.reduce((acc, curr) => {
                    return curr.links.length > 0 ? acc + 1 : acc;
                }, 0);
                return numberOfCol === 4 ? {'col-lg-3': true} : {'col-lg-4': true}
            }
        },
        methods: {
          handleKeydown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.openCookieSettings(event);
    }
  },
            openCookieSettings(e) {
                e.preventDefault();
                window.OneTrust.ToggleInfoDisplay();
            }
        },
        mounted() {
        }
    }).mount('#app_id_2977992')
</script>
  </div>
    </body>
</html>