@postnord/pn-marketweb-components 1.0.4 → 1.0.8

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

@@ -0,0 +1,34 @@
+pn-marketweb-siteheader-login {
+  padding: 1rem 0;
+  margin-right: 1.6rem;
+}
+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 a {
+  display: block;
+  width: 100%;
+}
+pn-marketweb-siteheader-login li a[tabindex], pn-marketweb-siteheader-login li a[style] {
+  text-decoration: none;
+}
+pn-marketweb-siteheader-login li pn-button {
+  display: block;
+  width: 100%;
+}
+pn-marketweb-siteheader-login pn-nav-dropdown {
+  display: none;
+}
+pn-marketweb-siteheader-login.hydrated pn-nav-dropdown {
+  display: block;
+}

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

@@ -1,6 +1,6 @@
 import { Component, Prop, h, State, Element } from "@stencil/core";
-import { PNLoginManager } from "./pn-siteheader-loginmanager";
-export class PnSiteheaderLogin {
+import { PNLoginManager } from "./pn-marketweb-siteheader-loginmanager";
+export class PnMarketwebSiteheaderLogin {
   constructor() {
     /** Specifies which endpoint domain we should load from */
     this.endpoint = "";
@@ -76,12 +76,12 @@ export class PnSiteheaderLogin {
           h("ul", null, (_c = this.loginDialog.loginMenuLinks) === null || _c === void 0 ? void 0 : _c.map(link => h("li", null,
             h("a", { href: link.href, target: link.openInNewWindow ? "_blank" : "_self", class: "btn btn-link" }, link.linkText)))))));
   }
-  static get is() { return "pn-siteheader-login"; }
+  static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
-    "$": ["pn-siteheader-login.scss"]
+    "$": ["pn-marketweb-siteheader-login.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["pn-siteheader-login.css"]
+    "$": ["pn-marketweb-siteheader-login.css"]
   }; }
   static get properties() { return {
     "endpoint": {
@@ -128,7 +128,7 @@ export class PnSiteheaderLogin {
         "references": {
           "LoginDialog": {
             "location": "import",
-            "path": "./pn-siteheader-types"
+            "path": "./pn-marketweb-siteheader-types"
           }
         }
       },

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

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Element } from "@stencil/core";
-export class PnSiteheaderSearch {
+export class PnMarketwebSiteheaderSearch {
   constructor() {
     // Display option, show only link
     this.showOnlyLink = false;
@@ -19,18 +19,17 @@ export class PnSiteheaderSearch {
       (h("form", { method: "get", action: this.search.formActionUrl, role: "search" },
         h("pn-search-field", { label: this.i18n.searchlabel, name: "q", button: "icon", onSearch: () => {
             const form = this.hostElement.querySelector('form');
-            console.log('form', form);
             if (form) {
               form.submit();
             }
           }, placeholder: this.i18n.searchplaceholder })))));
   }
-  static get is() { return "pn-siteheader-search"; }
+  static get is() { return "pn-marketweb-siteheader-search"; }
   static get originalStyleUrls() { return {
-    "$": ["pn-siteheader-search.scss"]
+    "$": ["pn-marketweb-siteheader-search.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["pn-siteheader-search.css"]
+    "$": ["pn-marketweb-siteheader-search.css"]
   }; }
   static get properties() { return {
     "i18n": {
@@ -95,7 +94,7 @@ export class PnSiteheaderSearch {
         "references": {
           "SiteHeaderSearch": {
             "location": "import",
-            "path": "./pn-siteheader-types"
+            "path": "./pn-marketweb-siteheader-types"
           }
         }
       },

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) */
@@ -132,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" }))),
@@ -153,7 +153,7 @@ export class PnSiteheader {
                       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 &&
@@ -161,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;
+}