@postnord/pn-marketweb-components 2.4.21 → 2.4.23

package/components/pn-address-autofill.js

@@ -0,0 +1,359 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const pnAddressAutofillCss = "pn-address-autofill pn-marketweb-input{width:50%}pn-address-autofill .input-container-row{display:-ms-flexbox;display:flex;gap:1rem;margin-bottom:1rem}pn-address-autofill .label-container{color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-address-autofill .autocomplete-items{position:absolute;border-radius:0.8rem;border:0.1rem solid #5E554A;width:100%;max-height:30rem;overflow-y:auto}pn-address-autofill .autocomplete-items:hover,pn-address-autofill .autocomplete-items :focus{border:0.1rem solid #00A0D6}pn-address-autofill .autocomplete-items div{padding:1.6rem;cursor:pointer;background-color:#fff;border:0.1rem solid transparent}pn-address-autofill .autocomplete-items div:first-child{border-radius:0.8rem 0.8rem 0 0}pn-address-autofill .autocomplete-items div:last-child{border-radius:0 0 0.8rem 0.8rem}pn-address-autofill .autocomplete-items div:hover{background-color:#e0f8ff}pn-address-autofill .autocomplete-items .autocomplete-active{background-color:#e0f8ff}";
+
+const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.addresscomplete = createEvent(this, "addresscomplete", 7);
+    this.pnInputPostalCode = null;
+    this.pnInputCity = null;
+    this.pnInputStreetAddress = null;
+    this.pnInputStreetNumber = null;
+    this.postalCodeInputField = null;
+    this.streetAddressInputField = null;
+    this.streetNumberInputField = null;
+    this.pnInputHiddenValue = null;
+    this.endpointPath = '/api/location/get-by-location';
+    this._postalCodeProps = null;
+    this._cityProps = null;
+    this._streetAddressProps = null;
+    this._streetNumberProps = null;
+    this.fetchHelper = new FetchHelper('PostalCodeCityAutofill');
+    this.filterStreetNames = (data) => {
+      const addresses = [];
+      this.streetAdressArr = null;
+      data.addresses.forEach(item => {
+        if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {
+          addresses.push(item.street);
+        }
+      });
+      this.streetAdressArr = addresses;
+    };
+    this.filterStreetNumbers = (data) => {
+      const streetNumbersResult = [];
+      data.addresses.forEach(item => {
+        if (item.postalCode.postalCode === this.postalCode) {
+          const { numberFrom, numberTo } = item;
+          const from = parseInt(numberFrom);
+          const to = parseInt(numberTo);
+          for (let i = from; i <= to; i++) {
+            const nrString = i.toString();
+            if (!streetNumbersResult.includes(nrString)) {
+              streetNumbersResult.push(i.toString());
+            }
+          }
+        }
+      });
+      this.streetNumberArr = streetNumbersResult;
+    };
+    this.market = null;
+    this.environment = null;
+    this.endpoint = null;
+    this.cache = true;
+    this.countryCode = null;
+    this.postalCodeProps = null;
+    this.cityProps = null;
+    this.streetAddressProps = null;
+    this.streetNumberProps = null;
+    this.streetAdressArr = null;
+    this.streetNumberArr = null;
+    this.city = null;
+    this.postalCode = null;
+    this.streetAddress = null;
+    this.streetNumber = null;
+    this.fullAddress = null;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this._postalCodeProps = this.setProps(this.postalCodeProps);
+    this._cityProps = this.setProps(this.cityProps);
+    this._streetAddressProps = this.setProps(this.streetAddressProps);
+    this._streetNumberProps = this.setProps(this.streetNumberProps);
+  }
+  setProps(props) {
+    if (typeof props === 'string') {
+      return JSON.parse(props);
+    }
+    else {
+      return props;
+    }
+  }
+  componentDidLoad() {
+    this.postalCodeInputField = this.pnInputPostalCode.querySelector('input');
+    this.streetAddressInputField = this.pnInputStreetAddress.querySelector('input');
+    this.streetNumberInputField = this.pnInputStreetNumber.querySelector('input');
+    this.addEventHandlers();
+  }
+  async setInitialValues(href = window.location.href) {
+    var _a;
+    const marketWebContextService = new MarketWebContextService(href);
+    if (!this.environment) {
+      this.environment = await marketWebContextService.getEnvironmentName();
+    }
+    if (!this.endpoint && ((_a = this.environment) === null || _a === void 0 ? void 0 : _a.indexOf('local')) === -1) {
+      this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);
+    }
+    if (!this.endpoint) {
+      this.endpoint = '';
+    }
+  }
+  addEventHandlers() {
+    const postalCodeSearch = debounce_1.debounce(this.fetchData.bind(this, this.postalCodeInputField), 1000);
+    this.postalCodeInputField.addEventListener('keyup', postalCodeSearch);
+    this.streetAddressInputField.addEventListener('keyup', this.handleStreetAddressDropdown.bind(this));
+    this.streetNumberInputField.addEventListener('focus', this.handleStreetNumberDropdown.bind(this));
+    this.addFormFieldEvent();
+  }
+  addFormFieldEvent() {
+    const allInputs = this.hostElement.querySelectorAll('input');
+    allInputs.forEach(element => {
+      ['keyup', 'change'].forEach(eventName => {
+        const debounceUpdate = debounce_1.debounce(this.updateHiddenValue.bind(this), 1000);
+        element.addEventListener(eventName, debounceUpdate);
+      });
+    });
+  }
+  updateHiddenValue(e) {
+    if (e.target === this.streetNumberInputField) {
+      this.streetNumber = this.streetNumberInputField.value;
+    }
+    if (this.postalCode && this.city && this.streetAddress && this.streetNumber) {
+      this.fullAddress = `${this.streetAddress} ${this.streetNumber}, ${this.city} ${this.postalCode}`;
+    }
+    else {
+      this.fullAddress = '';
+    }
+    this.addresscomplete.emit(this.fullAddress);
+  }
+  async fetchData(field, e) {
+    var _a;
+    if (e) {
+      e.preventDefault();
+      if (e.key === 'Tab') {
+        if (this.city) {
+          return;
+        }
+      }
+    }
+    let query = '';
+    const isPostalCodeSearch = e && e.target === this.postalCodeInputField;
+    const isStreetAddressSearch = field === this.streetAddressInputField && this.city && this.city.length;
+    const isStreetNumberSearch = field === this.streetNumberInputField && this.city && this.city.length && this.streetAddress && this.streetAddress.length;
+    if (isPostalCodeSearch) {
+      query = this.postalCodeInputField.value;
+      this.streetAdressArr = null;
+      this.streetAddressInputField.value = '';
+      this.streetNumberArr = null;
+      this.streetNumberInputField.value = '';
+      this.city = null;
+      this.streetAddress = null;
+      this.streetNumber = null;
+    }
+    if (isStreetAddressSearch) {
+      query = `${this.streetAddressInputField.value}, ${this.city}`;
+      this.streetNumberArr = null;
+      this.streetNumberInputField.value = '';
+      this.streetNumber = null;
+    }
+    if (isStreetNumberSearch) {
+      this.streetAdressArr = null;
+      query = `${this.streetAddress}, ${this.city}`;
+    }
+    if (query.length > 0) {
+      const endpointBase = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
+      const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&query=${query}`;
+      const data = (await this.fetchHelper.fetchJson(fetchUrl, {
+        mode: 'cors',
+      }, this.cache));
+      if (data) {
+        if (isPostalCodeSearch) {
+          this.city = data.postalCodes ? (_a = data.postalCodes[0]) === null || _a === void 0 ? void 0 : _a.postalCity : null;
+        }
+        if (isStreetAddressSearch && data.addresses) {
+          this.postalCode = this.postalCodeInputField.value;
+          this.filterStreetNames(data);
+        }
+        if (isStreetNumberSearch && data.addresses) {
+          this.filterStreetNumbers(data);
+        }
+      }
+    }
+  }
+  async handleStreetAddressDropdown(e) {
+    const target = e.target;
+    if (target === this.streetAddressInputField && target.value.length) {
+      if (!this.streetAdressArr || !this.streetAdressArr.length) {
+        await this.fetchData(this.streetAddressInputField, null);
+      }
+    }
+    if (!target.value || !target.value.length) {
+      this.streetAdressArr = null;
+    }
+    if (this.streetAdressArr && this.streetAdressArr.length) {
+      this.autoComplete(e, this.streetAdressArr);
+    }
+  }
+  async handleStreetNumberDropdown(e) {
+    e.preventDefault();
+    const target = e.target;
+    if (target === this.streetNumberInputField) {
+      if (!this.streetNumberArr || !this.streetNumberArr.length) {
+        await this.fetchData(this.streetNumberInputField, null);
+      }
+      if (this.streetNumberArr) {
+        this.autoComplete(e, this.streetNumberArr);
+      }
+    }
+  }
+  autoComplete(e, arr) {
+    const inputField = e.target;
+    if (arr.length < 1) {
+      return;
+    }
+    let currentFocus = 0;
+    inputField.addEventListener('input', () => {
+      const val = inputField.value;
+      this.closeAllLists(inputField);
+      if (!val) {
+        return;
+      }
+      currentFocus = -1;
+      let list = document.createElement('div');
+      list.setAttribute('id', 'autocomplete-list' + inputField.name);
+      list.setAttribute('class', 'autocomplete-items');
+      inputField.parentElement.appendChild(list);
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].substring(0, val.length).toUpperCase() == val.toUpperCase()) {
+          let option = document.createElement('div');
+          option.innerHTML = '<strong>' + arr[i].substring(0, val.length) + '</strong>';
+          option.innerHTML += arr[i].substring(val.length);
+          option.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+          option.addEventListener('click', clickEvent => {
+            const inputParrent = inputField.closest('pn-marketweb-input');
+            let eventTarget = clickEvent.target;
+            if (eventTarget.nodeName === 'STRONG') {
+              eventTarget = eventTarget.parentElement;
+            }
+            inputParrent.value = eventTarget.getElementsByTagName('input')[0].value;
+            if (inputField === this.streetNumberInputField) {
+              this.streetNumber = inputParrent.value;
+            }
+            if (inputField === this.streetAddressInputField) {
+              this.streetAddress = inputParrent.value;
+            }
+            this.closeAllLists(clickEvent.target);
+            inputField.focus();
+          });
+          list.appendChild(option);
+        }
+      }
+    });
+    inputField.addEventListener('keydown', keydownEvent => {
+      const listElement = document.getElementById('autocomplete-list' + inputField.name);
+      let element;
+      if (listElement) {
+        element = listElement.getElementsByTagName('div');
+      }
+      else {
+        element = listElement;
+      }
+      //If arrow DOWN key is pressed
+      if (keydownEvent.keyCode == 40) {
+        currentFocus++;
+        this.addActive(element, currentFocus);
+      }
+      //If the arrow UP key is pressed
+      if (keydownEvent.keyCode == 38) {
+        currentFocus--;
+        this.addActive(element, currentFocus);
+      }
+      //If the ENTER key is pressed
+      if (keydownEvent.keyCode == 13) {
+        keydownEvent.preventDefault();
+        if (currentFocus > -1) {
+          if (element) {
+            element[currentFocus].click();
+          }
+        }
+      }
+    });
+  }
+  //close all autocomplete lists in the document, except the one passed as an argument:
+  closeAllLists(elmnt) {
+    const lists = document.getElementsByClassName('autocomplete-items');
+    for (let i = 0; i < lists.length; i++) {
+      if (elmnt != lists[i]) {
+        lists[i].parentNode.removeChild(lists[i]);
+      }
+    }
+  }
+  //a function to classify an item as "active":
+  addActive(elmnt, currentFocus) {
+    if (!elmnt)
+      return;
+    this.removeActive(elmnt);
+    if (currentFocus >= elmnt.length)
+      currentFocus = 0;
+    if (currentFocus < 0)
+      currentFocus = elmnt.length - 1;
+    elmnt[currentFocus].classList.add('autocomplete-active');
+  }
+  //a function to remove the "active" class from all autocomplete items:
+  removeActive(elmnt) {
+    for (let i = 0; i < elmnt.length; i++) {
+      elmnt[i].classList.remove('autocomplete-active');
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    return (h(Host, { class: "pn-address-autofill" }, ((_a = this._postalCodeProps) === null || _a === void 0 ? void 0 : _a.postalCodeCityLabel) ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel}`))) : null, h("div", { class: "input-container-row" }, h("pn-marketweb-input", { type: "text", name: (_b = this._postalCodeProps) === null || _b === void 0 ? void 0 : _b.postalCodeInputName, required: (_c = this._postalCodeProps) === null || _c === void 0 ? void 0 : _c.postalCodeInputRequired, placeholder: (_d = this._postalCodeProps) === null || _d === void 0 ? void 0 : _d.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: (_e = this._postalCodeProps) === null || _e === void 0 ? void 0 : _e.postalCodeInputHelpertext }), h("pn-marketweb-input", { type: "text", name: (_f = this._cityProps) === null || _f === void 0 ? void 0 : _f.cityInputName, disabled: true, value: this.city, placeholder: (_g = this._cityProps) === null || _g === void 0 ? void 0 : _g.cityInputPlaceholder, autocomplete: "off", helpertext: (_h = this._cityProps) === null || _h === void 0 ? void 0 : _h.cityInputHelpertext })), ((_j = this._streetAddressProps) === null || _j === void 0 ? void 0 : _j.streetAddressNumberLabel) ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel}`))) : null, h("div", { class: "input-container-row" }, h("pn-marketweb-input", { type: "text", name: (_k = this._streetAddressProps) === null || _k === void 0 ? void 0 : _k.streetAddressInputName, required: (_l = this._streetAddressProps) === null || _l === void 0 ? void 0 : _l.streetAddressInputRequired, value: this.streetAddress, placeholder: (_m = this._streetAddressProps) === null || _m === void 0 ? void 0 : _m.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: (_o = this._streetAddressProps) === null || _o === void 0 ? void 0 : _o.streetAddressInputHelpertext }), h("pn-marketweb-input", { type: "text", name: (_p = this._streetNumberProps) === null || _p === void 0 ? void 0 : _p.streetNumberInputName, required: (_q = this._streetNumberProps) === null || _q === void 0 ? void 0 : _q.streetNumberInputRequired, value: this.streetNumber, placeholder: (_r = this._streetNumberProps) === null || _r === void 0 ? void 0 : _r.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: (_s = this._streetNumberProps) === null || _s === void 0 ? void 0 : _s.streetNumberInputHelpertext }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnAddressAutofillCss; }
+}, [0, "pn-address-autofill", {
+    "market": [1537],
+    "environment": [1537],
+    "endpoint": [1],
+    "cache": [4],
+    "countryCode": [1, "country-code"],
+    "postalCodeProps": [1, "postal-code-props"],
+    "cityProps": [1, "city-props"],
+    "streetAddressProps": [1, "street-address-props"],
+    "streetNumberProps": [1, "street-number-props"],
+    "streetAdressArr": [32],
+    "streetNumberArr": [32],
+    "city": [32],
+    "postalCode": [32],
+    "streetAddress": [32],
+    "streetNumber": [32],
+    "fullAddress": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-address-autofill", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-address-autofill":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnAddressAutofill$1);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnAddressAutofill = PnAddressAutofill$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnAddressAutofill, defineCustomElement };

package/components/pn-animated-tile.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classnames } from './index3.js';
 
 const pnAnimatedTileCss = "pn-animated-tile .pn-animated-tile__container{position:relative;border-radius:2.4rem;height:56rem;cursor:default}pn-animated-tile .pn-animated-tile__content{position:relative;display:-ms-flexbox;display:flex;height:100%;width:100%;background-color:transparent}pn-animated-tile [slot=side-a],pn-animated-tile [slot=side-b]{position:absolute;-ms-flex-item-align:stretch;align-self:stretch;top:0;left:0;width:100%;height:100%}pn-animated-tile [slot=side-a]{padding:0;opacity:1}pn-animated-tile [slot=side-b]{z-index:-1;padding:2.4rem 2.4rem 7rem 2.4rem;opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}pn-animated-tile .pn-animated-tile__toggle{z-index:2;position:absolute;bottom:2.4rem;right:2.4rem;padding:0.8rem;border-radius:50%;border:none;cursor:pointer;background-color:#FFFFFF;-webkit-transition:background-color 0.45s ease-in-out;transition:background-color 0.45s ease-in-out}pn-animated-tile .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF;-webkit-transition:background-color 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out 0.5s;transition:background-color 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out 0.5s;transition:background-color 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s;transition:background-color 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s, -webkit-transform 0.45s ease-in-out 0.5s}pn-animated-tile .pn-animated-tile__toggle:hover{background-color:#e9e6e5}pn-animated-tile .pn-animated-tile__toggle:hover pn-icon{background-color:#e9e6e5}pn-animated-tile .button-tooltip{display:none}.cat-animate [slot=side-a],.cat-animate [slot=side-b]{-webkit-transition:opacity 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out 0.5s;transition:opacity 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out 0.5s;transition:opacity 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s;transition:opacity 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s, -webkit-transform 0.45s ease-in-out 0.5s}.cat-animate.fade [slot=side-a]{opacity:0;z-index:-1}.cat-animate.fade [slot=side-b]{z-index:1;opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:0.5s;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-a]{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-b]{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}.cat-animate.toggle.animate pn-icon{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-cat-theme=white] .pn-animated-tile__container{background-color:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle{background-color:#00A0D6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon{background-color:#00A0D6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon svg>path{fill:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle:hover{background-color:#005D92}[data-cat-theme=white] .pn-animated-tile__toggle:hover pn-icon{background-color:#005D92}[data-cat-theme=white] .pn-animated-tile__toggle:focus,[data-cat-theme=white] .pn-animated-tile__toggle:focus-visible{outline-color:#005D92}[data-cat-theme=coral400] .pn-animated-tile__container{background-color:#F06365}[data-cat-theme=coral400] .pn-animated-tile__toggle{background-color:#FFFFFF}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon svg>path{fill:#F06365}[data-cat-theme=coral400] .pn-animated-tile__toggle:focus,[data-cat-theme=coral400] .pn-animated-tile__toggle:focus-visible{outline-color:#F06365}[data-cat-theme=private] .pn-animated-tile__container{background-color:#00A0D6}[data-cat-theme=private] .pn-animated-tile__toggle{background-color:#FFFFFF}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon svg>path{fill:#00A0D6}[data-cat-theme=private] .pn-animated-tile__toggle:focus,[data-cat-theme=private] .pn-animated-tile__toggle:focus-visible{outline-color:#00A0D6}[data-cat-theme=business] .pn-animated-tile__container{background-color:#0D234B}[data-cat-theme=business] .pn-animated-tile__toggle{background-color:#FFFFFF}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon svg>path{fill:#0D234B}[data-cat-theme=business] .pn-animated-tile__toggle:focus,[data-cat-theme=business] .pn-animated-tile__toggle:focus-visible{outline-color:#0D234B}[data-cat-theme=hybrid] .pn-animated-tile__container{background-color:#e9e6e5}[data-cat-theme=hybrid] .pn-animated-tile__toggle{background-color:#FFFFFF}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon svg>path{fill:#005D92}[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus,[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus-visible{outline-color:#005D92}[data-cat-firstpage-only=true] [slot=side-b],[data-cat-firstpage-only=true] .pn-animated-tile__toggle{display:none}";
 

package/components/pn-dropdown-choice-adds-row.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
 
 const pnDropdownChoiceAddsRowCss = "pn-dropdown-choice-adds-row{gap:1rem}pn-dropdown-choice-adds-row .dropdown-choice-form-row{display:-ms-flexbox;display:flex;gap:1rem}pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:50%;margin-bottom:1rem}@media only screen and (max-width: 640px){pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:100%}}pn-dropdown-choice-adds-row .pn-dropdown-choice-table{width:100%;border-spacing:0rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th{text-align:left;padding:1rem 0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th label{color:#5E554A;font-size:1.4rem;font-weight:400}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--name{width:40%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--dropdown{width:40%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--input{width:10%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--delete{width:10%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody td{padding:0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody tr:nth-child(even){background-color:#effbff}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody .tr-delete{text-align:center}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td small{color:#A70707;vertical-align:middle}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td pn-icon{margin-right:0.25em;vertical-align:middle}";

package/components/pn-marketweb-input2.js

@@ -7,23 +7,23 @@ const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     super();
     this.__registerHost();
     this.disabled = false;
-    this.error = '';
+    this.error = "";
     this.invalid = false;
-    this.helpertext = '';
-    this.label = '';
-    this.placeholder = '';
+    this.helpertext = "";
+    this.label = "";
+    this.placeholder = "";
     this.inputid = `${Math.random()}`;
-    this.name = '';
-    this.required = null;
-    this.type = 'text';
-    this.autocomplete = '';
+    this.name = "";
+    this.required = false;
+    this.type = "text";
+    this.autocomplete = "";
     this.valid = null;
-    this.value = '';
-    this.maxlength = '';
-    this.min = '';
-    this.max = '';
-    this.step = '';
-    this.pattern = '';
+    this.value = "";
+    this.maxlength = "";
+    this.min = "";
+    this.max = "";
+    this.step = "";
+    this.pattern = "";
     this.showText = false;
   }
   getTextMessage() {
@@ -37,8 +37,21 @@ const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.showText = !this.showText;
   }
   getInputType() {
-    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];
-    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+    let types = [
+      "text",
+      "password",
+      "url",
+      "tel",
+      "search",
+      "number",
+      "email",
+      "date",
+      "datetime-local",
+      "month",
+      "week",
+      "time",
+    ];
+    return types.includes(this.type) && !this.showText ? this.type : "text";
   }
   setVal(e) {
     var _a;
@@ -46,21 +59,19 @@ const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.value = target.value;
   }
   getClassNames() {
-    let classNames = 'pn-input ';
+    let classNames = "pn-input ";
     if (this.error.length > 0 || this.invalid)
-      classNames += 'error ';
+      classNames += "error ";
     if (this.valid)
-      classNames += 'valid ';
-    if (this.type === 'password')
-      classNames += 'password ';
+      classNames += "valid ";
+    if (this.type === "password")
+      classNames += "password ";
     if (this.error || this.invalid || this.valid)
-      classNames += 'icon ';
+      classNames += "icon ";
     return classNames;
   }
   render() {
-    return (h(Host, { class: this.getClassNames() }, (this.label || this.maxlength) &&
-      h("div", { class: "label-container" }, this.label && h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)), h("div", { class: "input-container" }, h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: (this.min ? this.min : null), max: (this.max ? this.max : null), step: (this.step ? this.step : null), pattern: (this.pattern ? this.pattern : null) }), h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && h("button", { onClick: () => this.toggleTextVisibility() }, "Show")), this.getTextMessage() &&
-      h("small", null, this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage())));
+    return (h(Host, { class: this.getClassNames() }, (this.label || this.maxlength) && (h("div", { class: "label-container" }, this.label && h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && (h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))), h("div", { class: "input-container" }, h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: this.min ? this.min : null, max: this.max ? this.max : null, step: this.step ? this.step : null, pattern: this.pattern ? this.pattern : null }), h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === "password" && !this.disabled && (h("button", { onClick: () => this.toggleTextVisibility() }, "Show"))), this.getTextMessage() && (h("small", null, this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage()))));
   }
   static get style() { return pnMarketwebInputCss; }
 }, [0, "pn-marketweb-input", {

package/components/pn-marketweb-sitefooter.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { d as defineCustomElement$4 } from './pn-site-footer2.js';
 import { d as defineCustomElement$3 } from './pn-site-footer-col2.js';
 import { d as defineCustomElement$2 } from './pn-swan2.js';
@@ -13,9 +13,9 @@ const getSocialMediaIconsByType = (linkType = '', fill = '#005D92') => {
       </svg>`;
     case 'twitter':
       return `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="28" cy="28" r="28" fill="${fill}" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M41.3337 19.8587C40.3525 20.2871 39.2981 20.5766 38.1914 20.7068C39.321 20.0402 40.1884 18.9847 40.5969 17.7272C39.5399 18.3443 38.369 18.7925 37.1228 19.0341C36.1248 17.9874 34.7029 17.3333 33.1294 17.3333C30.1079 17.3333 27.6583 19.7446 27.6583 22.7188C27.6583 23.1409 27.7067 23.552 27.8 23.9461C23.253 23.7216 19.2218 21.5775 16.5234 18.3191C16.0525 19.1146 15.7827 20.0397 15.7827 21.0267C15.7827 22.8951 16.7486 24.5436 18.2166 25.5093C17.3197 25.4814 16.4762 25.2391 15.7385 24.8358C15.7381 24.8582 15.7381 24.8808 15.7381 24.9035C15.7381 27.5129 17.6239 29.6896 20.1267 30.1843C19.6676 30.3074 19.1843 30.3732 18.6853 30.3732C18.3328 30.3732 17.99 30.3395 17.656 30.2766C18.3522 32.4163 20.3726 33.9733 22.7667 34.0168C20.8943 35.4612 18.5353 36.3222 15.9721 36.3222C15.5305 36.3222 15.095 36.2968 14.667 36.2471C17.0881 37.7751 19.9639 38.6666 23.0535 38.6666C33.1166 38.6666 38.6195 30.4602 38.6195 23.3433C38.6195 23.1098 38.6142 22.8776 38.6037 22.6466C39.6725 21.8873 40.6002 20.9387 41.3337 19.8587Z" fill="white" />
-      </svg>`;
+              <circle cx="28" cy="28" r="28" fill="#005D92"/>
+              <path d="M34.8996 17.5H38.5996L30.5996 26.4L39.9996 38.6H32.5996L26.7996 31.2L20.1996 38.6H16.4996L25.0996 29L16.0996 17.5H23.5996L28.7996 24.2L34.8996 17.5ZM33.5996 36.4H35.5996L22.4996 19.5H20.2996L33.5996 36.4Z" fill="white"/>
+              </svg>`;
     case 'linkedin':
       return `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="28" cy="28" r="28" fill="${fill}" />

package/components/pn-marketweb-siteheader.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { s as state, d as defineCustomElement$9 } from './pn-marketweb-siteheader-login-linklist2.js';
 import { d as defineCustomElement$h } from './pn-language-selector2.js';
 import { d as defineCustomElement$g } from './pn-language-selector-option2.js';

package/components/pn-multi-formfield.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { v as v4 } from './v4.js';
 
 const pnMultiFormfieldCss = ".pn-multi-formfield{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";

package/components/pn-proxio-findprice.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { c as createStore } from './index4.js';
 import { d as defineCustomElement$8 } from './pn-choice-button2.js';
 import { d as defineCustomElement$7 } from './pn-proxio-findprice-result2.js';

package/components/pn-proxio-pricegroup.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
+import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { t as translations } from './translations.js';
 import { d as defineCustomElement$6 } from './pn-proxio-productcard2.js';
 import { d as defineCustomElement$5 } from './pn-proxio-productcard-description2.js';

package/components/pn-spotlight.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classnames } from './index3.js';
 
 const pnSpotlightCss = "pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0D234B}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:-ms-flexbox;display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:right;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#DCF6E7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#DCF6E7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#FDEFEE}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#FDEFEE}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#EFFBFF}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#EFFBFF}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0D234B}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00A0D6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";
 

package/esm/index-ee44c065.js

@@ -2101,6 +2101,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
+        case 'pn-address-autofill':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-address-autofill.entry.js').then(processMod, consoleError);
         case 'pn-animated-tile':
           return import(
             /* webpackMode: "lazy" */
@@ -2321,14 +2325,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-choice-button.entry.js').then(processMod, consoleError);
-        case 'pn-marketweb-input':
-          return import(
-            /* webpackMode: "lazy" */
-            './pn-marketweb-input.entry.js').then(processMod, consoleError);
         case 'pn-proxio-productcard_4':
           return import(
             /* webpackMode: "lazy" */
             './pn-proxio-productcard_4.entry.js').then(processMod, consoleError);
+        case 'pn-marketweb-input':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-marketweb-input.entry.js').then(processMod, consoleError);
         case 'pn-marketweb-siteheader-login-linklist':
           return import(
             /* webpackMode: "lazy" */