@swisspost/internet-header 1.13.1 → 1.13.2

package/dist/components/swisspost-internet-header.js

@@ -20,39 +20,39 @@ import { d as defineCustomElement$2 } from './post-skiplinks2.js';
  * @returns Modified Main Navigation Config
  */
 const markActiveRoute = (config, activeRouteProp) => {
-  // Don't highlight any route
-  if (activeRouteProp === false) {
-    return config;
-  }
-  // Set compare URL and check if activeRouteProp is valid
-  let compareUrl;
-  config = resetOverrideConfig(config);
-  if (activeRouteProp === 'auto' || activeRouteProp === 'exact') {
-    // Check if an active route is already configured, set override to that and return
-    if (hasActivePortalRoute(config)) {
-      return resetActiveStateToPortalConfig(config);
-    }
-    compareUrl = new URL(window.location.href);
-  }
-  else {
-    try {
-      compareUrl = new URL(activeRouteProp, document.location.origin);
+    // Don't highlight any route
+    if (activeRouteProp === false) {
+        return config;
     }
-    catch (error) {
-      console.warn(`Active Route: ${activeRouteProp} is not a valid URL. Navigation highlighting has been disabled.`);
-      return config;
+    // Set compare URL and check if activeRouteProp is valid
+    let compareUrl;
+    config = resetOverrideConfig(config);
+    if (activeRouteProp === 'auto' || activeRouteProp === 'exact') {
+        // Check if an active route is already configured, set override to that and return
+        if (hasActivePortalRoute(config)) {
+            return resetActiveStateToPortalConfig(config);
+        }
+        compareUrl = new URL(window.location.href);
+    }
+    else {
+        try {
+            compareUrl = new URL(activeRouteProp, document.location.origin);
+        }
+        catch (error) {
+            console.warn(`Active Route: ${activeRouteProp} is not a valid URL. Navigation highlighting has been disabled.`);
+            return config;
+        }
     }
-  }
-  const scoreList = compileScoreList(config, compareUrl, activeRouteProp);
-  if (scoreList.length === 0) {
-    // No match found or already active links defined
+    const scoreList = compileScoreList(config, compareUrl, activeRouteProp);
+    if (scoreList.length === 0) {
+        // No match found or already active links defined
+        return config;
+    }
+    const winnerPair = scoreList[0];
+    winnerPair.main.isActiveOverride = true;
+    if (winnerPair.sub)
+        winnerPair.sub.isActiveOverride = true;
     return config;
-  }
-  const winnerPair = scoreList[0];
-  winnerPair.main.isActiveOverride = true;
-  if (winnerPair.sub)
-    winnerPair.sub.isActiveOverride = true;
-  return config;
 };
 /**
  * Check if the portal config set any active route
@@ -60,13 +60,13 @@ const markActiveRoute = (config, activeRouteProp) => {
  * @returns True if portal set any route as active
  */
 const hasActivePortalRoute = (config) => {
-  return config.filter(nav => nav.isActive).length > 0;
+    return config.filter(nav => nav.isActive).length > 0;
 };
 const resetActiveStateToPortalConfig = (config) => {
-  return config.map(nav => (Object.assign(Object.assign({}, nav), { isActiveOverride: nav.isActive, flyout: nav.flyout.map(flyout => (Object.assign(Object.assign({}, flyout), { linkList: flyout.linkList.map(link => (Object.assign(Object.assign({}, link), { isActiveOverride: link.isActive }))) }))) })));
+    return config.map(nav => (Object.assign(Object.assign({}, nav), { isActiveOverride: nav.isActive, flyout: nav.flyout.map(flyout => (Object.assign(Object.assign({}, flyout), { linkList: flyout.linkList.map(link => (Object.assign(Object.assign({}, link), { isActiveOverride: link.isActive }))) }))) })));
 };
 const resetOverrideConfig = (config) => {
-  return config.map(nav => (Object.assign(Object.assign({}, nav), { isActiveOverride: false, flyout: nav.flyout.map(flyout => (Object.assign(Object.assign({}, flyout), { linkList: flyout.linkList.map(link => (Object.assign(Object.assign({}, link), { isActiveOverride: false }))) }))) })));
+    return config.map(nav => (Object.assign(Object.assign({}, nav), { isActiveOverride: false, flyout: nav.flyout.map(flyout => (Object.assign(Object.assign({}, flyout), { linkList: flyout.linkList.map(link => (Object.assign(Object.assign({}, link), { isActiveOverride: false }))) }))) })));
 };
 /**
  * Compile a list of scores based on the map mode, sorted in descending order
@@ -76,53 +76,53 @@ const resetOverrideConfig = (config) => {
  * @returns A list of scored URLs if any matched
  */
 const compileScoreList = (config, compareUrl, activeRouteProp) => {
-  // Flag to check if the Portal set any active links or if there are any exact matches
-  let hadAnyActiveLink = false;
-  const scoreList = [];
-  config
-    .filter(mainNav => !hadAnyActiveLink && mainNav)
-    .forEach(mainNav => {
-    try {
-      const score = compareRoutes(compareUrl, new URL(mainNav.url), activeRouteProp);
-      hadAnyActiveLink = updateScoreList(scoreList, score, { main: mainNav, score }, hadAnyActiveLink);
-    }
-    catch (_a) {
-      // Not a valid url, continue
-    }
-    // Loop through flyout links 2nd level
-    mainNav.flyout.forEach(flyout => {
-      var _a;
-      (_a = flyout.linkList) === null || _a === void 0 ? void 0 : _a.forEach(linklist => {
-        // Don't override if any link is already active
-        if (linklist.isActive && (activeRouteProp === 'auto' || activeRouteProp === 'exact')) {
-          hadAnyActiveLink = true;
-          return;
-        }
+    // Flag to check if the Portal set any active links or if there are any exact matches
+    let hadAnyActiveLink = false;
+    const scoreList = [];
+    config
+        .filter(mainNav => !hadAnyActiveLink && mainNav)
+        .forEach(mainNav => {
         try {
-          const url = new URL(linklist.url);
-          const score = compareRoutes(compareUrl, url, activeRouteProp);
-          hadAnyActiveLink = updateScoreList(scoreList, score, { main: mainNav, sub: linklist, score }, hadAnyActiveLink);
+            const score = compareRoutes(compareUrl, new URL(mainNav.url), activeRouteProp);
+            hadAnyActiveLink = updateScoreList(scoreList, score, { main: mainNav, score }, hadAnyActiveLink);
         }
         catch (_a) {
-          // Not a valid URL, continue
+            // Not a valid url, continue
         }
-      });
+        // Loop through flyout links 2nd level
+        mainNav.flyout.forEach(flyout => {
+            var _a;
+            (_a = flyout.linkList) === null || _a === void 0 ? void 0 : _a.forEach(linklist => {
+                // Don't override if any link is already active
+                if (linklist.isActive && (activeRouteProp === 'auto' || activeRouteProp === 'exact')) {
+                    hadAnyActiveLink = true;
+                    return;
+                }
+                try {
+                    const url = new URL(linklist.url);
+                    const score = compareRoutes(compareUrl, url, activeRouteProp);
+                    hadAnyActiveLink = updateScoreList(scoreList, score, { main: mainNav, sub: linklist, score }, hadAnyActiveLink);
+                }
+                catch (_a) {
+                    // Not a valid URL, continue
+                }
+            });
+        });
     });
-  });
-  return scoreList.sort((a, b) => b.score - a.score);
+    return scoreList.sort((a, b) => b.score - a.score);
 };
 /**
  * Update score list
  */
 function updateScoreList(scoreList, score, scoreListItem, hadAnyActiveLink) {
-  let hadActiveLink = hadAnyActiveLink;
-  if (score > 0) {
-    if (score === Infinity)
-      hadActiveLink = true;
-    // Push score
-    scoreList.push(scoreListItem);
-  }
-  return hadActiveLink;
+    let hadActiveLink = hadAnyActiveLink;
+    if (score > 0) {
+        if (score === Infinity)
+            hadActiveLink = true;
+        // Push score
+        scoreList.push(scoreListItem);
+    }
+    return hadActiveLink;
 }
 /**
  * Compare two URLs for similarity based on a match mode
@@ -132,34 +132,34 @@ function updateScoreList(scoreList, score, scoreListItem, hadAnyActiveLink) {
  * @returns Score
  */
 const compareRoutes = (baseUrl, compareUrl, matchMode) => {
-  // One url is not defined or they don't share the same orign
-  if (baseUrl === null || compareUrl === null || baseUrl.origin !== compareUrl.origin) {
-    return 0;
-  }
-  const baseUrlPath = baseUrl.pathname.toLocaleLowerCase();
-  const compareUrlPath = compareUrl.pathname.toLocaleLowerCase();
-  // Exact match, origin and pathname are the same
-  if (baseUrlPath === compareUrlPath) {
-    return Infinity;
-  }
-  // The basepath is longer than the comparison, a match is impossible
-  if (baseUrl.pathname.length < compareUrl.pathname.length) {
+    // One url is not defined or they don't share the same orign
+    if (baseUrl === null || compareUrl === null || baseUrl.origin !== compareUrl.origin) {
+        return 0;
+    }
+    const baseUrlPath = baseUrl.pathname.toLocaleLowerCase();
+    const compareUrlPath = compareUrl.pathname.toLocaleLowerCase();
+    // Exact match, origin and pathname are the same
+    if (baseUrlPath === compareUrlPath) {
+        return Infinity;
+    }
+    // The basepath is longer than the comparison, a match is impossible
+    if (baseUrl.pathname.length < compareUrl.pathname.length) {
+        return 0;
+    }
+    if (matchMode === 'auto') {
+        const baseSegments = [
+            baseUrl.origin.toLocaleLowerCase(),
+            ...baseUrlPath.split('/').filter(x => x !== null && x !== ''),
+        ];
+        const compareSegments = [
+            compareUrl.origin.toLocaleLowerCase(),
+            ...compareUrlPath.split('/').filter(x => x !== null && x !== ''),
+        ];
+        const score = getSimilarityScore(baseSegments, compareSegments);
+        // If only some segments match, but not the whole smaller array, it's not a match
+        return Math.min(baseSegments.length, compareSegments.length) === score ? score : 0;
+    }
     return 0;
-  }
-  if (matchMode === 'auto') {
-    const baseSegments = [
-      baseUrl.origin.toLocaleLowerCase(),
-      ...baseUrlPath.split('/').filter(x => x !== null && x !== ''),
-    ];
-    const compareSegments = [
-      compareUrl.origin.toLocaleLowerCase(),
-      ...compareUrlPath.split('/').filter(x => x !== null && x !== ''),
-    ];
-    const score = getSimilarityScore(baseSegments, compareSegments);
-    // If only some segments match, but not the whole smaller array, it's not a match
-    return Math.min(baseSegments.length, compareSegments.length) === score ? score : 0;
-  }
-  return 0;
 };
 /**
  * Check how many items in an array match
@@ -168,16 +168,16 @@ const compareRoutes = (baseUrl, compareUrl, matchMode) => {
  * @returns Score
  */
 const getSimilarityScore = (a, b) => {
-  if (a == null || b == null || a.length === 0 || b.length === 0) {
-    return 0;
-  }
-  let i = 0;
-  for (; i < Math.min(a.length, b.length); i++) {
-    if (a[i] !== b[i]) {
-      return 0;
-    }
-  }
-  return i;
+    if (a == null || b == null || a.length === 0 || b.length === 0) {
+        return 0;
+    }
+    let i = 0;
+    for (; i < Math.min(a.length, b.length); i++) {
+        if (a[i] !== b[i]) {
+            return 0;
+        }
+    }
+    return i;
 };
 
 // Prevent double requests
@@ -185,11 +185,11 @@ let request = null;
 // Cache the original os flyout to use it for updates
 let osFlyoutCache = null;
 const getPPMConfig = () => {
-  const ppmConfigScript = document.querySelector('#PPM_HEADER_DATA');
-  if ((ppmConfigScript === null || ppmConfigScript === void 0 ? void 0 : ppmConfigScript.textContent) != null) {
-    return JSON.parse(ppmConfigScript.textContent);
-  }
-  return null;
+    const ppmConfigScript = document.querySelector('#PPM_HEADER_DATA');
+    if ((ppmConfigScript === null || ppmConfigScript === void 0 ? void 0 : ppmConfigScript.textContent) != null) {
+        return JSON.parse(ppmConfigScript.textContent);
+    }
+    return null;
 };
 /**
  * Get a localized config object
@@ -199,43 +199,43 @@ const getPPMConfig = () => {
  * @returns Localized config object
  */
 const getLocalizedConfig = async ({ projectId, environment, language, cookieKey, localStorageKey, activeRouteProp, localizedCustomConfig, osFlyoutOverrides, }) => {
-  var _a, _b;
-  const ppmConfig = getPPMConfig();
-  let localizedConfig;
-  let config = null;
-  let lang;
-  if (ppmConfig) {
-    localizedConfig = ppmConfig;
-    lang = document.documentElement.lang;
-  }
-  else {
-    if (request == null) {
-      request = fetchConfig(projectId, environment);
-    }
-    config = await request;
-    lang = getUserLang(Object.keys(config), language, localStorageKey, cookieKey);
-    if (lang === undefined) {
-      throw new Error('Internet Header: unable to determine current language');
-    }
-    // Clone config for more predictable state updates
-    localizedConfig = Object.assign({}, config[lang]);
-  }
-  // Merge custom config with portal config
-  if (localizedCustomConfig) {
-    const header = ((_a = localizedCustomConfig === null || localizedCustomConfig === void 0 ? void 0 : localizedCustomConfig.header) === null || _a === void 0 ? void 0 : _a.navMain)
-      ? Object.assign(Object.assign({}, localizedConfig.header), { navMain: [...localizedConfig.header.navMain, ...localizedCustomConfig.header.navMain] }) : localizedConfig.header;
-    localizedConfig = Object.assign(Object.assign({}, localizedConfig), { header });
-  }
-  // Add entries to flyout_os
-  if (osFlyoutOverrides)
-    localizedConfig.header.navMain = mergeOsFlyoutOverrides(localizedConfig, osFlyoutOverrides);
-  // Mark active route
-  if (activeRouteProp != null)
-    localizedConfig.header.navMain = markActiveRoute(localizedConfig.header.navMain, activeRouteProp);
-  setMainNavigationIds((_b = localizedConfig === null || localizedConfig === void 0 ? void 0 : localizedConfig.header) === null || _b === void 0 ? void 0 : _b.navMain);
-  // Set the new language choice
-  persistLanguageChoice(lang, cookieKey, localStorageKey);
-  return localizedConfig;
+    var _a, _b;
+    const ppmConfig = getPPMConfig();
+    let localizedConfig;
+    let config = null;
+    let lang;
+    if (ppmConfig) {
+        localizedConfig = ppmConfig;
+        lang = document.documentElement.lang;
+    }
+    else {
+        if (request == null) {
+            request = fetchConfig(projectId, environment);
+        }
+        config = await request;
+        lang = getUserLang(Object.keys(config), language, localStorageKey, cookieKey);
+        if (lang === undefined) {
+            throw new Error('Internet Header: unable to determine current language');
+        }
+        // Clone config for more predictable state updates
+        localizedConfig = Object.assign({}, config[lang]);
+    }
+    // Merge custom config with portal config
+    if (localizedCustomConfig) {
+        const header = ((_a = localizedCustomConfig === null || localizedCustomConfig === void 0 ? void 0 : localizedCustomConfig.header) === null || _a === void 0 ? void 0 : _a.navMain)
+            ? Object.assign(Object.assign({}, localizedConfig.header), { navMain: [...localizedConfig.header.navMain, ...localizedCustomConfig.header.navMain] }) : localizedConfig.header;
+        localizedConfig = Object.assign(Object.assign({}, localizedConfig), { header });
+    }
+    // Add entries to flyout_os
+    if (osFlyoutOverrides)
+        localizedConfig.header.navMain = mergeOsFlyoutOverrides(localizedConfig, osFlyoutOverrides);
+    // Mark active route
+    if (activeRouteProp != null)
+        localizedConfig.header.navMain = markActiveRoute(localizedConfig.header.navMain, activeRouteProp);
+    setMainNavigationIds((_b = localizedConfig === null || localizedConfig === void 0 ? void 0 : localizedConfig.header) === null || _b === void 0 ? void 0 : _b.navMain);
+    // Set the new language choice
+    persistLanguageChoice(lang, cookieKey, localStorageKey);
+    return localizedConfig;
 };
 /**
  * Merge portal config with custom os flyout overrides
@@ -244,38 +244,38 @@ const getLocalizedConfig = async ({ projectId, environment, language, cookieKey,
  * @returns Merged localized config
  */
 const mergeOsFlyoutOverrides = (config, osFlyoutOverrides) => {
-  if (osFlyoutOverrides == null)
-    return config.header.navMain;
-  return config.header.navMain.map(mainNav => {
-    var _a, _b;
-    if (mainNav.id !== 'flyout_os')
-      return mainNav;
-    if (osFlyoutCache === null) {
-      osFlyoutCache = JSON.parse(JSON.stringify(mainNav));
-    }
-    const mainNavText = (_a = osFlyoutOverrides.text) !== null && _a !== void 0 ? _a : osFlyoutCache.text;
-    const mainNavTitle = (_b = osFlyoutOverrides.title) !== null && _b !== void 0 ? _b : osFlyoutCache.title;
-    if (osFlyoutCache.flyout == null ||
-      osFlyoutCache.flyout.length === 0 ||
-      osFlyoutOverrides.flyout == null ||
-      osFlyoutOverrides.flyout.length === 0)
-      return Object.assign(Object.assign({}, mainNav), { title: mainNavTitle, text: mainNavText });
-    // Add entries for os flyout columns without overriding existing config
-    const mainNavFlyout = [
-      ...osFlyoutCache.flyout.map((col, index) => {
-        var _a;
-        const overrides = osFlyoutOverrides.flyout[index];
-        const title = (_a = overrides.title) !== null && _a !== void 0 ? _a : col.title;
-        const linkList = overrides.linkList != null ? osFlyoutOverrides.flyout[index].linkList : [];
-        return {
-          title,
-          linkList: [...col.linkList, ...linkList],
-        };
-      }),
-      ...osFlyoutOverrides.flyout.slice(osFlyoutCache.flyout.length),
-    ];
-    return Object.assign(Object.assign({}, mainNav), { text: mainNavText, title: mainNavTitle, flyout: mainNavFlyout });
-  });
+    if (osFlyoutOverrides == null)
+        return config.header.navMain;
+    return config.header.navMain.map(mainNav => {
+        var _a, _b;
+        if (mainNav.id !== 'flyout_os')
+            return mainNav;
+        if (osFlyoutCache === null) {
+            osFlyoutCache = JSON.parse(JSON.stringify(mainNav));
+        }
+        const mainNavText = (_a = osFlyoutOverrides.text) !== null && _a !== void 0 ? _a : osFlyoutCache.text;
+        const mainNavTitle = (_b = osFlyoutOverrides.title) !== null && _b !== void 0 ? _b : osFlyoutCache.title;
+        if (osFlyoutCache.flyout == null ||
+            osFlyoutCache.flyout.length === 0 ||
+            osFlyoutOverrides.flyout == null ||
+            osFlyoutOverrides.flyout.length === 0)
+            return Object.assign(Object.assign({}, mainNav), { title: mainNavTitle, text: mainNavText });
+        // Add entries for os flyout columns without overriding existing config
+        const mainNavFlyout = [
+            ...osFlyoutCache.flyout.map((col, index) => {
+                var _a;
+                const overrides = osFlyoutOverrides.flyout[index];
+                const title = (_a = overrides.title) !== null && _a !== void 0 ? _a : col.title;
+                const linkList = overrides.linkList != null ? osFlyoutOverrides.flyout[index].linkList : [];
+                return {
+                    title,
+                    linkList: [...col.linkList, ...linkList],
+                };
+            }),
+            ...osFlyoutOverrides.flyout.slice(osFlyoutCache.flyout.length),
+        ];
+        return Object.assign(Object.assign({}, mainNav), { text: mainNavText, title: mainNavTitle, flyout: mainNavFlyout });
+    });
 };
 /**
  * Fetch the general config based on project id
@@ -283,22 +283,22 @@ const mergeOsFlyoutOverrides = (config, osFlyoutOverrides) => {
  * @returns Promise for Post Portal general config
  */
 const fetchConfig = async (projectId, environment) => {
-  // Check if project id is sanitized
-  if (!isValidProjectId(projectId)) {
-    throw new Error(`Internet Header: invalid project id "${projectId}"`);
-  }
-  if (projectId === 'test') {
-    environment = 'int01';
-  }
-  let url = generateConfigUrl(projectId, environment);
-  // Get the config if cache is invalid
-  try {
-    const res = await fetch(url);
-    return (await res.json());
-  }
-  catch (error) {
-    throw new Error(`Internet Header: fetching config failed. ${error.message}`);
-  }
+    // Check if project id is sanitized
+    if (!isValidProjectId(projectId)) {
+        throw new Error(`Internet Header: invalid project id "${projectId}"`);
+    }
+    if (projectId === 'test') {
+        environment = 'int01';
+    }
+    let url = generateConfigUrl(projectId, environment);
+    // Get the config if cache is invalid
+    try {
+        const res = await fetch(url);
+        return (await res.json());
+    }
+    catch (error) {
+        throw new Error(`Internet Header: fetching config failed. ${error.message}`);
+    }
 };
 /**
  * Generate an URL with all necessary query params to get the configuration.
@@ -308,18 +308,18 @@ const fetchConfig = async (projectId, environment) => {
  * @returns URL pointing to the project config
  */
 const generateConfigUrl = (projectId, environment) => {
-  if (projectId === 'test')
-    return 'assets/config/test-configuration.json';
-  const parsedEnvironment = environment.toLowerCase();
-  const isProd = parsedEnvironment === 'prod';
-  const host = `https://${isProd ? 'www' : 'int'}.post.ch`;
-  try {
-    // Use URL to validate the generated URL
-    return new URL(`${host}/api/headerjs/Json?serviceid=${encodeURIComponent(projectId)}${!isProd ? '&environment=' + parsedEnvironment : ''}`).toString();
-  }
-  catch (error) {
-    throw new Error(`Internet Header: Config URL is invalid.`);
-  }
+    if (projectId === 'test')
+        return 'assets/config/test-configuration.json';
+    const parsedEnvironment = environment.toLowerCase();
+    const isProd = parsedEnvironment === 'prod';
+    const host = `https://${isProd ? 'www' : 'int'}.post.ch`;
+    try {
+        // Use URL to validate the generated URL
+        return new URL(`${host}/api/headerjs/Json?serviceid=${encodeURIComponent(projectId)}${!isProd ? '&environment=' + parsedEnvironment : ''}`).toString();
+    }
+    catch (error) {
+        throw new Error(`Internet Header: Config URL is invalid.`);
+    }
 };
 /**
  * Check if project id contains only URL safe characters
@@ -328,7 +328,7 @@ const generateConfigUrl = (projectId, environment) => {
  * @returns The valid project id
  */
 const isValidProjectId = (projectId) => {
-  return projectId !== '' && projectId.length > 0 && /^[a-zA-Z][\w-]*[a-zA-Z0-9]$/.test(projectId);
+    return projectId !== '' && projectId.length > 0 && /^[a-zA-Z][\w-]*[a-zA-Z0-9]$/.test(projectId);
 };
 /**
  * Get the localized config object from a custom config
@@ -338,31 +338,31 @@ const isValidProjectId = (projectId) => {
  * @returns Localized custom config object
  */
 const getLocalizedCustomConfig = (config, language) => {
-  var _a;
-  let customConfig;
-  try {
-    customConfig = typeof config === 'string' ? JSON.parse(config) : config;
-  }
-  catch (error) {
-    throw new Error(`Internet Header: Custom config is invalid. Make sure your custom config contains valid JSON syntax and matches the definition. `);
-  }
-  let localizedCustomConfig = customConfig[language];
-  if ((_a = localizedCustomConfig === null || localizedCustomConfig === void 0 ? void 0 : localizedCustomConfig.header) === null || _a === void 0 ? void 0 : _a.navMain)
-    setMainNavigationIds(localizedCustomConfig.header.navMain);
-  return localizedCustomConfig;
+    var _a;
+    let customConfig;
+    try {
+        customConfig = typeof config === 'string' ? JSON.parse(config) : config;
+    }
+    catch (error) {
+        throw new Error(`Internet Header: Custom config is invalid. Make sure your custom config contains valid JSON syntax and matches the definition. `);
+    }
+    let localizedCustomConfig = customConfig[language];
+    if ((_a = localizedCustomConfig === null || localizedCustomConfig === void 0 ? void 0 : localizedCustomConfig.header) === null || _a === void 0 ? void 0 : _a.navMain)
+        setMainNavigationIds(localizedCustomConfig.header.navMain);
+    return localizedCustomConfig;
 };
 /**
  * Set unique ID's on main navigation entities but conserve flyout_os to be able to
  * identify the online-service flyout, which can be configured by osFlyoutOverrides
  */
 const setMainNavigationIds = (navMainEntities) => {
-  navMainEntities.forEach(navMainEntity => {
-    navMainEntity.id = navMainEntity.id === 'flyout_os' ? navMainEntity.id : uniqueId('main-nav-');
-  });
+    navMainEntities.forEach(navMainEntity => {
+        navMainEntity.id = navMainEntity.id === 'flyout_os' ? navMainEntity.id : uniqueId('main-nav-');
+    });
 };
 
 const name = "@swisspost/internet-header";
-const version = "1.13.1";
+const version = "1.13.2";
 const description = "The header for client facing applications.";
 const author = "Swiss Post <oss@post.ch>";
 const license = "Apache-2.0";
@@ -402,7 +402,7 @@ const scripts = {
 	generate: "stencil generate"
 };
 const dependencies = {
-	"@swisspost/design-system-styles": "workspace:6.5.0",
+	"@swisspost/design-system-styles": "workspace:6.5.1",
 	"body-scroll-lock": "4.0.0-beta.0",
 	"iframe-resizer": "4.3.9",
 	jquery: "3.7.1",
@@ -411,34 +411,35 @@ const dependencies = {
 	"url-polyfill": "1.1.12"
 };
 const devDependencies = {
-	"@babel/core": "7.23.5",
-	"@percy/cli": "1.27.4",
+	"@babel/core": "7.23.7",
+	"@percy/cli": "1.27.7",
 	"@percy/cypress": "3.1.2",
 	"@stencil-community/eslint-plugin": "0.7.1",
-	"@stencil/core": "4.6.0",
-	"@stencil/sass": "3.0.7",
-	"@stencil/store": "2.0.11",
+	"@stencil/core": "4.9.0",
+	"@stencil/sass": "3.0.8",
+	"@stencil/store": "2.0.12",
 	"@types/body-scroll-lock": "3.1.2",
 	"@types/iframe-resizer": "3.5.13",
-	"@types/jest": "27.5.2",
+	"@types/jest": "29.5.11",
 	"@types/jquery": "3.5.29",
-	"@types/node": "18.19.2",
+	"@types/node": "18.19.5",
 	"@types/throttle-debounce": "5.0.2",
 	"babel-loader": "9.1.3",
 	bootstrap: "5.3.2",
-	cypress: "13.6.0",
+	cypress: "13.6.2",
 	"cypress-each": "1.13.3",
 	"cypress-storybook": "0.5.1",
 	"eslint-plugin-react": "7.33.2",
 	globby: "14.0.0",
-	jest: "27.5.1",
+	jest: "29.7.0",
+	"jest-environment-jsdom": "29.7.0",
 	rimraf: "5.0.5",
 	"rollup-plugin-node-polyfills": "0.2.1",
 	"rollup-plugin-scss": "4.0.0",
-	"rollup-plugin-visualizer": "5.10.0",
-	sass: "1.69.5",
+	"rollup-plugin-visualizer": "5.12.0",
+	sass: "1.69.7",
 	"start-server-and-test": "2.0.3",
-	"ts-jest": "27.1.5",
+	"ts-jest": "29.1.1",
 	typescript: "4.9.5"
 };
 const packageJson = {
@@ -465,447 +466,456 @@ const packageJson = {
 };
 
 const isScrollable = (node) => {
-  if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-    return false;
-  }
-  const style = getComputedStyle(node);
-  return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
-    const value = style.getPropertyValue(propertyName);
-    return value === 'auto' || value === 'scroll';
-  });
+    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        return false;
+    }
+    const style = getComputedStyle(node);
+    return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
+        const value = style.getPropertyValue(propertyName);
+        return value === 'auto' || value === 'scroll';
+    });
 };
 const getScrollParent = (node) => {
-  let currentParent = node.parentElement;
-  while (currentParent) {
-    if (isScrollable(currentParent)) {
-      return currentParent;
-    }
-    currentParent = currentParent.parentElement;
-  }
-  return document;
+    let currentParent = node.parentElement;
+    while (currentParent) {
+        if (currentParent.nodeName === 'BODY') {
+            return document;
+        }
+        if (isScrollable(currentParent)) {
+            return currentParent;
+        }
+        currentParent = currentParent.parentElement;
+    }
+    return document;
 };
 
 const registerLogoAnimationObserver = (target, headerRef) => {
-  const scrollParent = getScrollParent(headerRef);
-  /**
-   * Set intersection ratio as CSS custom property
-   */
-  const handleScroll = () => {
-    const fullStickyness = state.stickyness === 'full';
-    let scale = 1;
-    // Minus 1px border at the bottom that the logo is not covering
-    const adjustedHeaderHeight = headerRef.clientHeight - 1;
-    const scrollDistance = scrollParent instanceof Element ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;
-    const scrollY = fullStickyness ? 0 : scrollDistance;
-    // If meta navigation is not visible (mobile, not configured), scale should just be 1
-    if (target.clientHeight > 0) {
-      scale = Math.max((adjustedHeaderHeight - Math.max(scrollY, 0)) /
-        (adjustedHeaderHeight - target.clientHeight), 1);
-    }
-    headerRef.style.setProperty('--logo-scale', scale.toString());
-  };
-  const debounced = debounce(150, handleScroll);
-  /**
-   * Observe the meta navigation in order to not track scroll events throughout the whole page.
-   * This ensures that the scroll listener is only active while the meta navigation is visible.
-   */
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting && entry.intersectionRatio > 0) {
-        scrollParent.addEventListener('scroll', handleScroll, { passive: true });
-        window.addEventListener('resize', debounced);
-        // Ensure callback is called at least once in case main thread is too busy while scrolling up
-        window.requestAnimationFrame(handleScroll);
-      }
-      else {
-        scrollParent.removeEventListener('scroll', handleScroll);
-        window.removeEventListener('resize', debounced);
-        window.requestAnimationFrame(handleScroll);
-      }
+    const scrollParent = getScrollParent(headerRef);
+    /**
+     * Set intersection ratio as CSS custom property
+     */
+    const handleScroll = () => {
+        const fullStickyness = state.stickyness === 'full';
+        let scale = 1;
+        // Minus 1px border at the bottom that the logo is not covering
+        const adjustedHeaderHeight = headerRef.clientHeight - 1;
+        const scrollDistance = scrollParent instanceof Element ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;
+        const scrollY = fullStickyness ? 0 : scrollDistance;
+        // If meta navigation is not visible (mobile, not configured), scale should just be 1
+        if (target.clientHeight > 0) {
+            scale = Math.max((adjustedHeaderHeight - Math.max(scrollY, 0)) /
+                (adjustedHeaderHeight - target.clientHeight), 1);
+        }
+        headerRef.style.setProperty('--logo-scale', scale.toString());
+    };
+    const debounced = debounce(150, handleScroll);
+    /**
+     * Observe the meta navigation in order to not track scroll events throughout the whole page.
+     * This ensures that the scroll listener is only active while the meta navigation is visible.
+     */
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting && entry.intersectionRatio > 0) {
+                scrollParent.addEventListener('scroll', handleScroll, { passive: true });
+                window.addEventListener('resize', debounced);
+                // Ensure callback is called at least once in case main thread is too busy while scrolling up
+                window.requestAnimationFrame(handleScroll);
+            }
+            else {
+                scrollParent.removeEventListener('scroll', handleScroll);
+                window.removeEventListener('resize', debounced);
+                window.requestAnimationFrame(handleScroll);
+            }
+        });
+    }, {
+        // Fires when element leaves viewport (0) and when it just about enters it (0.001)
+        threshold: [0, 0.001],
     });
-  }, {
-    // Fires when element leaves viewport (0) and when it just about enters it (0.001)
-    threshold: [0, 0.001],
-  });
-  observer.observe(target);
-  return handleScroll;
+    observer.observe(target);
+    return handleScroll;
 };
 
-const postInternetHeaderCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--logo-scale:1}@media (max-width: 1023.98px){:host{--logo-scale:1 !important}}post-logo{height:var(--header-height);-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-transform:scale(var(--logo-scale));transform:scale(var(--logo-scale))}post-main-navigation{margin-left:calc(var(--header-height)*var(--logo-scale) - var(--header-height))}:host{display:block;position:relative;font-size:1rem;font-weight:300;z-index:var(--header-z-index, 10);--header-height:3.5rem;--meta-header-height:0px;--language-dropdown-margin-top:0px}@media (min-width: 1024px){:host{--meta-header-height:3rem;--header-height:4rem}}@media (min-width: 1280px){:host{--header-height:4.5rem}}:host([meta=false]){--meta-header-height:0px;--language-dropdown-margin-top:1px}@supports ((position: -webkit-sticky) or (position: sticky)){:host(:not(.stickyness-none)){position:-webkit-sticky;position:sticky}:host(.stickyness-full){top:0}:host(.stickyness-main){top:calc(var(--meta-header-height, 0px)*-1)}:host(.stickyness-minimal){top:calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px)*-1);-webkit-transition:top 200ms ease-in;transition:top 200ms ease-in}:host(.stickyness-minimal.scrolling-up),:host(.stickyness-minimal.dropdown-open){top:calc(var(--meta-header-height, 0px)*-1);-webkit-transition:top 200ms ease-out;transition:top 200ms ease-out}}.post-internet-header{border-bottom:1px solid #e6e6e6;background-color:#fff}.main-navigation-container{display:-ms-flexbox;display:flex}.main-navigation-container>.main-navigation-controls{-ms-flex:0 0 auto;flex:0 0 auto}.main-navigation{display:-ms-flexbox;display:flex}.sub-navigation-container{position:absolute;top:100%;left:0;width:100%;display:-ms-flexbox;display:flex;background:#fff;visibility:hidden}.main-navigation-item:hover .sub-navigation-container{visibility:visible}.main-navigation-controls{display:-ms-flexbox;display:flex;margin-left:auto}@media (max-width: 1023.98px){.main-navigation-controls{font-weight:400}}@media (min-width: 1024px){.main-navigation-controls{font-size:1.0625rem}}.main-navigation-controls>*{border-left:1px solid #e6e6e6}.menu-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 calc(1rem - 1px);font-weight:300;cursor:pointer;border-left:1px solid #e6e6e6;-ms-flex-order:1;order:1}@media (min-width: 1024px){.menu-button{display:none}}@media (min-width: 600px)and (max-width: 1023.98px){.menu-button .visually-hidden{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible;margin-right:.5rem}}.menu-button svg{width:1.5rem;height:1.5rem}.full-width .wide-container{max-width:none}";
+const postInternetHeaderCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--logo-scale:1}@media (max-width: 1023.98px){:host{--logo-scale:1 !important}}post-logo{height:var(--header-height);-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-transform:scale(var(--logo-scale));transform:scale(var(--logo-scale))}post-main-navigation{margin-left:calc(var(--header-height)*var(--logo-scale) - var(--header-height))}:host{display:block;position:relative;font-size:1rem;font-weight:300;z-index:var(--header-z-index, 10);--header-height:3.5rem;--meta-header-height:0px;--language-dropdown-margin-top:0px}@media (min-width: 1024px){:host{--meta-header-height:3rem;--header-height:4rem}}@media (min-width: 1280px){:host{--header-height:4.5rem}}:host([meta=false]){--meta-header-height:0px;--language-dropdown-margin-top:1px}@supports ((position: -webkit-sticky) or (position: sticky)){:host(:not(.stickyness-none)){position:-webkit-sticky;position:sticky}:host(.stickyness-full){top:0}:host(.stickyness-main){top:calc(var(--meta-header-height, 0px)*-1)}:host(.stickyness-minimal){top:calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px)*-1);-webkit-transition:top 200ms ease-in;transition:top 200ms ease-in}:host(.stickyness-minimal.scrolling-up),:host(.stickyness-minimal.dropdown-open){top:calc(var(--meta-header-height, 0px)*-1);-webkit-transition:top 200ms ease-out;transition:top 200ms ease-out}}.post-internet-header{border-bottom:1px solid #e6e6e6;background-color:#fff}.main-navigation-container{display:-ms-flexbox;display:flex}.main-navigation-container>.main-navigation-controls{-ms-flex:0 1 auto;flex:0 1 auto}.main-navigation{display:-ms-flexbox;display:flex}.sub-navigation-container{position:absolute;top:100%;left:0;width:100%;display:-ms-flexbox;display:flex;background:#fff;visibility:hidden}.main-navigation-item:hover .sub-navigation-container{visibility:visible}.main-navigation-controls{display:-ms-flexbox;display:flex;margin-left:auto}@media (max-width: 1023.98px){.main-navigation-controls{font-weight:400}}@media (min-width: 1024px){.main-navigation-controls{font-size:1.0625rem}}.main-navigation-controls>*{border-left:1px solid #e6e6e6;-ms-flex:0 0 auto;flex:0 0 auto}.main-navigation-custom-content{max-height:var(--header-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:1;flex-shrink:1}.menu-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 calc(1rem - 1px);font-weight:300;cursor:pointer;border-left:1px solid #e6e6e6;-ms-flex-order:1;order:1}@media (min-width: 1024px){.menu-button{display:none}}@media (min-width: 600px)and (max-width: 1023.98px){.menu-button .visually-hidden{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible;margin-right:.5rem}}.menu-button svg{width:1.5rem;height:1.5rem}.full-width .wide-container{max-width:none}";
 
 const PostInternetHeader = /*@__PURE__*/ proxyCustomElement(class PostInternetHeader extends HTMLElement$1 {
-  /**
-   * Get the currently set language as a two letter string ("de", "fr" "it" or "en")
-   * @returns string
-   */
-  async getCurrentLanguage() {
-    var _a;
-    return (_a = state.currentLanguage) !== null && _a !== void 0 ? _a : 'de';
-  }
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.headerLoaded = createEvent(this, "headerLoaded", 7);
-    this.lastScrollTop = window.scrollY || document.documentElement.scrollTop;
-    this.lastWindowWidth = window.innerWidth;
-    this.handleClickOutsideBound = this.handleClickOutside.bind(this);
-    this.project = undefined;
-    this.stickyness = 'minimal';
-    this.language = undefined;
-    this.meta = true;
-    this.login = true;
-    this.search = true;
-    this.skiplinks = true;
-    this.configProxy = undefined;
-    this.environment = 'prod';
-    this.languageSwitchOverrides = undefined;
-    this.customConfig = undefined;
-    this.languageCookieKey = undefined;
-    this.languageLocalStorageKey = 'swisspost-internet-header-language';
-    this.logoutUrl = undefined;
-    this.activeRoute = 'auto';
-    this.osFlyoutOverrides = undefined;
-    this.fullWidth = false;
-    this.activeFlyout = null;
-    this.activeDropdownElement = null;
-    if (this.project === undefined || this.project === '' || !isValidProjectId(this.project)) {
-      throw new Error(`Internet Header project key is "${this.project}". Please provide a valid project key.`);
-    }
-  }
-  connectedCallback() {
-    this.throttledScroll = throttle(300, () => this.handleScrollEvent());
-    this.debouncedResize = debounce(200, () => this.handleResize());
-  }
-  disconnectedCallback() {
-    this.scrollParent.removeEventListener('scroll', this.throttledScroll);
-    this.scrollParent.removeEventListener('resize', this.debouncedResize);
-    // Reset the store to its original state
-    dispose();
-  }
-  async componentWillLoad() {
-    this.scrollParent = getScrollParent(this.host);
-    this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
-    this.scrollParent.addEventListener('resize', this.debouncedResize, { passive: true });
-    // Wait for the config to arrive, then render the header
-    try {
-      state.projectId = this.project;
-      state.stickyness = this.stickyness;
-      state.environment = this.environment.toLocaleLowerCase();
-      if (this.language !== undefined)
-        state.currentLanguage = this.language;
-      state.languageSwitchOverrides =
-        typeof this.languageSwitchOverrides === 'string'
-          ? JSON.parse(this.languageSwitchOverrides)
-          : this.languageSwitchOverrides;
-      state.osFlyoutOverrides =
-        typeof this.osFlyoutOverrides === 'string'
-          ? JSON.parse(this.osFlyoutOverrides)
-          : this.osFlyoutOverrides;
-      if (this.customConfig !== undefined) {
-        const langs = Object.keys(typeof this.customConfig === 'string' ? JSON.parse(this.customConfig) : this.customConfig);
-        const lang = state.currentLanguage || getUserLang(langs, this.language);
-        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, lang);
-      }
-      state.localizedConfig = await getLocalizedConfig({
-        projectId: this.project,
-        environment: state.environment,
-        language: this.language,
-        cookieKey: this.languageCookieKey,
-        localStorageKey: this.languageLocalStorageKey,
-        activeRouteProp: this.activeRoute,
-        localizedCustomConfig: state.localizedCustomConfig,
-        osFlyoutOverrides: state.osFlyoutOverrides,
-      });
+    /**
+     * Get the currently set language as a two letter string ("de", "fr" "it" or "en")
+     * @returns string
+     */
+    async getCurrentLanguage() {
+        var _a;
+        return (_a = state.currentLanguage) !== null && _a !== void 0 ? _a : 'de';
     }
-    catch (error) {
-      console.error(error);
-    }
-  }
-  componentDidLoad() {
-    window.requestAnimationFrame(() => {
-      this.handleResize();
-      this.headerLoaded.emit();
-      this.host.classList.add('header-loaded');
-      if (this.meta && this.metaNav) {
-        this.updateLogoAnimation = registerLogoAnimationObserver(this.metaNav, this.host);
-      }
-    });
-    if (this.stickyness === 'full')
-      console.warn('Internet Header: The stickyness="full" option is deprecated.');
-  }
-  async handleLanguageChange(newValue) {
-    state.currentLanguage = newValue;
-    state.localizedConfig = await getLocalizedConfig({
-      projectId: this.project,
-      environment: this.environment,
-      language: newValue,
-      cookieKey: this.languageCookieKey,
-      localStorageKey: this.languageLocalStorageKey,
-      activeRouteProp: this.activeRoute,
-      localizedCustomConfig: state.localizedCustomConfig,
-      osFlyoutOverrides: state.osFlyoutOverrides,
-    });
-    if (this.customConfig)
-      state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, newValue);
-  }
-  handleAvailableLanguagesChange(newValue) {
-    state.languageSwitchOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-  }
-  async handleOsFlyoutOverrides(newValue) {
-    state.osFlyoutOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-    state.localizedConfig = await getLocalizedConfig({
-      projectId: this.project,
-      environment: this.environment,
-      language: this.language,
-      cookieKey: this.languageCookieKey,
-      localStorageKey: this.languageLocalStorageKey,
-      activeRouteProp: this.activeRoute,
-      localizedCustomConfig: state.localizedCustomConfig,
-      osFlyoutOverrides: state.osFlyoutOverrides,
-    });
-  }
-  async handleActiveRouteChange(newValue) {
-    state.localizedConfig = await getLocalizedConfig({
-      projectId: this.project,
-      environment: this.environment,
-      language: this.language,
-      cookieKey: this.languageCookieKey,
-      localStorageKey: this.languageLocalStorageKey,
-      activeRouteProp: newValue,
-      localizedCustomConfig: state.localizedCustomConfig,
-      osFlyoutOverrides: state.osFlyoutOverrides,
-    });
-  }
-  async handleCustomConfigChange(newValue) {
-    if (this.language === undefined)
-      return;
-    const localizedCustomConfig = getLocalizedCustomConfig(newValue, this.language);
-    state.localizedCustomConfig = localizedCustomConfig;
-    state.localizedConfig = await getLocalizedConfig({
-      projectId: this.project,
-      environment: this.environment,
-      language: this.language,
-      cookieKey: this.languageCookieKey,
-      localStorageKey: this.languageLocalStorageKey,
-      activeRouteProp: this.activeRoute,
-      localizedCustomConfig: localizedCustomConfig,
-      osFlyoutOverrides: state.osFlyoutOverrides,
-    });
-  }
-  handleSearchChange(newValue) {
-    state.search = newValue;
-  }
-  handleLoginChange(newValue) {
-    state.login = newValue;
-  }
-  handleMetaChange(newValue) {
-    state.meta = newValue;
-  }
-  handleLanguageChangeEvent(event) {
-    void this.handleLanguageChange(event.detail);
-  }
-  handleStickynessChange(newValue) {
-    state.stickyness = newValue;
-    if (typeof this.updateLogoAnimation === 'function')
-      this.updateLogoAnimation();
-  }
-  handleClickOutside(event) {
-    // Close active dropdown element on click outside of it
-    if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
-      void this.activeDropdownElement.toggleDropdown(false);
-    }
-  }
-  handleKeyUp(event) {
-    if (event.key === 'Escape') {
-      if (this.activeDropdownElement) {
-        void this.activeDropdownElement.toggleDropdown(false);
-      }
-      if (this.activeFlyout !== null && this.mainNav) {
-        void this.mainNav.toggleDropdown(false);
-      }
-    }
-  }
-  handleScrollEvent() {
-    // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-    const st = this.scrollParent instanceof Document
-      ? this.scrollParent.documentElement.scrollTop
-      : this.scrollParent.scrollTop;
-    // Toggle class without re-rendering the component if stickyness is minimal
-    // the other stickyness modes do not need the class
-    if (this.stickyness === 'minimal') {
-      this.host.classList.toggle('scrolling-up', st <= this.lastScrollTop);
-    }
-    // For Mobile or negative scrolling
-    this.lastScrollTop = st <= 0 ? 0 : st;
-  }
-  handleResize() {
-    var _a;
-    // Close main navigation dropdown if size changed to bigger than 1024px (search dropdown will be kept open)
-    if (this.isMainNavOpen() && this.lastWindowWidth < 1024 && window.innerWidth >= 1024) {
-      (_a = this.activeDropdownElement) === null || _a === void 0 ? void 0 : _a.toggleDropdown(false);
-    }
-    this.lastWindowWidth = window.innerWidth;
-  }
-  /**
-   * Close open dropdown menus if another is being opened
-   *
-   * @param event Dropdown toggled event
-   * @returns void
-   */
-  handleDropdownToggled(event) {
-    if (!event.detail.open && this.activeDropdownElement !== event.detail.element) {
-      // Some dropdown got closed programmatically (possibly by this function). To prevent
-      // a circle or an outdated state, we'll not handle this event
-      return;
-    }
-    if (event.detail.open) {
-      if (this.activeDropdownElement) {
-        void this.activeDropdownElement.toggleDropdown(false);
-      }
-      this.activeDropdownElement = event.detail.element;
-      if (window.innerWidth >= 1024) {
-        // Add event listener to close active dropdown element on click outside of it
-        // Also adds 10ms delay in case of an external interaction:
-        //    Some button on the page calls toggleDropdown() -> dropdown opens
-        //    Click event bubbles to the window, this.handleClickOutsideBound closes dropdown again
-        window.setTimeout(() => {
-          window.addEventListener('click', this.handleClickOutsideBound);
-        }, 10);
-      }
-      if (this.activeFlyout !== null && this.mainNav) {
-        void this.mainNav.setActiveFlyout(null);
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.headerLoaded = createEvent(this, "headerLoaded", 7);
+        this.lastScrollTop = window.scrollY || document.documentElement.scrollTop;
+        this.lastWindowWidth = window.innerWidth;
+        this.handleClickOutsideBound = this.handleClickOutside.bind(this);
+        this.project = undefined;
+        this.stickyness = 'minimal';
+        this.language = undefined;
+        this.meta = true;
+        this.login = true;
+        this.search = true;
+        this.skiplinks = true;
+        this.configProxy = undefined;
+        this.environment = 'prod';
+        this.languageSwitchOverrides = undefined;
+        this.customConfig = undefined;
+        this.languageCookieKey = undefined;
+        this.languageLocalStorageKey = 'swisspost-internet-header-language';
+        this.logoutUrl = undefined;
+        this.activeRoute = 'auto';
+        this.osFlyoutOverrides = undefined;
+        this.fullWidth = false;
+        this.activeFlyout = null;
+        this.activeDropdownElement = null;
+        this.isMainSlotEmpty = true;
+        if (this.project === undefined || this.project === '' || !isValidProjectId(this.project)) {
+            throw new Error(`Internet Header project key is "${this.project}". Please provide a valid project key.`);
+        }
     }
-    else {
-      this.activeDropdownElement = null;
-      // Remove event listener as it is not needed if no dropdown element is active
-      window.removeEventListener('click', this.handleClickOutsideBound);
-    }
-  }
-  /**
-   * Close open dropdowns if the flyout is being opened
-   * @param event Flyout toggle event
-   */
-  handleFlyoutToggled(event) {
-    this.activeFlyout = event.detail;
-    if (this.activeDropdownElement && event.detail && !this.isMainNavOpen()) {
-      void this.activeDropdownElement.toggleDropdown(false);
-    }
-  }
-  toggleMobileDropdown() {
-    var _a;
-    (_a = this.mainNav) === null || _a === void 0 ? void 0 : _a.toggleDropdown();
-  }
-  isMainNavOpen() {
-    return (this.activeDropdownElement && this.activeDropdownElement.tagName === 'POST-MAIN-NAVIGATION');
-  }
-  render() {
-    var _a, _b, _c;
-    if (!((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header)) {
-      console.error(new Error('Internet Header: Config cannot be loaded'));
-      return;
-    }
-    const config = state.localizedConfig;
-    const renderMetaNavigation = this.meta &&
-      config.header.navMeta !== undefined &&
-      ((_b = config.header.navMeta) === null || _b === void 0 ? void 0 : _b.filter(meta => !meta.isHomeLink).length) > 0;
-    const renderLogin = ((_c = this.login) !== null && _c !== void 0 ? _c : !config.header.isLoginWidgetHidden) && config.header.loginWidgetOptions;
-    const renderLanguageSwitch = config.header.navLang.length > 1;
-    return (h(Host, { class: `stickyness-${this.stickyness} ${Boolean(this.activeDropdownElement) || Boolean(this.activeFlyout) ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", { "logout-url": this.logoutUrl }, h("slot", { name: "login-widget" }))), h(If, { condition: !renderMetaNavigation && renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })), h("slot", { name: "main" }))))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "language": ["handleLanguageChange"],
-    "languageSwitchOverrides": ["handleAvailableLanguagesChange"],
-    "osFlyoutOverrides": ["handleOsFlyoutOverrides"],
-    "activeRoute": ["handleActiveRouteChange"],
-    "customConfig": ["handleCustomConfigChange"],
-    "search": ["handleSearchChange"],
-    "login": ["handleLoginChange"],
-    "meta": ["handleMetaChange"],
-    "stickyness": ["handleStickynessChange"]
-  }; }
-  static get style() { return postInternetHeaderCss; }
+    connectedCallback() {
+        this.throttledScroll = throttle(300, () => this.handleScrollEvent());
+        this.debouncedResize = debounce(200, () => this.handleResize());
+    }
+    disconnectedCallback() {
+        this.scrollParent.removeEventListener('scroll', this.throttledScroll);
+        this.scrollParent.removeEventListener('resize', this.debouncedResize);
+        // Reset the store to its original state
+        dispose();
+    }
+    async componentWillLoad() {
+        this.scrollParent = getScrollParent(this.host);
+        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+        this.scrollParent.addEventListener('resize', this.debouncedResize, { passive: true });
+        // Wait for the config to arrive, then render the header
+        try {
+            state.projectId = this.project;
+            state.stickyness = this.stickyness;
+            state.environment = this.environment.toLocaleLowerCase();
+            if (this.language !== undefined)
+                state.currentLanguage = this.language;
+            state.languageSwitchOverrides =
+                typeof this.languageSwitchOverrides === 'string'
+                    ? JSON.parse(this.languageSwitchOverrides)
+                    : this.languageSwitchOverrides;
+            state.osFlyoutOverrides =
+                typeof this.osFlyoutOverrides === 'string'
+                    ? JSON.parse(this.osFlyoutOverrides)
+                    : this.osFlyoutOverrides;
+            if (this.customConfig !== undefined) {
+                const langs = Object.keys(typeof this.customConfig === 'string' ? JSON.parse(this.customConfig) : this.customConfig);
+                const lang = state.currentLanguage || getUserLang(langs, this.language);
+                state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, lang);
+            }
+            state.localizedConfig = await getLocalizedConfig({
+                projectId: this.project,
+                environment: state.environment,
+                language: this.language,
+                cookieKey: this.languageCookieKey,
+                localStorageKey: this.languageLocalStorageKey,
+                activeRouteProp: this.activeRoute,
+                localizedCustomConfig: state.localizedCustomConfig,
+                osFlyoutOverrides: state.osFlyoutOverrides,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    componentDidLoad() {
+        window.requestAnimationFrame(() => {
+            this.handleResize();
+            this.headerLoaded.emit();
+            this.host.classList.add('header-loaded');
+            if (this.meta && this.metaNav) {
+                this.updateLogoAnimation = registerLogoAnimationObserver(this.metaNav, this.host);
+            }
+        });
+        if (this.stickyness === 'full')
+            console.warn('Internet Header: The stickyness="full" option is deprecated.');
+    }
+    async handleLanguageChange(newValue) {
+        state.currentLanguage = newValue;
+        state.localizedConfig = await getLocalizedConfig({
+            projectId: this.project,
+            environment: this.environment,
+            language: newValue,
+            cookieKey: this.languageCookieKey,
+            localStorageKey: this.languageLocalStorageKey,
+            activeRouteProp: this.activeRoute,
+            localizedCustomConfig: state.localizedCustomConfig,
+            osFlyoutOverrides: state.osFlyoutOverrides,
+        });
+        if (this.customConfig)
+            state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, newValue);
+    }
+    handleAvailableLanguagesChange(newValue) {
+        state.languageSwitchOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    async handleOsFlyoutOverrides(newValue) {
+        state.osFlyoutOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+        state.localizedConfig = await getLocalizedConfig({
+            projectId: this.project,
+            environment: this.environment,
+            language: this.language,
+            cookieKey: this.languageCookieKey,
+            localStorageKey: this.languageLocalStorageKey,
+            activeRouteProp: this.activeRoute,
+            localizedCustomConfig: state.localizedCustomConfig,
+            osFlyoutOverrides: state.osFlyoutOverrides,
+        });
+    }
+    async handleActiveRouteChange(newValue) {
+        state.localizedConfig = await getLocalizedConfig({
+            projectId: this.project,
+            environment: this.environment,
+            language: this.language,
+            cookieKey: this.languageCookieKey,
+            localStorageKey: this.languageLocalStorageKey,
+            activeRouteProp: newValue,
+            localizedCustomConfig: state.localizedCustomConfig,
+            osFlyoutOverrides: state.osFlyoutOverrides,
+        });
+    }
+    async handleCustomConfigChange(newValue) {
+        if (this.language === undefined)
+            return;
+        const localizedCustomConfig = getLocalizedCustomConfig(newValue, this.language);
+        state.localizedCustomConfig = localizedCustomConfig;
+        state.localizedConfig = await getLocalizedConfig({
+            projectId: this.project,
+            environment: this.environment,
+            language: this.language,
+            cookieKey: this.languageCookieKey,
+            localStorageKey: this.languageLocalStorageKey,
+            activeRouteProp: this.activeRoute,
+            localizedCustomConfig: localizedCustomConfig,
+            osFlyoutOverrides: state.osFlyoutOverrides,
+        });
+    }
+    handleSearchChange(newValue) {
+        state.search = newValue;
+    }
+    handleLoginChange(newValue) {
+        state.login = newValue;
+    }
+    handleMetaChange(newValue) {
+        state.meta = newValue;
+    }
+    handleLanguageChangeEvent(event) {
+        void this.handleLanguageChange(event.detail);
+    }
+    handleStickynessChange(newValue) {
+        state.stickyness = newValue;
+        if (typeof this.updateLogoAnimation === 'function')
+            this.updateLogoAnimation();
+    }
+    handleClickOutside(event) {
+        // Close active dropdown element on click outside of it
+        if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
+            void this.activeDropdownElement.toggleDropdown(false);
+        }
+    }
+    handleKeyUp(event) {
+        if (event.key === 'Escape') {
+            if (this.activeDropdownElement) {
+                void this.activeDropdownElement.toggleDropdown(false);
+            }
+            if (this.activeFlyout !== null && this.mainNav) {
+                void this.mainNav.toggleDropdown(false);
+            }
+        }
+    }
+    handleScrollEvent() {
+        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+        const st = this.scrollParent instanceof Document
+            ? this.scrollParent.documentElement.scrollTop
+            : this.scrollParent.scrollTop;
+        // Toggle class without re-rendering the component if stickyness is minimal
+        // the other stickyness modes do not need the class
+        if (this.stickyness === 'minimal') {
+            this.host.classList.toggle('scrolling-up', st <= this.lastScrollTop);
+        }
+        // For Mobile or negative scrolling
+        this.lastScrollTop = st <= 0 ? 0 : st;
+    }
+    handleResize() {
+        var _a;
+        // Close main navigation dropdown if size changed to bigger than 1024px (search dropdown will be kept open)
+        if (this.isMainNavOpen() && this.lastWindowWidth < 1024 && window.innerWidth >= 1024) {
+            (_a = this.activeDropdownElement) === null || _a === void 0 ? void 0 : _a.toggleDropdown(false);
+        }
+        this.lastWindowWidth = window.innerWidth;
+    }
+    /**
+     * Close open dropdown menus if another is being opened
+     *
+     * @param event Dropdown toggled event
+     * @returns void
+     */
+    handleDropdownToggled(event) {
+        if (!event.detail.open && this.activeDropdownElement !== event.detail.element) {
+            // Some dropdown got closed programmatically (possibly by this function). To prevent
+            // a circle or an outdated state, we'll not handle this event
+            return;
+        }
+        if (event.detail.open) {
+            if (this.activeDropdownElement) {
+                void this.activeDropdownElement.toggleDropdown(false);
+            }
+            this.activeDropdownElement = event.detail.element;
+            if (window.innerWidth >= 1024) {
+                // Add event listener to close active dropdown element on click outside of it
+                // Also adds 10ms delay in case of an external interaction:
+                //    Some button on the page calls toggleDropdown() -> dropdown opens
+                //    Click event bubbles to the window, this.handleClickOutsideBound closes dropdown again
+                window.setTimeout(() => {
+                    window.addEventListener('click', this.handleClickOutsideBound);
+                }, 10);
+            }
+            if (this.activeFlyout !== null && this.mainNav) {
+                void this.mainNav.setActiveFlyout(null);
+            }
+        }
+        else {
+            this.activeDropdownElement = null;
+            // Remove event listener as it is not needed if no dropdown element is active
+            window.removeEventListener('click', this.handleClickOutsideBound);
+        }
+    }
+    /**
+     * Close open dropdowns if the flyout is being opened
+     * @param event Flyout toggle event
+     */
+    handleFlyoutToggled(event) {
+        this.activeFlyout = event.detail;
+        if (this.activeDropdownElement && event.detail && !this.isMainNavOpen()) {
+            void this.activeDropdownElement.toggleDropdown(false);
+        }
+    }
+    toggleMobileDropdown() {
+        var _a;
+        (_a = this.mainNav) === null || _a === void 0 ? void 0 : _a.toggleDropdown();
+    }
+    isMainNavOpen() {
+        return (this.activeDropdownElement && this.activeDropdownElement.tagName === 'POST-MAIN-NAVIGATION');
+    }
+    handleMainSlotChange(e) {
+        const mainSlot = e.target;
+        this.isMainSlotEmpty = mainSlot.assignedElements().length === 0;
+    }
+    render() {
+        var _a, _b, _c;
+        if (!((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header)) {
+            console.error(new Error('Internet Header: Config cannot be loaded'));
+            return;
+        }
+        const config = state.localizedConfig;
+        const renderMetaNavigation = this.meta &&
+            config.header.navMeta !== undefined &&
+            ((_b = config.header.navMeta) === null || _b === void 0 ? void 0 : _b.filter(meta => !meta.isHomeLink).length) > 0;
+        const renderLogin = ((_c = this.login) !== null && _c !== void 0 ? _c : !config.header.isLoginWidgetHidden) && config.header.loginWidgetOptions;
+        const renderLanguageSwitch = config.header.navLang.length > 1;
+        return (h(Host, { class: `stickyness-${this.stickyness} ${Boolean(this.activeDropdownElement) || Boolean(this.activeFlyout) ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h("div", { class: "main-navigation-custom-content", hidden: this.isMainSlotEmpty }, h("slot", { name: "main", onSlotchange: e => this.handleMainSlotChange(e) })), h(If, { condition: this.search }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", { "logout-url": this.logoutUrl }, h("slot", { name: "login-widget" }))), h(If, { condition: !renderMetaNavigation && renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "language": ["handleLanguageChange"],
+        "languageSwitchOverrides": ["handleAvailableLanguagesChange"],
+        "osFlyoutOverrides": ["handleOsFlyoutOverrides"],
+        "activeRoute": ["handleActiveRouteChange"],
+        "customConfig": ["handleCustomConfigChange"],
+        "search": ["handleSearchChange"],
+        "login": ["handleLoginChange"],
+        "meta": ["handleMetaChange"],
+        "stickyness": ["handleStickynessChange"]
+    }; }
+    static get style() { return postInternetHeaderCss; }
 }, [1, "swisspost-internet-header", {
-    "project": [1],
-    "stickyness": [1],
-    "language": [1],
-    "meta": [4],
-    "login": [4],
-    "search": [4],
-    "skiplinks": [4],
-    "configProxy": [1, "config-proxy"],
-    "environment": [1],
-    "languageSwitchOverrides": [1, "language-switch-overrides"],
-    "customConfig": [1, "custom-config"],
-    "languageCookieKey": [1, "language-cookie-key"],
-    "languageLocalStorageKey": [1, "language-local-storage-key"],
-    "logoutUrl": [1, "logout-url"],
-    "activeRoute": [8, "active-route"],
-    "osFlyoutOverrides": [1, "os-flyout-overrides"],
-    "fullWidth": [4, "full-width"],
-    "activeFlyout": [32],
-    "activeDropdownElement": [32],
-    "getCurrentLanguage": [64]
-  }, [[0, "languageChanged", "handleLanguageChangeEvent"]], {
-    "language": ["handleLanguageChange"],
-    "languageSwitchOverrides": ["handleAvailableLanguagesChange"],
-    "osFlyoutOverrides": ["handleOsFlyoutOverrides"],
-    "activeRoute": ["handleActiveRouteChange"],
-    "customConfig": ["handleCustomConfigChange"],
-    "search": ["handleSearchChange"],
-    "login": ["handleLoginChange"],
-    "meta": ["handleMetaChange"],
-    "stickyness": ["handleStickynessChange"]
-  }]);
+        "project": [1],
+        "stickyness": [1],
+        "language": [1],
+        "meta": [4],
+        "login": [4],
+        "search": [4],
+        "skiplinks": [4],
+        "configProxy": [1, "config-proxy"],
+        "environment": [1],
+        "languageSwitchOverrides": [1, "language-switch-overrides"],
+        "customConfig": [1, "custom-config"],
+        "languageCookieKey": [1, "language-cookie-key"],
+        "languageLocalStorageKey": [1, "language-local-storage-key"],
+        "logoutUrl": [1, "logout-url"],
+        "activeRoute": [8, "active-route"],
+        "osFlyoutOverrides": [1, "os-flyout-overrides"],
+        "fullWidth": [4, "full-width"],
+        "activeFlyout": [32],
+        "activeDropdownElement": [32],
+        "isMainSlotEmpty": [32],
+        "getCurrentLanguage": [64]
+    }, [[0, "languageChanged", "handleLanguageChangeEvent"]], {
+        "language": ["handleLanguageChange"],
+        "languageSwitchOverrides": ["handleAvailableLanguagesChange"],
+        "osFlyoutOverrides": ["handleOsFlyoutOverrides"],
+        "activeRoute": ["handleActiveRouteChange"],
+        "customConfig": ["handleCustomConfigChange"],
+        "search": ["handleSearchChange"],
+        "login": ["handleLoginChange"],
+        "meta": ["handleMetaChange"],
+        "stickyness": ["handleStickynessChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["swisspost-internet-header", "post-klp-login-widget", "post-language-switch", "post-logo", "post-main-navigation", "post-meta-navigation", "post-search", "post-skiplinks"];
-  components.forEach(tagName => { switch (tagName) {
-    case "swisspost-internet-header":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PostInternetHeader);
-      }
-      break;
-    case "post-klp-login-widget":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "post-language-switch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "post-logo":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "post-main-navigation":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "post-meta-navigation":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "post-search":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "post-skiplinks":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swisspost-internet-header", "post-klp-login-widget", "post-language-switch", "post-logo", "post-main-navigation", "post-meta-navigation", "post-search", "post-skiplinks"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swisspost-internet-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostInternetHeader);
+            }
+            break;
+        case "post-klp-login-widget":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "post-language-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "post-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "post-main-navigation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "post-meta-navigation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-skiplinks":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SwisspostInternetHeader = PostInternetHeader;