@swisspost/internet-header 1.17.0 → 10.1.0

package/dist/collection/data/store.js

@@ -1,13 +1,10 @@
 import { createStore } from "@stencil/store";
-export const { state, reset, dispose } = createStore({
+export const { state, onChange, reset, dispose } = createStore({
     projectId: null,
     currentLanguage: null,
     localizedConfig: null,
     environment: 'prod',
+    activeLink: null,
     search: true,
-    login: true,
-    meta: true,
-    stickyness: 'minimal',
-    logoutUrl: undefined,
-    selfAdminOrigin: undefined,
+    user: null,
 });

package/dist/collection/index.js

@@ -1,11 +1,3 @@
 // Export every single component so it gets included in the dist output
-export { PostInternetHeader } from './components/post-internet-header/post-internet-header';
-export { PostInternetBreadcrumbs } from './components/post-internet-breadcrumbs/post-internet-breadcrumbs';
 export { PostInternetFooter } from './components/post-internet-footer/post-internet-footer';
-export { PostSkiplinks } from './components/post-skiplinks/post-skiplinks';
-export { PostMetaNavigation } from './components/post-meta-navigation/post-meta-navigation';
-export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
-export { PostLogo } from './components/post-logo/post-logo';
-export { PostMainNavigation } from './components/post-main-navigation/post-main-navigation';
-export { PostSearch } from './components/post-search/post-search';
-export { PostKlpLoginWidget } from './components/post-klp-login-widget/post-klp-login-widget';
+export { PostInternetHeader } from './components/post-internet-header/post-internet-header';

package/dist/collection/services/config.service.js

@@ -1,13 +1,11 @@
-import { getUserLang, persistLanguageChoice } from "./language.service";
-import { uniqueId } from "../utils/utils";
-import { markActiveRoute } from "./route.service";
-// Prevent double requests
-let request = null;
-// Cache the original os flyout to use it for updates
-let osFlyoutCache = null;
+import { state } from "../data/store";
+import { getUserLang } from "./language.service";
+// Dedupes concurrent requests for the same projectId + environment + language.
+// Entries are removed once settled, so a new language switch always fetches fresh.
+const inFlightRequests = new Map();
 const getPPMConfig = () => {
     const ppmConfigScript = document.querySelector('#PPM_HEADER_DATA');
-    if ((ppmConfigScript === null || ppmConfigScript === void 0 ? void 0 : ppmConfigScript.textContent) != null) {
+    if (ppmConfigScript?.textContent != null) {
         return JSON.parse(ppmConfigScript.textContent);
     }
     return null;
@@ -16,95 +14,41 @@ const getPPMConfig = () => {
  * Get a localized config object
  *
  * @param projectId String identifying the project
+ * @param environment Target environment
  * @param language [optional] Preferred language
  * @returns Localized config object
  */
-export const getLocalizedConfig = async ({ projectId, environment, language, cookieKey, localStorageKey, activeRouteProp, localizedCustomConfig, osFlyoutOverrides, }) => {
-    var _a, _b;
+export const getLocalizedConfig = async ({ projectId, environment, language, }) => {
     const ppmConfig = getPPMConfig();
-    let localizedConfig;
-    let config = null;
-    let lang;
     if (ppmConfig) {
-        localizedConfig = ppmConfig;
-        lang = document.documentElement.lang;
+        const lang = document.documentElement.lang;
+        state.currentLanguage = lang;
+        return ppmConfig;
     }
-    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]);
+    const lang = getUserLang(language);
+    const cacheKey = `${projectId}-${environment}-${lang}`;
+    let configPromise = inFlightRequests.get(cacheKey);
+    if (configPromise == null) {
+        configPromise = fetchConfig(projectId, environment, lang).finally(() => {
+            inFlightRequests.delete(cacheKey);
+        });
+        inFlightRequests.set(cacheKey, configPromise);
     }
-    // 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);
+    // Clone config for more predictable state updates
+    const localizedConfig = { ...(await configPromise) };
     // Set the new language choice
-    persistLanguageChoice(lang, cookieKey, localStorageKey);
+    state.currentLanguage = lang;
     return localizedConfig;
 };
 /**
- * Merge portal config with custom os flyout overrides
- * @param config Localized config
- * @param osFlyoutOverrides Overrides for the flyout
- * @returns Merged localized config
- */
-export const mergeOsFlyoutOverrides = (config, osFlyoutOverrides) => {
-    if (osFlyoutOverrides == null)
-        return config.header.navMain;
-    return config.header.navMain.map(mainNav => {
-        var _a, _b, _c;
-        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, _b;
-                const overrides = (_a = osFlyoutOverrides.flyout) === null || _a === void 0 ? void 0 : _a[index]; // Check if overrides exist
-                const title = (_b = overrides === null || overrides === void 0 ? void 0 : overrides.title) !== null && _b !== void 0 ? _b : col.title;
-                // Check if the linkList exists in the overrides and then use it
-                const linkList = (overrides === null || overrides === void 0 ? void 0 : overrides.linkList) != null ? overrides.linkList : [];
-                return {
-                    title,
-                    linkList: [...col.linkList, ...linkList],
-                };
-            }),
-            ...(((_c = osFlyoutOverrides.flyout) === null || _c === void 0 ? void 0 : _c.slice(osFlyoutCache.flyout.length)) || []),
-        ];
-        return Object.assign(Object.assign({}, mainNav), { text: mainNavText, title: mainNavTitle, flyout: mainNavFlyout });
-    });
-};
-/**
- * Fetch the general config based on project id
+ * Fetch the config for a project, in a given language
  *
- * @returns Promise for Post Portal general config
+ * @param projectId String identifying the project
+ * @param environment Target environment
+ * @param lang Currently selected language
+ * @returns Promise for a single-language config object
  */
-export const fetchConfig = async (projectId, environment) => {
+export const fetchConfig = async (projectId, environment, lang) => {
     // Check if project id is sanitized
     if (!isValidProjectId(projectId)) {
         throw new Error(`Internet Header: invalid project id "${projectId}"`);
@@ -112,8 +56,7 @@ export const fetchConfig = async (projectId, environment) => {
     if (projectId === 'test') {
         environment = 'int01';
     }
-    let url = generateConfigUrl(projectId, environment);
-    // Get the config if cache is invalid
+    const url = generateConfigUrl(projectId, environment, lang);
     try {
         const res = await fetch(url);
         return (await res.json());
@@ -123,21 +66,29 @@ export const fetchConfig = async (projectId, environment) => {
     }
 };
 /**
- * Generate an URL with all necessary query params to get the configuration.
+ * Generate a 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
+ * @param lang currently selected language
  * @returns URL pointing to the project config
  */
-export const generateConfigUrl = (projectId, environment) => {
+export const generateConfigUrl = (projectId, environment, lang) => {
     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`;
+    const parsedEnvironment = environment.toUpperCase();
+    const parsedLang = lang.toLowerCase();
+    const isProd = parsedEnvironment === 'PROD';
+    // NOTE: use preview.post.ch for local testing
+    const host = `https://${isProd ? '' : 'int.'}preview.post.ch`;
     try {
+        const query = new URLSearchParams({
+            serviceId: projectId,
+            environment: parsedEnvironment,
+            lang: parsedLang,
+        }).toString();
         // Use URL to validate the generated URL
-        return new URL(`${host}/api/headerjs/Json?serviceid=${encodeURIComponent(projectId)}${!isProd ? '&environment=' + parsedEnvironment : ''}`).toString();
+        return new URL(`${host}/api/header?${query}`).toString();
     }
     catch (error) {
         throw new Error(`Internet Header: Config URL is invalid.`);
@@ -146,44 +97,9 @@ export const generateConfigUrl = (projectId, environment) => {
 /**
  * Check if project id contains only URL safe characters
  *
- * @param projectId Project Id string
+ * @param projectId Project ID string
  * @returns The valid project id
  */
 export 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
- */
-export 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;
-};
-/**
- * Check if mobile header styles are applied or not
- * @returns True if browser is smaller than 1024px
- */
-export const isMobile = () => window.innerWidth < 1024;
-/**
- * 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
- */
-export const setMainNavigationIds = (navMainEntities) => {
-    navMainEntities.forEach(navMainEntity => {
-        navMainEntity.id = navMainEntity.id === 'flyout_os' ? navMainEntity.id : uniqueId('main-nav-');
-    });
-};

package/dist/collection/services/language.service.js

@@ -1,106 +1,55 @@
-import { translations } from "../assets/i18n/translations";
 import { state } from "../data/store";
-export const getUserLang = (supportedLanguages, implementorPreferredLanguage, localStorageKey, cookieKey) => {
-    // If there are no supported languages, well...
-    if (supportedLanguages.length === 0) {
-        return 'de';
-    }
-    // If there is only one language in the config, use this
-    if (supportedLanguages.length === 1) {
-        return supportedLanguages[0];
-    }
+const DEFAULT_LANGUAGE = 'de';
+/**
+ * Determine the current user language
+ *
+ * @param implementorPreferredLanguage [optional] Preferred language
+ * @returns The resolved language code
+ */
+export const getUserLang = (implementorPreferredLanguage) => {
     const url = new URL(window.location.href);
     /**
      * Build array of possible language definitions in order of importance.
      * At the end is a filter function that will weed out any undefined or null entries.
      */
-    let languagesSet = [
+    const languagesSet = [
         // Check if implementor overrides lang config
         implementorPreferredLanguage,
         // Check query string param
         url.searchParams.get('lang'),
         // Check url pathname
-        url.pathname.split('/').find(segment => supportedLanguages.includes(segment)),
-        // Check local storage with the key provided
-        localStorageKey !== undefined ? window.localStorage.getItem(localStorageKey) : null,
-        // Check cookies
-        getCookie('language'),
-        getCookie('lang'),
-        cookieKey !== undefined ? getCookie(cookieKey) : null,
+        getPathLanguage(url.pathname),
         // Check document language
         document.documentElement.lang,
         // Check browser preferred language
-        getPreferredLanguageFromBrowser(supportedLanguages),
+        getPreferredLanguageFromBrowser(),
         // Check the state
         state.currentLanguage,
     ].filter((lang) => lang != null);
-    // Check the set of languages to see if it matches
-    // any of the supported languages. Return the first
-    // supported language if there is none set
-    const lang = languagesSet.find(language => supportedLanguages.includes(language)) || supportedLanguages[0];
-    if (lang == null || lang.length !== 2) {
-        throw new Error(`Current language could not be determined from settings or the language provided (${lang}) is not supported by the Header API.`);
-    }
-    return lang;
+    return extractLanguage(languagesSet[0] ?? DEFAULT_LANGUAGE);
 };
-/**
- * Persist chosen language to local storage
- * @param lang Currently chose language, two char string
- */
-export const persistLanguageChoice = (lang, cookieKey, localStorageKey) => {
-    if (localStorageKey !== undefined) {
-        window.localStorage.setItem(localStorageKey, lang);
+// Returns the first path segment if it's a valid language tag, e.g. "de" in "/de/products"
+const getPathLanguage = (pathname) => {
+    const segment = pathname.split('/').filter(Boolean)[0];
+    if (!segment)
+        return undefined;
+    try {
+        Intl.getCanonicalLocales(segment);
+        return segment;
     }
-    if (cookieKey !== undefined) {
-        setCookie(cookieKey, lang);
+    catch {
+        return undefined;
     }
-    state.currentLanguage = lang;
 };
-/**
- * Read a cookie by name
- * https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript?rq=1
- * @param name Cookie name
- * @returns Cookie value or an empty string
- */
-export const getCookie = (name) => {
-    var _a;
-    return ((_a = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')) === null || _a === void 0 ? void 0 : _a.pop()) || '';
-};
-/**
- * Write a new cookie
- * https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
- * @param key
- * @param value
- */
-export const setCookie = (key, value) => {
-    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; Secure`;
-};
-const getPreferredLanguageFromBrowser = (supportedLanguages) => {
+const getPreferredLanguageFromBrowser = () => {
     // IE & Chrome
     if (navigator.language != null) {
-        const lang = extractLanguage(navigator.language);
-        if (supportedLanguages.indexOf(lang) !== -1) {
-            return lang;
-        }
+        return extractLanguage(navigator.language);
     }
-    // Chrome supports a list of preferred languages: if the preferred is not supported, we go down the list.
-    if (navigator.languages != null) {
-        for (const l of navigator.languages) {
-            const lang = extractLanguage(l);
-            if (supportedLanguages.indexOf(lang) !== -1) {
-                return lang;
-            }
-        }
+    // Chrome supports a list of preferred languages: use the first one.
+    if (navigator.languages != null && navigator.languages.length > 0) {
+        return extractLanguage(navigator.languages[0]);
     }
     return null;
 };
 const extractLanguage = (language) => language.substring(0, 2).toLowerCase();
-/**
- * Simple translate function for general header UI strings
- *
- * @param key Translation key
- * @param lang Force a language
- * @param translationObject Optionally provide translations
- * @returns Translated string or the key
- */
-export const translate = (key, lang, translationObject = translations) => { var _a, _b, _c; return (_c = (_a = translationObject[key]) === null || _a === void 0 ? void 0 : _a[(_b = lang !== null && lang !== void 0 ? lang : state.currentLanguage) !== null && _b !== void 0 ? _b : '']) !== null && _c !== void 0 ? _c : key; };