@postnord/pn-marketweb-components 2.4.24 → 2.4.26

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

@@ -0,0 +1,16 @@
+pn-multi-row-connected-dropdown {
+  gap: 1rem;
+}
+pn-multi-row-connected-dropdown .connected-dropdown__row {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  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;
+}

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

@@ -0,0 +1,631 @@
+import { h, Host } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
+export class PnMultiRowConnectedDropdown {
+  constructor() {
+    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 uuidv4();
+  }
+  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 (h(Host, null, (_a = this.rowData) === null || _a === void 0 ? void 0 :
+      _a.map((data, i) => {
+        return (h("div", { class: 'generated-row-' + i, id: 'generated-row-connected-dropdown-' + i }, 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 ? (h("div", { class: "connected-dropdown__row" }, 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));
+  }
+  static get is() { return "pn-multi-row-connected-dropdown"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-multi-row-connected-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-multi-row-connected-dropdown.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": "null"
+      },
+      "allowMultipleRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-multiple-rows",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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": "false"
+      },
+      "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"
+      },
+      "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 {
+      "rowCount": {},
+      "rowData": {},
+      "formValues": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "allFormValues",
+        "name": "allFormValues",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "rowValueChange",
+        "method": "predefinedValueChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "deleteRowEvent",
+        "method": "deleteRowEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}