@postnord/pn-marketweb-components 2.4.17 → 2.4.18

package/cjs/pn-multi-formfield.cjs.entry.js

@@ -3,77 +3,9 @@
 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');
 
-/**
- * Returns a function, that, as long as it continues to be invoked, will not
- * be triggered. The function will be called after it stops being called for
- * N milliseconds. If `immediate` is passed, trigger the function on the
- * leading edge, instead of the trailing. The function also has a property 'clear' 
- * that is a function which will clear the timer to prevent previously scheduled executions. 
- *
- * @source underscore.js
- * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
- * @param {Function} function to wrap
- * @param {Number} timeout in ms (`100`)
- * @param {Boolean} whether to execute at the beginning (`false`)
- * @api public
- */
-function debounce(func, wait, immediate){
-  var timeout, args, context, timestamp, result;
-  if (null == wait) wait = 100;
-
-  function later() {
-    var last = Date.now() - timestamp;
-
-    if (last < wait && last >= 0) {
-      timeout = setTimeout(later, wait - last);
-    } else {
-      timeout = null;
-      if (!immediate) {
-        result = func.apply(context, args);
-        context = args = null;
-      }
-    }
-  }
-  var debounced = function(){
-    context = this;
-    args = arguments;
-    timestamp = Date.now();
-    var callNow = immediate && !timeout;
-    if (!timeout) timeout = setTimeout(later, wait);
-    if (callNow) {
-      result = func.apply(context, args);
-      context = args = null;
-    }
-
-    return result;
-  };
-
-  debounced.clear = function() {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = null;
-    }
-  };
-  
-  debounced.flush = function() {
-    if (timeout) {
-      result = func.apply(context, args);
-      context = args = null;
-      
-      clearTimeout(timeout);
-      timeout = null;
-    }
-  };
-
-  return debounced;
-}
-// Adds compatibility for ES modules
-debounce.debounce = debounce;
-
-var debounce_1 = debounce;
-
 const pnMultiFormfieldCss = ".pn-multi-formfield{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
 
 const PnMultiFormField = class {
@@ -88,7 +20,7 @@ const PnMultiFormField = class {
     this.formFieldEvent = (e) => {
       if (e.target.matches(`.${this.formFieldClassName}`)) {
         ["change", "keyup"].forEach((eventName) => {
-          const debouncedAddValue = debounce_1.debounce(this.updateValues.bind(this, e.target), 1000);
+          const debouncedAddValue = index$1.debounce_1.debounce(this.updateValues.bind(this, e.target), 1000);
           e.target.addEventListener(eventName, debouncedAddValue);
         });
       }

package/collection/collection-manifest.json

@@ -20,6 +20,7 @@
     "./components/input/pn-bonus-progressbar/pn-bonus-progressbar.js",
     "./components/input/pn-choice-button/pn-choice-button.js",
     "./components/input/pn-date-and-time/pn-date-and-time.js",
+    "./components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.js",
     "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
     "./components/input/pn-marketweb-input/pn-marketweb-input.js",
     "./components/input/pn-marketweb-search/pn-marketweb-search.js",

package/collection/components/input/pn-date-and-time/pn-date-and-time.css

@@ -3,7 +3,8 @@ pn-date-and-time label {
   font-size: 1.4rem;
 }
 pn-date-and-time .time-separator {
-  margin: auto;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 pn-date-and-time .date-and-time-group {
   margin-bottom: 1rem;

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

@@ -0,0 +1,58 @@
+pn-dropdown-choice-adds-row {
+  gap: 1rem;
+}
+pn-dropdown-choice-adds-row .dropdown-choice-form-row {
+  display: flex;
+  gap: 1rem;
+}
+pn-dropdown-choice-adds-row .pn-row-select-dropdown {
+  width: 50%;
+  margin-bottom: 1rem;
+}
+@media only screen and (max-width: 640px) {
+  pn-dropdown-choice-adds-row .pn-row-select-dropdown {
+    width: 100%;
+  }
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table {
+  width: 100%;
+  border-spacing: 0rem;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th {
+  text-align: left;
+  padding: 1rem 0.5rem;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th label {
+  color: #5E554A;
+  font-size: 1.4rem;
+  font-weight: 400;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--name {
+  width: 40%;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--dropdown {
+  width: 40%;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--input {
+  width: 10%;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead .table-header--delete {
+  width: 10%;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody td {
+  padding: 0.5rem;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody tr:nth-child(even) {
+  background-color: #effbff;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody .tr-delete {
+  text-align: center;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td small {
+  color: #A70707;
+  vertical-align: middle;
+}
+pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td pn-icon {
+  margin-right: 0.25em;
+  vertical-align: middle;
+}

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"
+      }];
+  }
+}