@postnord/pn-marketweb-components 2.4.27 → 2.4.28

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

@@ -0,0 +1,673 @@
+import { h, Host } from '@stencil/core';
+import { debounce } from 'debounce';
+export class PnDropdownWithMultiInputRowsRow {
+  constructor() {
+    this.pnFirstInputField = null;
+    this.pnSecondInputField = null;
+    this.pnDatePicker = null;
+    this.pnDeleteRowButton = null;
+    this.languageCode = null;
+    this.fristInputPlaceholder = null;
+    this.firstInputMin = null;
+    this.firstInputMax = null;
+    this.firstInputWarning = null;
+    this.firstInputWarningText = null;
+    this.firstInputLowErrorText = null;
+    this.firstInputHighErrorText = null;
+    this.secondInputPlaceholder = null;
+    this.secondInputMin = null;
+    this.secondInputMax = null;
+    this.secondInputWarning = null;
+    this.secondInputWarningText = null;
+    this.secondInputLowErrorText = null;
+    this.secondInputHighErrorText = null;
+    this.dateLabel = null;
+    this.datePlaceholder = null;
+    this.firstValidDate = null;
+    this.lastValidDate = null;
+    this.predefinedValue = null;
+    this.rowIndex = null;
+    this.minRowCount = null;
+    this.showFirstInputWarning = false;
+    this.showFirstInputLowError = false;
+    this.showFirstInputHighError = false;
+    this.showSecondInputWarning = false;
+    this.showSecondInputLowError = false;
+    this.showSecondInputHighError = false;
+    this.firstInputValue = '';
+    this.secondInputValue = '';
+    this.dateValue = '';
+  }
+  componentWillLoad() {
+    this.getPredefinedValues();
+    this.setInitialValues();
+  }
+  componentDidLoad() {
+    this.addEventHandlers();
+  }
+  getPredefinedValues() {
+    this._predefinedValue = JSON.parse(this.predefinedValue);
+  }
+  applyPredefinedValue() {
+    var _a, _b;
+    this.getPredefinedValues();
+    this.setInitialValues();
+    if ((_a = this.firstInputValue) === null || _a === void 0 ? void 0 : _a.length) {
+      this.validateFirstInput(parseInt(this.firstInputValue));
+    }
+    if ((_b = this.secondInputValue) === null || _b === void 0 ? void 0 : _b.length) {
+      this.validateSecondInput(parseInt(this.secondInputValue));
+    }
+    if (this.rowIndex >= this.minRowCount) {
+      this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));
+    }
+  }
+  setInitialValues() {
+    this.firstInputValue = this._predefinedValue.firstInput;
+    this.secondInputValue = this._predefinedValue.secondInput;
+    this.dateValue = this._predefinedValue.date;
+  }
+  addEventHandlers() {
+    const emmitValues = debounce(this.emitRowValues.bind(this), 500);
+    this.pnFirstInputField.addEventListener('keyup', debounce(this.handleFirstInput.bind(this), 500));
+    this.pnSecondInputField.addEventListener('keyup', debounce(this.handleSecondInput.bind(this), 500));
+    this.pnDatePicker.addEventListener('dateselection', this.handleDateChange.bind(this));
+    this.pnDatePicker.addEventListener('dateselection', emmitValues);
+  }
+  handleFirstInput(e) {
+    const elm = e.target;
+    const value = parseInt(elm.value);
+    if (value > 0) {
+      this.firstInputValue = elm.value;
+      this.firstInputChange.emit({
+        id: this._predefinedValue.id,
+        firstInput: this.firstInputValue,
+        secondInput: this.secondInputValue,
+        date: this.dateValue,
+      });
+    }
+    this.validateFirstInput(value);
+    this.emitRowValues();
+  }
+  handleSecondInput(e) {
+    const elm = e.target;
+    const value = parseInt(elm.value);
+    if (value > 0) {
+      this.secondInputValue = elm.value;
+      this.secondInputChange.emit({
+        id: this._predefinedValue.id,
+        firstInput: this.firstInputValue,
+        secondInput: this.secondInputValue,
+        date: this.dateValue,
+      });
+    }
+    this.validateSecondInput(value);
+    this.emitRowValues();
+  }
+  validateFirstInput(input) {
+    this.showFirstInputWarning = false;
+    this.showFirstInputLowError = false;
+    this.showFirstInputHighError = false;
+    if (input < this.firstInputWarning) {
+      this.showFirstInputWarning = true;
+    }
+    if (input < this.firstInputMin) {
+      this.showFirstInputWarning = false;
+      this.showFirstInputLowError = true;
+    }
+    if (input > this.firstInputMax) {
+      this.showFirstInputWarning = false;
+      this.showFirstInputLowError = false;
+      this.showFirstInputHighError = true;
+    }
+  }
+  validateSecondInput(input) {
+    this.showSecondInputWarning = false;
+    this.showSecondInputLowError = false;
+    this.showSecondInputHighError = false;
+    if (input < this.secondInputWarning) {
+      this.showSecondInputWarning = true;
+    }
+    if (input < this.secondInputMin) {
+      this.showSecondInputWarning = false;
+      this.showSecondInputLowError = true;
+    }
+    if (input > this.secondInputMax) {
+      this.showSecondInputWarning = false;
+      this.showSecondInputLowError = false;
+      this.showSecondInputHighError = true;
+    }
+  }
+  handleDateChange(e) {
+    const elm = e.target;
+    if (elm === this.pnDatePicker) {
+      this.dateValue = e.detail;
+    }
+  }
+  emitRowValues() {
+    this.rowValueChange.emit({
+      id: this._predefinedValue.id,
+      firstInput: this.firstInputValue,
+      secondInput: this.secondInputValue,
+      date: this.dateValue,
+    });
+  }
+  deleteRow() {
+    this.deleteRowEvent.emit(this._predefinedValue.id);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: "input-element-row" }, h("div", { class: "input-container" }, h("pn-marketweb-input", { ref: el => (this.pnFirstInputField = el), type: "number", placeholder: this.fristInputPlaceholder, value: this.firstInputValue, min: "1" }), this.showFirstInputLowError || this.showFirstInputHighError || this.showFirstInputWarning ? (h("div", { class: "input-element-message-container" }, this.showFirstInputLowError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.firstInputLowErrorText))) : null, this.showFirstInputHighError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.firstInputHighErrorText))) : null, this.showFirstInputWarning ? (h("div", { class: "input-element-message-container__warning" }, h("small", null, this.firstInputWarningText))) : null)) : null), h("div", { class: "input-container" }, h("pn-marketweb-input", { ref: el => (this.pnSecondInputField = el), type: "number", placeholder: this.secondInputPlaceholder, value: this.secondInputValue, min: "1" }), this.showSecondInputLowError || this.showSecondInputHighError || this.showSecondInputWarning ? (h("div", { class: "input-element-message-container" }, this.showSecondInputLowError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.secondInputLowErrorText))) : null, this.showSecondInputHighError ? (h("div", { class: "input-element-message-container__error" }, h("small", null, this.secondInputHighErrorText))) : null, this.showSecondInputWarning ? (h("div", { class: "input-element-message-container__warning" }, h("small", null, this.secondInputWarningText))) : null)) : null), h("div", { class: "input-container" }, h("pn-date-picker", { ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": true, "min-date": this.firstValidDate, "max-date": this.lastValidDate, language: this.languageCode, placeholder: this.datePlaceholder, start: ((_a = this.dateValue) === null || _a === void 0 ? void 0 : _a.length) ? this.dateValue : null })), this.rowIndex >= this.minRowCount ? (h("div", { class: "delete-button-contianer" }, h("pn-button", { ref: el => (this.pnDeleteRowButton = el), small: "true", "icon-only": "true", icon: "minus", appearance: "warning", index: this.rowIndex, onClick: () => {
+        this.deleteRow();
+      } }, "Delete"))) : null)));
+  }
+  static get is() { return "pn-dropdown-with-multi-input-rows-row"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-dropdown-with-multi-input-rows-row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-dropdown-with-multi-input-rows-row.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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"
+      },
+      "fristInputPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "frist-input-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputMin": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-min",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputMax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-max",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputWarning": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-warning",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputWarningText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-warning-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputLowErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-low-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "firstInputHighErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-input-high-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputMin": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-min",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputMax": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-max",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputWarning": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-warning",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputWarningText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-warning-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputLowErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-low-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "secondInputHighErrorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-input-high-error-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "dateLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-label",
+        "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"
+      },
+      "firstValidDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-valid-date",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "lastValidDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "last-valid-date",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "predefinedValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "predefined-value",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "rowIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-index",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "minRowCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-row-count",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showFirstInputWarning": {},
+      "showFirstInputLowError": {},
+      "showFirstInputHighError": {},
+      "showSecondInputWarning": {},
+      "showSecondInputLowError": {},
+      "showSecondInputHighError": {},
+      "firstInputValue": {},
+      "secondInputValue": {},
+      "dateValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowValueChange",
+        "name": "rowValueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "PredefinedValues",
+          "resolved": "PredefinedValues",
+          "references": {
+            "PredefinedValues": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "method": "deleteRowEvent",
+        "name": "deleteRowEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "firstInputChange",
+        "name": "firstInputChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "PredefinedValues",
+          "resolved": "PredefinedValues",
+          "references": {
+            "PredefinedValues": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "method": "secondInputChange",
+        "name": "secondInputChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "PredefinedValues",
+          "resolved": "PredefinedValues",
+          "references": {
+            "PredefinedValues": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "predefinedValue",
+        "methodName": "applyPredefinedValue"
+      }];
+  }
+}

package/collection/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.css

@@ -0,0 +1,26 @@
+pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__row {
+  margin-bottom: 1rem;
+}
+pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__delete {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background-color: #F9F8F8;
+}
+pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__delete pn-button {
+  margin-top: 0.9rem;
+}
+pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__label-row {
+  display: flex;
+  gap: 1rem;
+}
+pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-elemet__label {
+  width: 30%;
+  font-size: 0.875em;
+  color: #5e554a;
+}
+pn-dropdown-with-multi-input-rows .sum-row {
+  display: flex;
+  justify-content: space-between;
+}