@swisspost/internet-header 1.5.0-beta.0

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

@@ -0,0 +1,779 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as throttle, d as debounce } from './index2.js';
+import { g as getUserLang, p as persistLanguageChoice } from './language.service.js';
+import { u as uniqueId } from './utils.js';
+import { s as state, d as dispose } from './store.js';
+import { S as SvgSprite } from './svg-sprite.component.js';
+import { S as SvgIcon } from './svg-icon.component.js';
+import { I as If, d as defineCustomElement$3 } from './post-search2.js';
+import { d as defineCustomElement$8 } from './post-klp-login-widget2.js';
+import { d as defineCustomElement$7 } from './post-language-switch2.js';
+import { d as defineCustomElement$6 } from './post-logo2.js';
+import { d as defineCustomElement$5 } from './post-main-navigation2.js';
+import { d as defineCustomElement$4 } from './post-meta-navigation2.js';
+import { d as defineCustomElement$2 } from './post-skiplinks2.js';
+
+/**
+ * Activate the current route based on the config and the match mode
+ * @param config Main Navigation Config
+ * @param activeRouteProp Match mode
+ * @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);
+    }
+    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
+    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
+ * @param config Main navigation config
+ * @returns True if portal set any route as active
+ */
+const hasActivePortalRoute = (config) => {
+  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 }))) }))) })));
+};
+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 }))) }))) })));
+};
+/**
+ * Compile a list of scores based on the map mode, sorted in descending order
+ * @param config Main Nav Config
+ * @param compareUrl Current Browser URL or a custom URL
+ * @param activeRouteProp Match mode
+ * @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.forEach(mainNav => {
+    if (hadAnyActiveLink || !mainNav) {
+      return;
+    }
+    try {
+      const score = compareRoutes(compareUrl, new URL(mainNav.url), activeRouteProp);
+      if (score > 0) {
+        if (score === Infinity)
+          hadAnyActiveLink = true;
+        scoreList.push({ main: mainNav, score });
+      }
+    }
+    catch (_a) {
+      // Not a valid url, continue
+    }
+    // Loop through flyout links 2nd level
+    if (mainNav.flyout.length) {
+      mainNav.flyout.forEach(flyout => {
+        if (flyout.linkList) {
+          flyout.linkList.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);
+              if (score > 0) {
+                if (score === Infinity)
+                  hadAnyActiveLink = true;
+                // Push score
+                scoreList.push({
+                  main: mainNav,
+                  sub: linklist,
+                  score,
+                });
+              }
+            }
+            catch (_a) {
+              // Not a valid URL, continue
+            }
+          });
+        }
+      });
+    }
+  });
+  return scoreList.sort((a, b) => b.score - a.score);
+};
+/**
+ * Compare two URLs for similarity based on a match mode
+ * @param baseUrl Browser URL
+ * @param compareUrl Navigatgion URL
+ * @param matchMode exact or auto matching
+ * @returns Score
+ */
+const compareRoutes = (baseUrl, compareUrl, matchMode) => {
+  // One url is not defined or they don't share the same orign
+  if (!baseUrl || !compareUrl || baseUrl.origin !== compareUrl.origin) {
+    return 0;
+  }
+  // Exact match, origin and pathname are the same
+  if (baseUrl.pathname === compareUrl.pathname) {
+    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, ...baseUrl.pathname.split('/').filter(x => !!x)];
+    const compareSegments = [compareUrl.origin, ...compareUrl.pathname.split('/').filter(x => !!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
+ * @param a Base array
+ * @param b Compare array
+ * @returns Score
+ */
+const getSimilarityScore = (a, b) => {
+  if (!(a === null || a === void 0 ? void 0 : a.length) || !(b === null || b === void 0 ? void 0 : b.length)) {
+    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
+let request = null;
+// Cache the original os flyout to use it for updates
+let osFlyoutCache = null;
+/**
+ * Get a localized config object
+ *
+ * @param projectId String identifying the project
+ * @param language [optional] Preferred language
+ * @returns Localized config object
+ */
+const getLocalizedConfig = async ({ projectId, environment, language, cookieKey, localStorageKey, activeRouteProp, localizedCustomConfig, osFlyoutOverrides, }) => {
+  var _a, _b;
+  if (!request) {
+    request = fetchConfig(projectId, environment);
+  }
+  const config = await request;
+  const 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
+  let 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)
+    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
+ * @param config Localized config
+ * @param osFlyoutOverrides Overrides for the flyout
+ * @returns Merged localized config
+ */
+const mergeOsFlyoutOverrides = (config, osFlyoutOverrides) => {
+  if (!osFlyoutOverrides)
+    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 ||
+      osFlyoutCache.flyout.length === 0 ||
+      !osFlyoutOverrides.flyout ||
+      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 ? 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
+ *
+ * @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}`);
+  }
+};
+/**
+ * Generate an URL with all necessary query params to get the configuration.
+ * Project id "test" will return a test configuration
+ * @param projectId string
+ * @param environment int01, int02 or prod
+ * @returns URL pointing to the project config
+ */
+const generateConfigUrl = (projectId, environment) => {
+  if (projectId === 'test')
+    return 'assets/config/test-configuration.json';
+  const isInt = environment.startsWith('int');
+  const host = `https://${isInt ? 'int' : 'www'}.post.ch`;
+  try {
+    // Use URL to validate the generated URL
+    return new URL(`${host}/api/headerjs/Json?serviceid=${encodeURIComponent(projectId)}${isInt ? '&environment=' + environment : ''}`).toString();
+  }
+  catch (error) {
+    throw new Error(`Internet Header: Config URL is invalid.`);
+  }
+};
+/**
+ * Check if project id contains only URL safe characters
+ *
+ * @param projectId Project Id string
+ * @returns The valid project id
+ */
+const isValidProjectId = (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
+ *
+ * @param config String or json object of the custom config
+ * @param language Specific language
+ * @returns Localized custom config object
+ */
+const getLocalizedCustomConfig = (config, language) => {
+  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 (localizedCustomConfig !== undefined)
+    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-');
+  });
+};
+
+const name = "@swisspost/internet-header";
+const version = "1.4.2-beta.0";
+const description = "Swiss Post Internet Header";
+const license = "Apache-2.0";
+const main = "loader/index.cjs.js";
+const module = "loader/index.js";
+const es2015 = "loader/index.es2017.js";
+const es2017 = "loader/index.es2017.js";
+const types = "loader/index.d.ts";
+const collection = "dist/collection/collection-manifest.json";
+const unpkg = "loader/cdn.js";
+const files = [
+	"dist/",
+	"src",
+	"loader/"
+];
+const scripts = {
+	build: "npm run stencil:build",
+	clean: "rimraf www dist loader storybook-static",
+	start: "npm run stencil:serve",
+	test: "jest",
+	lint: "eslint src/**/*{.ts,.tsx}",
+	"lint:fix": "eslint src/**/*{.ts,.tsx} --fix",
+	"stencil:start": "stencil build --docs --watch",
+	"stencil:build": "stencil build --docs",
+	"stencil:serve": "stencil build --watch --serve --docs",
+	generate: "stencil generate",
+	jest: "jest",
+	"jest:watch": "jest --watch"
+};
+const dependencies = {
+	"@sindresorhus/slugify": "2.1.1",
+	"@stencil/core": "3.0.0",
+	"@stencil/store": "1.5.0",
+	"body-scroll-lock": "4.0.0-beta.0",
+	"iframe-resizer": "4.3.2",
+	jquery: "3.6.3",
+	tabbable: "5.3.3",
+	"throttle-debounce": "3.0.1",
+	"url-polyfill": "1.1.12"
+};
+const devDependencies = {
+	"@babel/core": "7.20.12",
+	"@stencil/eslint-plugin": "0.4.0",
+	"@stencil/sass": "2.0.1",
+	"@swisspost/design-system-styles": "5.2",
+	"@types/iframe-resizer": "3.5.9",
+	"@types/jest": "27.5.1",
+	"@types/jquery": "3.5.16",
+	"@types/node": "18.11.18",
+	"@types/throttle-debounce": "2.1.0",
+	"babel-loader": "9.1.2",
+	bootstrap: "5.1",
+	"eslint-plugin-react": "^7.32.0",
+	globby: "13.1.3",
+	jest: "27.5.1",
+	rimraf: "3.0.2",
+	"rollup-plugin-node-polyfills": "0.2.1",
+	"rollup-plugin-scss": "4.0.0",
+	"rollup-plugin-visualizer": "5.9.0",
+	sass: "1.57.1",
+	"start-server-and-test": "1.15.3",
+	"ts-jest": "27.1.5",
+	typescript: "4.8.4"
+};
+const packageJson = {
+	name: name,
+	version: version,
+	description: description,
+	license: license,
+	main: main,
+	module: module,
+	es2015: es2015,
+	es2017: es2017,
+	"jsnext:main": "loader/index.es2017.js",
+	types: types,
+	collection: collection,
+	"collection:main": "dist/collection/index.js",
+	unpkg: unpkg,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
+
+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: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: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\")}*,: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}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.nav-link:hover,.nav-link:focus{color:black}.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}.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}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@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{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)) * -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:white}.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:white;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:0.5rem}}.menu-button svg{width:1.5rem;height:1.5rem}.full-width .wide-container{max-width:none}";
+
+const PostInternetHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  /**
+   * 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.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());
+    window.addEventListener('scroll', this.throttledScroll, { passive: true });
+    window.addEventListener('resize', this.debouncedResize, { passive: true });
+  }
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.throttledScroll);
+    window.removeEventListener('resize', this.debouncedResize);
+    // Reset the store to its original state
+    dispose();
+  }
+  async componentWillLoad() {
+    // Wait for the config to arrive, then render the header
+    try {
+      state.projectId = this.project;
+      state.environment = this.environment;
+      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 && state.currentLanguage !== null) {
+        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, state.currentLanguage);
+      }
+      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,
+      });
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+  componentDidLoad() {
+    window.requestAnimationFrame(() => {
+      this.handleResize();
+      this.headerLoaded.emit();
+      this.host.classList.add('header-loaded');
+    });
+  }
+  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);
+  }
+  handleAvailableLanguagesChage(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) {
+    this.handleLanguageChange(event.detail);
+  }
+  handleClickOutside(event) {
+    // Close active dropdown element on click outside of it
+    if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
+      this.activeDropdownElement.toggleDropdown(false);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.key === 'Escape') {
+      if (this.activeDropdownElement) {
+        this.activeDropdownElement.toggleDropdown(false);
+      }
+      if (this.activeFlyout !== null && this.mainNav) {
+        this.mainNav.toggleDropdown(false);
+      }
+    }
+  }
+  handleScrollEvent() {
+    // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+    const st = window.scrollY || document.documentElement.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 === true) {
+      if (this.activeDropdownElement) {
+        this.activeDropdownElement.toggleDropdown(false);
+      }
+      this.activeDropdownElement = event.detail.element;
+      if (window.innerWidth >= 1024) {
+        // Add event listener to close active dropdown element on click outsite 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) {
+        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()) {
+      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} ${this.activeDropdownElement || 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(If, { condition: this.skiplinks === true }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation === true }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth }, h(If, { condition: renderLanguageSwitch === true }, 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() }, 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 === true }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search !== false }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", null, h("slot", { name: "login-widget" }))), h(If, { condition: renderMetaNavigation === false && renderLanguageSwitch === true }, 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": ["handleAvailableLanguagesChage"],
+    "osFlyoutOverrides": ["handleOsFlyoutOverrides"],
+    "activeRoute": ["handleActiveRouteChange"],
+    "customConfig": ["handleCustomConfigChange"],
+    "search": ["handleSearchChange"],
+    "login": ["handleLoginChange"],
+    "meta": ["handleMetaChange"]
+  }; }
+  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"],
+    "activeRoute": [8, "active-route"],
+    "osFlyoutOverrides": [1, "os-flyout-overrides"],
+    "fullWidth": [4, "full-width"],
+    "activeFlyout": [32],
+    "activeDropdownElement": [32],
+    "getCurrentLanguage": [64]
+  }, [[0, "languageChanged", "handleLanguageChangeEvent"]]]);
+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;
+  } });
+}
+
+const SwisspostInternetHeader = PostInternetHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwisspostInternetHeader, defineCustomElement };
+
+//# sourceMappingURL=swisspost-internet-header.js.map