@postnord/pn-marketweb-components 2.1.7 → 2.1.9

package/components/pn-find-service-and-price.js

@@ -0,0 +1,314 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as convertFileFromStream } from './convert.js';
+import { s as state, d as defineCustomElement$5 } from './pn-find-service-and-price-result2.js';
+import { d as defineCustomElement$6 } from './pn-choice-button2.js';
+import { d as defineCustomElement$4 } from './pn-product-card2.js';
+import { d as defineCustomElement$3 } from './pn-product-tile-info2.js';
+import { d as defineCustomElement$2 } from './pn-product-tile-price2.js';
+
+const translations = {
+  'sv': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Hit eller dit?',
+    'sizeheading': 'Hur mycket väger det?',
+    'resultlistheading': 'Några utvalda val',
+    'weightlabel': 'Vikt',
+    'maxweightlabel': 'Maxvikt',
+    'maxmeasurementlabel': 'Maxvolym',
+    'senddirectcta': 'Köp frakt via Skicka Direkt',
+    'stampshopcta': 'Köp frimärken via vår webshop',
+  },
+  'en': {
+    'componentheading': 'What do you want to send?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Weight',
+    'maxweightlabel': 'Max weight',
+    'maxmeasurementlabel': 'Maximum measurement',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'da': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Vægt',
+    'maxweightlabel': 'Max vægt',
+    'maxmeasurementlabel': 'Maks. Volumen',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'no': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Vekt',
+    'maxweightlabel': 'Maks vekt',
+    'maxmeasurementlabel': 'Maks volum',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'fi': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Paino',
+    'maxweightlabel': 'Max paino',
+    'maxmeasurementlabel': 'Max äänenvoimakkuus',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  }
+};
+const markets = {
+  'se': {
+    "currency": "kr",
+  },
+  'dk': {
+    "currency": "dk",
+  },
+  'fi': {
+    "currency": " €",
+  },
+  'no': {
+    "currency": "kr",
+  }
+};
+
+const postagetypes = [
+  { name: "Brev",   value: "letter", illustration: "letterbox-reply-letter-plants" },
+  { name: "Paket",  value: "parcel", illustration: "tracking" }
+];
+
+const deliveryscopes = {
+  "letter": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Abroad",   value: "abroad", illustration: "character-box-letters-globe" },
+    
+  ],
+  "parcel": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Within Europe", value:"withineurope", illustration: "character-box-letters-globe" },
+    { name: "Outside Europe", value:"outsideeurope", illustration: "discover" },
+  ]
+};
+
+const weights = {
+  "letter": [
+    { name: "50g",   abbreviation: 'g', value: 50 },
+    { name: "100g",  abbreviation: 'g', value: 100 },
+    { name: "250g",  abbreviation: 'g', value: 250 },
+    { name: "500g",  abbreviation: 'g', value: 500 },
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+  ],
+  "parcel": [
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+    { name: "3kg",   abbreviation: 'kg', value: 3 },
+    { name: "4kg",   abbreviation: 'kg', value: 4 },
+    { name: "5kg",   abbreviation: 'kg', value: 5 },
+    { name: "6kg",   abbreviation: 'kg', value: 6 },
+    { name: "7Kg",   abbreviation: 'kg', value: 7 },
+    { name: "8kg",   abbreviation: 'kg', value: 8 },
+    { name: "9kg",   abbreviation: 'kg', value: 9 },
+    { name: "10kg",  abbreviation: 'kg', value: 10 },
+    { name: "11kg",  abbreviation: 'kg', value: 11 },
+    { name: "12kg",  abbreviation: 'kg', value: 12 },
+    { name: "13kg",  abbreviation: 'kg', value: 13 },
+    { name: "14kg",  abbreviation: 'kg', value: 14 },
+    { name: "15kg",  abbreviation: 'kg', value: 15 },
+    { name: "16kg",  abbreviation: 'kg', value: 16 },
+    { name: "17kg",  abbreviation: 'kg', value: 17 },
+    { name: "18kg",  abbreviation: 'kg', value: 18 },
+    { name: "20kg",  abbreviation: 'kg', value: 20 },    
+  ]
+};
+
+const pnFindServiceAndPriceCss = "pn-find-service-and-price .findprice-form{max-width:50em;margin:0 auto}pn-find-service-and-price h2,pn-find-service-and-price .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-find-service-and-price .postagetypes,pn-find-service-and-price .deliveryscope{text-align:center;margin-bottom:3rem}pn-find-service-and-price .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-find-service-and-price .weightoption-input{width:5em;position:relative}pn-find-service-and-price .weightoption-input input::-webkit-outer-spin-button,pn-find-service-and-price .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-find-service-and-price .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-find-service-and-price .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-find-service-and-price .weightoption-range input{width:calc(100% - 1.5em)}pn-find-service-and-price .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-find-service-and-price .resultlist{margin:3em 0}";
+
+const PnfindServiceAndPrice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx";
+    this.language = "sv";
+    this.market = "se";
+    this.filteredItems = [];
+    this.postagetype = { value: "", name: "", icon: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+    this.deliveryscope = { value: "", name: "", icon: "" };
+    this.sourceData = { types: [], data: [] };
+  }
+  componentWillLoad() {
+    this.setState();
+    this.getDataSource();
+    // window.setTimeout(() => {
+    //   this.postagetype = postagetypes[0];
+    //   this.deliveryscope = deliveryscopes[this.postagetype.value][0];
+    //   this.weight = weights[this.postagetype.value][0];
+    //   this.weightvalue = this.weight.value;
+    // }, 500)
+  }
+  async getDataSource() {
+    const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;
+    const req = await fetch(this.source + cacheBusting);
+    const reqbody = await req.blob();
+    try {
+      const convertedData = await convertFileFromStream(reqbody);
+      this.sourceData = convertedData;
+      this.filterItems();
+    }
+    catch (e) {
+      console.log('Unable to parse data');
+    }
+  }
+  setState() {
+    if (this.market) {
+      state.market = markets[this.market];
+    }
+    if (this.language && translations[this.language]) {
+      state.i18n = translations[this.language];
+    }
+  }
+  filterItems() {
+    var _a;
+    // this.debug = `Postagetype: ${this.postagetype.value}. <br/>Weight: ${ this.weight.value }`;
+    if (!((_a = this.sourceData) === null || _a === void 0 ? void 0 : _a.data)) {
+      console.log('Data has not yet been loaded');
+      return;
+    }
+    if (!this.postagetype) {
+      return;
+    }
+    const typeData = this.sourceData.data.filter((x) => x.what === this.postagetype.value);
+    if (!this.deliveryscope) {
+      return;
+    }
+    const deliveryScopeData = typeData.filter((x) => x.deliveryscope === this.deliveryscope.value);
+    if (!this.weight || !this.weight.value) {
+      return;
+    }
+    // For letters we use grams. Otherwise we use KG
+    const comparisonWeight = (this.weight.abbreviation.toLocaleLowerCase() === "kg" && this.postagetype.value === 'letter') ? this.weight.value * 1000 : this.weight.value;
+    let weightFilteredData = deliveryScopeData.filter(x => x.maxweight === comparisonWeight);
+    // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value
+    if (weightFilteredData.length === 0) {
+      weightFilteredData = deliveryScopeData.filter(x => x.maxweight >= comparisonWeight);
+      if (weightFilteredData.length > 0) {
+        // We reverse the result array since the map will take the last unique item instead of the first
+        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item["id"], item])).values()];
+        if (uniqueWeightOptions.length > 0) {
+          weightFilteredData = uniqueWeightOptions;
+        }
+      }
+    }
+    this.filteredItems = weightFilteredData;
+  }
+  render() {
+    return (h("div", null, h("div", { class: "findprice-form" }, (state.i18n.componentheading) ? (h("h2", null, state.i18n.componentheading)) : null, h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
+        this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
+        this.deliveryscope = { value: "", name: "", icon: "" };
+        this.weight = { value: 0, name: "" };
+        this.weightvalue = this.weight.value;
+      } }, h("pn-illustration", { illustration: postagetype.illustration }), " ", postagetype.name)))), this.postagetype.value && deliveryscopes[this.postagetype.value] ? (h("div", null, (state.i18n.deliveryscopeheading) ? (h("div", { class: "heading" }, state.i18n.deliveryscopeheading)) : null, h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map((deliveryscope) => (h("pn-choice-button", { choiceid: this.postagetype.value + deliveryscope.value, value: deliveryscope.value, name: "deliveryscope", type: "radio", checked: deliveryscope.value === this.deliveryscope.value, onChange: () => {
+        this.deliveryscope = deliveryscopes[this.postagetype.value].filter(x => x.value === deliveryscope.value)[0];
+        if (this.weight.value === 0) {
+          this.weight = weights[this.postagetype.value][0];
+          this.weightvalue = this.weight.value;
+        }
+      } }, h("pn-illustration", { illustration: deliveryscope.illustration }), " ", deliveryscope.name)))))) : null, (this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value) ? (h("div", null, (state.i18n.sizeheading) ? (h("div", { class: "heading" }, state.i18n.sizeheading)) : null, h("div", { class: "weightoption" }, h("div", { class: "weightoption-input" }, h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
+        if (e && e.target && e.target.value) {
+          const weightNum = parseInt(e.target.value, 10);
+          if (!isNaN(weightNum)) {
+            let matchingWeights = weights[this.postagetype.value].filter((x) => {
+              let weightInGrams = (x.abbreviation === "kg") ? x.value * 1000 : x.value;
+              return weightInGrams >= weightNum;
+            });
+            if (matchingWeights && matchingWeights.length > 0) {
+              this.weight = matchingWeights[0];
+              this.weightvalue = this.weight.value;
+            }
+          }
+        }
+      } }), h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), h("div", { class: "weightoption-range" }, h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: (!this.weight.value) ? 0 : weights[this.postagetype.value].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
+        const value = e.target.value;
+        this.weight = weights[this.postagetype.value][value];
+        this.weightvalue = this.weight.value;
+      }, min: "0",
+      // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
+      max: weights[this.postagetype.value].length - 1 }), h("datalist", { id: "weightlist" }, weights[this.postagetype.value].map((weight, weightindex) => {
+      let labelText = weight.name;
+      if (weights[this.postagetype.value].length > 6) {
+        labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1) ? weight.name : '';
+      }
+      return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
+    })))))) : null), (this.filteredItems && this.filteredItems.length > 0) ? (h("div", { class: "resultlist" }, (state.i18n.resultlistheading) ? (h("div", { class: "heading" }, state.i18n.resultlistheading)) : null, this.filteredItems.map((item) => (h("div", null, h("pn-find-service-and-price-result", { item: item })))))) : null));
+  }
+  static get watchers() { return {
+    "market": ["setState"],
+    "language": ["setState"],
+    "postagetype": ["filterItems"],
+    "deliveryscope": ["filterItems"],
+    "weightvalue": ["filterItems"]
+  }; }
+  static get style() { return pnFindServiceAndPriceCss; }
+}, [0, "pn-find-service-and-price", {
+    "source": [1],
+    "language": [1025],
+    "market": [1025],
+    "filteredItems": [32],
+    "postagetype": [32],
+    "weight": [32],
+    "weightvalue": [32],
+    "deliveryscope": [32],
+    "sourceData": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-find-service-and-price", "pn-choice-button", "pn-find-service-and-price-result", "pn-product-card", "pn-product-tile-info", "pn-product-tile-price"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-find-service-and-price":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnfindServiceAndPrice);
+      }
+      break;
+    case "pn-choice-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "pn-find-service-and-price-result":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-product-tile-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-product-tile-price":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnFindServiceAndPrice = PnfindServiceAndPrice;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnFindServiceAndPrice, defineCustomElement };

package/components/pn-language-selector-option.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnLanguageSelectorOption extends Components.PnLanguageSelectorOption, HTMLElement {}
+export const PnLanguageSelectorOption: {
+  prototype: PnLanguageSelectorOption;
+  new (): PnLanguageSelectorOption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PnlanguageSelectorOption, d as defineCustomElement$1 } from './pn-language-selector-option2.js';
+
+const PnLanguageSelectorOption = PnlanguageSelectorOption;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnLanguageSelectorOption, defineCustomElement };

package/components/pn-language-selector-option2.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const pnLanguageSelectorOptionCss = "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:-ms-flexbox;display:flex;-ms-flex-align:center;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;-webkit-box-shadow:none;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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;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{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005D92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{-webkit-transform:scale(1);transform:scale(1)}";
+
+const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.setCurrentLanguage = createEvent(this, "setCurrentLanguage", 7);
+    this.name = "";
+    this.code = "";
+    this.url = "";
+    this.selected = false;
+    this.currentLanguage = undefined;
+  }
+  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 style() { return pnLanguageSelectorOptionCss; }
+}, [0, "pn-language-selector-option", {
+    "name": [1],
+    "code": [1],
+    "url": [1],
+    "selected": [4],
+    "currentLanguage": [1, "current-language"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-language-selector-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-language-selector-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnlanguageSelectorOption);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnlanguageSelectorOption as P, defineCustomElement as d };

package/components/pn-language-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnLanguageSelector extends Components.PnLanguageSelector, HTMLElement {}
+export const PnLanguageSelector: {
+  prototype: PnLanguageSelector;
+  new (): PnLanguageSelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-language-selector.js

@@ -0,0 +1,6 @@
+import { P as PnlanguageSelector, d as defineCustomElement$1 } from './pn-language-selector2.js';
+
+const PnLanguageSelector = PnlanguageSelector;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnLanguageSelector, defineCustomElement };

package/components/pn-language-selector2.js

@@ -0,0 +1,133 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const translations = {
+  'sv': {
+    "heading": "Språk",
+  },
+  'en': {
+    "heading": "Language"
+  },
+  'da': {
+    "heading": "Sprog"
+  },
+  'no': {
+    "heading": "Språk"
+  },
+  'fi': {
+    "heading": "Kieli"
+  },
+  'de': {
+    "heading": "Sprache"
+  }
+};
+
+const pnLanguageSelectorCss = "pn-language-selector{max-height:5.2rem}pn-language-selector pn-nav-dropdown:not([data-open]) .nav-dropdown-content-container,pn-language-selector pn-nav-dropdown[data-open=false] .nav-dropdown-content-container{display:none}pn-language-selector pn-nav-dropdown{display:block}.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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
+
+const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.setLanguage = createEvent(this, "setLanguage", 7);
+    this.value = "";
+    this.selectedLanguageName = "";
+    this.options = [];
+    this.i18n = undefined;
+  }
+  componentWillLoad() {
+    this.setInitialSelectedLanguageName();
+    this.setTranslations();
+  }
+  componentDidLoad() {
+    this.initialize();
+  }
+  initialize() {
+    this.setSelectedLanguageName();
+    this.addEventBindingsToOptions();
+  }
+  setInitialSelectedLanguageName() {
+    if (!window.Intl || !this.value) {
+      return;
+    }
+    const langs = new Intl.DisplayNames([this.value], { type: 'language' });
+    if (!langs) {
+      return;
+    }
+    const languageName = langs.of(this.value);
+    if (!languageName) {
+      return;
+    }
+    this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);
+  }
+  addEventBindingsToOptions() {
+    const options = [].slice.apply(this.hostElement.querySelectorAll("pn-language-selector-option"));
+    options.map((option) => {
+      option.removeEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
+      // Bind event listener for when a user change language
+      option.addEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
+    });
+  }
+  setSelectedLanguageName() {
+    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");
+      }
+    });
+  }
+  onSetCurrentLanguage(option) {
+    this.value = option.code;
+    this.selectedLanguageName = option.name;
+    this.setLanguage.emit(this.value);
+  }
+  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);
+      const isSelected = (component.getAttribute("code") === this.value) + '';
+      if ((component.getAttribute('selected') + '') !== isSelected) {
+        component.setAttribute("selected", isSelected);
+      }
+    });
+  }
+  render() {
+    return (h(Host, { value: this.value }, 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))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
+  }; }
+  static get style() { return pnLanguageSelectorCss; }
+}, [4, "pn-language-selector", {
+    "value": [1537],
+    "selectedLanguageName": [32],
+    "options": [32],
+    "i18n": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-language-selector"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-language-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnlanguageSelector);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnlanguageSelector as P, defineCustomElement as d };

package/components/pn-line-shape.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnLineShape extends Components.PnLineShape, HTMLElement {}
+export const PnLineShape: {
+  prototype: PnLineShape;
+  new (): PnLineShape;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-line-shape.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnLineShapeCss = "pn-line-shape .pn-line-shape__container{display:-ms-flexbox;display:flex}pn-line-shape .pn-line-shape__line{border-style:solid;border-width:0.4rem;border-radius:1.6rem;border-color:#00A0D6}pn-line-shape .pn-line-shape__dot{width:0.8rem;border-style:solid;border-width:0.4rem;border-radius:1.6rem;height:0.8rem;border-color:#00A0D6}pn-line-shape[slot=horizontal-line] .pn-line-shape__container{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:100%;gap:0.8rem;padding:2.4rem 0}pn-line-shape[slot=horizontal-line] .pn-line-shape__line{height:0.8rem;width:100%}pn-line-shape[slot=vertical-line] .pn-line-shape__container{height:100%;-ms-flex-direction:column;flex-direction:column;gap:0.8rem;padding:0.8rem 0.5rem}pn-line-shape[slot=vertical-line] .pn-line-shape__line{height:100%;width:0.8rem}";
+
+const PnLineShape$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  //props
+  render() {
+    return (h(Host, null, h("div", { class: "pn-line-shape__container" }, h("canvas", { class: "pn-line-shape__line" }), h("canvas", { class: "pn-line-shape__dot" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnLineShapeCss; }
+}, [0, "pn-line-shape"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-line-shape"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-line-shape":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnLineShape$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnLineShape = PnLineShape$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnLineShape, defineCustomElement };

package/components/pn-mainnav-level.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnMainnavLevel extends Components.PnMainnavLevel, HTMLElement {}
+export const PnMainnavLevel: {
+  prototype: PnMainnavLevel;
+  new (): PnMainnavLevel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-mainnav-level.js

@@ -0,0 +1,6 @@
+import { P as PnMainnavLevel$1, d as defineCustomElement$1 } from './pn-mainnav-level2.js';
+
+const PnMainnavLevel = PnMainnavLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMainnavLevel, defineCustomElement };