@postnord/pn-marketweb-components 1.0.3 → 1.0.7

package/collection/components/layout-components/{pn-siteheader/pn-siteheader.css → pn-marketweb-siteheader/pn-marketweb-siteheader.css}

@@ -1,7 +1,7 @@
-pn-siteheader {
+pn-marketweb-siteheader {
   display: block;
 }
-pn-siteheader header {
+pn-marketweb-siteheader header {
   position: relative;
   z-index: 1000;
   display: flex;
@@ -11,12 +11,12 @@ pn-siteheader header {
   justify-content: space-between;
 }
 @media screen and (min-width: 48em) {
-  pn-siteheader header {
+  pn-marketweb-siteheader header {
     flex-direction: column;
     justify-content: initial;
   }
 }
-pn-siteheader .siteheader-row {
+pn-marketweb-siteheader .siteheader-row {
   display: flex;
   flex-flow: row;
   align-items: center;
@@ -25,56 +25,56 @@ pn-siteheader .siteheader-row {
   background: #FFFFFF;
   min-height: 2em;
 }
-pn-siteheader .siteheader-row:not(:last-child) {
+pn-marketweb-siteheader .siteheader-row:not(:last-child) {
   border-bottom: 0.1rem solid #F3F2F2;
 }
 @media screen and (min-width: 48em) {
-  pn-siteheader .siteheader-row {
+  pn-marketweb-siteheader .siteheader-row {
     justify-content: space-between;
     min-height: 3.2em;
   }
 }
-pn-siteheader .siteheader-topright {
+pn-marketweb-siteheader .siteheader-topright {
   display: flex;
   flex-direction: row;
 }
-pn-siteheader .siteheader-logocontainer {
+pn-marketweb-siteheader .siteheader-logocontainer {
   display: flex;
   align-items: center;
   position: relative;
   min-height: 3em;
 }
 @media screen and (min-width: 48em) {
-  pn-siteheader .siteheader-logocontainer {
+  pn-marketweb-siteheader .siteheader-logocontainer {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }
 }
-pn-siteheader .siteheader-logolink {
+pn-marketweb-siteheader .siteheader-logolink {
   height: 100%;
   max-height: 6.4rem;
   display: flex;
   align-items: center;
 }
-pn-siteheader .siteheader-logolink:hover, pn-siteheader .siteheader-logolink:focus, pn-siteheader .siteheader-logolink:active {
+pn-marketweb-siteheader .siteheader-logolink:hover, pn-marketweb-siteheader .siteheader-logolink:focus, pn-marketweb-siteheader .siteheader-logolink:active {
   box-shadow: none;
 }
-pn-siteheader .siteheader-logo {
+pn-marketweb-siteheader .siteheader-logo {
   height: 2.4rem;
 }
-pn-siteheader .siteheader-row > pn-siteheader-search {
+pn-marketweb-siteheader .siteheader-row > pn-marketweb-siteheader-search {
   display: none;
 }
 @media screen and (min-width: 48em) {
-  pn-siteheader .siteheader-row > pn-siteheader-search {
+  pn-marketweb-siteheader .siteheader-row > pn-marketweb-siteheader-search {
     display: block;
   }
 }
-pn-siteheader pn-spinner {
+pn-marketweb-siteheader pn-spinner {
   display: none;
 }
-pn-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
+pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
   display: none;
 }
 
@@ -107,22 +107,22 @@ pn-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
     margin-right: 1.6rem;
   }
 }
-.siteheader-topright pn-siteheader-login {
+.siteheader-topright pn-marketweb-siteheader-login {
   display: none;
 }
 @media screen and (min-width: 48em) {
-  .siteheader-topright pn-siteheader-login {
+  .siteheader-topright pn-marketweb-siteheader-login {
     display: block;
   }
 }
-.siteheader-topright pn-siteheader-login .pn-nav-dropdown-label {
+.siteheader-topright pn-marketweb-siteheader-login .pn-nav-dropdown-label {
   font-size: 0;
 }
-.siteheader-topright pn-siteheader-login .pn-nav-dropdown-label pn-icon {
+.siteheader-topright pn-marketweb-siteheader-login .pn-nav-dropdown-label pn-icon {
   font-size: initial;
 }
 @media screen and (min-width: 60em) {
-  .siteheader-topright pn-siteheader-login .pn-nav-dropdown-label {
+  .siteheader-topright pn-marketweb-siteheader-login .pn-nav-dropdown-label {
     font-size: initial;
   }
 }

package/collection/components/layout-components/{pn-siteheader/pn-siteheader.js → pn-marketweb-siteheader/pn-marketweb-siteheader.js}

@@ -1,6 +1,6 @@
 import { Component, Prop, h, State, Element, Listen } from "@stencil/core";
 import { translations } from "./translations";
-export class PnSiteheader {
+export class PnMarketwebSiteheader {
   constructor() {
     this.endpointPath = "/api/navigation/header";
     /** Specifies which market we want to show (se,dk,fi,no,com) */
@@ -87,6 +87,9 @@ export class PnSiteheader {
     this.gotData = true;
     this.fetchingData = true;
   }
+  promotedItemId(item) {
+    return "promo-" + item.linkText.replace(/[^A-Za-z0-9.\\\/]/igm, "");
+  }
   handleResize() {
     requestAnimationFrame(() => {
       this.checkMenuOverflow();
@@ -129,7 +132,7 @@ export class PnSiteheader {
               h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" })))),
         h("div", { class: "siteheader-topright" },
           h("slot", { name: "toprightstart" }),
-          (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+          (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
           (this.gotData && ((_e = this.languageSelector) === null || _e === void 0 ? void 0 : _e.languages)) && !this.hideLanguageSelector &&
             h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
           h("slot", { name: "toprightend" }))),
@@ -139,18 +142,18 @@ export class PnSiteheader {
             h("pn-mainnav-level", null,
               h("pn-mainnav-list", null, this.menuItems.map((item) => {
                 var _a, _b;
-                return (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: (_a = item.linkTarget) !== null && _a !== void 0 ? _a : "_self" }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) &&
+                return (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: (_a = item.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) &&
                   h("pn-mainnav-level", null,
                     item.children.length > 0 &&
                       h("pn-mainnav-list", { heading: ((_b = item.navigationHeading) !== null && _b !== void 0 ? _b : "") }, item.children.map((childitem) => {
                         var _a;
-                        return (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: (_a = childitem.linkTarget) !== null && _a !== void 0 ? _a : "_self" }));
+                        return (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: (_a = childitem.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: childitem.trackingId }));
                       })),
                     (item.promotedMenuItems && item.promotedMenuItems.length > 0) &&
-                      h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map((childitem) => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? "_blank" : "_self" })))))));
+                      h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map((childitem) => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? "_blank" : "_self", linkid: this.promotedItemId(childitem) })))))));
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
-                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
                 (this.gotData && ((_f = this.languageSelector) === null || _f === void 0 ? void 0 : _f.languages)) && !this.hideLanguageSelector &&
                   h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
                 !this.hideSiteSelector &&
@@ -158,14 +161,14 @@ export class PnSiteheader {
                     (this.gotData && ((_g = this.siteSelector) === null || _g === void 0 ? void 0 : _g.currentSiteTitle)) &&
                       h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
                     (this.gotData && ((_h = this.siteSelector) === null || _h === void 0 ? void 0 : _h.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow }))))))),
-        h("pn-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }))));
+        h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }))));
   }
-  static get is() { return "pn-siteheader"; }
+  static get is() { return "pn-marketweb-siteheader"; }
   static get originalStyleUrls() { return {
-    "$": ["pn-siteheader.scss"]
+    "$": ["pn-marketweb-siteheader.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["pn-siteheader.css"]
+    "$": ["pn-marketweb-siteheader.css"]
   }; }
   static get properties() { return {
     "market": {

package/collection/components/layout-components/{pn-siteheader/pn-siteheader.stories.js → pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js}

@@ -39,7 +39,7 @@ export default {
 };
 
 const Template = ({ ...args }) => {
-  return `<pn-siteheader 
+  return `<pn-marketweb-siteheader 
   market="${ args.market }"
   language="${ args.language }"
   endpoint="${ args.endpoint }"
@@ -47,7 +47,7 @@ const Template = ({ ...args }) => {
   hide-language-selector="false"
   hide-search="false"
   hide-login="false">
-</pn-siteheader>`;
+</pn-marketweb-siteheader>`;
 };
 
 export const Primary = Template.bind({});

package/collection/components/layout-components/pn-marketweb-siteheader/translations.js

@@ -0,0 +1,47 @@
+export const translations = {
+  'sv': {
+    "searchlabel": "Sök",
+    "searchplaceholder": "Vad letar du efter?",
+    "searchbuttontext": "Sök",
+    "menuHomeButton": "Hem",
+    "menuGoBackButton": "Gå tillbaka",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start"
+  },
+  'en': {
+    "searchlabel": "Search",
+    "searchplaceholder": "Search",
+    "searchbuttontext": "Search",
+    "menuHomeButton": "Home",
+    "menuGoBackButton": "Go back",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start"
+  },
+  'da': {
+    "searchlabel": "Søg",
+    "searchplaceholder": "Søg",
+    "searchbuttontext": "Søg",
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbage",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start"
+  },
+  'no': {
+    "searchlabel": "Søk",
+    "searchplaceholder": "Søk",
+    "searchbuttontext": "Søk",
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbake",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start"
+  },
+  'fi': {
+    "searchlabel": "Hae",
+    "searchplaceholder": "Hae",
+    "searchbuttontext": "Hae",
+    "menuHomeButton": "Koti",
+    "menuGoBackButton": "Mene takaisin",
+    "mainMenuButton": "Valikko",
+    "menuStartButton": "Alkaa"
+  }
+};

package/collection/components/navigation/pn-language-selector/language-selector.stories.js

@@ -0,0 +1,43 @@
+
+import readme from "./readme.md";
+
+export default {
+  title: "Navigation/Language selector",
+  parameters: {
+    notes: readme
+  }
+};
+
+// export const regular = () => {
+//   // Storybook Knobs ------------------------------------------//
+//   const language = select("Language", {
+//     'Enlish':'en',
+//     'Swedish': 'sv', 
+//     'Danish': 'da', 
+//     'Finnish': 'fi', 
+//     'Norwegian': 'no'
+//   }, 'sv');
+  
+  // --------------------------------------------------------- //
+
+  const Template = ({ ...args }) => {
+  return `
+    <div style="display:flex; justify-content: space-between;">
+    <pn-language-selector value=${args.language}>
+      <pn-language-selector-option name="Example language 1" code="langcode1" selected="false" url="test"></pn-language-selector-option>
+      <pn-language-selector-option name="No link language" code="langcode2" selected="true"></pn-language-selector-option>
+      <pn-language-selector-option name="No link language 2" code="langcode3" selected="false"></pn-language-selector-option>
+    </pn-language-selector>
+
+    <pn-language-selector value=${args.language}>
+      <pn-language-selector-option name="English" code="en" selected="true" url="/"></pn-language-selector-option>
+      <pn-language-selector-option name="Svenska" code="sv" selected="false" url="/en"></pn-language-selector-option>
+    </pn-language-selector>  
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  language: 'sv'
+};

package/collection/components/navigation/pn-language-selector/pn-language-selector-option.css

@@ -0,0 +1,74 @@
+pn-language-selector-option {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.languageselector-button,
+.languageselector-link {
+  width: 100%;
+  padding: 1.1rem 1.6rem 1.1rem 1.4rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: none;
+  border: 0;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  color: #005D92;
+  font-size: 1.6rem;
+  font-weight: bold;
+  border-radius: 0;
+}
+.languageselector-button:hover, .languageselector-button:focus, .languageselector-button:active,
+.languageselector-link:hover,
+.languageselector-link:focus,
+.languageselector-link:active {
+  color: #0D234B;
+  text-decoration: underline;
+  box-shadow: none;
+  background-color: #F3F2F2;
+  color: #005D92;
+  outline: none;
+}
+
+.languageselector-itemtext {
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+.languageselector-radio-outer {
+  background: #fff;
+  border: 0.1em solid #D3CECB;
+  border-radius: 50%;
+  height: 1.5em;
+  width: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;
+  cursor: pointer;
+}
+.languageselector-radio-outer:focus > .languageselector-radio-outer, .languageselector-radio-outer:active > .languageselector-radio-outer {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;
+}
+.languageselector-radio-outer:hover > .languageselector-radio-outer {
+  border: 0.1rem solid #005D92;
+  background: #E0F8FF;
+}
+[selected=true] .languageselector-radio-outer {
+  border: 0.1rem solid #005D92;
+}
+
+.languageselector-radio-inner {
+  transform: scale(0);
+  height: 1em;
+  width: 1em;
+  background-color: #005D92;
+  border-radius: 50%;
+  transform-origin: center center;
+  transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
+}
+[selected=true] .languageselector-radio-inner {
+  transform: scale(1);
+}

package/collection/components/navigation/pn-language-selector/pn-language-selector-option.js

@@ -0,0 +1,148 @@
+import { Component, Prop, h, Host, Event } from "@stencil/core";
+export class PnlanguageSelectorOption {
+  constructor() {
+    /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */
+    this.name = "";
+    this.code = "";
+    this.url = "";
+    this.selected = false;
+  }
+  onOptionClick() {
+    const currentlanguage = {
+      name: this.name,
+      code: this.code,
+      url: this.url,
+      current: true
+    };
+    this.setCurrentLanguage.emit(currentlanguage);
+  }
+  render() {
+    return (h(Host, { role: "listitem", selected: (this.selected) + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) },
+      h("span", { class: "languageselector-radio-outer" },
+        h("span", { class: "languageselector-radio-inner" })),
+      h("span", { class: "languageselector-itemtext" },
+        this.name,
+        " - ",
+        this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code },
+      h("span", { class: "languageselector-radio-outer" },
+        h("span", { class: "languageselector-radio-inner" })),
+      h("span", { class: "languageselector-itemtext" },
+        this.name,
+        " - ",
+        this.code)))));
+  }
+  static get is() { return "pn-language-selector-option"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-language-selector-option.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-language-selector-option.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation"
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "code": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "currentLanguage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-language",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "setCurrentLanguage",
+      "name": "setCurrentLanguage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/collection/components/navigation/pn-language-selector/pn-language-selector-types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/navigation/pn-language-selector/pn-language-selector.css

@@ -0,0 +1,32 @@
+.languageselector {
+  position: relative;
+}
+
+.languageselector-togglebtn {
+  cursor: pointer;
+  border: 0;
+  padding: 0.64rem 0;
+  background-color: #FFFFFF;
+  color: #005D92;
+  font-size: 1.6rem;
+}
+.languageselector-togglebtn:hover, .languageselector-togglebtn:focus, .languageselector-togglebtn:active {
+  color: #0D234B;
+  text-decoration: underline;
+}
+.languageselector-togglebtn svg {
+  width: 1.9rem;
+  height: 1.9rem;
+}
+
+.languageselector-title {
+  padding: 0.8rem 1.6rem;
+  display: flex;
+  align-items: center;
+}
+
+.languageselector-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/collection/components/navigation/pn-language-selector/pn-language-selector.js

@@ -0,0 +1,92 @@
+import { Component, Prop, h, State, Host, Watch, Element } from "@stencil/core";
+import { translations } from "./translations";
+export class PnlanguageSelector {
+  constructor() {
+    /* Current language code  */
+    this.value = "";
+    this.selectedLanguageName = "";
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  componentDidLoad() {
+    this.initialize();
+  }
+  initialize() {
+    const options = [].slice.apply(this.hostElement.querySelectorAll("pn-language-selector-option"));
+    options.map((option) => {
+      // Set current label of language selector
+      if (option.getAttribute("code") == this.value || option.getAttribute("selected") == "true") {
+        this.selectedLanguageName = option.getAttribute("name");
+      }
+      // Bind event listener for when a user change language
+      option.addEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
+    });
+  }
+  onSetCurrentLanguage(option) {
+    this.value = option.code;
+    this.selectedLanguageName = option.name;
+  }
+  setTranslations() {
+    if (translations[this.value]) {
+      this.i18n = translations[this.value];
+    }
+  }
+  onValueChange() {
+    var _a;
+    const components = (_a = this.hostElement.querySelectorAll("pn-language-selector-option")) !== null && _a !== void 0 ? _a : [];
+    components.forEach((component) => {
+      // Pass values as props into slotted components
+      // component.setAttribute("current-language", this.value);
+      component.setAttribute("selected", (component.getAttribute("code") === this.value) + '');
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-nav-dropdown", { label: this.selectedLanguageName, icon: "globe" },
+        h("nav", { class: "languageselector-nav", "aria-label": this.i18n.heading },
+          h("strong", { class: "languageselector-title" }, this.i18n.heading),
+          h("div", { class: "languageselector-list", role: "list" },
+            h("slot", null))))));
+  }
+  static get is() { return "pn-language-selector"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-language-selector.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-language-selector.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "selectedLanguageName": {},
+    "options": {},
+    "i18n": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "onValueChange"
+    }]; }
+}

package/collection/components/navigation/pn-language-selector/translations.js

@@ -0,0 +1,17 @@
+export const translations = {
+  'sv': {
+    "heading": "Språk",
+  },
+  'en': {
+    "heading": "Language"
+  },
+  'da': {
+    "heading": "Sprog"
+  },
+  'no': {
+    "heading": "Språk"
+  },
+  'fi': {
+    "heading": "Kieli"
+  }
+};