@postnord/pn-marketweb-components 2.4.27 → 2.4.29

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

@@ -0,0 +1,232 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$1 } from './pn-marketweb-input2.js';
+
+const pnDropdownWithMultiInputRowsRowCss = "pn-dropdown-with-multi-input-rows-row .input-element-row{display:-ms-flexbox;display:flex;gap:1rem;margin-bottom:1rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container{width:30%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-marketweb-input .input-container{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-date-picker{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container{margin-top:0.3rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__error{color:red;line-height:1}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__warning{line-height:1}pn-dropdown-with-multi-input-rows-row .delete-button-contianer{margin-top:0.6rem}";
+
+const PnDropdownWithMultiInputRowsRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rowValueChange = createEvent(this, "rowValueChange", 7);
+    this.deleteRowEvent = createEvent(this, "deleteRowEvent", 7);
+    this.firstInputChange = createEvent(this, "firstInputChange", 7);
+    this.secondInputChange = createEvent(this, "secondInputChange", 7);
+    this.pnFirstInputField = null;
+    this.pnSecondInputField = null;
+    this.pnDatePicker = null;
+    this.pnDeleteRowButton = null;
+    this.languageCode = null;
+    this.fristInputPlaceholder = null;
+    this.firstInputMin = null;
+    this.firstInputMax = null;
+    this.firstInputWarning = null;
+    this.firstInputWarningText = null;
+    this.firstInputLowErrorText = null;
+    this.firstInputHighErrorText = 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.firstValidDate = null;
+    this.lastValidDate = null;
+    this.predefinedValue = null;
+    this.rowIndex = null;
+    this.minRowCount = null;
+    this.showFirstInputWarning = false;
+    this.showFirstInputLowError = false;
+    this.showFirstInputHighError = false;
+    this.showSecondInputWarning = false;
+    this.showSecondInputLowError = false;
+    this.showSecondInputHighError = false;
+    this.firstInputValue = '';
+    this.secondInputValue = '';
+    this.dateValue = '';
+  }
+  componentWillLoad() {
+    this.getPredefinedValues();
+    this.setInitialValues();
+  }
+  componentDidLoad() {
+    this.addEventHandlers();
+  }
+  getPredefinedValues() {
+    this._predefinedValue = JSON.parse(this.predefinedValue);
+  }
+  applyPredefinedValue() {
+    var _a, _b;
+    this.getPredefinedValues();
+    this.setInitialValues();
+    if ((_a = this.firstInputValue) === null || _a === void 0 ? void 0 : _a.length) {
+      this.validateFirstInput(parseInt(this.firstInputValue));
+    }
+    if ((_b = this.secondInputValue) === null || _b === void 0 ? void 0 : _b.length) {
+      this.validateSecondInput(parseInt(this.secondInputValue));
+    }
+    if (this.rowIndex >= this.minRowCount) {
+      this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));
+    }
+  }
+  setInitialValues() {
+    this.firstInputValue = this._predefinedValue.firstInput;
+    this.secondInputValue = this._predefinedValue.secondInput;
+    this.dateValue = this._predefinedValue.date;
+  }
+  addEventHandlers() {
+    const emmitValues = debounce_1.debounce(this.emitRowValues.bind(this), 500);
+    this.pnFirstInputField.addEventListener('keyup', debounce_1.debounce(this.handleFirstInput.bind(this), 500));
+    this.pnSecondInputField.addEventListener('keyup', debounce_1.debounce(this.handleSecondInput.bind(this), 500));
+    this.pnDatePicker.addEventListener('dateselection', this.handleDateChange.bind(this));
+    this.pnDatePicker.addEventListener('dateselection', emmitValues);
+  }
+  handleFirstInput(e) {
+    const elm = e.target;
+    const value = parseInt(elm.value);
+    if (value > 0) {
+      this.firstInputValue = elm.value;
+      this.firstInputChange.emit({
+        id: this._predefinedValue.id,
+        firstInput: this.firstInputValue,
+        secondInput: this.secondInputValue,
+        date: this.dateValue,
+      });
+    }
+    this.validateFirstInput(value);
+    this.emitRowValues();
+  }
+  handleSecondInput(e) {
+    const elm = e.target;
+    const value = parseInt(elm.value);
+    if (value > 0) {
+      this.secondInputValue = elm.value;
+      this.secondInputChange.emit({
+        id: this._predefinedValue.id,
+        firstInput: this.firstInputValue,
+        secondInput: this.secondInputValue,
+        date: this.dateValue,
+      });
+    }
+    this.validateSecondInput(value);
+    this.emitRowValues();
+  }
+  validateFirstInput(input) {
+    this.showFirstInputWarning = false;
+    this.showFirstInputLowError = false;
+    this.showFirstInputHighError = false;
+    if (input < this.firstInputWarning) {
+      this.showFirstInputWarning = true;
+    }
+    if (input < this.firstInputMin) {
+      this.showFirstInputWarning = false;
+      this.showFirstInputLowError = true;
+    }
+    if (input > this.firstInputMax) {
+      this.showFirstInputWarning = false;
+      this.showFirstInputLowError = false;
+      this.showFirstInputHighError = true;
+    }
+  }
+  validateSecondInput(input) {
+    this.showSecondInputWarning = false;
+    this.showSecondInputLowError = false;
+    this.showSecondInputHighError = false;
+    if (input < this.secondInputWarning) {
+      this.showSecondInputWarning = true;
+    }
+    if (input < this.secondInputMin) {
+      this.showSecondInputWarning = false;
+      this.showSecondInputLowError = true;
+    }
+    if (input > this.secondInputMax) {
+      this.showSecondInputWarning = false;
+      this.showSecondInputLowError = false;
+      this.showSecondInputHighError = true;
+    }
+  }
+  handleDateChange(e) {
+    const elm = e.target;
+    if (elm === this.pnDatePicker) {
+      this.dateValue = e.detail;
+    }
+  }
+  emitRowValues() {
+    this.rowValueChange.emit({
+      id: this._predefinedValue.id,
+      firstInput: this.firstInputValue,
+      secondInput: this.secondInputValue,
+      date: this.dateValue,
+    });
+  }
+  deleteRow() {
+    this.deleteRowEvent.emit(this._predefinedValue.id);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "input-element-row" }, h("div", { class: "input-container" }, h("pn-marketweb-input", { ref: el => (this.pnFirstInputField = el), type: "number", placeholder: this.fristInputPlaceholder, value: this.firstInputValue, min: "1" }), this.showFirstInputLowError || this.showFirstInputHighError || this.showFirstInputWarning ? (h("div", { class: "input-element-message-container" }, this.showFirstInputLowError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.firstInputLowErrorText))) : null, this.showFirstInputHighError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.firstInputHighErrorText))) : null, this.showFirstInputWarning ? (h("div", { class: "input-element-message-container__warning" }, h("small", null, this.firstInputWarningText))) : null)) : null), h("div", { class: "input-container" }, h("pn-marketweb-input", { ref: el => (this.pnSecondInputField = el), type: "number", placeholder: this.secondInputPlaceholder, value: this.secondInputValue, min: "1" }), this.showSecondInputLowError || this.showSecondInputHighError || this.showSecondInputWarning ? (h("div", { class: "input-element-message-container" }, this.showSecondInputLowError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.secondInputLowErrorText))) : null, this.showSecondInputHighError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.secondInputHighErrorText))) : null, this.showSecondInputWarning ? (h("div", { class: "input-element-message-container__warning" }, h("small", null, this.secondInputWarningText))) : null)) : null), h("div", { class: "input-container" }, h("pn-date-picker", { ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": true, "min-date": this.firstValidDate, "max-date": this.lastValidDate, language: this.languageCode, placeholder: this.datePlaceholder, start: ((_a = this.dateValue) === null || _a === void 0 ? void 0 : _a.length) ? this.dateValue : null })), this.rowIndex >= this.minRowCount ? (h("div", { class: "delete-button-contianer" }, h("pn-button", { ref: el => (this.pnDeleteRowButton = el), small: "true", "icon-only": "true", icon: "minus", appearance: "warning", index: this.rowIndex, onClick: () => {
+        this.deleteRow();
+      } }, "Delete"))) : null)));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "predefinedValue": ["applyPredefinedValue"]
+  }; }
+  static get style() { return pnDropdownWithMultiInputRowsRowCss; }
+}, [0, "pn-dropdown-with-multi-input-rows-row", {
+    "languageCode": [1, "language-code"],
+    "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"],
+    "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"],
+    "firstValidDate": [1, "first-valid-date"],
+    "lastValidDate": [1, "last-valid-date"],
+    "predefinedValue": [1, "predefined-value"],
+    "rowIndex": [2, "row-index"],
+    "minRowCount": [2, "min-row-count"],
+    "showFirstInputWarning": [32],
+    "showFirstInputLowError": [32],
+    "showFirstInputHighError": [32],
+    "showSecondInputWarning": [32],
+    "showSecondInputLowError": [32],
+    "showSecondInputHighError": [32],
+    "firstInputValue": [32],
+    "secondInputValue": [32],
+    "dateValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-dropdown-with-multi-input-rows-row", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-dropdown-with-multi-input-rows-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnDropdownWithMultiInputRowsRow);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnDropdownWithMultiInputRowsRow as P, defineCustomElement as d };

package/components/pn-dropdown-with-multi-input-rows.d.ts

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

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-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;