@postnord/pn-marketweb-components 2.4.17 → 2.4.19

package/collection/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.js

@@ -0,0 +1,508 @@
+import { h, Host } from '@stencil/core';
+import { debounce } from 'debounce';
+export class pnDropdownChoiceAddsRow {
+  constructor() {
+    this.pnRowSelectDropdown = null;
+    this.tableHead = null;
+    this.tableBody = null;
+    this.formRowEvent = e => {
+      var _a;
+      const debouncedAddValue = debounce(this.updateHiddenFieldValue.bind(this), 500);
+      if (e.target.matches('input')) {
+        ['change', 'keyup'].forEach(eventName => {
+          e.target.addEventListener(eventName, debouncedAddValue);
+        });
+      }
+      else {
+        const rowDropdown = (_a = e.target.closest('.generated-table-row')) === null || _a === void 0 ? void 0 : _a.querySelector('pn-select');
+        if (rowDropdown) {
+          rowDropdown.addEventListener('selectchange', debouncedAddValue);
+        }
+      }
+    };
+    this.dropdownData = null;
+    this.addRowDropdownName = '';
+    this.addRowDropdownPlaceholder = '';
+    this.addRowDropdownLabel = '';
+    this.rowNameLabel = '';
+    this.rowHasDropdown = true;
+    this.rowDropdownLabel = '';
+    this.rowDropdownPlaceholder = '';
+    this.rowInputLabel = '';
+    this.rowDeleteButtonText = '';
+    this.totalInputLimit = 0;
+    this.inputLimitWarning = null;
+    this.nextRowIndex = null;
+    this.rowSelectDropdownArr = null;
+    this.columnCount = null;
+    this.showWarning = false;
+    this.formValue = null;
+  }
+  dropdownDataWatcher() {
+    if (typeof this.dropdownData === 'string') {
+      this._dropdownData = JSON.parse(this.dropdownData);
+    }
+    else {
+      this._dropdownData = this.dropdownData;
+    }
+  }
+  componentWillLoad() {
+    this.dropdownDataWatcher();
+  }
+  componentDidLoad() {
+    this.setInitialValues();
+    this.addEventHandlers();
+  }
+  addEventHandlers() {
+    this.pnRowSelectDropdown.addEventListener('selectchange', this.addRowElement.bind(this));
+  }
+  setInitialValues() {
+    this.nextRowIndex = 0;
+    this.columnCount = this.rowHasDropdown ? 4 : 3;
+    this.setRowSelectDropdownArr();
+  }
+  setRowSelectDropdownArr() {
+    this.rowSelectDropdownArr = [];
+    this._dropdownData.forEach(element => {
+      this.rowSelectDropdownArr.push(element.caption);
+    });
+  }
+  updateHiddenFieldValue() {
+    const allRows = [...this.tableBody.querySelectorAll('tr')];
+    const columnValueCount = this.rowHasDropdown ? 3 : 2;
+    const formValues = [];
+    if (allRows.length) {
+      allRows.forEach(elm => {
+        var _a, _b, _c;
+        const row = { row: [] };
+        const nameElm = elm.querySelector('.tr-name');
+        const dropdownElm = elm.querySelector('.tr-dropdown');
+        const inputElm = elm.querySelector('.tr-input');
+        const nameValue = { name: this.rowNameLabel, value: nameElm === null || nameElm === void 0 ? void 0 : nameElm.innerHTML };
+        row.row.push(nameValue);
+        const dropdown = dropdownElm.querySelector('.current-selection');
+        if (dropdown) {
+          const dropdownSelection = (_a = dropdown.textContent) !== null && _a !== void 0 ? _a : '';
+          if (dropdownSelection.length) {
+            const dropdownValue = {
+              name: this.rowDropdownLabel,
+              value: dropdownSelection,
+            };
+            row.row.push(dropdownValue);
+          }
+        }
+        if (!dropdown && columnValueCount === 3) {
+          const dropdownValue = {
+            name: this.rowDropdownLabel,
+            value: '',
+          };
+          row.row.push(dropdownValue);
+        }
+        const inputValue = parseInt((_c = (_b = inputElm.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '0');
+        if (inputValue > 0) {
+          const inputColumnValue = { name: this.rowInputLabel, value: inputValue.toString() };
+          row.row.push(inputColumnValue);
+        }
+        if (row.row.length === columnValueCount) {
+          formValues.push(row);
+        }
+      });
+    }
+    if (formValues.length && formValues.length === allRows.length) {
+      const valueJsonString = JSON.stringify(formValues);
+      this.formValue = `PN-JSON|${valueJsonString}`;
+    }
+    else {
+      this.formValue = '';
+    }
+    this.rowvalues.emit(this.formValue);
+    this.checkInputTotal();
+  }
+  addRowElement() {
+    const selected = this.pnRowSelectDropdown.querySelector('.current-selection .pn-option-content');
+    const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+    const slotElm = this.tableBody;
+    const newRow = document.createElement('tr');
+    newRow.setAttribute('index', `${this.nextRowIndex}`);
+    newRow.setAttribute('class', 'generated-table-row');
+    newRow.onclick = e => this.formRowEvent(e);
+    const rowNameColumn = document.createElement('td');
+    rowNameColumn.setAttribute('class', 'tr-name');
+    rowNameColumn.innerHTML = selectedValue;
+    newRow.appendChild(rowNameColumn);
+    if (this.rowHasDropdown) {
+      const rowDropdownColumn = this.createDropdownColumn(selectedValue);
+      newRow.appendChild(rowDropdownColumn);
+    }
+    const rowInputColumn = this.createInputColumn(selectedValue);
+    newRow.appendChild(rowInputColumn);
+    const deleteButton = this.createDeleteButtonColumn();
+    newRow.appendChild(deleteButton);
+    slotElm.appendChild(newRow);
+    this.updateRowSelectDropdown();
+    this.nextRowIndex++;
+  }
+  createDropdownColumn(selectedValue) {
+    const dropdownColumn = document.createElement('td');
+    dropdownColumn.setAttribute('class', 'tr-dropdown');
+    const selectedItem = this._dropdownData.find(arr => arr.caption === selectedValue);
+    if (Array.isArray(selectedItem.values) && selectedItem.values.length) {
+      const dropdown = document.createElement('pn-select');
+      dropdown.setAttribute('name', `${selectedValue}-dropdown`);
+      dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);
+      selectedItem.values.forEach(childItem => {
+        const childOption = document.createElement('pn-option');
+        childOption.innerHTML = childItem.caption;
+        dropdown.appendChild(childOption);
+      });
+      dropdownColumn.appendChild(dropdown);
+    }
+    return dropdownColumn;
+  }
+  createInputColumn(selectedValue) {
+    const inputColumn = document.createElement('td');
+    inputColumn.setAttribute('class', 'tr-input');
+    const inputElm = document.createElement('pn-marketweb-input');
+    inputElm.setAttribute('type', 'number');
+    inputElm.setAttribute('name', `${selectedValue}-input`);
+    inputElm.setAttribute('placeholder', '0');
+    inputColumn.appendChild(inputElm);
+    return inputColumn;
+  }
+  createDeleteButtonColumn() {
+    const buttonColumn = document.createElement('td');
+    buttonColumn.setAttribute('class', 'tr-delete');
+    const buttonElm = document.createElement('pn-button');
+    buttonElm.onclick = e => this.deleteRow(e);
+    buttonElm.setAttribute('appearance', 'warning');
+    buttonElm.setAttribute('small', 'true');
+    buttonElm.appendChild(document.createTextNode(this.rowDeleteButtonText));
+    buttonColumn.appendChild(buttonElm);
+    return buttonColumn;
+  }
+  updateRowSelectDropdown() {
+    const rowNames = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {
+      return el.innerHTML;
+    });
+    if (rowNames.length) {
+      this.rowSelectDropdownArr = [];
+      this._dropdownData.forEach(element => {
+        if (!rowNames.includes(element.caption)) {
+          this.rowSelectDropdownArr.push(element.caption);
+        }
+      });
+    }
+    else {
+      this.setRowSelectDropdownArr();
+    }
+    const selectOptions = this.pnRowSelectDropdown.querySelectorAll('pn-option');
+    selectOptions.forEach(elm => {
+      elm.removeAttribute('selected');
+    });
+    const placeholder = this.pnRowSelectDropdown.querySelector('.pn-option-content');
+    placeholder.innerHTML = this.addRowDropdownPlaceholder;
+    this.updateHiddenFieldValue();
+  }
+  deleteRow(e) {
+    e.preventDefault();
+    this.nextRowIndex--;
+    const targetElm = e.currentTarget;
+    const targetRow = targetElm.closest('tr');
+    targetRow.remove();
+    const allRows = [...this.tableBody.querySelectorAll('tr')];
+    allRows.map((elm, index) => {
+      elm.setAttribute('index', `${index}`);
+    });
+    this.updateRowSelectDropdown();
+  }
+  checkInputTotal() {
+    const allRows = this.tableBody.querySelectorAll('tr');
+    if (this.totalInputLimit === 0 || allRows.length < 1) {
+      this.showWarning = false;
+      return;
+    }
+    let totalInput = 0;
+    allRows.forEach(element => {
+      var _a;
+      const inputField = element.querySelector('pn-marketweb-input');
+      if (inputField.value) {
+        totalInput += (_a = parseInt(inputField.value)) !== null && _a !== void 0 ? _a : 0;
+      }
+    });
+    this.showWarning = totalInput > this.totalInputLimit ? true : false;
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "dropdown-choice-form-row" }, h("pn-select", { ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, placeholder: this.addRowDropdownPlaceholder, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown" }, (_a = this.rowSelectDropdownArr) === null || _a === void 0 ? void 0 : _a.map((value) => (h("pn-option", null, value))))), h("div", { class: "dropdown-choice-form-row" }, h("table", { class: "pn-dropdown-choice-table" }, h("thead", { ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("tr", null, h("th", { class: "table-header--name" }, h("label", null, this.rowNameLabel)), this.rowHasDropdown ? (h("th", { class: "table-header--dropdown" }, h("label", null, this.rowDropdownLabel))) : null, h("th", { class: "table-header--input" }, h("label", null, this.rowInputLabel)), h("th", { class: "table-header--delete" })))), h("tbody", { ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", null)), h("tfoot", null, this.showWarning ? (h("tr", null, h("td", { colSpan: this.columnCount }, h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), h("small", { class: "dropdown-choice-error-message" }, this.inputLimitWarning)))) : null)))));
+  }
+  static get is() { return "pn-dropdown-choice-adds-row"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-dropdown-choice-adds-row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-dropdown-choice-adds-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"
+      },
+      "addRowDropdownName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-dropdown-name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "addRowDropdownPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-dropdown-placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "addRowDropdownLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-dropdown-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rowNameLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-name-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rowHasDropdown": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-has-dropdown",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "rowDropdownLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-dropdown-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rowDropdownPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-dropdown-placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rowInputLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-input-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rowDeleteButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-delete-button-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "totalInputLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "total-input-limit",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "inputLimitWarning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-limit-warning",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "nextRowIndex": {},
+      "rowSelectDropdownArr": {},
+      "columnCount": {},
+      "showWarning": {},
+      "formValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowvalues",
+        "name": "rowvalues",
+        "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": "dropdownData",
+        "methodName": "dropdownDataWatcher"
+      }];
+  }
+}

package/collection/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.stories.js

@@ -0,0 +1,43 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Dropdownlist choice adds new row',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-dropdown-choice-adds-row
+      dropdown-data='${args.dropdownData}'
+      add-row-dropdown-label="${args.addRowDropdownLabel}"
+      add-row-dropdown-placeholder="${args.addRowDropdownPlaceholder}"
+      row-name-label="${args.rowNameLabel}"
+      row-has-dropdown="${args.rowHasDropdown}"
+      row-dropdown-label="${args.rowDropdownLabel}"
+      row-dropdown-placeholder="${args.rowDropdownPlaceholder}"
+      row-input-label="${args.rowInputLabel}"
+      row-delete-button-text="${args.rowDeleteButtonText}"
+      total-input-limit="${args.totalInputLimit}"
+      input-limit-warning="${args.inputLimitWarning}"
+      >
+    </pn-dropdown-choice-adds-row>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  dropdownData:
+    '[{"caption":"First","value":"first","values":[{"caption":"First-child 1","value":"First-child 1"},{"caption":"First-child 2","value":"First-child 2"}]},{"caption":"Second","value":"second","values":[{"caption":"Second-child 1","value":"Second-child 1"},{"caption":"Second-child 2","value":"Second-child 2"}]},{"caption":"Third","value":"Third","values":[]}]',
+  addRowDropdownName: '__addrowdropdown',
+  addRowDropdownPlaceholder: '-- Vaelg her --',
+  addRowDropdownLabel: 'Produkter til afhentning:*',
+  rowNameLabel: 'Produkt',
+  rowHasDropdown: true,
+  rowDropdownLabel: 'Transportenhed',
+  rowDropdownPlaceholder: '-- Vaelg her --',
+  rowInputLabel: 'Antal',
+  rowDeleteButtonText: 'Slet',
+  totalInputLimit: 30,
+  inputLimitWarning: 'warning',
+};

package/collection/components/input/pn-dropdown-choice-adds-row/types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/minor/pn-app-banner/pn-app-banner.css

@@ -0,0 +1,35 @@
+pn-app-banner .pn-app-banner__wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1rem;
+  background-color: #F3F2F2;
+  padding: 1rem;
+  margin: 0 auto;
+}
+pn-app-banner .pn-app-banner__sticky {
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+pn-app-banner .icon-close:hover {
+  cursor: pointer;
+}
+pn-app-banner .pn-app-banner__icon {
+  height: 3.2rem;
+}
+pn-app-banner .pn-app-banner__text {
+  font-size: 1.2rem;
+  line-height: 1;
+}
+pn-app-banner .pn-app-banner__text span {
+  font-weight: 600;
+}
+pn-app-banner .pn-app-banner__cta {
+  margin-left: auto;
+}
+pn-app-banner[data-is-closed=true] {
+  display: none;
+}