@postnord/pn-marketweb-components 2.4.16 → 2.4.18

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

@@ -0,0 +1,292 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index3.js';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const pnDropdownChoiceAddsRowCss = "pn-dropdown-choice-adds-row{gap:1rem}pn-dropdown-choice-adds-row .dropdown-choice-form-row{display:-ms-flexbox;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}";
+
+const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rowvalues = createEvent(this, "rowvalues", 7);
+    this.pnRowSelectDropdown = null;
+    this.tableHead = null;
+    this.tableBody = null;
+    this.formRowEvent = e => {
+      var _a;
+      const debouncedAddValue = debounce_1.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)))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "dropdownData": ["dropdownDataWatcher"]
+  }; }
+  static get style() { return pnDropdownChoiceAddsRowCss; }
+}, [4, "pn-dropdown-choice-adds-row", {
+    "dropdownData": [1, "dropdown-data"],
+    "addRowDropdownName": [1, "add-row-dropdown-name"],
+    "addRowDropdownPlaceholder": [1, "add-row-dropdown-placeholder"],
+    "addRowDropdownLabel": [1, "add-row-dropdown-label"],
+    "rowNameLabel": [1, "row-name-label"],
+    "rowHasDropdown": [4, "row-has-dropdown"],
+    "rowDropdownLabel": [1, "row-dropdown-label"],
+    "rowDropdownPlaceholder": [1, "row-dropdown-placeholder"],
+    "rowInputLabel": [1, "row-input-label"],
+    "rowDeleteButtonText": [1, "row-delete-button-text"],
+    "totalInputLimit": [2, "total-input-limit"],
+    "inputLimitWarning": [1, "input-limit-warning"],
+    "nextRowIndex": [32],
+    "rowSelectDropdownArr": [32],
+    "columnCount": [32],
+    "showWarning": [32],
+    "formValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-dropdown-choice-adds-row", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-dropdown-choice-adds-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, pnDropdownChoiceAddsRow);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnDropdownChoiceAddsRow = pnDropdownChoiceAddsRow;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDropdownChoiceAddsRow, defineCustomElement };

package/components/pn-find-price-result2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { d as defineCustomElement$4 } from './pn-product-card2.js';
 import { d as defineCustomElement$3 } from './pn-product-card-info2.js';
 import { d as defineCustomElement$2 } from './pn-product-card-price2.js';

package/components/pn-find-service-and-price-result2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { d as defineCustomElement$3 } from './pn-product-card2.js';
 import { d as defineCustomElement$2 } from './pn-product-tile-info2.js';
 import { d as defineCustomElement$1 } from './pn-product-tile-price2.js';

package/components/pn-mainnav-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-marketweb-siteheader-login-linklist2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-marketweb-siteheader-search2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-multi-formfield.js

@@ -1,75 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index3.js';
 import { v as v4 } from './v4.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/components/pn-product-pricelist-result.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { s as sendDirectUrl, a as stampShopUrl } from './data.js';
 import { d as defineCustomElement$5 } from './pn-product-card2.js';
 import { d as defineCustomElement$4 } from './pn-product-card-info2.js';

package/components/pn-profile-modal-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-proxio-findprice.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { F as FetchHelper, M as MarketWebContextService } from './MarketWebContextService.js';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { d as defineCustomElement$8 } from './pn-choice-button2.js';
 import { d as defineCustomElement$7 } from './pn-proxio-findprice-result2.js';
 import { d as defineCustomElement$6 } from './pn-proxio-productcard2.js';

package/components/pn-sidenav-store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/esm/index-8976f360.js

@@ -0,0 +1,70 @@
+/**
+ * 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;
+
+export { debounce_1 as d };