@postnord/pn-marketweb-components 2.4.17 → 2.4.19

package/components/pn-app-banner.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnAppBannerCss = "pn-app-banner .pn-app-banner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:1rem;background-color:#F3F2F2;padding:1rem;margin:0 auto}pn-app-banner .pn-app-banner__sticky{position:relative;top:0;width:100%;z-index:999}pn-app-banner .icon-close:hover{cursor:pointer}pn-app-banner .pn-app-banner__icon{height:3.2rem}pn-app-banner .pn-app-banner__text{font-size:1.2rem;line-height:1}pn-app-banner .pn-app-banner__text span{font-weight:600}pn-app-banner .pn-app-banner__cta{margin-left:auto}pn-app-banner[data-is-closed=true]{display:none}";
+
+const PnAppBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.handleOnClose = () => {
+      this.isClosed = true;
+    };
+    this.appName = undefined;
+    this.appDescription = undefined;
+    this.ctaText = undefined;
+    this.appleStoreLink = undefined;
+    this.googleStoreLink = undefined;
+    this.isClosed = false;
+    this.storeLink = undefined;
+  }
+  detectDeviceAndSetStoreLink() {
+    const userAgent = navigator.userAgent;
+    if (userAgent.match(/Android/i)) {
+      this.storeLink = this.googleStoreLink;
+    }
+    else if (userAgent.match(/iPhone|iPad|iPod/i)) {
+      this.storeLink = this.appleStoreLink;
+    }
+    else {
+      this.storeLink = null;
+      this.isClosed = true; // -> data-is-closed = true
+    }
+  }
+  componentWillLoad() {
+    this.detectDeviceAndSetStoreLink();
+  }
+  render() {
+    return (h(Host, { "data-is-closed": this.isClosed ? 'true' : 'false' }, h("div", { class: "pn-app-banner__wrapper pn-app-banner__sticky" }, h("div", { class: "icon-close", onClick: this.handleOnClose }, h("pn-icon", { symbol: "close-small", small: "false", color: "black" })), h("div", { class: "pn-app-banner__icon" }, h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_17800_45416)" }, h("path", { d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#F18D8D" }), h("mask", { id: "mask0_17800_45416", style: { 'mask-type': 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "32", height: "32" }, h("path", { d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#0D234B" })), h("g", { mask: "url(#mask0_17800_45416)" }, h("path", { d: "M23.875 0H8.125C3.63769 0 0 3.63769 0 8.125V23.875C0 28.3623 3.63769 32 8.125 32H23.875C28.3623 32 32 28.3623 32 23.875V8.125C32 3.63769 28.3623 0 23.875 0Z", fill: "#0D234B" }), h("path", { d: "M50.8125 14.1562H18.8125V46.1562H50.8125V14.1562Z", fill: "url(#paint0_linear_17800_45416)" }), h("path", { d: "M2.09375 31.375C2.09375 15.2379 15.1754 2.15625 31.3125 2.15625H31.9844V31.9844H2.09998C2.09583 31.7819 2.09375 31.5788 2.09375 31.375Z", fill: "#00A0D6" }), h("g", { filter: "url(#filter0_d_17800_45416)" }, h("path", { d: "M7.40625 11.8062C7.40625 10.2661 7.40625 9.49603 7.70597 8.90778C7.96963 8.39034 8.39034 7.96963 8.90778 7.70597C9.49603 7.40625 10.2661 7.40625 11.8062 7.40625H20.1938C21.7339 7.40625 22.504 7.40625 23.0922 7.70597C23.6097 7.96963 24.0304 8.39034 24.294 8.90778C24.5938 9.49603 24.5938 10.2661 24.5938 11.8062V20.1938C24.5938 21.7339 24.5938 22.504 24.294 23.0922C24.0304 23.6097 23.6097 24.0304 23.0922 24.294C22.504 24.5938 21.7339 24.5938 20.1938 24.5938H11.8062C10.2661 24.5938 9.49603 24.5938 8.90778 24.294C8.39034 24.0304 7.96963 23.6097 7.70597 23.0922C7.40625 22.504 7.40625 21.7339 7.40625 20.1938V11.8062Z", fill: "#F1F7FA" }), h("path", { opacity: "0.6", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.5938 10.0625C10.3176 10.0625 10.0938 10.2863 10.0938 10.5625C10.0938 10.8387 10.3176 11.0625 10.5938 11.0625H12.875C13.1512 11.0625 13.375 10.8387 13.375 10.5625C13.375 10.2863 13.1512 10.0625 12.875 10.0625H10.5938ZM10.5938 12.3125C10.3176 12.3125 10.0938 12.5363 10.0938 12.8125C10.0938 13.0887 10.3176 13.3125 10.5938 13.3125H15.3125C15.5887 13.3125 15.8125 13.0887 15.8125 12.8125C15.8125 12.5363 15.5887 12.3125 15.3125 12.3125H10.5938ZM10.0938 14.75C10.0938 14.4738 10.3176 14.25 10.5938 14.25H13.5625C13.8387 14.25 14.0625 14.4738 14.0625 14.75C14.0625 15.0262 13.8387 15.25 13.5625 15.25H10.5938C10.3176 15.25 10.0938 15.0262 10.0938 14.75ZM15.1875 14.25C14.9113 14.25 14.6875 14.4738 14.6875 14.75C14.6875 15.0262 14.9113 15.25 15.1875 15.25C15.4637 15.25 15.6875 15.0262 15.6875 14.75C15.6875 14.4738 15.4637 14.25 15.1875 14.25Z", fill: "#A5C0CA" }), h("path", { d: "M17.9375 10.5938C17.9375 10.3176 18.1613 10.0938 18.4375 10.0938H21.75C22.0262 10.0938 22.25 10.3176 22.25 10.5938C22.25 10.8699 22.0262 11.0938 21.75 11.0938H18.4375C18.1613 11.0938 17.9375 10.8699 17.9375 10.5938Z", fill: "#00A0D6" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.0938 19.3125C10.0938 18.8983 10.4295 18.5625 10.8438 18.5625C11.258 18.5625 11.5938 18.8983 11.5938 19.3125V21.25C11.5938 21.6642 11.258 22 10.8438 22C10.4295 22 10.0938 21.6642 10.0938 21.25V19.3125ZM19.3438 19.3125C19.3438 18.8983 19.6795 18.5625 20.0938 18.5625C20.508 18.5625 20.8438 18.8983 20.8438 19.3125V21.25C20.8438 21.6642 20.508 22 20.0938 22C19.6795 22 19.3438 21.6642 19.3438 21.25V19.3125ZM14.5938 18.5625C14.1795 18.5625 13.8438 18.8983 13.8438 19.3125V21.25C13.8438 21.6642 14.1795 22 14.5938 22C15.008 22 15.3438 21.6642 15.3438 21.25V19.3125C15.3438 18.8983 15.008 18.5625 14.5938 18.5625ZM12.5938 18.9375C12.5938 18.7304 12.7617 18.5625 12.9688 18.5625C13.1758 18.5625 13.3438 18.7304 13.3438 18.9375V21.625C13.3438 21.8321 13.1758 22 12.9688 22C12.7617 22 12.5938 21.8321 12.5938 21.625V18.9375ZM21.5938 18.5625C21.3867 18.5625 21.2188 18.7304 21.2188 18.9375V21.625C21.2188 21.8321 21.3867 22 21.5938 22C21.8008 22 21.9688 21.8321 21.9688 21.625V18.9375C21.9688 18.7304 21.8008 18.5625 21.5938 18.5625ZM17.5938 18.9375C17.5938 18.7304 17.7617 18.5625 17.9688 18.5625C18.1758 18.5625 18.3438 18.7304 18.3438 18.9375V21.625C18.3438 21.8321 18.1758 22 17.9688 22C17.7617 22 17.5938 21.8321 17.5938 21.625V18.9375ZM16.5938 18.5625C16.3176 18.5625 16.0938 18.7863 16.0938 19.0625V21.5C16.0938 21.7762 16.3176 22 16.5938 22C16.8699 22 17.0938 21.7762 17.0938 21.5V19.0625C17.0938 18.7863 16.8699 18.5625 16.5938 18.5625Z", fill: "#0D234B" })))), h("defs", null, h("filter", { id: "filter0_d_17800_45416", x: "-52.5938", y: "-48.5938", width: "137.188", height: "137.188", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { dy: "4" }), h("feGaussianBlur", { stdDeviation: "30" }), h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" }), h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_17800_45416" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_17800_45416", result: "shape" })), h("linearGradient", { id: "paint0_linear_17800_45416", x1: "29.2305", y1: "44.3441", x2: "51.5694", y2: "15.1782", gradientUnits: "userSpaceOnUse" }, h("stop", { offset: "0.0800778", "stop-color": "#0D244C" }), h("stop", { offset: "1", "stop-color": "#0D234B" })), h("clipPath", { id: "clip0_17800_45416" }, h("rect", { width: "32", height: "32", fill: "white" }))))), h("div", { class: "pn-app-banner__text" }, h("span", null, this.appName), h("br", null), this.appDescription), h("div", { class: "pn-app-banner__cta" }, h("pn-button", { small: true, href: this.storeLink }, this.ctaText)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnAppBannerCss; }
+}, [0, "pn-app-banner", {
+    "appName": [1, "app-name"],
+    "appDescription": [1, "app-description"],
+    "ctaText": [1, "cta-text"],
+    "appleStoreLink": [1, "apple-store-link"],
+    "googleStoreLink": [1, "google-store-link"],
+    "isClosed": [32],
+    "storeLink": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-app-banner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-app-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnAppBanner$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnAppBanner = PnAppBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnAppBanner, defineCustomElement };

package/components/pn-date-and-time.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const pnDateAndTimeCss = "pn-date-and-time label{color:#5E554A;font-size:1.4rem}pn-date-and-time .time-separator{margin:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:-ms-flexbox;display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5E554A;display:block}pn-date-and-time .error-message{color:#a70707}";
+const pnDateAndTimeCss = "pn-date-and-time label{color:#5E554A;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:-ms-flexbox;display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5E554A;display:block}pn-date-and-time .error-message{color:#a70707}";
 
 const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/components/pn-dropdown-choice-adds-row.d.ts

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

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

@@ -0,0 +1,292 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index3.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}";
+
+const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rowvalues = createEvent(this, "rowvalues", 7);
+    this.pnRowSelectDropdown = null;
+    this.tableHead = null;
+    this.tableBody = null;
+    this.formRowEvent = e => {
+      var _a;
+      const debouncedAddValue = debounce_1.debounce(this.updateHiddenFieldValue.bind(this), 500);
+      if (e.target.matches('input')) {
+        ['change', 'keyup'].forEach(eventName => {
+          e.target.addEventListener(eventName, debouncedAddValue);
+        });
+      }
+      else {
+        const rowDropdown = (_a = e.target.closest('.generated-table-row')) === null || _a === void 0 ? void 0 : _a.querySelector('pn-select');
+        if (rowDropdown) {
+          rowDropdown.addEventListener('selectchange', debouncedAddValue);
+        }
+      }
+    };
+    this.dropdownData = null;
+    this.addRowDropdownName = '';
+    this.addRowDropdownPlaceholder = '';
+    this.addRowDropdownLabel = '';
+    this.rowNameLabel = '';
+    this.rowHasDropdown = true;
+    this.rowDropdownLabel = '';
+    this.rowDropdownPlaceholder = '';
+    this.rowInputLabel = '';
+    this.rowDeleteButtonText = '';
+    this.totalInputLimit = 0;
+    this.inputLimitWarning = null;
+    this.nextRowIndex = null;
+    this.rowSelectDropdownArr = null;
+    this.columnCount = null;
+    this.showWarning = false;
+    this.formValue = null;
+  }
+  dropdownDataWatcher() {
+    if (typeof this.dropdownData === 'string') {
+      this._dropdownData = JSON.parse(this.dropdownData);
+    }
+    else {
+      this._dropdownData = this.dropdownData;
+    }
+  }
+  componentWillLoad() {
+    this.dropdownDataWatcher();
+  }
+  componentDidLoad() {
+    this.setInitialValues();
+    this.addEventHandlers();
+  }
+  addEventHandlers() {
+    this.pnRowSelectDropdown.addEventListener('selectchange', this.addRowElement.bind(this));
+  }
+  setInitialValues() {
+    this.nextRowIndex = 0;
+    this.columnCount = this.rowHasDropdown ? 4 : 3;
+    this.setRowSelectDropdownArr();
+  }
+  setRowSelectDropdownArr() {
+    this.rowSelectDropdownArr = [];
+    this._dropdownData.forEach(element => {
+      this.rowSelectDropdownArr.push(element.caption);
+    });
+  }
+  updateHiddenFieldValue() {
+    const allRows = [...this.tableBody.querySelectorAll('tr')];
+    const columnValueCount = this.rowHasDropdown ? 3 : 2;
+    const formValues = [];
+    if (allRows.length) {
+      allRows.forEach(elm => {
+        var _a, _b, _c;
+        const row = { row: [] };
+        const nameElm = elm.querySelector('.tr-name');
+        const dropdownElm = elm.querySelector('.tr-dropdown');
+        const inputElm = elm.querySelector('.tr-input');
+        const nameValue = { name: this.rowNameLabel, value: nameElm === null || nameElm === void 0 ? void 0 : nameElm.innerHTML };
+        row.row.push(nameValue);
+        const dropdown = dropdownElm.querySelector('.current-selection');
+        if (dropdown) {
+          const dropdownSelection = (_a = dropdown.textContent) !== null && _a !== void 0 ? _a : '';
+          if (dropdownSelection.length) {
+            const dropdownValue = {
+              name: this.rowDropdownLabel,
+              value: dropdownSelection,
+            };
+            row.row.push(dropdownValue);
+          }
+        }
+        if (!dropdown && columnValueCount === 3) {
+          const dropdownValue = {
+            name: this.rowDropdownLabel,
+            value: '',
+          };
+          row.row.push(dropdownValue);
+        }
+        const inputValue = parseInt((_c = (_b = inputElm.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '0');
+        if (inputValue > 0) {
+          const inputColumnValue = { name: this.rowInputLabel, value: inputValue.toString() };
+          row.row.push(inputColumnValue);
+        }
+        if (row.row.length === columnValueCount) {
+          formValues.push(row);
+        }
+      });
+    }
+    if (formValues.length && formValues.length === allRows.length) {
+      const valueJsonString = JSON.stringify(formValues);
+      this.formValue = `PN-JSON|${valueJsonString}`;
+    }
+    else {
+      this.formValue = '';
+    }
+    this.rowvalues.emit(this.formValue);
+    this.checkInputTotal();
+  }
+  addRowElement() {
+    const selected = this.pnRowSelectDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    const slotElm = this.tableBody;
+    const newRow = document.createElement('tr');
+    newRow.setAttribute('index', `${this.nextRowIndex}`);
+    newRow.setAttribute('class', 'generated-table-row');
+    newRow.onclick = e => this.formRowEvent(e);
+    const rowNameColumn = document.createElement('td');
+    rowNameColumn.setAttribute('class', 'tr-name');
+    rowNameColumn.innerHTML = selectedValue;
+    newRow.appendChild(rowNameColumn);
+    if (this.rowHasDropdown) {
+      const rowDropdownColumn = this.createDropdownColumn(selectedValue);
+      newRow.appendChild(rowDropdownColumn);
+    }
+    const rowInputColumn = this.createInputColumn(selectedValue);
+    newRow.appendChild(rowInputColumn);
+    const deleteButton = this.createDeleteButtonColumn();
+    newRow.appendChild(deleteButton);
+    slotElm.appendChild(newRow);
+    this.updateRowSelectDropdown();
+    this.nextRowIndex++;
+  }
+  createDropdownColumn(selectedValue) {
+    const dropdownColumn = document.createElement('td');
+    dropdownColumn.setAttribute('class', 'tr-dropdown');
+    const selectedItem = this._dropdownData.find(arr => arr.caption === selectedValue);
+    if (Array.isArray(selectedItem.values) && selectedItem.values.length) {
+      const dropdown = document.createElement('pn-select');
+      dropdown.setAttribute('name', `${selectedValue}-dropdown`);
+      dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);
+      selectedItem.values.forEach(childItem => {
+        const childOption = document.createElement('pn-option');
+        childOption.innerHTML = childItem.caption;
+        dropdown.appendChild(childOption);
+      });
+      dropdownColumn.appendChild(dropdown);
+    }
+    return dropdownColumn;
+  }
+  createInputColumn(selectedValue) {
+    const inputColumn = document.createElement('td');
+    inputColumn.setAttribute('class', 'tr-input');
+    const inputElm = document.createElement('pn-marketweb-input');
+    inputElm.setAttribute('type', 'number');
+    inputElm.setAttribute('name', `${selectedValue}-input`);
+    inputElm.setAttribute('placeholder', '0');
+    inputColumn.appendChild(inputElm);
+    return inputColumn;
+  }
+  createDeleteButtonColumn() {
+    const buttonColumn = document.createElement('td');
+    buttonColumn.setAttribute('class', 'tr-delete');
+    const buttonElm = document.createElement('pn-button');
+    buttonElm.onclick = e => this.deleteRow(e);
+    buttonElm.setAttribute('appearance', 'warning');
+    buttonElm.setAttribute('small', 'true');
+    buttonElm.appendChild(document.createTextNode(this.rowDeleteButtonText));
+    buttonColumn.appendChild(buttonElm);
+    return buttonColumn;
+  }
+  updateRowSelectDropdown() {
+    const rowNames = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {
+      return el.innerHTML;
+    });
+    if (rowNames.length) {
+      this.rowSelectDropdownArr = [];
+      this._dropdownData.forEach(element => {
+        if (!rowNames.includes(element.caption)) {
+          this.rowSelectDropdownArr.push(element.caption);
+        }
+      });
+    }
+    else {
+      this.setRowSelectDropdownArr();
+    }
+    const selectOptions = this.pnRowSelectDropdown.querySelectorAll('pn-option');
+    selectOptions.forEach(elm => {
+      elm.removeAttribute('selected');
+    });
+    const placeholder = this.pnRowSelectDropdown.querySelector('.pn-option-content');
+    placeholder.innerHTML = this.addRowDropdownPlaceholder;
+    this.updateHiddenFieldValue();
+  }
+  deleteRow(e) {
+    e.preventDefault();
+    this.nextRowIndex--;
+    const targetElm = e.currentTarget;
+    const targetRow = targetElm.closest('tr');
+    targetRow.remove();
+    const allRows = [...this.tableBody.querySelectorAll('tr')];
+    allRows.map((elm, index) => {
+      elm.setAttribute('index', `${index}`);
+    });
+    this.updateRowSelectDropdown();
+  }
+  checkInputTotal() {
+    const allRows = this.tableBody.querySelectorAll('tr');
+    if (this.totalInputLimit === 0 || allRows.length < 1) {
+      this.showWarning = false;
+      return;
+    }
+    let totalInput = 0;
+    allRows.forEach(element => {
+      var _a;
+      const inputField = element.querySelector('pn-marketweb-input');
+      if (inputField.value) {
+        totalInput += (_a = parseInt(inputField.value)) !== null && _a !== void 0 ? _a : 0;
+      }
+    });
+    this.showWarning = totalInput > this.totalInputLimit ? true : false;
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "dropdown-choice-form-row" }, h("pn-select", { ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, placeholder: this.addRowDropdownPlaceholder, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown" }, (_a = this.rowSelectDropdownArr) === null || _a === void 0 ? void 0 : _a.map((value) => (h("pn-option", null, value))))), h("div", { class: "dropdown-choice-form-row" }, h("table", { class: "pn-dropdown-choice-table" }, h("thead", { ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("tr", null, h("th", { class: "table-header--name" }, h("label", null, this.rowNameLabel)), this.rowHasDropdown ? (h("th", { class: "table-header--dropdown" }, h("label", null, this.rowDropdownLabel))) : null, h("th", { class: "table-header--input" }, h("label", null, this.rowInputLabel)), h("th", { class: "table-header--delete" })))), h("tbody", { ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", null)), h("tfoot", null, this.showWarning ? (h("tr", null, h("td", { colSpan: this.columnCount }, h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), h("small", { class: "dropdown-choice-error-message" }, this.inputLimitWarning)))) : null)))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "dropdownData": ["dropdownDataWatcher"]
+  }; }
+  static get style() { return pnDropdownChoiceAddsRowCss; }
+}, [4, "pn-dropdown-choice-adds-row", {
+    "dropdownData": [1, "dropdown-data"],
+    "addRowDropdownName": [1, "add-row-dropdown-name"],
+    "addRowDropdownPlaceholder": [1, "add-row-dropdown-placeholder"],
+    "addRowDropdownLabel": [1, "add-row-dropdown-label"],
+    "rowNameLabel": [1, "row-name-label"],
+    "rowHasDropdown": [4, "row-has-dropdown"],
+    "rowDropdownLabel": [1, "row-dropdown-label"],
+    "rowDropdownPlaceholder": [1, "row-dropdown-placeholder"],
+    "rowInputLabel": [1, "row-input-label"],
+    "rowDeleteButtonText": [1, "row-delete-button-text"],
+    "totalInputLimit": [2, "total-input-limit"],
+    "inputLimitWarning": [1, "input-limit-warning"],
+    "nextRowIndex": [32],
+    "rowSelectDropdownArr": [32],
+    "columnCount": [32],
+    "showWarning": [32],
+    "formValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-dropdown-choice-adds-row", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-dropdown-choice-adds-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, pnDropdownChoiceAddsRow);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnDropdownChoiceAddsRow = pnDropdownChoiceAddsRow;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDropdownChoiceAddsRow, defineCustomElement };

package/components/pn-find-price-result2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { d as defineCustomElement$4 } from './pn-product-card2.js';
 import { d as defineCustomElement$3 } from './pn-product-card-info2.js';
 import { d as defineCustomElement$2 } from './pn-product-card-price2.js';

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { d as defineCustomElement$3 } from './pn-product-card2.js';
 import { d as defineCustomElement$2 } from './pn-product-tile-info2.js';
 import { d as defineCustomElement$1 } from './pn-product-tile-price2.js';

package/components/pn-mainnav-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-marketweb-siteheader-login-linklist2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-marketweb-siteheader-search2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-multi-formfield.js

@@ -1,75 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index3.js';
 import { v as v4 } from './v4.js';
 
-/**
- * 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;
-
 const pnMultiFormfieldCss = ".pn-multi-formfield{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
 
 const PnMultiFormField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/components/pn-product-pricelist-result.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { s as sendDirectUrl, a as stampShopUrl } from './data.js';
 import { d as defineCustomElement$5 } from './pn-product-card2.js';
 import { d as defineCustomElement$4 } from './pn-product-card-info2.js';

package/components/pn-profile-modal-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-proxio-findprice.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
-import { c as createStore } from './index3.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';
 import { d as defineCustomElement$6 } from './pn-proxio-productcard2.js';

package/components/pn-sidenav-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/esm/index-8976f360.js

@@ -0,0 +1,70 @@
+/**
+ * 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;
+
+export { debounce_1 as d };

package/esm/index-ee44c065.js

@@ -2105,6 +2105,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-animated-tile.entry.js').then(processMod, consoleError);
+        case 'pn-app-banner':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-app-banner.entry.js').then(processMod, consoleError);
         case 'pn-bonus-progressbar':
           return import(
             /* webpackMode: "lazy" */
@@ -2137,6 +2141,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-date-and-time.entry.js').then(processMod, consoleError);
+        case 'pn-dropdown-choice-adds-row':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-dropdown-choice-adds-row.entry.js').then(processMod, consoleError);
         case 'pn-filter-checkbox':
           return import(
             /* webpackMode: "lazy" */
@@ -2301,10 +2309,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-mainnav-link.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-button_5':
           return import(
             /* webpackMode: "lazy" */
@@ -2317,6 +2321,10 @@ 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" */