@swisspost/internet-header 1.17.1 → 10.2.0

package/dist/collection/components/post-internet-header/post-internet-header.js

@@ -1,348 +1,210 @@
-import { h, Host, } from "@stencil/core";
-import { debounce, throttle } from "throttle-debounce";
-import { getLocalizedConfig, getLocalizedCustomConfig, isValidProjectId, } from "../../services/config.service";
+import { Link, MegaDropdown, UserMenu } from "../internal/index";
 import { dispose, state } from "../../data/store";
-import { SvgSprite } from "../../utils/svg-sprite.component";
-import { SvgIcon } from "../../utils/svg-icon.component";
-import { getUserLang, translate } from "../../services/language.service";
-import { If } from "../../utils/if.component";
-import packageJson from "../../../package.json";
-import { registerLogoAnimationObserver } from "./logo-animation/logo-animation";
-import { getScrollParent } from "../../utils/scrollparent";
-import { getLogoScale } from "./logo-animation/logo-scale";
+import { getLocalizedConfig, isValidProjectId } from "../../services/config.service";
+import { getActiveLink } from "../../services/route.service";
+import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
+import "@swisspost/design-system-components";
+const SESSION_URL = 'https://n.account.post.ch/v1/session/subscribe';
 export class PostInternetHeader {
     /**
-     * Get the currently set language as a two letter string ("de", "fr" "it" or "en")
-     * @returns string
+     * Set the currently activated route. If there is a link matching this URL in the header, it will be highlighted.
+     * Will also highlight partly matching URLs. When set to auto, will use current location.href for comparison.
      */
-    async getCurrentLanguage() {
-        var _a;
-        return (_a = state.currentLanguage) !== null && _a !== void 0 ? _a : 'de';
+    activeRoute = 'auto';
+    handleActiveRouteChange() {
+        this.updateActiveUrl();
     }
+    /**
+     * Target environment. Choose 'int01' for local testing.
+     */
+    environment = 'prod';
+    /**
+     * Makes the header content span the full width on screens larger than 1440px.
+     */
+    fullWidth = false;
+    /**
+     * Initial language to be used. Overrides automatic language detection.
+     */
+    language;
+    async handleLanguageChange(newValue) {
+        try {
+            // Pass newValue explicitly — it wins first priority in getUserLang's chain
+            await this.updateConfig(newValue);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    /**
+     * Your project id, previously passed as query string parameter serviceId.
+     */
+    project;
+    /**
+     * Visually hidden label for the back button.
+     */
+    textBack;
+    /**
+     * Visually hidden label for the language menu.
+     */
+    textChangeLanguage;
+    /**
+     * Visually hidden label for the close button.
+     */
+    textClose;
+    /**
+     * Visually hidden label for the current language.
+     * The placeholder `{name}` will be replaced with the name of the currently selected language.
+     */
+    textCurrentLanguage;
+    /**
+     * Visually hidden label for the current user.
+     * The placeholder `{user}` will be replaced with the full name of the currently logged-in user.
+     */
+    textCurrentUser;
+    /**
+     * Visually hidden label for the main navigation element.
+     */
+    textMain;
+    /**
+     * Visually hidden label for the burger menu button.
+     */
+    textMenu;
+    /**
+     * Visually hidden label for the login widget trigger button.
+     */
+    textAccessUserLinks;
+    /**
+     * Visually hidden label for the user menu.
+     */
+    textUserLinks;
+    /**
+     * Fires when the header has been rendered to the page.
+     */
+    headerLoaded;
     constructor() {
-        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.selfAdminOrigin = 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.`);
         }
     }
-    connectedCallback() {
-        this.throttledScroll = throttle(300, () => this.handleScrollEvent());
-        this.debouncedResize = debounce(200, () => this.handleResize());
+    async componentWillLoad() {
+        await Promise.all([this.fetchHeaderConfig(), this.fetchUserData()]);
+    }
+    componentDidLoad() {
+        window.requestAnimationFrame(() => {
+            this.headerLoaded.emit();
+        });
     }
     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 });
+    handleLanguageChangeEvent(event) {
+        if (event.target instanceof HTMLElement &&
+            event.target.localName === 'post-language-menu-item' &&
+            event.detail !== this.language) {
+            void this.handleLanguageChange(event.detail);
+        }
+    }
+    async fetchHeaderConfig() {
         // 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,
-            });
+            await this.updateConfig();
         }
         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);
-            }
-            else {
-                // Set height to 0 if meta is never visible and global variables are defined
-                const rootStyles = window.getComputedStyle(document.documentElement);
-                if (rootStyles.getPropertyValue('--post-meta-header-height') !== '') {
-                    document.documentElement.style.setProperty('--post-meta-header-height', '0px');
-                }
+    async fetchUserData() {
+        try {
+            const response = await fetch(SESSION_URL, {
+                credentials: 'include',
+            });
+            if (response.ok) {
+                const json = await response.json();
+                state.user = json?.data;
             }
-        });
-        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 !== undefined)
-            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,
-        });
+        }
+        catch {
+            // In case of an error, we assume the user is not logged in and do nothing
+        }
     }
-    async handleCustomConfigChange(newValue) {
-        if (this.language === undefined)
-            return;
-        const localizedCustomConfig = getLocalizedCustomConfig(newValue, this.language);
-        state.localizedCustomConfig = localizedCustomConfig;
+    // Fetch and store the localized config, defaulting to the `language` prop if none is passed
+    async updateConfig(language) {
         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,
+            language: language ?? this.language,
         });
+        this.updateActiveUrl();
     }
-    handleSearchChange(newValue) {
-        state.search = newValue;
+    updateActiveUrl() {
+        state.activeLink = getActiveLink(this.activeRoute);
     }
-    handleLoginChange(newValue) {
-        state.login = newValue;
+    getUserMenuOptions(postLogin) {
+        return [
+            ...(postLogin.userProfile ? [postLogin.userProfile] : []),
+            ...(postLogin.settings ? [postLogin.settings] : []),
+            ...(postLogin.userLinks ?? []),
+        ];
     }
-    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);
+    renderNavItem(config, props = {}) {
+        if ('url' in config) {
+            return h(Link, { ...props, config: config });
         }
+        return (h(UserMenu, { slot: props.slot, config: config, textCurrentUser: this.textCurrentUser, textAccessUserLinks: this.textAccessUserLinks, textUserLinks: this.textUserLinks }));
     }
-    /**
-     * 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 !== null && !this.isMainNavOpen()) {
-            void this.activeDropdownElement.toggleDropdown(false);
+    renderNavigation(slot, config, props = {}) {
+        if (config.length === 0)
+            return null;
+        if (config.length === 1) {
+            return this.renderNavItem(config[0], { ...props, slot });
         }
-    }
-    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;
+        return (h("ul", { slot: slot }, config.map(navItem => (h("li", { key: 'url' in navItem ? navItem.url : navItem.user.email }, this.renderNavItem(navItem, props))))));
     }
     render() {
-        var _a, _b, _c;
-        if (!((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header)) {
+        if (!state.localizedConfig?.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;
-        const initialLogoScale = renderMetaNavigation ? getLogoScale(this.host) : '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), style: { '--logo-scale': initialLogoScale } }, 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-header-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${this.isMainSlotEmpty ? ' d-none' : ''}` }, 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, "self-admin-origin": this.selfAdminOrigin }, 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" })))))));
+        const { globalHeader, localHeader } = state.localizedConfig.header;
+        return (h(Host, { "data-version": version }, h("post-header", { textMenu: this.textMenu }, 'image' in globalHeader.postLogo ? (h(Link, { slot: "post-logo", config: globalHeader.postLogo })) : (h("post-logo", { slot: "post-logo", url: globalHeader.postLogo.url, "aria-label": globalHeader.postLogo.label, "aria-description": globalHeader.postLogo.description }, globalHeader.postLogo.text)), globalHeader.audience &&
+            this.renderNavigation('audience', globalHeader.audience, {
+                ariaCurrentWhenActive: 'location',
+            }), globalHeader.primaryNavigation &&
+            this.renderNavigation('global-nav-primary', globalHeader.primaryNavigation), globalHeader.secondaryNavigation &&
+            this.renderNavigation('global-nav-secondary', globalHeader.secondaryNavigation, {
+                ariaCurrentWhenActive: 'location',
+            }), globalHeader.languages && globalHeader.languages.length > 0 && (h("post-language-menu", { slot: "language-menu", textChangeLanguage: this.textChangeLanguage, textCurrentLanguage: this.textCurrentLanguage }, globalHeader.languages.map(lang => (h("post-language-menu-item", { key: lang.code, url: lang.url, active: lang.active, code: lang.code, name: lang.label, description: lang.description }, lang.text))))), globalHeader.postLogin &&
+            this.renderNavItem(state.user
+                ? {
+                    user: state.user,
+                    options: this.getUserMenuOptions(globalHeader.postLogin),
+                    accountSwitch: globalHeader.postLogin.accountSwitch,
+                    companySwitch: globalHeader.postLogin.companySwitch,
+                    logoutLink: globalHeader.postLogin.logoutLink,
+                }
+                : globalHeader.postLogin.loginLink, { slot: 'post-login' }), localHeader.title && h("p", { slot: "title" }, localHeader.title), localHeader.navigation && this.renderNavigation('local-nav', localHeader.navigation), localHeader.mainNavigation && localHeader.mainNavigation.length > 0 && (h("post-mainnavigation", { slot: "main-nav", textMain: this.textMain }, h("ul", null, localHeader.mainNavigation.map(navItem => (h("li", { key: 'url' in navItem ? navItem.url : navItem.trigger.text }, 'url' in navItem ? (h(Link, { config: navItem, ariaCurrentWhenActive: "page" })) : (h(MegaDropdown, { config: navItem, textBack: this.textBack, textClose: this.textClose })))))))))));
     }
     static get is() { return "swisspost-internet-header"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-internet-header.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-internet-header.css"]
-        };
-    }
     static get properties() {
         return {
-            "project": {
+            "activeRoute": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "ActiveRouteProp",
                     "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Your project id, previously passed as query string parameter serviceId."
-                },
-                "attribute": "project",
-                "reflect": false
-            },
-            "stickyness": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "StickynessOptions",
-                    "resolved": "\"full\" | \"main\" | \"minimal\" | \"none\"",
                     "references": {
-                        "StickynessOptions": {
+                        "ActiveRouteProp": {
                             "location": "import",
-                            "path": "../../models/implementor.model",
-                            "id": "src/models/implementor.model.ts::StickynessOptions"
+                            "path": "@/models/general.model",
+                            "id": "src/models/general.model.ts::ActiveRouteProp",
+                            "referenceLocation": "ActiveRouteProp"
                         }
                     }
                 },
@@ -350,48 +212,42 @@ export class PostInternetHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sticky behaviour of the header."
+                    "text": "Set the currently activated route. If there is a link matching this URL in the header, it will be highlighted.\nWill also highlight partly matching URLs. When set to auto, will use current location.href for comparison."
                 },
-                "attribute": "stickyness",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "'minimal'"
+                "attribute": "active-route",
+                "defaultValue": "'auto'"
             },
-            "language": {
+            "environment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'de' | 'fr' | 'it' | 'en'",
-                    "resolved": "\"de\" | \"en\" | \"fr\" | \"it\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Initial language to be used. Overrides automatic language detection."
-                },
-                "attribute": "language",
-                "reflect": false
-            },
-            "meta": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "Environment",
+                    "resolved": "\"dev01\" | \"dev02\" | \"devs1\" | \"int01\" | \"int02\" | \"prod\" | \"test\"",
+                    "references": {
+                        "Environment": {
+                            "location": "import",
+                            "path": "@/models/general.model",
+                            "id": "src/models/general.model.ts::Environment",
+                            "referenceLocation": "Environment"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Toggle the meta navigation."
+                    "text": "Target environment. Choose 'int01' for local testing."
                 },
-                "attribute": "meta",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "environment",
+                "defaultValue": "'prod'"
             },
-            "login": {
+            "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -403,278 +259,225 @@ export class PostInternetHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Toggle the login link (when logged out) or the user widget (when logged in)."
+                    "text": "Makes the header content span the full width on screens larger than 1440px."
                 },
-                "attribute": "login",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "full-width",
+                "defaultValue": "false"
             },
-            "search": {
-                "type": "boolean",
+            "language": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'de' | 'fr' | 'it' | 'en'",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | \"it\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Toggle the search button."
+                    "text": "Initial language to be used. Overrides automatic language detection."
                 },
-                "attribute": "search",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "language"
             },
-            "skiplinks": {
-                "type": "boolean",
+            "project": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Toggle skiplinks. They help keyboard users to quickly jump to important sections of the page."
+                    "text": "Your project id, previously passed as query string parameter serviceId."
                 },
-                "attribute": "skiplinks",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "project"
             },
-            "configProxy": {
+            "textBack": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define a proxy URL for the config fetch request."
+                    "text": "Visually hidden label for the back button."
                 },
-                "attribute": "config-proxy",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-back"
             },
-            "environment": {
+            "textChangeLanguage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Environment",
-                    "resolved": "\"dev01\" | \"dev02\" | \"devs1\" | \"int01\" | \"int02\" | \"prod\" | \"test\"",
-                    "references": {
-                        "Environment": {
-                            "location": "import",
-                            "path": "../../models/general.model",
-                            "id": "src/models/general.model.ts::Environment"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Target environment. Choose 'int01' for local testing."
+                    "text": "Visually hidden label for the language menu."
                 },
-                "attribute": "environment",
-                "reflect": false,
-                "defaultValue": "'prod'"
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-change-language"
             },
-            "languageSwitchOverrides": {
+            "textClose": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | IAvailableLanguage[]",
-                    "resolved": "IAvailableLanguage[] | string | undefined",
-                    "references": {
-                        "IAvailableLanguage": {
-                            "location": "import",
-                            "path": "../../models/language.model",
-                            "id": "src/models/language.model.ts::IAvailableLanguage"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you\nwould like to stay on subpages when the user changes language."
+                    "text": "Visually hidden label for the close button."
                 },
-                "attribute": "language-switch-overrides",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-close"
             },
-            "customConfig": {
+            "textCurrentLanguage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | ICustomConfig",
-                    "resolved": "ICustomConfig | string | undefined",
-                    "references": {
-                        "ICustomConfig": {
-                            "location": "import",
-                            "path": "../../models/general.model",
-                            "id": "src/models/general.model.ts::ICustomConfig"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Customize the header config loaded from the post portal."
+                    "text": "Visually hidden label for the current language.\nThe placeholder `{name}` will be replaced with the name of the currently selected language."
                 },
-                "attribute": "custom-config",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-current-language"
             },
-            "languageCookieKey": {
+            "textCurrentUser": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The header uses this cookie to set the language. Disables automatic language detection."
+                    "text": "Visually hidden label for the current user.\nThe placeholder `{user}` will be replaced with the full name of the currently logged-in user."
                 },
-                "attribute": "language-cookie-key",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-current-user"
             },
-            "languageLocalStorageKey": {
+            "textMain": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The header uses this local storage key to set the language. Disables automatic language selection."
+                    "text": "Visually hidden label for the main navigation element."
                 },
-                "attribute": "language-local-storage-key",
-                "reflect": false,
-                "defaultValue": "'swisspost-internet-header-language'"
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-main"
             },
-            "logoutUrl": {
+            "textMenu": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Overrides the logout-url provided by the portal config."
+                    "text": "Visually hidden label for the burger menu button."
                 },
-                "attribute": "logout-url",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-menu"
             },
-            "selfAdminOrigin": {
+            "textAccessUserLinks": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Overrides the selfadmin url in case it needs to differ from the logoutUrl, which is the url that is used by default.\nThe selfadmin url is used in the KLP login widget to set the user menu links."
-                },
-                "attribute": "self-admin-origin",
-                "reflect": false
-            },
-            "activeRoute": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "ActiveRouteProp",
-                    "resolved": "boolean | string | undefined",
-                    "references": {
-                        "ActiveRouteProp": {
-                            "location": "import",
-                            "path": "../../models/general.model",
-                            "id": "src/models/general.model.ts::ActiveRouteProp"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the currently activated route. If there is a link matching this URL in the header, it will be highlighted.\nWill also highlight partly matching URLs. When set to auto, will use current location.href for comparison."
+                    "text": "Visually hidden label for the login widget trigger button."
                 },
-                "attribute": "active-route",
-                "reflect": false,
-                "defaultValue": "'auto'"
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-access-user-links"
             },
-            "osFlyoutOverrides": {
+            "textUserLinks": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | NavMainEntity",
-                    "resolved": "NavMainEntity | string | undefined",
-                    "references": {
-                        "NavMainEntity": {
-                            "location": "import",
-                            "path": "../../models/header.model",
-                            "id": "src/models/header.model.ts::NavMainEntity"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Online Services only: Add custom links to the special online service navigation entry"
-                },
-                "attribute": "os-flyout-overrides",
-                "reflect": false
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays the header at full width for full-screen applications"
+                    "text": "Visually hidden label for the user menu."
                 },
-                "attribute": "full-width",
-                "reflect": false,
-                "defaultValue": "false"
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-user-links"
             }
         };
     }
-    static get states() {
-        return {
-            "activeFlyout": {},
-            "activeDropdownElement": {},
-            "isMainSlotEmpty": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "headerLoaded",
@@ -693,64 +496,18 @@ export class PostInternetHeader {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "getCurrentLanguage": {
-                "complexType": {
-                    "signature": "() => Promise<'de' | 'fr' | 'it' | 'en' | string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Get the currently set language as a two letter string (\"de\", \"fr\" \"it\" or \"en\")",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "string"
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "language",
-                "methodName": "handleLanguageChange"
-            }, {
-                "propName": "languageSwitchOverrides",
-                "methodName": "handleAvailableLanguagesChange"
-            }, {
-                "propName": "osFlyoutOverrides",
-                "methodName": "handleOsFlyoutOverrides"
-            }, {
                 "propName": "activeRoute",
                 "methodName": "handleActiveRouteChange"
             }, {
-                "propName": "customConfig",
-                "methodName": "handleCustomConfigChange"
-            }, {
-                "propName": "search",
-                "methodName": "handleSearchChange"
-            }, {
-                "propName": "login",
-                "methodName": "handleLoginChange"
-            }, {
-                "propName": "meta",
-                "methodName": "handleMetaChange"
-            }, {
-                "propName": "stickyness",
-                "methodName": "handleStickynessChange"
+                "propName": "language",
+                "methodName": "handleLanguageChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "languageChanged",
+                "name": "postChange",
                 "method": "handleLanguageChangeEvent",
                 "target": undefined,
                 "capture": false,