@postnord/pn-marketweb-components 2.4.24 → 2.4.26

package/cjs/pn-multi-row-connected-dropdown-row.cjs.entry.js

@@ -0,0 +1,372 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4199ff85.js');
+const index$1 = require('./index-e4882728.js');
+const v4 = require('./v4-45e08b63.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.rowValueChange = index.createEvent(this, "rowValueChange", 7);
+    this.deleteRowEvent = index.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 = index$1.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.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 (index.h(index.Host, null, index.h("div", { ref: el => (this.pnConnectedDropdownSlotElement = el), class: "connected-dropdown-slot-element" }, index.h("div", { class: "connected-dropdown-parent-element connected-dropdown" }, index.h("div", { class: "connected-dropdown__row__no-margin" }, index.h("label", null, this.label)), index.h("div", { class: "connected-dropdown__row button-row" }, index.h("div", { class: "connected-dropdown__button-container option-buttons" }, (_a = this.buttonsArray) === null || _a === void 0 ? void 0 : _a.map(item => (index.h("button", { class: `${this.setActive(item.selected)}`, id: this.generateUniqueId(), onClick: this.handleOptionButtonClick.bind(this) }, item.value)))), index.h("div", { class: "connected-dropdown__button-container delete-button" }, this.index > 0 ? (index.h("pn-button", { ref: el => (this.pnDeleteRowButton = el), small: "true", "icon-only": "true", icon: "minus", appearance: "warning", index: this.index }, "Delete")) : null)), index.h("div", { class: "connected-dropdown__row input-row" }, index.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) => (index.h("pn-option", { index: i, value: item.value, selected: item.selected, onClick: index$1.debounce_1.debounce(this.handleFirstDropdownChange.bind(this), 500) }, item.value)))), index.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) => (index.h("pn-option", { index: i, value: item.value, selected: item.selected, onClick: index$1.debounce_1.debounce(this.handleSecondDropdownChange.bind(this), 500) }, item.value)))), index.h("pn-marketweb-input", { ref: el => (this.pnInputField = el), type: "number", placeholder: "0", label: this.inputFildLabel, value: this.inputFieldValue, min: "1" }), this.allowMultipleDates ? (index.h("pn-button", { ref: el => (this.pnShowDateRangeFiledButton = el), class: "connected-dropdown__toggle-date-button", small: "true", appearance: "light" }, this.dateButtonText)) : (index.h("div", { class: "connected-dropdown__date-container" }, index.h("div", { class: "connected-dropdown__label-container" }, index.h("label", null, this.dateButtonText)), index.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 ? (index.h("div", { ref: el => (this.pnDateRangeContainer = el), class: "connected-dropdown__date-container", style: { display: 'none' } }, this.multiDateHelperText ? (index.h("div", { class: "connected-dropdown__row" }, index.h("p", null, this.multiDateHelperText))) : null, index.h("div", { class: "connected-dropdown__multi-date-row" }, index.h("div", { class: "connected-dropdown__date-container" }, index.h("div", { class: "connected-dropdown__label-container" }, index.h("label", null, this.startDateLabel)), index.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 })), index.h("div", { class: "connected-dropdown__date-container" }, index.h("div", { class: "connected-dropdown__label-container" }, index.h("label", null, this.endDateLabel)), index.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 }))), index.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) => (index.h("div", { class: "connected-dropdown__checkbox" }, index.h("pn-filter-checkbox", { checkboxid: 'day-' + day.value, name: '__' + day.caption, value: day.value, checked: day.selected }), index.h("label", { htmlFor: 'day-' + day.value }, day.caption))))), index.h("div", { class: "connected-dropdown__row" }, index.h("pn-button", { ref: el => (this.pnGenerateDatesButton = el), small: "true" }, this.generateDatesButtonText)), index.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) => (index.h("div", { class: "connected-dropdown__row generated-date-row" }, index.h("p", null, date), index.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) ? index.h("p", null, this.noDatesText) : null), index.h("div", { class: "connected-dropdown__row" }, index.h("pn-button", { ref: el => (this.pnSaveGeneratedDatesButton = el), class: "connected-dropdown__button-right", small: "true" }, this.saveDateButtonText)))) : null))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "predefinedValue": ["applyPredefinedValue"]
+  }; }
+};
+PnMultiRowConnectedDropdownRow.style = pnMultiRowConnectedDropdownRowCss;
+
+exports.pn_multi_row_connected_dropdown_row = PnMultiRowConnectedDropdownRow;

package/cjs/pn-multi-row-connected-dropdown.cjs.entry.js

@@ -0,0 +1,205 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4199ff85.js');
+const v4 = require('./v4-45e08b63.js');
+
+const pnMultiRowConnectedDropdownCss = "pn-multi-row-connected-dropdown{gap:1rem}pn-multi-row-connected-dropdown .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 .connected-dropdown__row__no-margin{margin:0}pn-multi-row-connected-dropdown .connected-dropdown__button-right{margin-left:auto}";
+
+const PnMultiRowConnectedDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.allFormValues = index.createEvent(this, "allFormValues", 7);
+    this._buttonValueName = null;
+    this._firstDropdownValueName = null;
+    this._secondDropdownValueName = null;
+    this._inputValueName = null;
+    this._dateValueName = null;
+    this._defaultRow = {
+      id: this.generateUniqueId(),
+      buttons: [],
+      firstDropdown: [],
+      secondDropdown: [],
+      input: '',
+      dates: '',
+      dateRange: {
+        days: [],
+        startDate: '',
+        endDate: '',
+      },
+    };
+    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 = null;
+    this.allowMultipleRows = false;
+    this.allowMultipleDates = false;
+    this.startDateLabel = null;
+    this.endDateLabel = null;
+    this.multiDateHelperText = null;
+    this.generateDatesButtonText = null;
+    this.saveDateButtonText = null;
+    this.noDatesText = null;
+    this.yearsToAddToEndDate = null;
+    this.rowCount = null;
+    this.rowData = null;
+    this.formValues = null;
+  }
+  componentWillLoad() {
+    var _a, _b, _c, _d, _e;
+    this.setDaysArr();
+    this.formValues = [];
+    this.rowData = [this._defaultRow];
+    this.rowCount = this.rowData.length;
+    this._buttonValueName = ((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) ? this.label : 'value0';
+    this._firstDropdownValueName = ((_b = this.firstDropdownLabel) === null || _b === void 0 ? void 0 : _b.length) ? this.firstDropdownLabel : 'value1';
+    this._secondDropdownValueName = ((_c = this.secondDropdownLabel) === null || _c === void 0 ? void 0 : _c.length) ? this.secondDropdownLabel : 'value2';
+    this._inputValueName = ((_d = this.inputFildLabel) === null || _d === void 0 ? void 0 : _d.length) ? this.inputFildLabel : 'value3';
+    this._dateValueName = ((_e = this.dateButtonText) === null || _e === void 0 ? void 0 : _e.length) ? this.dateButtonText : 'value4';
+  }
+  componentDidLoad() { }
+  emittValuesIfValid() {
+    this.formValues = [];
+    this.rowData.forEach(item => {
+      const rowValue = { row: [] };
+      const buttonSelection = item.buttons.find(x => x.selected === true);
+      if (buttonSelection) {
+        const buttonValue = { name: this._buttonValueName, value: buttonSelection.caption };
+        rowValue.row.push(buttonValue);
+      }
+      const firstDropdownSelection = item.firstDropdown.find(x => x.selected === true);
+      if (firstDropdownSelection) {
+        const firstDropdownValue = { name: this._firstDropdownValueName, value: firstDropdownSelection.caption };
+        rowValue.row.push(firstDropdownValue);
+      }
+      const secondDropdownSelection = item.secondDropdown.find(x => x.selected === true);
+      if (secondDropdownSelection) {
+        const secondDropdownValue = { name: this._secondDropdownValueName, value: secondDropdownSelection.caption };
+        rowValue.row.push(secondDropdownValue);
+      }
+      const input = item.input;
+      if (input === null || input === void 0 ? void 0 : input.length) {
+        const inputValue = { name: this._inputValueName, value: input };
+        rowValue.row.push(inputValue);
+      }
+      const dates = item.dates;
+      if (dates === null || dates === void 0 ? void 0 : dates.length) {
+        const datestValue = { name: this._dateValueName, value: dates };
+        rowValue.row.push(datestValue);
+      }
+      if (rowValue.row.length === 5) {
+        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('');
+    }
+  }
+  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]), { buttons: val.buttons, firstDropdown: val.firstDropdown, secondDropdown: val.secondDropdown, input: val.input, dates: val.dates, dateRange: val.dateRange });
+    this.emittValuesIfValid();
+  }
+  deleteRowEvent(e) {
+    const indexToRemove = this.rowData.findIndex(data => data.id === e.detail);
+    this.rowData.splice(indexToRemove, 1);
+    this.rowData = [...this.rowData];
+    this.rowCount = this.rowData.length;
+    this.emittValuesIfValid();
+  }
+  generateUniqueId() {
+    return v4.v4();
+  }
+  addRow() {
+    const newRow = this._defaultRow;
+    newRow.id = this.generateUniqueId();
+    this.rowData = [...this.rowData, newRow];
+    this.rowCount = this.rowData.length;
+  }
+  setDaysArr() {
+    const language = this.languageCode.toLowerCase();
+    switch (language) {
+      case 'en':
+        this._defaultRow.dateRange.days = [
+          { caption: 'Monday', value: '1', selected: false },
+          { caption: 'Tuesday', value: '2', selected: false },
+          { caption: 'Wednesday', value: '3', selected: false },
+          { caption: 'Thursday', value: '4', selected: false },
+          { caption: 'Friday', value: '5', selected: false },
+        ];
+        break;
+      case 'sv':
+        this._defaultRow.dateRange.days = [
+          { caption: 'Måndag', value: '1', selected: false },
+          { caption: 'Tisdag', value: '2', selected: false },
+          { caption: 'Onsdag', value: '3', selected: false },
+          { caption: 'Torsdag', value: '4', selected: false },
+          { caption: 'Fredag', value: '5', selected: false },
+        ];
+        break;
+      case 'da':
+        this._defaultRow.dateRange.days = [
+          { caption: 'Mandag', value: '1', selected: false },
+          { caption: 'Tirsdag', value: '2', selected: false },
+          { caption: 'Onsdag', value: '3', selected: false },
+          { caption: 'Torsdag', value: '4', selected: false },
+          { caption: 'Fredag', value: '5', selected: false },
+        ];
+        break;
+      case 'fi':
+        this._defaultRow.dateRange.days = [
+          { caption: 'Maanantai', value: '1', selected: false },
+          { caption: 'Tiistai', value: '2', selected: false },
+          { caption: 'Keskiviikko', value: '3', selected: false },
+          { caption: 'Torstai', value: '4', selected: false },
+          { caption: 'Perjantai', value: '5', selected: false },
+        ];
+        break;
+      case 'no':
+        this._defaultRow.dateRange.days = [
+          { caption: 'Mandag', value: '1', selected: false },
+          { caption: 'Tirsdag', value: '2', selected: false },
+          { caption: 'Onsdag', value: '3', selected: false },
+          { caption: 'Torsdag', value: '4', selected: false },
+          { caption: 'Fredag', value: '5', selected: false },
+        ];
+        break;
+      default:
+        this._defaultRow.dateRange.days = [
+          { caption: 'Monday', value: '1', selected: false },
+          { caption: 'Tuesday', value: '2', selected: false },
+          { caption: 'Wednesday', value: '3', selected: false },
+          { caption: 'Thursday', value: '4', selected: false },
+          { caption: 'Friday', value: '5', selected: false },
+        ];
+        break;
+    }
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, (_a = this.rowData) === null || _a === void 0 ? void 0 :
+      _a.map((data, i) => {
+        return (index.h("div", { class: 'generated-row-' + i, id: 'generated-row-connected-dropdown-' + i }, index.h("pn-multi-row-connected-dropdown-row", { "dropdown-data": this.dropdownData, "language-code": this.languageCode, label: this.label, "first-dropdown-label": this.firstDropdownLabel, "second-dropdown-label": this.secondDropdownLabel, "dropdown-placeholder": this.dropdownPlaceholder, "add-row-text": this.addRowText, "input-fild-label": this.inputFildLabel, "input-fild-placeholder": this.inputFildPlaceholder, "date-button-text": this.dateButtonText, "date-placeholder": this.datePlaceholder, "date-days-from-today": 1, "allow-multiple-dates": this.allowMultipleDates, "start-date-label": this.startDateLabel, "end-date-label": this.endDateLabel, "multi-date-helper-text": this.multiDateHelperText, "generate-dates-button-text": this.generateDatesButtonText, "save-date-button-text": this.saveDateButtonText, "no-dates-text": this.noDatesText, index: i, "predefined-value": JSON.stringify(data), "years-to-add-to-end-date": this.yearsToAddToEndDate })));
+      }), this.allowMultipleRows ? (index.h("div", { class: "connected-dropdown__row" }, index.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.addRowText))) : null));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMultiRowConnectedDropdown.style = pnMultiRowConnectedDropdownCss;
+
+exports.pn_multi_row_connected_dropdown = PnMultiRowConnectedDropdown;

package/cjs/pn-site-footer_3.cjs.entry.js

@@ -20,7 +20,7 @@ const PnSiteFooter = class {
 };
 PnSiteFooter.style = pnSiteFooterCss;
 
-const pnSiteFooterColCss = "pn-site-footer-col:not([theme=dotcom]){min-width:15em;padding:2.5em 1.5rem 0;width:100%}@media screen and (min-width: 33.125em){pn-site-footer-col:not([theme=dotcom]){width:50%}}@media screen and (min-width: 60em){pn-site-footer-col:not([theme=dotcom]){max-width:25%}}pn-site-footer-col:not([theme=dotcom]) ul{list-style-type:none;padding:0;margin:0}pn-site-footer-col:not([theme=dotcom]) li{margin-bottom:1.6rem}pn-site-footer-col:not([theme=dotcom]) a{text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}pn-site-footer-col:not([theme=dotcom]) a h3{color:#000000}pn-site-footer-col:not([theme=dotcom]) p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom]{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-site-footer-col[theme=dotcom] *{color:#FFFFFF}@media screen and (min-width: 768px){pn-site-footer-col[theme=dotcom]{width:33%;padding-left:0.8rem;padding-right:0.8rem}pn-site-footer-col[theme=dotcom]:nth-child(1),pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(3),pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}@media screen and (min-width: 1024px){pn-site-footer-col[theme=dotcom]{width:20%;padding-left:1.6rem;padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(1){width:20%;padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(3){padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}pn-site-footer-col[theme=dotcom] h3{margin-bottom:1rem;font-weight:700;font-size:2rem;line-height:2.2rem}@media screen and (min-width: 1200px){pn-site-footer-col[theme=dotcom] h3{font-size:2.4rem;line-height:2.64rem}}pn-site-footer-col[theme=dotcom] ul{list-style-type:none;padding:0;margin:0;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] ul li{margin-bottom:1rem}pn-site-footer-col[theme=dotcom] a{text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-weight:400;font-size:1.6rem;line-height:2.24rem}pn-site-footer-col[theme=dotcom] a h3{color:#FFFFFF}pn-site-footer-col[theme=dotcom] p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom] div{min-height:150px;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] div p:nth-child(odd){font-weight:500}";
+const pnSiteFooterColCss = "pn-site-footer-col:not([theme=dotcom]){min-width:15em;padding:2.5em 1.5rem 0;width:100%}@media screen and (min-width: 33.125em){pn-site-footer-col:not([theme=dotcom]){width:50%}}@media screen and (min-width: 60em){pn-site-footer-col:not([theme=dotcom]){max-width:25%}}pn-site-footer-col:not([theme=dotcom]) ul{list-style-type:none;padding:0;margin:0}pn-site-footer-col:not([theme=dotcom]) li{margin-bottom:1.6rem}pn-site-footer-col:not([theme=dotcom]) a{text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}pn-site-footer-col:not([theme=dotcom]) a h3{color:#000000}pn-site-footer-col:not([theme=dotcom]) p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom]{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-site-footer-col[theme=dotcom] *{color:#FFFFFF}@media screen and (min-width: 768px){pn-site-footer-col[theme=dotcom]{width:33%;padding-left:0.8rem;padding-right:0.8rem}pn-site-footer-col[theme=dotcom]:nth-child(1),pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(3),pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}@media screen and (min-width: 1024px){pn-site-footer-col[theme=dotcom]{width:20%;padding-left:1.6rem;padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(1){width:20%;padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(3){padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}pn-site-footer-col[theme=dotcom] h3{margin-bottom:1rem;font-weight:700;font-size:2rem;line-height:2.2rem}@media screen and (min-width: 1200px){pn-site-footer-col[theme=dotcom] h3{font-size:2.4rem;line-height:2.64rem}}pn-site-footer-col[theme=dotcom] ul{list-style-type:none;padding:0;margin:0;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] ul li{margin-bottom:1rem}pn-site-footer-col[theme=dotcom] a{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-weight:400;font-size:1.6rem;line-height:2.24rem}pn-site-footer-col[theme=dotcom] a h3{color:#FFFFFF}pn-site-footer-col[theme=dotcom] p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom] div{min-height:150px;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] div p:nth-child(odd){font-weight:500}";
 
 const PnSiteFooterCol = class {
   constructor(hostRef) {

package/collection/collection-manifest.json

@@ -26,6 +26,8 @@
     "./components/input/pn-marketweb-input/pn-marketweb-input.js",
     "./components/input/pn-marketweb-search/pn-marketweb-search.js",
     "./components/input/pn-multi-formfield/pn-multi-formfield.js",
+    "./components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js",
+    "./components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.js",
     "./components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js",