@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/components/pn-zipcode-search.js

@@ -0,0 +1,228 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './pn-button2.js';
+import { d as defineCustomElement$4 } from './pn-icon2.js';
+import { d as defineCustomElement$3 } from './pn-search-field2.js';
+import { d as defineCustomElement$2 } from './pn-spinner2.js';
+
+const translations = {
+  CLOSEST_DELIVERY_DATE: {
+    da: 'Closest delivery date:',
+    en: 'Closest delivery date:',
+    fi: 'Closest delivery date:',
+    no: 'Closest delivery date:',
+    sv: 'Nästa utdelningsdag:',
+  },
+  NEXT_DELIVERY_DATE: {
+    da: 'Next delivery date:',
+    en: 'Next delivery date:',
+    fi: 'Next delivery date:',
+    no: 'Next delivery date:',
+    sv: 'Kommande utdelningsdag:',
+  },
+  ZIP_CODE: {
+    da: 'Zip code:',
+    en: 'Zip code:',
+    fi: 'Zip code:',
+    no: 'Zip code:',
+    sv: 'Postnummer:',
+  },
+  VALIDATION_ERROR_MESSAGE: {
+    da: 'Zip code not valid',
+    en: 'Zip code not valid',
+    fi: 'Zip code not valid',
+    no: 'Zip code not valid',
+    sv: 'Postnumret är inte giltigt',
+  },
+  SERVER_ERROR_MESSAGE: {
+    da: 'Could not find zip code',
+    en: 'Could not find zip code',
+    fi: 'Could not find zip code',
+    no: 'Could not find zip code',
+    sv: 'Kan inte hitta postnumret',
+  },
+  PLACEHOLDER_TEXT: {
+    da: 'Search for a zip code',
+    en: 'Search for a zip code',
+    fi: 'Search for a zip code',
+    no: 'Search for a zip code',
+    sv: 'Sök på ett postnummer',
+  },
+};
+
+const pnZipcodeSearchCss = "pn-zipcode-search{display:block;color:#5E554A}pn-zipcode-search .search-results{margin-top:1em;padding:0.5em}pn-zipcode-search .search-results>h3,pn-zipcode-search .search-results h2{font-weight:normal}pn-zipcode-search .text-row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}pn-zipcode-search .text-row+.text-row{margin-top:1em}pn-zipcode-search .text-row>*+*{margin-left:0.25em}pn-zipcode-search .error-text{color:#A70707;padding:0.5em 1em}pn-zipcode-search pn-search-field{width:100%}@media screen and (max-width: 30em){pn-zipcode-search .text-row:nth-child(-n+2){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:unset;align-items:unset}pn-zipcode-search .text-row:nth-child(-n+2) .delivery-date{margin-left:auto;margin-top:0.25em}}";
+
+let PnZipCodeSearch = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.searchsuccessful = createEvent(this, "searchsuccessful", 7);
+    /** marketwebLanguage property will be prioritized before the state language */
+    this.marketwebLanguage = "";
+    /** If property marketwebLanguage is empty it will fall back on the state language */
+    this.language = "sv";
+    this.loading = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.showResult = false;
+    this.zipCodeSearchResult = {
+      delivery: "",
+      upcoming: "",
+      city: "",
+      postalCode: ""
+    };
+  }
+  componentWillLoad() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.init();
+    }
+    else {
+      window.addEventListener("topbarLoaded", () => {
+        this.init();
+      });
+    }
+  }
+  init() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.language = topbar.language;
+      topbar.onChangeLanguage = language => {
+        this.language = language;
+      };
+    }
+  }
+  isEmpty(input) {
+    const isNullOrUndefined = !input;
+    if (isNullOrUndefined) {
+      return true;
+    }
+    const isEmptyStr = input.trim().length === 0;
+    if (isEmptyStr) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  getTranslation(keyToMatch, languageToMatch) {
+    // Loop through translations
+    for (const [key, languages] of Object.entries(translations)) {
+      if (key === keyToMatch.toUpperCase()) {
+        const englishTranslation = translations[key].en;
+        // Loop through languages
+        for (const [language, translation] of Object.entries(languages)) {
+          if (language === languageToMatch.toLowerCase()) {
+            if (this.isEmpty(translation)) {
+              return englishTranslation;
+            }
+            else {
+              return translation;
+            }
+          }
+        }
+        // If no matching language, return the english translation as fallback
+        return englishTranslation;
+      }
+    }
+    return keyToMatch; // If no translation found, return the key as last fallback
+  }
+  handleSearch(e) {
+    const validationResult = this.validateZipCode(e.detail);
+    if (validationResult.error) {
+      this.error = true;
+      this.errorMessage = "VALIDATION_ERROR_MESSAGE";
+      return;
+    }
+    // call endpoint
+    this.zipCodeSearch(validationResult.value);
+  }
+  async zipCodeSearch(zipCode) {
+    this.loading = true;
+    await fetch(`https://portal.postnord.com/api/sendoutarrival/closest?postalCode=${zipCode}`)
+      .then(response => {
+      return response.json();
+    })
+      .then(data => {
+      this.error = false;
+      this.loading = false;
+      this.showResult = true;
+      this.zipCodeSearchResult = data;
+      this.searchsuccessful.emit(true);
+    })
+      .catch(() => {
+      this.error = true;
+      this.errorMessage = "SERVER_ERROR_MESSAGE";
+      this.loading = false;
+      this.searchsuccessful.emit(false);
+    });
+  }
+  validateZipCode(value) {
+    // Removes spaces and dashes
+    const formatValue = value ? value.replace(/[ -]/gi, '') : '';
+    // Looks for non-digits
+    const postalCodeRegex = new RegExp(/\D+/);
+    const error = postalCodeRegex.test(formatValue) || formatValue.length !== 5;
+    return { error, value: formatValue };
+  }
+  renderSearchResult() {
+    if (!this.loading && !this.error && this.showResult) {
+      return (h("div", { class: "search-results" }, h("div", { class: "text-row" }, h("h3", null, this.getTranslation("CLOSEST_DELIVERY_DATE", (this.marketwebLanguage || this.language)), " "), h("h2", { class: "delivery-date" }, this.zipCodeSearchResult.delivery)), h("div", { class: "text-row" }, h("h3", null, this.getTranslation("NEXT_DELIVERY_DATE", (this.marketwebLanguage || this.language)), " "), h("h2", { class: "delivery-date" }, this.zipCodeSearchResult.upcoming)), h("div", { class: "text-row" }, h("h3", null, this.getTranslation("ZIP_CODE", (this.marketwebLanguage || this.language))), h("h2", null, " ", this.zipCodeSearchResult.postalCode)), h("h3", null, this.zipCodeSearchResult.city)));
+    }
+  }
+  renderErrorMessage() {
+    if (this.error && !this.loading) {
+      return (h("p", { class: "error-text pn-tiny" }, this.getTranslation(this.errorMessage, (this.marketwebLanguage || this.language))));
+    }
+  }
+  render() {
+    return (h(Host, null, h("pn-search-field", { loading: this.loading, button: "none", placeholder: this.getTranslation("PLACEHOLDER_TEXT", (this.marketwebLanguage || this.language)), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
+  }
+  static get style() { return pnZipcodeSearchCss; }
+};
+PnZipCodeSearch = /*@__PURE__*/ proxyCustomElement(PnZipCodeSearch, [0, "pn-zipcode-search", {
+    "marketwebLanguage": [1, "marketweb-language"],
+    "language": [32],
+    "loading": [32],
+    "error": [32],
+    "errorMessage": [32],
+    "showResult": [32],
+    "zipCodeSearchResult": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-zipcode-search", "pn-button", "pn-icon", "pn-search-field", "pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-zipcode-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnZipCodeSearch);
+      }
+      break;
+    case "pn-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-search-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PnZipcodeSearch = PnZipCodeSearch;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnZipcodeSearch, defineCustomElement };

package/umd/modules/@postnord/web-components/esm/colors-7b5cb327.js

@@ -0,0 +1,40 @@
+const colors = {
+  "black": "#000000",
+  "gray900": "#2D2013",
+  "gray700": "#5E554A",
+  "gray400": "#969087",
+  "gray200": "#D3CECB",
+  "gray50": "#F3F2F2",
+  "gray25": "#F9F8F8",
+  "white": "#FFFFFF",
+  "blue900": "#0D234B",
+  "blue700": "#005D92",
+  "blue400": "#00A0D6",
+  "blue200": "#8EDDF9",
+  "blue50": "#E0F8FF",
+  "blue25": "#EFFBFF",
+  "coral900": "#500715",
+  "coral700": "#9B1C2E",
+  "coral400": "#F06365",
+  "coral200": "#FBC2C1",
+  "coral50": "#FDEFEE",
+  "orange900": "#4F1600",
+  "orange700": "#99290A",
+  "orange400": "#F89142",
+  "orange200": "#FFC8A3",
+  "orange50": "#FFF1E3",
+  "green900": "#002F24",
+  "green700": "#005E41",
+  "green400": "#5EC584",
+  "green200": "#ABE3BB",
+  "green50": "#DCF6E7",
+  "green25": "#EDFBF3",
+  "warning": "#A70707",
+  "electric-default": "#a505cc",
+  "electric-haze": "#fdf4ff",
+  "electric-faded": "#f3d8f8",
+  "electric-light": "#cf38f5",
+  "electric-dark": "#8600a5"
+};
+
+export { colors as c };

package/umd/modules/@postnord/web-components/esm/helpers-53c419b0.js

@@ -0,0 +1,158 @@
+const humanReadableFileSize = {
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024,
+  TB: 1024 * 1024 * 1024
+};
+const getBytesFromHumanReadableFileSize = function (sizeString) {
+  const fileSizeChecker = /(\d+\.?\d*)\s?([a-zA-Z]{2})?$/;
+  if (fileSizeChecker.test(sizeString)) {
+    const matches = sizeString.match(fileSizeChecker);
+    const unit = (matches[2] || "").toLocaleUpperCase();
+    const size = parseInt(matches[1]);
+    if (unit && humanReadableFileSize[unit]) {
+      const baseSize = humanReadableFileSize[unit];
+      return size * baseSize;
+    }
+    return size;
+  }
+  return 0;
+};
+const uuidv4 = function () {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (currentValue) {
+    const random = (Math.random() * 16) | 0, value = currentValue == "x" ? random : (random & 0x3) | 0x8;
+    return value.toString(16);
+  });
+};
+const isNumeric = function (str) {
+  if (typeof str === "number" ||
+    (typeof str === "string" && /^\d+$/.test(str))) {
+    return true;
+  }
+  return false;
+};
+const createDateOrNull = function (dateStr) {
+  if (isNumeric(dateStr)) {
+    return null;
+  }
+  const date = new Date(dateStr);
+  if (date.toString() === "Invalid Date") {
+    return null;
+  }
+  else {
+    return date;
+  }
+};
+const debounce = function (func, wait, immediate) {
+  let timeout;
+  return function () {
+    const context = this, args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+};
+const allowedLanguages = ["en", "sv", "da", "fi", "no"];
+const getMonthNamesByLanguage = function (language = "en") {
+  if (allowedLanguages.indexOf(language) === -1)
+    language = "en";
+  const monthLanguages = {
+    en: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    sv: [
+      "Januari",
+      "Februari",
+      "Mars",
+      "April",
+      "Maj",
+      "Juni",
+      "Juli",
+      "Augusti",
+      "September",
+      "Oktober",
+      "November",
+      "December"
+    ],
+    da: [
+      "Januar",
+      "Februar",
+      "Marts",
+      "April",
+      "Maj",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "December"
+    ],
+    fi: [
+      "Tammikuu",
+      "Helmikuu",
+      "Maaliskuu",
+      "Huhtikuu",
+      "Toukokuu",
+      "Kesäkuu",
+      "Heinäkuu",
+      "Elokuu",
+      "Syyskuu",
+      "Lokakuu",
+      "Marraskuu",
+      "Joulukuu"
+    ],
+    no: [
+      "Januar",
+      "Februar",
+      "Mars",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Desember"
+    ]
+  };
+  return monthLanguages[language];
+};
+const getDayNamesByLanguage = function (language = "en") {
+  if (allowedLanguages.indexOf(language) === -1)
+    language = "en";
+  const daysLanguages = {
+    en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    sv: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
+    da: ["Søn.", "Man.", "Tirs.", "Ons. ", "Tors. ", "Fre.", "Lør."],
+    fi: ["Su", "Ma", "Ti", "Ke", "To", "Pe", "La"],
+    no: ["Sø.", "Ma.", "Ti.", "On.", "To.", "Fr.", "Lø."]
+  };
+  return daysLanguages[language];
+};
+const computeMonths = function (date) {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  return (year * 12) + month;
+};
+
+export { computeMonths as a, getMonthNamesByLanguage as b, createDateOrNull as c, debounce as d, getDayNamesByLanguage as e, getBytesFromHumanReadableFileSize as g, uuidv4 as u };