@postnord/pn-marketweb-components 2.0.23-beta4 → 2.0.24

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-links.js

@@ -0,0 +1,199 @@
+import { Component, Prop, h, Element, Watch, Host } from "@stencil/core";
+export class PnMarketwebSiteheaderLoginLinks {
+  constructor() {
+    // Login dialog
+    this.loginDialog = null;
+    this.loginManager = null;
+    this.idNamespace = "";
+    this.loggedin = false;
+    this.username = "";
+  }
+  componentWillLoad() {
+    this.init();
+    console.log('from links', this.loggedin);
+  }
+  async init() {
+    this.adjustLoginLinks();
+  }
+  adjustLoginLinks() {
+    var _a, _b, _c, _d;
+    if (!this.loginDialog) {
+      return;
+    }
+    const adjustLink = (link, i) => {
+      link.isLogoutLink = (link.href.indexOf('logout') !== -1);
+      if (link.isLogoutLink) {
+        link.href = this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', ''));
+      }
+      if (i === 0 && !link.href) {
+        link.href = this.loginManager.getLoginUrl();
+        link.linkType = 'primary';
+      }
+      if (link.primaryLinkApperance && !link.linkType) {
+        link.linkType = 'primary';
+      }
+    };
+    if ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinks) {
+      (_b = this.loginDialog) === null || _b === void 0 ? void 0 : _b.loginMenuLinks.forEach(adjustLink);
+    }
+    if ((_c = this.loginDialog) === null || _c === void 0 ? void 0 : _c.loggedInLinks) {
+      (_d = this.loginDialog) === null || _d === void 0 ? void 0 : _d.loggedInLinks.forEach(adjustLink);
+    }
+    this.loginDialog.legacyLoginLinks = [
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl),
+        linkText: this.loginDialog.loginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        linkType: 'primary',
+        primaryLinkApperance: true
+      },
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.registerUrl),
+        linkText: this.loginDialog.createLoginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        primaryLinkApperance: false
+      }
+    ];
+  }
+  render() {
+    var _a;
+    if (!this.loginDialog) {
+      return;
+    }
+    let hostElementAttribute = {
+      username: null,
+      loggedin: false,
+    };
+    if (this.username) {
+      hostElementAttribute.username = this.username;
+      hostElementAttribute.loggedin = this.loggedin;
+    }
+    return (h(Host, Object.assign({}, hostElementAttribute),
+      (!this.loginDialog.overrideLoginMenu) ?
+        h("div", { "data-loggedin": this.loggedin + '' }, (this.loggedin) ?
+          h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, loginManager: this.loginManager, idNamespace: this.idNamespace })
+          :
+            h("div", null, ((_a = this.loginDialog.loginMenuLinks) === null || _a === void 0 ? void 0 : _a.length) > 0 ?
+              h("pn-marketweb-siteheader-login-linklist", { heading: this.loginDialog.loginTitle, links: this.loginDialog.loginMenuLinks, loginManager: this.loginManager, idNamespace: this.idNamespace })
+              :
+                h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.legacyLoginLinks, loginManager: this.loginManager, idNamespace: this.idNamespace })))
+        : null,
+      (this.loginDialog.overrideLoginMenu) ?
+        h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loginMenuLinks, loginManager: this.loginManager, idNamespace: this.idNamespace })
+        : null));
+  }
+  static get is() { return "pn-marketweb-siteheader-login-links"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-links.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-links.css"]
+  }; }
+  static get properties() { return {
+    "loginDialog": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "LoginDialog",
+        "resolved": "LoginDialog",
+        "references": {
+          "LoginDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "loginManager": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MarketWebLoginManager",
+        "resolved": "MarketWebLoginManager",
+        "references": {
+          "MarketWebLoginManager": {
+            "location": "import",
+            "path": "../../../globals/MarketWebLoginManager"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "idNamespace": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id-namespace",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "loggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loggedin",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "username": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "username",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "loginDialog",
+      "methodName": "init"
+    }]; }
+}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.css

@@ -0,0 +1,93 @@
+.pn-marketweb-siteheader-login-profileselection-heading {
+  display: block;
+  padding: 0.5rem 0 1rem;
+}
+
+.pn-marketweb-siteheader-login-profileselection-user,
+.pn-marketweb-siteheader-login-profileselection-currentprofile {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.pn-marketweb-siteheader-login-profileselection-user-name,
+.pn-marketweb-siteheader-login-profileselection-currentprofile-name {
+  line-height: 1;
+}
+
+.pn-marketweb-siteheader-login-profileselection-user-description,
+.pn-marketweb-siteheader-login-profileselection-currentprofile-description {
+  font-weight: 400;
+  white-space: normal;
+  word-break: break-all;
+  color: #5E554A;
+  font-size: 0.75em;
+}
+
+.pn-marketweb-siteheader-login-profileselection-divider {
+  height: 1rem;
+  width: 100%;
+  background: #00A0D6;
+  position: relative;
+  margin-left: -1em;
+  margin-top: 1.6rem;
+  margin-bottom: 1.6rem;
+  border-radius: 0 0.6em 0.6em 0;
+  padding: 0;
+}
+.pn-marketweb-siteheader-login-profileselection-divider::after {
+  content: "";
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: inherit;
+  transform: translateX(calc(100% + 0.2em));
+}
+
+.pn-marketweb-siteheader-login-profileselection-profileoption-link {
+  display: flex;
+  background: #FFFFFF;
+  transition: background 0.15s ease-in-out;
+  margin: 0 -1em;
+  padding: 0.6rem 1.6rem;
+  text-decoration: none;
+  color: #005D92;
+  align-items: center;
+}
+.pn-marketweb-siteheader-login-profileselection-profileoption-link:hover, .pn-marketweb-siteheader-login-profileselection-profileoption-link:focus, .pn-marketweb-siteheader-login-profileselection-profileoption-link:active {
+  background: #F3F2F2;
+}
+
+.pn-marketweb-siteheader-login-profileselection-profileoption-content {
+  flex-grow: 1;
+}
+
+.pn-marketweb-siteheader-login-profileselection-profileoption-name {
+  font-weight: 700;
+}
+
+.pn-marketweb-siteheader-login-profileselection-profileoption-description {
+  font-weight: 400;
+  white-space: normal;
+  word-break: break-all;
+  color: #5E554A;
+  font-size: 0.75em;
+}
+
+.pn-marketweb-siteheader-login-profileselection-logout {
+  padding: 1.6rem;
+  text-align: center;
+  width: 100%;
+}
+
+.pn-marketweb-siteheader-login-profileselection-logout-link {
+  display: inline-block;
+  font-weight: 500;
+  color: #005D92;
+  text-decoration: none;
+}
+.pn-marketweb-siteheader-login-profileselection-logout-link:hover, .pn-marketweb-siteheader-login-profileselection-logout-link:focus, .pn-marketweb-siteheader-login-profileselection-logout-link:active {
+  text-decoration: underline;
+}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.js

@@ -0,0 +1,269 @@
+import { Component, Prop, h, State, Element, Host } from "@stencil/core";
+export class PnMarketwebSiteheaderLoginProfileselection {
+  constructor() {
+    // Login dialog
+    this.loginDialog = null;
+    this.loginManager = null;
+    this.endpoint = "";
+    this.loggedin = false;
+    this.idNamespace = "";
+    this.heading = "";
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    this.user = null;
+    this.logoutLink = null;
+    this.profileSelectorDialog = {
+      currentProfile: {
+        name: 'Hedin',
+        customerid: '5560230053'
+      },
+      profiles: [
+        {
+          name: 'Bilmetro AB',
+          customerid: '5560612789'
+        }
+      ]
+    };
+  }
+  componentWillLoad() {
+    var _a;
+    console.log('loginDialog', this.loginDialog);
+    console.log('this.loginManager', this.loginManager);
+    console.log('### this.loggedin', this.loggedin);
+    console.log('this.endpoint', this.endpoint);
+    if (!this.heading && ((_a = this.i18n) === null || _a === void 0 ? void 0 : _a.profileSelectionFlyoutHeading)) {
+      this.heading = this.i18n.profileSelectionFlyoutHeading;
+    }
+    this.init();
+  }
+  init() {
+    this.updateUserInfo();
+    this.adjustLoginLinks();
+  }
+  adjustLoginLinks() {
+    var _a, _b, _c, _d;
+    const adjustLink = (link, i) => {
+      link.isLogoutLink = (link.href.indexOf('logout') !== -1);
+      if (link.isLogoutLink) {
+        link.href = this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', ''));
+      }
+      if (i === 0 && !link.href) {
+        link.href = this.loginManager.getLoginUrl();
+        link.linkType = 'primary';
+      }
+      if (link.primaryLinkApperance && !link.linkType) {
+        link.linkType = 'primary';
+      }
+    };
+    if ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loggedInLinks) {
+      (_b = this.loginDialog) === null || _b === void 0 ? void 0 : _b.loggedInLinks.forEach(adjustLink);
+    }
+    this.logoutLink = (_d = (_c = this.loginDialog) === null || _c === void 0 ? void 0 : _c.loggedInLinks.filter(x => x.isLogoutLink)[0]) !== null && _d !== void 0 ? _d : null;
+  }
+  updateUserInfo() {
+    const userInfo = this.loginManager.getUserInfo();
+    this.user = userInfo;
+    console.log('this.user', this.user);
+  }
+  render() {
+    if (!this.loginDialog || !this.profileSelectorDialog) {
+      return;
+    }
+    let hostElementAttribute = {};
+    return (h(Host, Object.assign({}, hostElementAttribute),
+      this.heading ? h("strong", { class: "pn-marketweb-siteheader-login-profileselection-heading" }, this.heading) : null,
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-user" },
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-user-name" }, this.user.given_name),
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-user-description" }, this.user.username)),
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile" },
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-name" }, this.profileSelectorDialog.currentProfile.name),
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-description" }, this.profileSelectorDialog.currentProfile.customerid)),
+      h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks.filter(x => x.isLogoutLink === false), loginManager: this.loginManager, idNamespace: this.idNamespace }),
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-divider" }),
+      this.profileSelectorDialog.profiles.map((profile) => {
+        return (h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption" },
+          h("a", { href: `${this.endpoint}?selectprofile=${profile.customerid}}`, class: "pn-marketweb-siteheader-login-profileselection-profileoption-link" },
+            h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-content" },
+              h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-name" }, profile.name),
+              h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-description" }, profile.customerid)),
+            h("pn-icon", { symbol: "arrow-right", small: "false", color: "blue700" }))));
+      }),
+      this.logoutLink ?
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-logout" },
+          h("a", { href: this.logoutLink.href, rel: "nofollower noopener", class: "pn-marketweb-siteheader-login-profileselection-logout-link" }, this.logoutLink.linkText))
+        : null));
+  }
+  static get is() { return "pn-marketweb-siteheader-login-profileselection"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-profileselection.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-profileselection.css"]
+  }; }
+  static get properties() { return {
+    "loginDialog": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "LoginDialog",
+        "resolved": "LoginDialog",
+        "references": {
+          "LoginDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "loginManager": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MarketWebLoginManager",
+        "resolved": "MarketWebLoginManager",
+        "references": {
+          "MarketWebLoginManager": {
+            "location": "import",
+            "path": "../../../globals/MarketWebLoginManager"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "endpoint",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "loggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loggedin",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "idNamespace": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id-namespace",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "i18n": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SiteHeaderI18N",
+        "resolved": "SiteHeaderI18N",
+        "references": {
+          "SiteHeaderI18N": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{ \"searchlabel\":\"\", \"searchplaceholder\":\"\", \"searchbuttontext\":\"\", \"menuHomeButton\": \"\", \"menuGoBackButton\": \"\", \"mainMenuButton\": \"\", \"menuStartButton\": \"\", \"profileSelectionFlyoutHeading\": \"\" } as SiteHeaderI18N"
+    },
+    "profileSelectorDialog": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProfileSelectorDialog",
+        "resolved": "ProfileSelectorDialog",
+        "references": {
+          "ProfileSelectorDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          },
+          "ProfileSelectorCustomer": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{\n  currentProfile: {\n    name: 'Hedin',\n    customerid: '5560230053'\n  } as ProfileSelectorCustomer,\n  profiles: [\n    {\n      name: 'Bilmetro AB',\n      customerid: '5560612789'\n    } as ProfileSelectorCustomer\n  ]\n}"
+    }
+  }; }
+  static get states() { return {
+    "user": {},
+    "logoutLink": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.css

@@ -3,23 +3,6 @@ pn-marketweb-siteheader-login {
   max-height: 5.2rem;
   position: relative;
 }
-pn-marketweb-siteheader-login strong {
-  padding: 0.8rem 1.6rem;
-  display: flex;
-  align-items: center;
-}
-pn-marketweb-siteheader-login ul, pn-marketweb-siteheader-login li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-pn-marketweb-siteheader-login li {
-  padding: 0.8rem 1.6rem;
-}
-pn-marketweb-siteheader-login li pn-button {
-  display: block;
-  width: 100%;
-}
 pn-marketweb-siteheader-login pn-nav-dropdown {
   display: none;
 }