@postnord/pn-marketweb-components 2.4.24 → 2.4.25

package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js

@@ -0,0 +1,836 @@
+import { h, Host } from '@stencil/core';
+import { debounce } from 'debounce';
+import { v4 as uuidv4 } from 'uuid';
+export class PnMultiRowConnectedDropdownRow {
+  constructor() {
+    this.pnConnectedDropdown = null;
+    this.pnConnectedDropdownSlotElement = null;
+    this.pnAddFieldButton = null;
+    this.pnFirstDropdown = null;
+    this.pnSecondDropdown = null;
+    this.pnInputField = null;
+    this.pnSingleDatePicker = null;
+    this.pnStartDate = null;
+    this.pnEndDate = null;
+    this.pnShowDateRangeFiledButton = null;
+    this.pnDateRangeContainer = null;
+    this.pnGenerateDatesButton = null;
+    this.pnDaysRow = null;
+    this.pnGeneratedDatesSlot = null;
+    this.pnSaveGeneratedDatesButton = null;
+    this.pnDeleteRowButton = null;
+    this.dropdownData = null;
+    this.languageCode = null;
+    this.label = null;
+    this.firstDropdownLabel = null;
+    this.secondDropdownLabel = null;
+    this.dropdownPlaceholder = null;
+    this.addRowText = null;
+    this.inputFildLabel = null;
+    this.inputFildPlaceholder = null;
+    this.dateButtonText = null;
+    this.datePlaceholder = null;
+    this.dateDaysFromToday = 1;
+    this.allowMultipleDates = null;
+    this.startDateLabel = null;
+    this.endDateLabel = null;
+    this.multiDateHelperText = null;
+    this.generateDatesButtonText = null;
+    this.saveDateButtonText = null;
+    this.noDatesText = null;
+    this.index = null;
+    this.predefinedValue = null;
+    this.yearsToAddToEndDate = null;
+    this.buttonsArray = null;
+    this.firstDropdownArr = null;
+    this.secondDropdownArr = [];
+    this.firstDropdownClass = null;
+    this.secondDropdownClass = null;
+    this.firstValidDateString = '';
+    this.lastValidDateString = '';
+    this.firstDropdownPlaceholder = '-';
+    this.secondDropdownPlaceholder = '-';
+    this.starDateValue = '';
+    this.endDateValue = '';
+    this.generatedDatesArr = [];
+    this.selectedButtonValue = '';
+    this.inputFieldValue = '';
+    this.dateValue = '';
+    this.daysArr = null;
+  }
+  componentWillLoad() {
+    this.getPredefinedValues();
+    this.setDropDownData();
+    this.setFirstValidDate();
+  }
+  componentDidLoad() {
+    this.setInitialValues();
+    this.addEventHandlers();
+    this.emittRowValues();
+  }
+  setDropDownData() {
+    if (typeof this.dropdownData === 'string') {
+      this._dropdownData = JSON.parse(this.dropdownData);
+    }
+    else {
+      this._dropdownData = this.dropdownData;
+    }
+  }
+  getPredefinedValues() {
+    this._predefinedValue = JSON.parse(this.predefinedValue);
+  }
+  applyPredefinedValue() {
+    this.getPredefinedValues();
+    this.setInitialValues();
+  }
+  setInitialValues() {
+    this.setButtonsValue();
+    this.setFirstDropdownValues();
+    this.setSecondDropdownValues();
+    this.setInputField();
+    this.setDateValue();
+    this.setDateRangeDefaults();
+    this.firstDropdownClass = this.firstDropdownLabel.replace(' ', '_') + '-dropdown';
+    this.secondDropdownClass = this.secondDropdownLabel.replace(' ', '_') + '-dropdown';
+  }
+  setButtonsValue() {
+    var _a;
+    this.buttonsArray = [];
+    if ((_a = this._predefinedValue.buttons) === null || _a === void 0 ? void 0 : _a.length) {
+      this.buttonsArray = this._predefinedValue.buttons;
+      this.buttonsArray.forEach(item => {
+        if (item.selected) {
+          this.selectedButtonValue = item.value;
+        }
+      });
+    }
+    else {
+      this._dropdownData.forEach(item => {
+        const button = { selected: false, value: item.caption, caption: item.caption };
+        this.buttonsArray.push(button);
+      });
+    }
+  }
+  setFirstDropdownValues() {
+    var _a;
+    this.firstDropdownArr = [];
+    if ((_a = this._predefinedValue.firstDropdown) === null || _a === void 0 ? void 0 : _a.length) {
+      this.firstDropdownArr = [...this._predefinedValue.firstDropdown];
+    }
+  }
+  setSecondDropdownValues() {
+    var _a;
+    this.secondDropdownArr = [];
+    if ((_a = this._predefinedValue.secondDropdown) === null || _a === void 0 ? void 0 : _a.length) {
+      this.secondDropdownArr = [...this._predefinedValue.secondDropdown];
+    }
+  }
+  setInputField() {
+    var _a;
+    this.inputFieldValue = ((_a = this._predefinedValue.input) === null || _a === void 0 ? void 0 : _a.length) ? this._predefinedValue.input : '';
+  }
+  setDateValue() {
+    var _a, _b, _c;
+    if (this.allowMultipleDates) {
+      this.pnDateRangeContainer.style.display = ((_a = this._predefinedValue.dates) === null || _a === void 0 ? void 0 : _a.length) ? '' : 'none';
+      this.generatedDatesArr = ((_b = this._predefinedValue.dates) === null || _b === void 0 ? void 0 : _b.length) ? this._predefinedValue.dates.split(',') : [];
+      this.saveGeneratedDates();
+    }
+    else {
+      this.dateValue = ((_c = this._predefinedValue.dates) === null || _c === void 0 ? void 0 : _c.length) ? this._predefinedValue.dates : '';
+    }
+  }
+  setDateRangeDefaults() {
+    var _a, _b;
+    this.daysArr = this._predefinedValue.dateRange.days;
+    this.starDateValue = ((_a = this._predefinedValue.dateRange.startDate) === null || _a === void 0 ? void 0 : _a.length) ? this._predefinedValue.dateRange.startDate : '';
+    this.endDateValue = ((_b = this._predefinedValue.dateRange.endDate) === null || _b === void 0 ? void 0 : _b.length) ? this._predefinedValue.dateRange.endDate : '';
+  }
+  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}`;
+  }
+  addEventHandlers() {
+    const emmitValues = debounce(this.emittRowValues.bind(this), 500);
+    this.pnInputField.addEventListener('keyup', this.handleInput.bind(this));
+    this.pnInputField.addEventListener('change', this.handleInput.bind(this));
+    this.pnInputField.addEventListener('keyup', emmitValues);
+    this.pnInputField.addEventListener('change', emmitValues);
+    if (this.allowMultipleDates) {
+      this.pnShowDateRangeFiledButton.addEventListener('click', this.showDateRangeRow.bind(this));
+      this.pnStartDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));
+      this.pnEndDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));
+      this.pnGenerateDatesButton.addEventListener('click', this.generateDates.bind(this));
+      this.pnSaveGeneratedDatesButton.addEventListener('click', this.saveGeneratedDates.bind(this));
+      this.pnSaveGeneratedDatesButton.addEventListener('click', emmitValues);
+    }
+    else {
+      this.pnSingleDatePicker.addEventListener('dateselection', this.setSingleDateValue.bind(this));
+      this.pnSingleDatePicker.addEventListener('dateselection', emmitValues);
+    }
+    if (this.index > 0) {
+      this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));
+    }
+  }
+  generateUniqueId() {
+    return uuidv4();
+  }
+  updateSelectItemArr(arr, val) {
+    arr.forEach(item => {
+      if (item.value === val) {
+        item.selected = !item.selected;
+      }
+      else {
+        item.selected = false;
+      }
+    });
+    return arr;
+  }
+  handleOptionButtonClick(e) {
+    var _a;
+    e.preventDefault();
+    const elmValue = e.target.innerHTML;
+    this.buttonsArray = [...this.updateSelectItemArr(this.buttonsArray, elmValue)];
+    this.selectedButtonValue = this.buttonsArray.filter(e => e.selected === true).length > 0 ? elmValue : '';
+    if ((_a = this.selectedButtonValue) === null || _a === void 0 ? void 0 : _a.length) {
+      this.firstDropdownArr = [];
+      const selectionChildren = this._dropdownData.find(arr => arr.caption === elmValue);
+      selectionChildren.values.forEach(item => {
+        this.firstDropdownArr.push({ selected: false, value: item.caption, caption: item.caption });
+      });
+      this.firstDropdownArr = [...this.firstDropdownArr];
+      this.firstDropdownPlaceholder = this.dropdownPlaceholder;
+      const firstDropdownText = this.pnFirstDropdown.querySelector('.current-selection .pn-option-content');
+      firstDropdownText.innerHTML = this.dropdownPlaceholder;
+      this.secondDropdownArr = [];
+      this.secondDropdownPlaceholder = '-';
+      const secondDropdownText = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+      secondDropdownText.innerHTML = this.secondDropdownPlaceholder;
+    }
+    else {
+      this.firstDropdownArr = [];
+      this.firstDropdownPlaceholder = '-';
+      const firstDropdownText = this.pnFirstDropdown.querySelector('.current-selection .pn-option-content');
+      firstDropdownText.innerHTML = this.firstDropdownPlaceholder;
+      this.secondDropdownArr = [];
+      this.secondDropdownPlaceholder = '-';
+      const secondDropdownText = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+      secondDropdownText.innerHTML = this.secondDropdownPlaceholder;
+    }
+    this.emittRowValues();
+  }
+  handleFirstDropdownChange() {
+    const selected = this.pnFirstDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    this.firstDropdownArr = [...this.updateSelectItemArr(this.firstDropdownArr, selectedValue)];
+    this.secondDropdownArr = [];
+    const selectedButton = this.buttonsArray.findIndex(item => item.selected === true);
+    const firstChildren = this._dropdownData.find(arr => arr.caption === this.buttonsArray[selectedButton].value);
+    const secondChildren = firstChildren.values.find(arr => arr.caption === selectedValue);
+    secondChildren.values.forEach(item => {
+      this.secondDropdownArr.push({ selected: false, value: item.caption, caption: item.caption });
+    });
+    this.secondDropdownPlaceholder = this.dropdownPlaceholder;
+    const secondDropdownText = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+    secondDropdownText.innerHTML = this.secondDropdownPlaceholder;
+    this.emittRowValues();
+  }
+  handleSecondDropdownChange() {
+    const selected = this.pnSecondDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    this.secondDropdownArr = [...this.updateSelectItemArr(this.secondDropdownArr, selectedValue)];
+    this.emittRowValues();
+  }
+  handleInput(e) {
+    const elm = e.target;
+    if (elm.value !== '0') {
+      this.inputFieldValue = elm.value;
+    }
+  }
+  showDateRangeRow() {
+    if (this.pnDateRangeContainer.style.display === 'none') {
+      this.pnDateRangeContainer.style.display = '';
+    }
+    else {
+      this.pnDateRangeContainer.style.display = 'none';
+    }
+  }
+  HandleRangeDatePickers(e) {
+    const elm = e.target;
+    if (elm === this.pnStartDate) {
+      this.starDateValue = e.detail;
+    }
+    if (elm === this.pnEndDate) {
+      this.endDateValue = e.detail;
+    }
+  }
+  generateDates(e) {
+    var _a;
+    e.preventDefault();
+    const allCheckboxes = this.pnDaysRow.querySelectorAll('pn-filter-checkbox');
+    const selectedDays = [];
+    this.generatedDatesArr = [];
+    allCheckboxes.forEach(element => {
+      const input = element.querySelector('input');
+      if (input.value) {
+        selectedDays.push(input.value);
+      }
+    });
+    if (selectedDays.length && this.starDateValue && this.endDateValue) {
+      this.daysArr.forEach(item => {
+        if (selectedDays.some(x => x === item.value)) {
+          item.selected = true;
+        }
+        else {
+          item.selected = false;
+        }
+      });
+      const startDate = new Date(Date.parse(this.starDateValue));
+      const endDate = new Date(Date.parse(this.endDateValue));
+      for (var d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
+        const i = this.daysArr.findIndex(item => parseInt(item.value) === d.getDay());
+        if ((_a = this.daysArr[i]) === null || _a === void 0 ? void 0 : _a.selected) {
+          const year = d.getFullYear();
+          const month = (d.getMonth() + 1).toString().padStart(2, '0');
+          const day = d.getDate().toString().padStart(2, '0');
+          this.generatedDatesArr.push(`${year}-${month}-${day}`);
+        }
+      }
+    }
+  }
+  deleteGeneratedDateRow(index) {
+    this.generatedDatesArr.splice(index, 1);
+    this.generatedDatesArr = [...this.generatedDatesArr];
+  }
+  saveGeneratedDates() {
+    var _a;
+    if ((_a = this.generatedDatesArr) === null || _a === void 0 ? void 0 : _a.length) {
+      this.dateValue = String(this.generatedDatesArr);
+      const dateCount = this.generatedDatesArr.length;
+      const buttonTextElm = this.pnShowDateRangeFiledButton.querySelector('.pn-button-content');
+      buttonTextElm.innerHTML = dateCount > 0 ? `${this.dateButtonText} (${dateCount})` : this.dateButtonText;
+      this.showDateRangeRow();
+    }
+  }
+  setSingleDateValue(e) {
+    const elm = e.target;
+    if (elm === this.pnSingleDatePicker) {
+      this.dateValue = e.detail;
+    }
+  }
+  emittRowValues() {
+    this.rowValueChange.emit({
+      id: this._predefinedValue.id,
+      buttons: this.buttonsArray,
+      firstDropdown: this.firstDropdownArr,
+      secondDropdown: this.secondDropdownArr,
+      input: this.inputFieldValue,
+      dates: this.dateValue,
+      dateRange: {
+        days: this.daysArr,
+        startDate: this.starDateValue,
+        endDate: this.endDateValue,
+      },
+    });
+  }
+  deleteRow() {
+    this.deleteRowEvent.emit(this._predefinedValue.id);
+  }
+  setActive(active) {
+    return active ? 'connected-dropdown__button active' : 'connected-dropdown__button';
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return (h(Host, null, h("div", { ref: el => (this.pnConnectedDropdownSlotElement = el), class: "connected-dropdown-slot-element" }, h("div", { class: "connected-dropdown-parent-element connected-dropdown" }, h("div", { class: "connected-dropdown__row__no-margin" }, h("label", null, this.label)), h("div", { class: "connected-dropdown__row button-row" }, h("div", { class: "connected-dropdown__button-container option-buttons" }, (_a = this.buttonsArray) === null || _a === void 0 ? void 0 : _a.map(item => (h("button", { class: `${this.setActive(item.selected)}`, id: this.generateUniqueId(), onClick: this.handleOptionButtonClick.bind(this) }, item.value)))), h("div", { class: "connected-dropdown__button-container delete-button" }, this.index > 0 ? (h("pn-button", { ref: el => (this.pnDeleteRowButton = el), small: "true", "icon-only": "true", icon: "minus", appearance: "warning", index: this.index }, "Delete")) : null)), h("div", { class: "connected-dropdown__row input-row" }, h("pn-select", { ref: el => (this.pnFirstDropdown = el), class: "pn-row-select-dropdown dropDown1-dropdown", placeholder: this.firstDropdownPlaceholder, label: this.firstDropdownLabel }, (_b = this.firstDropdownArr) === null || _b === void 0 ? void 0 : _b.map((item, i) => (h("pn-option", { index: i, value: item.value, selected: item.selected, onClick: debounce(this.handleFirstDropdownChange.bind(this), 500) }, item.value)))), h("pn-select", { ref: el => (this.pnSecondDropdown = el), class: "pn-row-select-dropdown dropDown2-dropdown", placeholder: this.secondDropdownPlaceholder, label: this.secondDropdownLabel }, (_c = this.secondDropdownArr) === null || _c === void 0 ? void 0 : _c.map((item, i) => (h("pn-option", { index: i, value: item.value, selected: item.selected, onClick: debounce(this.handleSecondDropdownChange.bind(this), 500) }, item.value)))), h("pn-marketweb-input", { ref: el => (this.pnInputField = el), type: "number", placeholder: "0", label: this.inputFildLabel, value: this.inputFieldValue, min: "1" }), this.allowMultipleDates ? (h("pn-button", { ref: el => (this.pnShowDateRangeFiledButton = el), class: "connected-dropdown__toggle-date-button", small: "true", appearance: "light" }, this.dateButtonText)) : (h("div", { class: "connected-dropdown__date-container" }, h("div", { class: "connected-dropdown__label-container" }, h("label", null, this.dateButtonText)), h("pn-date-picker", { ref: el => (this.pnSingleDatePicker = el), range: "false", "disable-weekends": true, "min-date": this.firstValidDateString, language: this.languageCode, placeholder: this.datePlaceholder, class: "connected-dropdown__date-picker", start: ((_d = this.dateValue) === null || _d === void 0 ? void 0 : _d.length) ? this.dateValue : null })))), this.allowMultipleDates ? (h("div", { ref: el => (this.pnDateRangeContainer = el), class: "connected-dropdown__date-container", style: { display: 'none' } }, this.multiDateHelperText ? (h("div", { class: "connected-dropdown__row" }, h("p", null, this.multiDateHelperText))) : null, h("div", { class: "connected-dropdown__multi-date-row" }, h("div", { class: "connected-dropdown__date-container" }, h("div", { class: "connected-dropdown__label-container" }, h("label", null, this.startDateLabel)), h("pn-date-picker", { ref: el => (this.pnStartDate = el), range: "false", "disable-weekends": true, class: "connected-dropdown__date-picker", "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.languageCode, placeholder: this.datePlaceholder, start: ((_e = this.starDateValue) === null || _e === void 0 ? void 0 : _e.length) ? this.starDateValue : null })), h("div", { class: "connected-dropdown__date-container" }, h("div", { class: "connected-dropdown__label-container" }, h("label", null, this.endDateLabel)), h("pn-date-picker", { ref: el => (this.pnEndDate = el), range: "false", "disable-weekends": true, class: "connected-dropdown__date-picker", "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.languageCode, placeholder: this.datePlaceholder, start: ((_f = this.endDateValue) === null || _f === void 0 ? void 0 : _f.length) ? this.endDateValue : null }))), h("div", { ref: el => (this.pnDaysRow = el), class: "connected-dropdown__multi-date-row" }, (_g = this.daysArr) === null || _g === void 0 ? void 0 : _g.map((day) => (h("div", { class: "connected-dropdown__checkbox" }, h("pn-filter-checkbox", { checkboxid: 'day-' + day.value, name: '__' + day.caption, value: day.value, checked: day.selected }), h("label", { htmlFor: 'day-' + day.value }, day.caption))))), h("div", { class: "connected-dropdown__row" }, h("pn-button", { ref: el => (this.pnGenerateDatesButton = el), small: "true" }, this.generateDatesButtonText)), h("div", { ref: el => (this.pnGeneratedDatesSlot = el), class: "connected-dropdown__date-slot" }, (_h = this.generatedDatesArr) === null || _h === void 0 ? void 0 :
+      _h.map((date, i) => (h("div", { class: "connected-dropdown__row generated-date-row" }, h("p", null, date), h("pn-button", { index: i, small: "true", "icon-only": "true", icon: "minus", appearance: "warning", id: 'delete-date-' + i, onClick: this.deleteGeneratedDateRow.bind(this, i) }, date)))), !((_j = this.generatedDatesArr) === null || _j === void 0 ? void 0 : _j.length) ? h("p", null, this.noDatesText) : null), h("div", { class: "connected-dropdown__row" }, h("pn-button", { ref: el => (this.pnSaveGeneratedDatesButton = el), class: "connected-dropdown__button-right", small: "true" }, this.saveDateButtonText)))) : null))));
+  }
+  static get is() { return "pn-multi-row-connected-dropdown-row"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-multi-row-connected-dropdown-row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-multi-row-connected-dropdown-row.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"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "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"
+      },
+      "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"
+      },
+      "dropdownPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-placeholder",
+        "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"
+      },
+      "inputFildLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-fild-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "inputFildPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-fild-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "dateButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-button-text",
+        "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"
+      },
+      "allowMultipleDates": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-multiple-dates",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "startDateLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start-date-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "endDateLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "end-date-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "multiDateHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multi-date-helper-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "generateDatesButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "generate-dates-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "saveDateButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "save-date-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "noDatesText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-dates-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "index": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "predefinedValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "predefined-value",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "buttonsArray": {},
+      "firstDropdownArr": {},
+      "secondDropdownArr": {},
+      "firstDropdownClass": {},
+      "secondDropdownClass": {},
+      "firstValidDateString": {},
+      "lastValidDateString": {},
+      "firstDropdownPlaceholder": {},
+      "secondDropdownPlaceholder": {},
+      "starDateValue": {},
+      "endDateValue": {},
+      "generatedDatesArr": {},
+      "selectedButtonValue": {},
+      "inputFieldValue": {},
+      "dateValue": {},
+      "daysArr": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowValueChange",
+        "name": "rowValueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "PredefinedValues",
+          "resolved": "PredefinedValues",
+          "references": {
+            "PredefinedValues": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "method": "deleteRowEvent",
+        "name": "deleteRowEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "predefinedValue",
+        "methodName": "applyPredefinedValue"
+      }];
+  }
+}