@postnord/pn-marketweb-components 2.3.5 → 2.3.8

package/custom-elements/index.js

@@ -1,6 +1,120 @@
 import { HTMLElement, h, Host, getRenderingRef, forceUpdate, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+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]{padding:2.4rem 2.4rem 7rem 2.4rem;opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}pn-animated-tile .pn-animated-tile__toggle{position:absolute;bottom:2.4rem;right:2.4rem;padding:0.8rem;border-radius:50%;border:none;cursor:pointer}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.5s ease-in-out, -webkit-transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s;transition:opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s}.cat-animate.fade [slot=side-a]{opacity:0}.cat-animate.fade [slot=side-b]{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 pn-icon{-webkit-transition:-webkit-transform 0.45s ease-in-out;transition:-webkit-transform 0.45s ease-in-out;transition:transform 0.45s ease-in-out;transition:transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;-webkit-transition-delay:0.5s;transition-delay:0.5s}.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:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon{background-color:#FFFFFF}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon svg>path{fill:#00A0D6}[data-cat-theme=white] .pn-animated-tile__toggle:focus,[data-cat-theme=white] .pn-animated-tile__toggle:focus-visible{outline-color:#00A0D6}[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}";
+
+let PnAnimatedTile$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.toggled = false;
+    this.transitionClassName = '';
+    this.animateIcon = '';
+    this.onClickHandler = () => {
+      this.toggled = !this.toggled;
+    };
+  }
+  onToggledHandler() {
+    this.transitionClassName = classnames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
+    this.animateIcon = classnames({ 'animate': this.toggled, '': !this.toggled });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-animated-tile__container" }, h("div", { class: `pn-animated-tile__content cat-animate ${this.transitionClassName}` }, h("slot", { name: "side-a" }), h("slot", { name: "side-b" })), h("button", { class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`, onClick: this.onClickHandler }, h("pn-icon", { symbol: "plus" })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "toggled": ["onToggledHandler"]
+  }; }
+  static get style() { return pnAnimatedTileCss; }
+};
+
 const pnBonusProgressbarCss = "pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:-ms-inline-flexbox;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#E0F8FF}[theme=red] .bonusprogressbar-top-icon{background-color:#FBC2C1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5E554A}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:-ms-flexbox;display:flex;min-height:5em;-ms-flex-align:center;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00A0D6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#F06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#E0F8FF}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#FDEFEE}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00A0D6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#F06365}";
 
 let PnBonusProgressbar$1 = class extends HTMLElement {
@@ -153,37 +267,6 @@ let PnBreakpoints$1 = class extends HTMLElement {
   static get style() { return pnBreakpointsCss; }
 };
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
 //! moment.js
 //! version : 2.29.4
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
@@ -5861,8 +5944,8 @@ hooks.HTML5_FMT = {
 };
 
 const moment = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': hooks
+	__proto__: null,
+	'default': hooks
 });
 
 const require$$0 = /*@__PURE__*/getAugmentedNamespace(moment);
@@ -24472,7 +24555,7 @@ const appendToMap = (map, propName, value) => {
         items.push(value);
     }
 };
-const debounce = (fn, ms) => {
+const debounce$1 = (fn, ms) => {
     let timeoutId;
     return (...args) => {
         if (timeoutId) {
@@ -24495,7 +24578,7 @@ const debounce = (fn, ms) => {
  * Better leak in Edge than to be useless.
  */
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
+const cleanupElements = debounce$1((map) => {
     for (let key of map.keys()) {
         map.set(key, map.get(key).filter(isConnected));
     }
@@ -27880,6 +27963,317 @@ let PnMarketwebSiteheaderUnifiedLogin$1 = class extends HTMLElement {
   static get style() { return pnMarketwebSiteheaderUnifiedLoginCss; }
 };
 
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  }
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
+
+var debounce_1 = debounce;
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+const pnMultiFormfieldCss = ".pn-multi-formfield{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
+
+let PnMultiFormField = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.changed = createEvent(this, "changed", 7);
+    this.containerElm = null;
+    this.slotElm = null;
+    this.formFields = null;
+    this.formFieldTypes = ["input", "textarea", "select"];
+    this.additionalRowStartIndex = 2;
+    this.formRow = [];
+    this.formValues = [];
+    this.elementToCopy = null;
+    this.fieldsPerRowCount = 0;
+    this.newRowStartIndex = 2;
+    this.originalLabelNames = [];
+    this.value = [];
+    this.formFieldClassName = "form-control";
+    this.formFieldOuterParentClassName = "formelement";
+    this.formFieldEvent = (e) => {
+      if (e.target.matches(`.${this.formFieldClassName}`)) {
+        ["change", "keyup"].forEach((eventName) => {
+          const debouncedAddValue = debounce_1.debounce(this.updateValues.bind(this, e.target), 1000);
+          e.target.addEventListener(eventName, debouncedAddValue);
+        });
+      }
+    };
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  async init() {
+    this.addEventHandlers();
+    this.setDefaultValues();
+  }
+  addEventHandlers() {
+    this.hostElement.addEventListener("click", this.formFieldEvent);
+  }
+  setDefaultValues() {
+    var _a;
+    const labelElms = (_a = this.containerElm) === null || _a === void 0 ? void 0 : _a.querySelectorAll("label");
+    if (labelElms) {
+      this.fieldsPerRowCount = labelElms.length;
+      this.originalLabelNames = [...labelElms].map((label) => label.innerHTML);
+      const emptyValues = this.originalLabelNames.map((label) => {
+        const obj = { Name: label, Value: "" };
+        return obj;
+      });
+      this.formValues = [...emptyValues];
+      this.setHiddenValue();
+    }
+  }
+  setHiddenValue() {
+    var _a;
+    const hiddenField = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(".hiddenValue");
+    if (hiddenField) {
+      hiddenField.value = JSON.stringify(this.formValues);
+    }
+  }
+  updateValues(field, e) {
+    var _a;
+    e.preventDefault();
+    const slotElm = field.closest(".pn-multi-formfield-slot");
+    const isSlotParent = !!slotElm;
+    let containerElm = isSlotParent ? slotElm : field.closest(".generated-parent");
+    if (containerElm) {
+      const formFields = (_a = [...containerElm === null || containerElm === void 0 ? void 0 : containerElm.querySelectorAll(`.${this.formFieldClassName}`)]) === null || _a === void 0 ? void 0 : _a.filter((x) => this.formFieldTypes.includes(x.nodeName.toLowerCase()));
+      formFields === null || formFields === void 0 ? void 0 : formFields.map((elm) => {
+        const fieldElm = elm;
+        const closestLabelElm = fieldElm.closest("div").querySelector("label");
+        const label = (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.dataset.label) || (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.innerHTML);
+        const newItem = { Name: label, Value: fieldElm.value };
+        this.setFormValues(newItem);
+      });
+    }
+    this.setHiddenValue();
+  }
+  setFormValues(obj) {
+    const item = this.formValues.find((item) => item.Name === obj.Name);
+    if (item === undefined) {
+      this.formValues.push(obj);
+    }
+    if (item !== undefined) {
+      item.Value = obj.Value;
+    }
+    this.formValues = [...this.formValues];
+    this.value = this.formValues;
+    this.changed.emit(this.formValues);
+  }
+  addRow(e) {
+    if (e.type === "click") {
+      this.addFormElements();
+    }
+  }
+  addFormElements() {
+    if (!this.elementToCopy) {
+      const elm = this.hostElement.querySelector(".pn-multi-formfield");
+      const clone = elm.cloneNode(true);
+      this.elementToCopy = clone;
+    }
+    const setFormElements = [
+      ...this.elementToCopy.querySelectorAll(`.${this.formFieldOuterParentClassName}`),
+    ].map((elm) => {
+      const labelElm = elm.querySelector("label");
+      const fieldElm = elm.querySelector(`.${this.formFieldClassName}`);
+      const newId = this.generateUniqueId();
+      labelElm.dataset.label = `${labelElm.innerText} ${this.newRowStartIndex}`;
+      labelElm.setAttribute("for", newId);
+      fieldElm.setAttribute("id", newId);
+      fieldElm.setAttribute("name", `__${newId}`);
+      return elm;
+    });
+    this.newRowStartIndex++;
+    const parentId = this.generateUniqueId();
+    const parentElm = document.createElement("div");
+    parentElm.setAttribute("id", parentId);
+    parentElm.setAttribute("class", "generated-parent");
+    setFormElements.map((clone) => {
+      parentElm.innerHTML += clone.innerHTML;
+    });
+    parentElm.appendChild(this.createDeleteButton());
+    this.containerElm.appendChild(parentElm);
+  }
+  createDeleteButton() {
+    const buttonElm = document.createElement("pn-button");
+    buttonElm.onclick = (e) => this.deleteRow(e);
+    buttonElm.setAttribute("icon-only", "true");
+    buttonElm.setAttribute("icon", "minus");
+    buttonElm.setAttribute("appearance", "warning");
+    buttonElm.appendChild(document.createTextNode(`X`));
+    return buttonElm;
+  }
+  deleteRow(e) {
+    e.preventDefault();
+    const targetElm = e.currentTarget;
+    const parentElm = targetElm.parentElement;
+    const allFieldElms = parentElm.querySelectorAll(`.${this.formFieldClassName}`);
+    allFieldElms.forEach((elm) => {
+      elm.remove();
+    });
+    parentElm.remove();
+    this.newRowStartIndex--;
+    this.formValues = [...this.formValues.slice(0, this.fieldsPerRowCount)];
+    const allGeneratedElms = [...this.containerElm.querySelectorAll(".generated-parent")];
+    allGeneratedElms.map((elm, index) => {
+      const allLabelElms = [...elm.querySelectorAll("label")];
+      allLabelElms.map((labelElm) => {
+        const labelParts = this.getLabelParts(labelElm.dataset.label);
+        labelElm.dataset.label = this.getLabelName(labelParts[0], index);
+        const associatedField = labelElm.parentElement.querySelector(`.${this.formFieldClassName}`);
+        const updateItem = { Name: labelElm.dataset.label, Value: associatedField.value };
+        this.setFormValues(updateItem);
+      });
+    });
+    this.setHiddenValue();
+  }
+  getLabelParts(label) {
+    const part1 = label.substring(0, label.lastIndexOf(" "));
+    const part2 = label.substring(label.lastIndexOf(" ") + 1);
+    const parts = [part1, part2];
+    return parts;
+  }
+  getLabelName(name, index) {
+    return `${name} ${index + this.additionalRowStartIndex}`;
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => (this.containerElm = el), class: "pn-multi-formfield" }, h("div", { ref: (el) => (this.slotElm = el), class: "pn-multi-formfield-slot" }, h("slot", null))), h("pn-button", { "icon-only": "true", "aria-label": "Add", icon: "plus", onClick: (e) => this.addRow(e) }, "+")));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMultiFormfieldCss; }
+};
+
 const pnParcelTrackerCss = "pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading]{color:#005D92}.pn-spotlight__container__wrapper__content [slot=content]:has(pn-parcel-tracker){padding-left:2rem}pn-parcel-tracker{width:100%}pn-parcel-tracker .pn-parcel-tracker__container form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:1.6rem}pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{color:#005D92;font-weight:500;margin-bottom:0}@media screen and (max-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{display:none}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{font-size:2.4rem;font-weight:700}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{-ms-flex-positive:1;flex-grow:1;max-width:80%}@media screen and (min-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:50%}}@media screen and (min-width: 992px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:45%}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:35%}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input input{border-radius:6.4rem}";
 
 let PnSpotlight$2 = class extends HTMLElement {
@@ -29355,71 +29749,6 @@ let PnQuoteCard$1 = class extends HTMLElement {
   static get style() { return pnQuoteCardCss; }
 };
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
 const pnScrollCss = "pn-scroll .scroll-wrapper{-webkit-transition:all var(--transition-duration) ease-in-out 250ms;transition:all var(--transition-duration) ease-in-out 250ms}pn-scroll .scroll-wrapper.fade{opacity:0}pn-scroll .scroll-wrapper.fade.in-view{opacity:1}pn-scroll .scroll-wrapper.slide-up{-webkit-transform:translateY(50px);transform:translateY(50px)}pn-scroll .scroll-wrapper.slide-up.in-view{-webkit-transform:translateY(0);transform:translateY(0)}";
 
 const defaultIntersectionCallback = (entries, observer, shouldLoop = false) => {
@@ -29873,62 +30202,6 @@ let PnSiteSelectorItem$1 = class extends HTMLElement {
   static get style() { return pnSiteSelectorItemCss; }
 };
 
-var classnames = createCommonjsModule(function (module) {
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames() {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					classes.push(arg.toString());
-					continue;
-				}
-
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-});
-
 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}";
 
 let PnSpotlight$1 = class extends HTMLElement {
@@ -30091,6 +30364,7 @@ let PnTiletag = class extends HTMLElement {
   static get style() { return pnTitletagCss; }
 };
 
+const PnAnimatedTile = /*@__PURE__*/proxyCustomElement(PnAnimatedTile$1, [4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]}]);
 const PnBonusProgressbar = /*@__PURE__*/proxyCustomElement(PnBonusProgressbar$1, [4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"sumtext":[513],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]}]);
 const PnBonusProgressbarLevel = /*@__PURE__*/proxyCustomElement(PnBonusProgressbarLevel$1, [0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]);
 const PnBreakpoints = /*@__PURE__*/proxyCustomElement(PnBreakpoints$1, [0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]);
@@ -30123,6 +30397,7 @@ const PnMarketwebSiteheaderLoginMypageButton = /*@__PURE__*/proxyCustomElement(P
 const PnMarketwebSiteheaderLoginProfileselection = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderLoginProfileselection$1, [0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}]);
 const PnMarketwebSiteheaderSearch = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderSearch$1, [0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}]);
 const PnMarketwebSiteheaderUnifiedLogin = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderUnifiedLogin$1, [0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}]);
+const PnMultiFormfield = /*@__PURE__*/proxyCustomElement(PnMultiFormField, [4,"pn-multi-formfield",{"value":[1040],"formFieldClassName":[1,"form-field-class-name"],"formFieldOuterParentClassName":[1,"form-field-outer-parent-class-name"],"formRow":[32],"formValues":[32],"elementToCopy":[32],"fieldsPerRowCount":[32],"newRowStartIndex":[32],"originalLabelNames":[32]}]);
 const PnParcelTracker = /*@__PURE__*/proxyCustomElement(PnSpotlight$2, [0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]);
 const PnPexPricefinder = /*@__PURE__*/proxyCustomElement(PnPexPricefinder$1, [0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]);
 const PnProductCard = /*@__PURE__*/proxyCustomElement(PnProductCard$1, [4,"pn-product-card"]);
@@ -30167,7 +30442,8 @@ const PnTitletag = /*@__PURE__*/proxyCustomElement(PnTiletag, [4,"pn-titletag",{
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      PnBonusProgressbar,
+      PnAnimatedTile,
+  PnBonusProgressbar,
   PnBonusProgressbarLevel,
   PnBreakpoints,
   PnChart,
@@ -30199,6 +30475,7 @@ const defineCustomElements = (opts) => {
   PnMarketwebSiteheaderLoginProfileselection,
   PnMarketwebSiteheaderSearch,
   PnMarketwebSiteheaderUnifiedLogin,
+  PnMultiFormfield,
   PnParcelTracker,
   PnPexPricefinder,
   PnProductCard,
@@ -30248,4 +30525,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { PnBonusProgressbar, PnBonusProgressbarLevel, PnBreakpoints, PnChart, PnChartsCard, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnLineShape, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginButton, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginMypageButton, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnMarketwebSiteheaderUnifiedLogin, PnParcelTracker, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioFindprice, PnProxioFindpriceResult, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnQuickCta, PnQuoteCard, PnScroll, PnShare, PnShareItem, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnSpotlight, PnStatsInfo, PnStatsInfoData, PnTeaserCard, PnTitletag, defineCustomElements };
+export { PnAnimatedTile, PnBonusProgressbar, PnBonusProgressbarLevel, PnBreakpoints, PnChart, PnChartsCard, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnLineShape, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginButton, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginMypageButton, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnMarketwebSiteheaderUnifiedLogin, PnMultiFormfield, PnParcelTracker, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioFindprice, PnProxioFindpriceResult, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnQuickCta, PnQuoteCard, PnScroll, PnShare, PnShareItem, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnSpotlight, PnStatsInfo, PnStatsInfoData, PnTeaserCard, PnTitletag, defineCustomElements };