@postnord/pn-marketweb-components 2.4.26 → 2.4.28

package/components/pn-dropdown-with-multi-input-rows.js

@@ -0,0 +1,379 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$3 } from './pn-dropdown-with-multi-input-rows-row2.js';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+import { v as v4 } from './v4.js';
+
+const pnDropdownWithMultiInputRowsCss = "pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__row{margin-bottom:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__delete{display:-ms-flexbox;display:flex;gap:1rem;margin-bottom:1rem;padding:1rem;background-color:#F9F8F8}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__delete pn-button{margin-top:0.9rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__label-row{display:-ms-flexbox;display:flex;gap:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__label{width:30%;font-size:0.875em;color:#5e554a}pn-dropdown-with-multi-input-rows .sum-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+
+const PnDropdownWithMultiInputRows$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.allFormValues = createEvent(this, "allFormValues", 7);
+    this.pnFirstDropdown = null;
+    this.pnSecondDropdown = null;
+    this.pnSumField = null;
+    this.pnConfirmDeleteButton = null;
+    this.pnAbortDeleteButton = null;
+    this._firstDropdownSelection = null;
+    this._secondDropdownSelection = null;
+    this._defaultRow = {
+      id: this.generateUniqueId(),
+      firstInput: '',
+      secondInput: this.secondInputWarning.toString(),
+      date: '',
+    };
+    this.dropdownData = null;
+    this.languageCode = null;
+    this.firstDropdownLabel = null;
+    this.firstDropdownHelperText = null;
+    this.secondDropdownLabel = null;
+    this.secondDropdownHelperText = null;
+    this.secondDropdownMax = null;
+    this.deleteMultipleRowsWarningText = null;
+    this.confirmDeleteButtonText = null;
+    this.abortDeleteButtonText = null;
+    this.fristInputLabel = null;
+    this.fristInputPlaceholder = null;
+    this.firstInputMin = null;
+    this.firstInputMax = null;
+    this.firstInputWarning = null;
+    this.firstInputWarningText = null;
+    this.firstInputLowErrorText = null;
+    this.firstInputHighErrorText = null;
+    this.secondInputLabel = null;
+    this.secondInputPlaceholder = null;
+    this.secondInputMin = null;
+    this.secondInputMax = null;
+    this.secondInputWarning = null;
+    this.secondInputWarningText = null;
+    this.secondInputLowErrorText = null;
+    this.secondInputHighErrorText = null;
+    this.dateLabel = null;
+    this.datePlaceholder = null;
+    this.dateDaysFromToday = 1;
+    this.yearsToAddToEndDate = null;
+    this.sumFieldLabel = null;
+    this.addRowText = null;
+    this.elementHelperText = null;
+    this.dropdownDataRoot = null;
+    this.secondDropdownArr = [];
+    this.rowCount = null;
+    this.rowData = null;
+    this.formValues = null;
+    this.firstValidDateString = '';
+    this.lastValidDateString = '';
+    this.rowSum = null;
+    this.minRowCount = null;
+    this.showDelteConfirm = false;
+  }
+  componentWillLoad() {
+    this.formValues = [];
+    this.setDropDownData();
+    this.updateSecondDropdown();
+    this.setRowData();
+    this.setFirstValidDate();
+  }
+  componentDidLoad() {
+    this.updateSum();
+  }
+  setDropDownData() {
+    var _a;
+    if (typeof this.dropdownData === 'string') {
+      this.dropdownDataRoot = JSON.parse(this.dropdownData);
+    }
+    else {
+      this.dropdownDataRoot = this.dropdownData;
+    }
+    if ((_a = this.dropdownDataRoot) === null || _a === void 0 ? void 0 : _a.length) {
+      this.dropdownDataRoot.forEach(element => {
+        if (!element.value) {
+          element.value = 0;
+        }
+      });
+    }
+    if (this.dropdownDataRoot.length > 0) {
+      this.dropdownDataRoot[0].checked = true;
+      this._firstDropdownSelection = this.dropdownDataRoot[0].caption;
+      this._secondDropdownSelection = this.dropdownDataRoot[0].value;
+      this.minRowCount = this.dropdownDataRoot[0].value;
+    }
+  }
+  updateSecondDropdown() {
+    const selectedItem = this.dropdownDataRoot.find(arr => arr.checked === true);
+    this.secondDropdownArr = [];
+    for (let index = selectedItem.value; index <= this.secondDropdownMax; index++) {
+      this.secondDropdownArr.push(index);
+    }
+  }
+  updateSelectItemArr(arr, caption) {
+    arr.forEach(item => {
+      if (item.caption === caption) {
+        item.checked = !item.checked;
+      }
+      else {
+        item.checked = false;
+      }
+    });
+    return arr;
+  }
+  setRowData() {
+    this.rowData = [];
+    for (let index = 0; index < this._secondDropdownSelection; index++) {
+      const row = Object.assign({}, this._defaultRow);
+      row.id = this.generateUniqueId();
+      this.rowData = [...this.rowData, row];
+    }
+    this.rowCount = this.rowData.length;
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  setFirstValidDate() {
+    var _a;
+    const yearsToadd = this.yearsToAddToEndDate ? this.yearsToAddToEndDate : 2;
+    const date = new Date();
+    date.setDate((_a = date.getDate() + this.dateDaysFromToday) !== null && _a !== void 0 ? _a : 0);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const endYear = year + yearsToadd;
+    this.firstValidDateString = `${year.toString()}-${month}-${day}`;
+    this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;
+  }
+  addRow(newRowId) {
+    const newRow = Object.assign({}, this.rowData[0]);
+    newRow.id = newRowId ? newRowId : this.generateUniqueId();
+    newRow.date = '';
+    this.rowData = [...this.rowData, newRow];
+    this.rowCount = this.rowData.length;
+    this._secondDropdownSelection = this.rowCount;
+    this.secondDropdownArr = [...this.secondDropdownArr];
+    this.updateSum();
+    this.emitValuesIfValid();
+  }
+  handleFirstDropdown() {
+    const selected = this.pnFirstDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    if (!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length)) {
+      return;
+    }
+    this.dropdownDataRoot.forEach(element => {
+      element.checked = false;
+    });
+    const selectionRoot = this.dropdownDataRoot.find(x => x.caption === selectedValue);
+    selectionRoot.checked = true;
+    this._firstDropdownSelection = selectionRoot.caption;
+    this.minRowCount = selectionRoot.value;
+    if (selectionRoot.value > this._secondDropdownSelection) {
+      this.dropdownDataRoot = [...this.dropdownDataRoot];
+      for (let index = this.rowCount; index < selectionRoot.value; index++) {
+        this.addRow(this.generateUniqueId());
+      }
+    }
+    this.updateSecondDropdown();
+    this.updateSum();
+    this.emitValuesIfValid();
+  }
+  handleSecondDropdown() {
+    const selected = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    if (!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length)) {
+      return;
+    }
+    const value = parseInt(selectedValue);
+    if (value < this._secondDropdownSelection) {
+      this.showDelteConfirm = true;
+    }
+    else {
+      for (let index = this.rowCount; index < value; index++) {
+        this.addRow(this.generateUniqueId());
+      }
+    }
+    this.updateSum();
+    this.emitValuesIfValid();
+  }
+  predefinedValueChange(e) {
+    const indexToUpdate = this.rowData.findIndex(data => data.id === e.detail.id);
+    const val = e.detail;
+    this.rowData[indexToUpdate] = Object.assign(Object.assign({}, this.rowData[indexToUpdate]), { firstInput: val.firstInput, secondInput: val.secondInput, date: val.date });
+    if (e.type === 'firstInputChange' && indexToUpdate === 0) {
+      this.updateFirstInputOfRows(val.firstInput);
+    }
+    if (e.type === 'secondInputChange' && indexToUpdate === 0) {
+      this.updateSecondInputOfRows(val.secondInput);
+    }
+    this.rowData = [...this.rowData];
+    this.emitValuesIfValid();
+    this.updateSum();
+  }
+  updateFirstInputOfRows(value) {
+    for (let index = 1; index < this.rowCount; index++) {
+      this.rowData[index] = Object.assign(Object.assign({}, this.rowData[index]), { firstInput: value });
+    }
+  }
+  updateSecondInputOfRows(value) {
+    for (let index = 1; index < this.rowCount; index++) {
+      this.rowData[index] = Object.assign(Object.assign({}, this.rowData[index]), { secondInput: value });
+    }
+  }
+  deleteRowEvent(e) {
+    const indexToRemove = this.rowData.findIndex(data => data.id === e.detail);
+    if (indexToRemove < 0) {
+      return;
+    }
+    this.rowData.splice(indexToRemove, 1);
+    this.rowData = [...this.rowData];
+    this.rowCount = this.rowData.length;
+    this._secondDropdownSelection = this.rowCount;
+    this.secondDropdownArr = [...this.secondDropdownArr];
+    this.emitValuesIfValid();
+    this.updateSum();
+  }
+  updateSum() {
+    this.rowSum = '';
+    let sum = 0;
+    this.rowData.forEach(element => {
+      var _a;
+      if ((_a = element === null || element === void 0 ? void 0 : element.firstInput) === null || _a === void 0 ? void 0 : _a.length) {
+        sum += parseInt(element.firstInput);
+      }
+    });
+    this.rowSum = sum.toString();
+  }
+  deleteExcessRows() {
+    const selected = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    if (!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length)) {
+      return;
+    }
+    const rowsToDelete = this.rowCount - parseInt(selectedValue);
+    for (let index = 0; index < rowsToDelete; index++) {
+      this.rowData.pop();
+    }
+    this.rowData = [...this.rowData];
+    this.showDelteConfirm = false;
+    this.updateSum();
+  }
+  abortDeleteRows() {
+    this.showDelteConfirm = false;
+  }
+  emitValuesIfValid() {
+    this.formValues = [];
+    this.rowData.forEach(item => {
+      var _a, _b, _c, _d;
+      const rowValue = { row: [] };
+      if ((_a = this._firstDropdownSelection) === null || _a === void 0 ? void 0 : _a.length) {
+        const dropDownValue = { name: this.firstDropdownLabel, value: this._firstDropdownSelection };
+        rowValue.row.push(dropDownValue);
+      }
+      if ((_b = item.firstInput) === null || _b === void 0 ? void 0 : _b.length) {
+        const firstInputValue = { name: this.fristInputLabel, value: item.firstInput };
+        rowValue.row.push(firstInputValue);
+      }
+      if ((_c = item.secondInput) === null || _c === void 0 ? void 0 : _c.length) {
+        const secondInputValue = { name: this.secondInputLabel, value: item.secondInput };
+        rowValue.row.push(secondInputValue);
+      }
+      if ((_d = item.date) === null || _d === void 0 ? void 0 : _d.length) {
+        const dateValue = { name: this.dateLabel, value: item.date };
+        rowValue.row.push(dateValue);
+      }
+      if (rowValue.row.length === 4) {
+        this.formValues.push(rowValue);
+      }
+    });
+    if (this.formValues.length === this.rowData.length) {
+      const valueJsonString = JSON.stringify(this.formValues);
+      this.allFormValues.emit(valueJsonString);
+    }
+    else {
+      this.allFormValues.emit('');
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h(Host, { class: "dropdown-with-multi-input-elemet" }, h("div", { class: "dropdown-with-multi-input-elemet__row" }, h("div", null, h("pn-select", { ref: el => (this.pnFirstDropdown = el), class: "pn-row-select-dropdown dropDown1-dropdown", label: this.firstDropdownLabel }, (_a = this.dropdownDataRoot) === null || _a === void 0 ? void 0 : _a.map((item, i) => (h("pn-option", { index: i, value: item.value, selected: item.checked, onClick: debounce_1.debounce(this.handleFirstDropdown.bind(this), 500) }, item.caption)))), ((_b = this.firstDropdownHelperText) === null || _b === void 0 ? void 0 : _b.length) ? h("small", null, this.firstDropdownHelperText) : null)), h("div", { class: "dropdown-with-multi-input-elemet__row" }, h("div", null, h("pn-select", { ref: el => (this.pnSecondDropdown = el), class: "pn-row-select-dropdown dropDown2-dropdown", label: this.secondDropdownLabel }, (_c = this.secondDropdownArr) === null || _c === void 0 ? void 0 : _c.map((item, i) => (h("pn-option", { index: i, value: item, selected: item === this._secondDropdownSelection, onClick: debounce_1.debounce(this.handleSecondDropdown.bind(this), 500) }, item)))), ((_d = this.secondDropdownHelperText) === null || _d === void 0 ? void 0 : _d.length) ? h("small", null, this.secondDropdownHelperText) : null)), this.showDelteConfirm ? (h("div", { class: "dropdown-with-multi-input-elemet__delete" }, h("p", null, this.deleteMultipleRowsWarningText), h("pn-button", { ref: el => (this.pnConfirmDeleteButton = el), small: "true", appearance: "warning", onClick: this.deleteExcessRows.bind(this) }, this.confirmDeleteButtonText), h("pn-button", { ref: el => (this.pnAbortDeleteButton = el), small: "true", appearance: "light", onClick: this.abortDeleteRows.bind(this) }, this.abortDeleteButtonText))) : null, h("div", { class: "dropdown-with-multi-input-elemet__label-row" }, h("div", { class: "dropdown-with-multi-input-elemet__label" }, h("label", null, this.fristInputLabel)), h("div", { class: "dropdown-with-multi-input-elemet__label" }, h("label", null, this.secondInputLabel)), h("div", { class: "dropdown-with-multi-input-elemet__label" }, h("label", null, this.dateLabel))), (_e = this.rowData) === null || _e === void 0 ? void 0 :
+      _e.map((data, i) => {
+        return (h("div", { class: 'dropdown-with-multi-input-elemet__row generated-row-' + i, id: 'generated-row-' + i }, h("pn-dropdown-with-multi-input-rows-row", { "language-code": this.languageCode, "frist-input-placeholder": this.fristInputPlaceholder, "first-input-min": this.firstInputMin, "first-input-max": this.firstInputMax, "first-input-warning": this.firstInputWarning, "first-input-warning-text": this.firstInputWarningText, "first-input-low-error-text": this.firstInputLowErrorText, "first-input-high-error-text": this.firstInputHighErrorText, "second-input-placeholder": this.secondInputPlaceholder, "second-input-min": this.secondInputMin, "second-input-max": this.secondInputMax, "second-input-warning": this.secondInputWarning, "second-input-warning-text": this.secondInputWarningText, "second-input-low-error-text": this.secondInputLowErrorText, "second-input-high-error-text": this.secondInputHighErrorText, datePlaceholder: this.datePlaceholder, firstValidDate: this.firstValidDateString, lastValidDate: this.lastValidDateString, "predefined-value": JSON.stringify(data), "min-row-count": this.minRowCount, "row-index": i })));
+      }), h("div", { class: "dropdown-with-multi-input-elemet__row sum-row" }, h("pn-marketweb-input", { disabled: true, ref: el => (this.pnSumField = el), type: "number", value: this.rowSum, label: this.sumFieldLabel }), h("pn-button", { "icon-only": this.addRowText ? false : true, "left-icon": "true", "aria-label": "Add", icon: "plus", appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
+        this.addRow(this.generateUniqueId());
+      } }, this.addRowText)), ((_f = this.elementHelperText) === null || _f === void 0 ? void 0 : _f.length) ? h("div", { class: "dropdown-with-multi-input-elemet__row" }, this.elementHelperText) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnDropdownWithMultiInputRowsCss; }
+}, [0, "pn-dropdown-with-multi-input-rows", {
+    "dropdownData": [1, "dropdown-data"],
+    "languageCode": [1, "language-code"],
+    "firstDropdownLabel": [1, "first-dropdown-label"],
+    "firstDropdownHelperText": [1, "first-dropdown-helper-text"],
+    "secondDropdownLabel": [1, "second-dropdown-label"],
+    "secondDropdownHelperText": [1, "second-dropdown-helper-text"],
+    "secondDropdownMax": [2, "second-dropdown-max"],
+    "deleteMultipleRowsWarningText": [1, "delete-multiple-rows-warning-text"],
+    "confirmDeleteButtonText": [1, "confirm-delete-button-text"],
+    "abortDeleteButtonText": [1, "abort-delete-button-text"],
+    "fristInputLabel": [1, "frist-input-label"],
+    "fristInputPlaceholder": [1, "frist-input-placeholder"],
+    "firstInputMin": [2, "first-input-min"],
+    "firstInputMax": [2, "first-input-max"],
+    "firstInputWarning": [2, "first-input-warning"],
+    "firstInputWarningText": [1, "first-input-warning-text"],
+    "firstInputLowErrorText": [1, "first-input-low-error-text"],
+    "firstInputHighErrorText": [1, "first-input-high-error-text"],
+    "secondInputLabel": [1, "second-input-label"],
+    "secondInputPlaceholder": [1, "second-input-placeholder"],
+    "secondInputMin": [2, "second-input-min"],
+    "secondInputMax": [2, "second-input-max"],
+    "secondInputWarning": [2, "second-input-warning"],
+    "secondInputWarningText": [1, "second-input-warning-text"],
+    "secondInputLowErrorText": [1, "second-input-low-error-text"],
+    "secondInputHighErrorText": [1, "second-input-high-error-text"],
+    "dateLabel": [1, "date-label"],
+    "datePlaceholder": [1, "date-placeholder"],
+    "dateDaysFromToday": [2, "date-days-from-today"],
+    "yearsToAddToEndDate": [2, "years-to-add-to-end-date"],
+    "sumFieldLabel": [1, "sum-field-label"],
+    "addRowText": [1, "add-row-text"],
+    "elementHelperText": [1, "element-helper-text"],
+    "dropdownDataRoot": [32],
+    "secondDropdownArr": [32],
+    "rowCount": [32],
+    "rowData": [32],
+    "formValues": [32],
+    "firstValidDateString": [32],
+    "lastValidDateString": [32],
+    "rowSum": [32],
+    "minRowCount": [32],
+    "showDelteConfirm": [32]
+  }, [[0, "rowValueChange", "predefinedValueChange"], [0, "firstInputChange", "predefinedValueChange"], [0, "secondInputChange", "predefinedValueChange"], [0, "deleteRowEvent", "deleteRowEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-dropdown-with-multi-input-rows", "pn-dropdown-with-multi-input-rows-row", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-dropdown-with-multi-input-rows":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnDropdownWithMultiInputRows$1);
+      }
+      break;
+    case "pn-dropdown-with-multi-input-rows-row":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnDropdownWithMultiInputRows = PnDropdownWithMultiInputRows$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDropdownWithMultiInputRows, defineCustomElement };

package/components/pn-marketweb-siteheader.js

@@ -182,7 +182,7 @@ const PnMarketwebSiteheader$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.searchPlaceholder = '';
     this.spaMode = false;
     this.checkUserLoggedInStateInterval = 0;
-    this.pageId = undefined;
+    this.pageId = '';
     this.i18n = {
       searchlabel: '',
       searchplaceholder: '',

package/components/pn-multiple-input.d.ts

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

package/components/pn-multiple-input.js

@@ -0,0 +1,130 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+import { v as v4 } from './v4.js';
+
+const pnMultipleInputCss = "pn-multiple-input .multiple-input-generated-row,pn-multiple-input .multiple-input-row{display:-ms-flexbox;display:flex;gap:1rem}pn-multiple-input .multiple-input-generated-row pn-marketweb-input,pn-multiple-input .multiple-input-row pn-marketweb-input{width:100%}pn-multiple-input .multiple-input-slot{display:-ms-flexbox;display:flex;gap:1rem;-ms-flex-direction:column;flex-direction:column;margin-top:1rem;margin-bottom:1rem}";
+
+const PnMultipleInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.allFormValues = createEvent(this, "allFormValues", 7);
+    this.pnSlotElement = null;
+    this._formValues = [];
+    this.label = null;
+    this.placeholder = null;
+    this.addRowButtonText = null;
+    this.rowData = [];
+  }
+  componentWillLoad() {
+    const elemtnId = this.generateUniqueId();
+    const newRow = { id: elemtnId, input: '' };
+    this.rowData = [...this.rowData, newRow];
+  }
+  componentDidLoad() {
+    this.addEventHandlers();
+  }
+  componentDidUpdate() {
+    this.addEventHandlers();
+  }
+  addEventHandlers() {
+    const rows = this.pnSlotElement.querySelectorAll('pn-marketweb-input');
+    rows.forEach(element => {
+      element.addEventListener('keyup', debounce_1.debounce(this.handleInput.bind(this), 500));
+    });
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  deleteRow(indexToRemove) {
+    if (indexToRemove < 0) {
+      return;
+    }
+    this.rowData.splice(indexToRemove, 1);
+    this.rowData = [...this.rowData];
+    this.emitValues();
+  }
+  addRow() {
+    const newRow = { id: this.generateUniqueId(), input: '' };
+    this.rowData = [...this.rowData, newRow];
+    this.emitValues();
+  }
+  handleInput(e) {
+    const target = e.target;
+    const inputElm = target.closest('pn-marketweb-input');
+    if (!inputElm) {
+      return;
+    }
+    const inputElmId = inputElm.id;
+    const value = target.value;
+    const index = this.rowData.findIndex(item => item.id === inputElmId);
+    if (index < 0) {
+      return;
+    }
+    this.rowData[index] = Object.assign(Object.assign({}, this.rowData[index]), { input: value });
+    this.emitValues();
+  }
+  emitValues() {
+    this._formValues = [];
+    const label = this.label ? this.label : 'InputField';
+    this.rowData.forEach(item => {
+      const rowValue = { row: [] };
+      if (item.input) {
+        const dropDownValue = { name: label, value: item.input };
+        rowValue.row.push(dropDownValue);
+      }
+      if (rowValue.row.length === 1) {
+        this._formValues.push(rowValue);
+      }
+    });
+    if (this._formValues.length === this.rowData.length) {
+      const valueJsonString = JSON.stringify(this._formValues);
+      this.allFormValues.emit(valueJsonString);
+    }
+    else {
+      this.allFormValues.emit('');
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { ref: el => (this.pnSlotElement = el), class: "multiple-input-slot" }, (_a = this.rowData) === null || _a === void 0 ? void 0 : _a.map((data, i) => {
+      return (h("div", { class: "multiple-input-generated-row" }, h("pn-marketweb-input", { label: this.label, type: "text", placeholder: this.placeholder, value: data.input, id: data.id }), i > 0 ? (h("pn-button", { "icon-only": true, "aria-label": "Delete", icon: "minus", appearance: "warning", onClick: () => {
+          this.deleteRow(i);
+        }, index: i, id: data.id }, "Delete")) : null));
+    })), h("dvi", { class: "multiple-input-row" }, h("pn-button", { "icon-only": this.addRowButtonText ? false : true, "left-icon": "true", "aria-label": "Add", icon: "plus", appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
+        this.addRow();
+      } }, this.addRowButtonText))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMultipleInputCss; }
+}, [0, "pn-multiple-input", {
+    "label": [1],
+    "placeholder": [1],
+    "addRowButtonText": [1, "add-row-button-text"],
+    "rowData": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-multiple-input", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-multiple-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMultipleInput$1);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnMultipleInput = PnMultipleInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMultipleInput, defineCustomElement };

package/esm/index-ee44c065.js

@@ -2149,6 +2149,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-dropdown-choice-adds-row.entry.js').then(processMod, consoleError);
+        case 'pn-dropdown-with-multi-input-rows':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-dropdown-with-multi-input-rows.entry.js').then(processMod, consoleError);
         case 'pn-find-price':
           return import(
             /* webpackMode: "lazy" */
@@ -2181,6 +2185,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-multi-row-connected-dropdown.entry.js').then(processMod, consoleError);
+        case 'pn-multiple-input':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-multiple-input.entry.js').then(processMod, consoleError);
         case 'pn-parcel-tracker':
           return import(
             /* webpackMode: "lazy" */
@@ -2277,6 +2285,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-teaser-card.entry.js').then(processMod, consoleError);
+        case 'pn-dropdown-with-multi-input-rows-row':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-dropdown-with-multi-input-rows-row.entry.js').then(processMod, consoleError);
         case 'pn-find-service-and-price-result':
           return import(
             /* webpackMode: "lazy" */
@@ -2345,14 +2357,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-product-card_3.entry.js').then(processMod, consoleError);
-        case 'pn-marketweb-input':
-          return import(
-            /* webpackMode: "lazy" */
-            './pn-marketweb-input.entry.js').then(processMod, consoleError);
         case 'pn-titletag':
           return import(
             /* webpackMode: "lazy" */
             './pn-titletag.entry.js').then(processMod, consoleError);
+        case 'pn-marketweb-input':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-marketweb-input.entry.js').then(processMod, consoleError);
       }
     }
     return import(