@postnord/pn-marketweb-components 2.4.26 → 2.4.28

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

@@ -0,0 +1,970 @@
+import { h, Host } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'debounce';
+export class PnDropdownWithMultiInputRows {
+  constructor() {
+    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 uuidv4();
+  }
+  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(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(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));
+  }
+  static get is() { return "pn-dropdown-with-multi-input-rows"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-dropdown-with-multi-input-rows.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-dropdown-with-multi-input-rows.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dropdownData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Root[]",
+          "resolved": "Root[] | string",
+          "references": {
+            "Root": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "languageCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language-code",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstDropdownLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-dropdown-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstDropdownHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-dropdown-helper-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondDropdownLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-dropdown-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondDropdownHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-dropdown-helper-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondDropdownMax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-dropdown-max",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "deleteMultipleRowsWarningText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "delete-multiple-rows-warning-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "confirmDeleteButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "confirm-delete-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "abortDeleteButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "abort-delete-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "fristInputLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "frist-input-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "fristInputPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "frist-input-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputMin": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-min",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputMax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-max",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputWarning": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-warning",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputWarningText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-warning-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputLowErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-low-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputHighErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-high-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputMin": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-min",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputMax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-max",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputWarning": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-warning",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputWarningText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-warning-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputLowErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-low-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputHighErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-high-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "dateLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "datePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "dateDaysFromToday": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-days-from-today",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "yearsToAddToEndDate": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "years-to-add-to-end-date",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "sumFieldLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sum-field-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "addRowText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "elementHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "element-helper-text",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownDataRoot": {},
+      "secondDropdownArr": {},
+      "rowCount": {},
+      "rowData": {},
+      "formValues": {},
+      "firstValidDateString": {},
+      "lastValidDateString": {},
+      "rowSum": {},
+      "minRowCount": {},
+      "showDelteConfirm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "allFormValues",
+        "name": "allFormValues",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "rowValueChange",
+        "method": "predefinedValueChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "firstInputChange",
+        "method": "predefinedValueChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "secondInputChange",
+        "method": "predefinedValueChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "deleteRowEvent",
+        "method": "deleteRowEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}