@postnord/pn-marketweb-components 3.0.3 → 3.1.0

package/esm/pn-language-selector_9.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-fa51bde4.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-fa51bde4.js';
 import { s as state$1, o as onChange$1 } from './pn-mainnav-store-bbe5787c.js';
 import { b as bars } from './bars-1ff76ce4.js';
 import { a as arrow_left } from './arrow_left-2c8d8857.js';
@@ -79,6 +79,9 @@ const PnlanguageSelector = class {
         this.options = [];
         this.i18n = undefined;
     }
+    get hostElement() { return getElement(this); }
+    // Events
+    setLanguage;
     componentWillLoad() {
         this.setInitialSelectedLanguageName();
         this.setTranslations();
@@ -137,8 +140,7 @@ const PnlanguageSelector = class {
         }
     }
     onValueChange() {
-        var _a;
-        const components = (_a = this.hostElement.querySelectorAll('pn-language-selector-option')) !== null && _a !== void 0 ? _a : [];
+        const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];
         components.forEach(component => {
             // Pass values as props into slotted components
             // component.setAttribute("current-language", this.value);
@@ -151,7 +153,6 @@ const PnlanguageSelector = class {
     render() {
         return (h(Host, { key: 'c7cdab6eeccbc93bcc4f0d286bdefa17495b0349', value: this.value }, h("pn-button-dropdown", { key: '71e193acb636f6e3bd03101473e59d371064f178', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("nav", { key: '67a65ae2feec9cc7448099bd2a6b70e15886d0b5', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: '2befcaf1993606e5ae2cbff52338a4568b1098ca', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'afc6903faca9f225355def10f9e41521d7570987', class: "languageselector-list", role: "list" }, h("slot", { key: '904a906437fe780ac728d23fb031dd0ff265221f' }))))));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
     }; }
@@ -171,6 +172,7 @@ const PnlanguageSelectorOption = class {
         this.selected = false;
         this.currentLanguage = undefined;
     }
+    setCurrentLanguage;
     onOptionClick() {
         const currentlanguage = {
             name: this.name,
@@ -288,6 +290,10 @@ const PnMainnav = class {
         this.openMenu = false;
         this.navLabel = '';
     }
+    get hostElement() { return getElement(this); }
+    menuLanguageChange; // Could not use language change since it's a existing window event
+    marketChange;
+    menuOpenChange;
     componentWillLoad() {
         this.init();
         document.removeEventListener('mousedown', this._onClickOutside.bind(this));
@@ -327,7 +333,6 @@ const PnMainnav = class {
     render() {
         return (h(Host, { key: '910f0a551b6c6b86df0aa04c291c0b8deceac12a' }, h("div", { key: '0a764c1d5ab3f09e10960c1648cebbb1f783be4e', class: "mainnav-toggle" }, h("button", { key: '3cea0b2660e01d5049b0799339ce0ebd73a1dc8a', "aria-controls": this.navigationId, "aria-expanded": state$1.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state$1.i18n.mainMenuButton, h("pn-icon", { key: '705297573ebe108584e9edc61cadc71771aa79b4', icon: state$1.openMenu ? close : bars, color: "white" }))), h("nav", { key: '3c017fb27d53da0740736bdaeb13dd86d2576c32', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state$1.openMenu + '', "data-menu-currentlevel": state$1.currentLevel, id: this.navigationId }, h("slot", { key: 'b94c6dc92bb5c246035412def657829022794a3d' }))));
     }
-    get hostElement() { return getElement(this); }
 };
 PnMainnav.style = PnMainnavStyle0;
 
@@ -347,6 +352,7 @@ const PnMainnavLevel = class {
         this.listCount = 0;
         this.alignment = 'right';
     }
+    get hostElement() { return getElement(this); }
     async componentWillLoad() {
         this.setState();
         onChange$1('openLevel', () => {
@@ -401,12 +407,11 @@ const PnMainnavLevel = class {
         state$1.currentLevel = this.level;
     }
     render() {
-        return (h(Host, Object.assign({ key: 'fde26bf8c5fc7620ee0abb2c2b664bca6a1d2fba', role: "navigation" }, (this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), { "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '' }, (this.levelId ? { id: this.levelId } : {})), this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state$1.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        return (h(Host, { key: 'fde26bf8c5fc7620ee0abb2c2b664bca6a1d2fba', role: "navigation", ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state$1.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                 state$1.openLevel = '';
                 state$1.currentLevel = 1;
             }, "aria-expanded": (state$1.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state$1.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '6197834b14a963be33ce1e2ffe0c4b7c60894d1b', name: "top" }), h("slot", { key: 'e270ea74af3d2a6b0408f6c0b84d8773ee5b998e' }), h("slot", { key: 'ee590e32c5f8f1749562aa0efc1722ca790f65c4', name: "additional" }), h("slot", { key: '7048a26e9b56586fbcb30d9d4d7cb037e939ff93', name: "footer" })));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "label": ["setState"],
         "isOpen": ["onOpen"]
@@ -423,83 +428,54 @@ const PnMainnavList = class {
         this.heading = '';
         this.linkCount = 0;
     }
+    get hostElement() { return getElement(this); }
     componentWillLoad() {
         this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;
     }
     render() {
         return (h(Host, { key: '5cef1764640843570d240aeda1f1a3a2f365064c', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: '63a60869af810fe9da3013e7c95a7c99b9078ab8' })));
     }
-    get hostElement() { return getElement(this); }
 };
 PnMainnavList.style = PnMainnavListStyle0;
 
 class MarketWebLoginManager {
+    eventTarget = window ?? document?.body;
+    endpoint = '';
+    storagePrefix = 'pn-user';
+    checkUserLoggedInStateInterval = 0;
+    baseUrls = {
+        at: 'https://atportal.postnord.com/api/unified-login/backend',
+        prod: 'https://portal.postnord.com/api/unified-login/backend',
+    };
+    events = {
+        loginstatechange: 'loginstatechange',
+    };
+    endpoints = {
+        authorizationEndpoint: `/authorization`,
+        tokenExchangeEndpoint: `/token`,
+        userInfoEndpoint: `/user`,
+        logoutEndpoint: `/logout`,
+    };
+    keys = {
+        tokensource: 'tokensource',
+        token: 'token',
+        accessToken: 'accessToken',
+        user: 'user',
+        expire: 'expire',
+        expireDate: 'expiredate',
+    };
+    overridetokenValue = 'overridetokenValue';
+    siteUrl = window.location.origin;
+    abortSignalForLoginCheck = null;
+    loginCheckInProgress = false;
+    loginCheckTimer = null;
     constructor(options = null) {
-        var _a;
-        this.eventTarget = window !== null && window !== void 0 ? window : document === null || document === void 0 ? void 0 : document.body;
-        this.endpoint = '';
-        this.storagePrefix = 'pn-user';
-        this.checkUserLoggedInStateInterval = 0;
-        this.baseUrls = {
-            at: 'https://atportal.postnord.com/api/unified-login/backend',
-            prod: 'https://portal.postnord.com/api/unified-login/backend',
-        };
-        this.events = {
-            loginstatechange: 'loginstatechange',
-        };
-        this.endpoints = {
-            authorizationEndpoint: `/authorization`,
-            tokenExchangeEndpoint: `/token`,
-            userInfoEndpoint: `/user`,
-            logoutEndpoint: `/logout`,
-        };
-        this.keys = {
-            tokensource: 'tokensource',
-            token: 'token',
-            accessToken: 'accessToken',
-            user: 'user',
-            expire: 'expire',
-            expireDate: 'expiredate',
-        };
-        this.overridetokenValue = 'overridetokenValue';
-        this.siteUrl = window.location.origin;
-        this.abortSignalForLoginCheck = null;
-        this.loginCheckInProgress = false;
-        this.loginCheckTimer = null;
-        this.store = {
-            get: (key) => {
-                const value = window.sessionStorage.getItem(`${this.storagePrefix}-${key}`);
-                if (!value) {
-                    return value;
-                }
-                if (value.indexOf('{') === 0) {
-                    try {
-                        return JSON.parse(value);
-                    }
-                    catch (e) { }
-                }
-                if (value.indexOf(',') !== -1) {
-                    return value.split(',');
-                }
-                return value;
-            },
-            set: (key, value) => {
-                if (typeof value === 'object' && typeof value.length === 'undefined') {
-                    window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, JSON.stringify(value));
-                    return;
-                }
-                window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, value);
-            },
-            remove: (key) => {
-                window.sessionStorage.removeItem(`${this.storagePrefix}-${key}`);
-            },
-        };
         if (!options) {
             return;
         }
         this.eventTarget = options.eventTarget ? options.eventTarget : this.eventTarget;
         this.endpoint = options.endpoint ? options.endpoint : `${window.location.protocol}//${window.location.host}`;
-        (_a = this.storagePrefix) !== null && _a !== void 0 ? _a : (this.storagePrefix = options.storagePrefix);
+        this.storagePrefix ??= options.storagePrefix;
         this.checkUserLoggedInStateInterval =
             options.checkUserLoggedInStateInterval && options.checkUserLoggedInStateInterval > 0 ? parseInt(options.checkUserLoggedInStateInterval + '', 10) : 0;
         if (options.userInfo) {
@@ -684,7 +660,7 @@ class MarketWebLoginManager {
         this.fetchUserInfo();
     }
     checkParameters() {
-        if (!(window === null || window === void 0 ? void 0 : window.location)) {
+        if (!window?.location) {
             return;
         }
         const params = new URLSearchParams(window.location.search);
@@ -795,6 +771,34 @@ class MarketWebLoginManager {
             .join(''));
         return JSON.parse(jsonPayload);
     }
+    store = {
+        get: (key) => {
+            const value = window.sessionStorage.getItem(`${this.storagePrefix}-${key}`);
+            if (!value) {
+                return value;
+            }
+            if (value.indexOf('{') === 0) {
+                try {
+                    return JSON.parse(value);
+                }
+                catch (e) { }
+            }
+            if (value.indexOf(',') !== -1) {
+                return value.split(',');
+            }
+            return value;
+        },
+        set: (key, value) => {
+            if (typeof value === 'object' && typeof value.length === 'undefined') {
+                window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, JSON.stringify(value));
+                return;
+            }
+            window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, value);
+        },
+        remove: (key) => {
+            window.sessionStorage.removeItem(`${this.storagePrefix}-${key}`);
+        },
+    };
 }
 
 const pnMarketwebSiteheaderLoginCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-marketweb-siteheader-login{padding:1rem 0;max-height:5.2rem;position:relative}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content{max-width:350px;display:flex;flex-direction:column;gap:2.4rem;padding:4rem}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content pn-button{width:100%}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content pn-marketweb-siteheader-unified-login::after{display:block;content:\"\";height:2px;background:#f9f8f8;width:100%;margin-top:2.4rem}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span::before{display:block;content:\"\";height:2px;background:#f9f8f8;width:100%;margin-bottom:2.4rem}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span{font-size:1.4rem;color:#2d2013}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span a{text-decoration:none;color:#005d92}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span a:hover{text-decoration:underline}pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span *{margin-bottom:0}pn-marketweb-siteheader-login pn-button-dropdown{display:none}pn-marketweb-siteheader-login.hydrated pn-button-dropdown{display:block}";
@@ -804,7 +808,6 @@ const PnMarketwebSiteheaderLogin = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.loginStateChange = createEvent(this, "loginStateChange", 7);
-        var _a;
         this.endpoint = '';
         this.token = '';
         this.i18n = {
@@ -829,9 +832,12 @@ const PnMarketwebSiteheaderLogin = class {
         this.checkUserLoggedInStateInterval = 0;
         this.environment = undefined;
         this.loginLinks = undefined;
-        this.toggleButtonText = ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : '';
+        this.toggleButtonText = this.loginDialog?.loginMenuLinkText ? this.loginDialog.loginMenuLinkText : '';
         this.username = this.fullname;
     }
+    get hostElement() { return getElement(this); }
+    // Events
+    loginStateChange;
     componentWillLoad() {
         const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
         state$2.loginManager = new MarketWebLoginManager({
@@ -860,8 +866,7 @@ const PnMarketwebSiteheaderLogin = class {
         this.adjustLoginLinks();
     }
     adjustLoginLinks() {
-        var _a;
-        if (!((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinks)) {
+        if (!this.loginDialog?.loginMenuLinks) {
             return;
         }
         const adjustLink = (link, i) => {
@@ -911,7 +916,7 @@ const PnMarketwebSiteheaderLogin = class {
             this.username = name;
         }
         if (userInfo && userInfo.given_name) {
-            name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : '');
+            name = userInfo.given_name + (userInfo?.family_name ? ` ${userInfo?.family_name}` : '');
         }
         if (!name && userInfo && userInfo.email) {
             name = userInfo.email;
@@ -952,9 +957,8 @@ const PnMarketwebSiteheaderLogin = class {
             hostElementAttribute.username = this.username;
             hostElementAttribute.loggedin = this.loggedin + '';
         }
-        return (h(Host, Object.assign({}, hostElementAttribute), h("pn-button-dropdown", { label: this.toggleButtonText, icon: user, appearance: "light", variant: "borderless", class: "siteheader-logindialog" }, this.showUnifiedLogin && (h("pn-marketweb-siteheader-unified-login", { loggedIn: this.loggedin, myPageLabel: this.i18n.unifiedMyPagesButton, myPageUrl: "https://account.postnord.com/secure/profile", logInLabel: this.i18n.unifiedLoginButton })), this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username, showUnifiedLogin: this.showUnifiedLogin })), !this.loggedin && h("span", { innerHTML: `${this.loginDialog.loginInfo}` }))));
+        return (h(Host, { ...hostElementAttribute }, h("pn-button-dropdown", { label: this.toggleButtonText, icon: user, appearance: "light", variant: "borderless", class: "siteheader-logindialog" }, this.showUnifiedLogin && (h("pn-marketweb-siteheader-unified-login", { loggedIn: this.loggedin, myPageLabel: this.i18n.unifiedMyPagesButton, myPageUrl: "https://account.postnord.com/secure/profile", logInLabel: this.i18n.unifiedLoginButton })), this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username, showUnifiedLogin: this.showUnifiedLogin })), !this.loggedin && h("span", { innerHTML: `${this.loginDialog.loginInfo}` }))));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "i18n": ["init"],
         "loginDialog": ["init"]
@@ -985,6 +989,7 @@ const PnMarketwebSiteheaderSearch = class {
         this.icononly = true;
         this.autoCompleteOptions = [];
     }
+    get hostElement() { return getElement(this); }
     onSearchValueUpdate() {
         this.getAutocomplete(state.searchValue);
     }
@@ -1051,16 +1056,15 @@ const PnMarketwebSiteheaderSearch = class {
             return;
         }
         const autocompleteAttribute = this.search.AutocompleteEndpoint ? { list: 'siteheader-search-autocomplete' } : {};
-        return (h("div", { class: "siteheader-search" }, this.showOnlyLink ? (h("pn-button", { href: this.search.formActionUrl, appearance: "light", icon: search, tooltip: this.i18n.searchlabel })) : (h("form", { method: "get", action: this.search.formActionUrl, role: "search" }, h("pn-search-field", Object.assign({}, autocompleteAttribute, { label: this.i18n.searchlabel, name: "q", button: this.icononly ? 'icon' : null, "button-label": 'Search', placeholder: this.i18n.searchplaceholder, onUpdate: (e) => {
+        return (h("div", { class: "siteheader-search" }, this.showOnlyLink ? (h("pn-button", { href: this.search.formActionUrl, appearance: "light", icon: search, tooltip: this.i18n.searchlabel })) : (h("form", { method: "get", action: this.search.formActionUrl, role: "search" }, h("pn-search-field", { ...autocompleteAttribute, label: this.i18n.searchlabel, name: "q", button: this.icononly ? 'icon' : null, "button-label": 'Search', placeholder: this.i18n.searchplaceholder, onUpdate: (e) => {
                 state.searchValue = e.detail;
             }, onSearch: () => {
                 const form = this.hostElement.querySelector('form');
                 if (form) {
                     form.submit();
                 }
-            } })), this.primary && this.search.AutocompleteEndpoint ? (h("datalist", { id: "siteheader-search-autocomplete" }, this.autoCompleteOptions.map(item => (h("option", null, item))))) : null))));
+            } }), this.primary && this.search.AutocompleteEndpoint ? (h("datalist", { id: "siteheader-search-autocomplete" }, this.autoCompleteOptions.map(item => (h("option", null, item))))) : null))));
     }
-    get hostElement() { return getElement(this); }
 };
 PnMarketwebSiteheaderSearch.style = PnMarketwebSiteheaderSearchStyle0;
 
@@ -1096,6 +1100,7 @@ const PnSiteSelector = class {
         this.language = 'sv';
         this.i18n = { navlabel: 'Site selector' };
     }
+    get hostElement() { return getElement(this); }
     componentWillLoad() {
         this.setLanguage();
     }
@@ -1107,7 +1112,6 @@ const PnSiteSelector = class {
     render() {
         return (h(Host, { key: 'e7f2afb9152823c342d400159df9250b8077f5e4' }, h("pn-button-dropdown", { key: 'cf7772fb94bc00f0e34f2224de5801087b1b4bdc', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("nav", { key: 'a9aa62af98725a2ae8c9ee3c8763b1657b686b3b', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("ul", { key: 'e39b42302acdcbde9513b0886ba689a2dd15ba53', class: "siteselector-list" }, h("slot", { key: '2f653ff81c6b0cdf631aab20e6730251c4929f4f' }))))));
     }
-    get hostElement() { return getElement(this); }
 };
 PnSiteSelector.style = PnSiteSelectorStyle0;