@postnord/pn-marketweb-components 2.4.24 → 2.4.26

package/components/pn-multi-row-connected-dropdown-row2.js

@@ -0,0 +1,434 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$2 } from './pn-filter-checkbox2.js';
+import { d as defineCustomElement$1 } from './pn-marketweb-input2.js';
+import { v as v4 } from './v4.js';
+
+const pnMultiRowConnectedDropdownRowCss = "pn-multi-row-connected-dropdown-row{gap:1rem}pn-multi-row-connected-dropdown-row .connected-dropdown-parent-element{margin-bottom:0.5rem}pn-multi-row-connected-dropdown-row pn-select{width:35%}pn-multi-row-connected-dropdown-row pn-marketweb-input{width:10%}pn-multi-row-connected-dropdown-row pn-marketweb-input input{height:4.3rem}pn-multi-row-connected-dropdown-row .connected-dropdown{padding:1rem;border-left:0.2rem solid #005D92}pn-multi-row-connected-dropdown-row .connected-dropdown:hover{background-color:#F9F8F8}pn-multi-row-connected-dropdown-row .connected-dropdown__toggle-date-button{width:20%;margin-bottom:0.5rem}pn-multi-row-connected-dropdown-row .connected-dropdown__row{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;gap:1rem;margin-bottom:1rem;-ms-flex-pack:justify;justify-content:space-between}pn-multi-row-connected-dropdown-row .connected-dropdown__row__no-margin{margin:0}pn-multi-row-connected-dropdown-row .connected-dropdown__multi-date-row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:1rem;margin-bottom:1rem}pn-multi-row-connected-dropdown-row .connected-dropdown__button-container{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;gap:1rem}pn-multi-row-connected-dropdown-row .connected-dropdown__button{background-color:#ffffff;border:solid;border-width:0.1rem;border-radius:0.8rem;border-color:#005D92;padding:0.4rem 0.8rem;color:#005D92;font-size:1.4rem;text-align:center;text-decoration:none;cursor:pointer}pn-multi-row-connected-dropdown-row .connected-dropdown__button:hover,pn-multi-row-connected-dropdown-row .connected-dropdown__button.active{background-color:#0D234B;border-color:#0D234B;color:#ffffff}pn-multi-row-connected-dropdown-row .connected-dropdown__buttom-container-right{display:-ms-flexbox;display:flex}pn-multi-row-connected-dropdown-row .connected-dropdown__button-right{margin-left:auto}pn-multi-row-connected-dropdown-row .connected-dropdown__label-container{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-multi-row-connected-dropdown-row .connected-dropdown__checkbox{display:-ms-flexbox;display:flex;gap:0.5rem}pn-multi-row-connected-dropdown-row .connected-dropdown__date-slot{border:0.1rem solid #005D92;margin-bottom:1rem;padding:1rem}pn-multi-row-connected-dropdown-row .generated-date-row{border-bottom:0.1rem solid #005D92}";
+
+const PnMultiRowConnectedDropdownRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rowValueChange = createEvent(this, "rowValueChange", 7);
+    this.deleteRowEvent = createEvent(this, "deleteRowEvent", 7);
+    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_1.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 v4();
+  }
+  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_1.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_1.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))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "predefinedValue": ["applyPredefinedValue"]
+  }; }
+  static get style() { return pnMultiRowConnectedDropdownRowCss; }
+}, [0, "pn-multi-row-connected-dropdown-row", {
+    "dropdownData": [1, "dropdown-data"],
+    "languageCode": [1, "language-code"],
+    "label": [1],
+    "firstDropdownLabel": [1, "first-dropdown-label"],
+    "secondDropdownLabel": [1, "second-dropdown-label"],
+    "dropdownPlaceholder": [1, "dropdown-placeholder"],
+    "addRowText": [1, "add-row-text"],
+    "inputFildLabel": [1, "input-fild-label"],
+    "inputFildPlaceholder": [1, "input-fild-placeholder"],
+    "dateButtonText": [1, "date-button-text"],
+    "datePlaceholder": [1, "date-placeholder"],
+    "dateDaysFromToday": [2, "date-days-from-today"],
+    "allowMultipleDates": [4, "allow-multiple-dates"],
+    "startDateLabel": [1, "start-date-label"],
+    "endDateLabel": [1, "end-date-label"],
+    "multiDateHelperText": [1, "multi-date-helper-text"],
+    "generateDatesButtonText": [1, "generate-dates-button-text"],
+    "saveDateButtonText": [1, "save-date-button-text"],
+    "noDatesText": [1, "no-dates-text"],
+    "index": [2],
+    "predefinedValue": [1, "predefined-value"],
+    "yearsToAddToEndDate": [2, "years-to-add-to-end-date"],
+    "buttonsArray": [32],
+    "firstDropdownArr": [32],
+    "secondDropdownArr": [32],
+    "firstDropdownClass": [32],
+    "secondDropdownClass": [32],
+    "firstValidDateString": [32],
+    "lastValidDateString": [32],
+    "firstDropdownPlaceholder": [32],
+    "secondDropdownPlaceholder": [32],
+    "starDateValue": [32],
+    "endDateValue": [32],
+    "generatedDatesArr": [32],
+    "selectedButtonValue": [32],
+    "inputFieldValue": [32],
+    "dateValue": [32],
+    "daysArr": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-multi-row-connected-dropdown-row", "pn-filter-checkbox", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-multi-row-connected-dropdown-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMultiRowConnectedDropdownRow);
+      }
+      break;
+    case "pn-filter-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMultiRowConnectedDropdownRow as P, defineCustomElement as d };

package/components/pn-multi-row-connected-dropdown.d.ts

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