@postnord/pn-marketweb-components 2.4.26 → 2.4.28

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

@@ -0,0 +1,86 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Dropdown with Multi Input Rows',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+  <pn-dropdown-with-multi-input-rows
+  dropdown-data='${args.dropdownData}'
+  language-code='${args.languageCode}'
+  first-dropdown-label='${args.firstDropdownLabel}'
+  first-dropdown-helper-text='${args.firstDropdownHelperText}'
+  second-dropdown-label='${args.secondDropdownLabel}'
+  second-dropdown-helper-text='${args.secondDropdownHelperText}'
+  second-dropdown-max='${args.secondDropdownMax}'
+  delete-multiple-rows-warning-text='${args.deleteMultipleRowsWarningText}'
+  confirm-delete-button-text='${args.confirmDeleteButtonText}'
+  abort-delete-button-text='${args.abortDeleteButtonText}'
+  frist-input-label='${args.fristInputLabel}'
+  frist-input-placeholder='${args.fristInputPlaceholder}'
+  first-input-min='${args.firstInputMin}'
+  first-input-max='${args.firstInputMax}'
+  first-input-warning='${args.firstInputWarning}'
+  first-input-warning-text='${args.firstInputWarningText}'
+  first-input-low-error-text='${args.firstInputLowErrorText}'
+  first-input-high-error-text='${args.firstInputHighErrorText}'
+  second-input-label='${args.secondInputLabel}'
+  second-input-placeholder='${args.secondInputPlaceholder}'
+  second-input-min='${args.secondInputMin}'
+  second-input-max='${args.secondInputMax}'
+  second-input-warning='${args.secondInputWarning}'
+  second-input-warning-text='${args.secondInputWarningText}'
+  second-input-low-error-text='${args.secondInputLowErrorText}'
+  second-input-high-error-text='${args.secondInputHighErrorText}'
+  date-label='${args.dateLabel}'
+  date-placeholder='${args.datePlaceholder}'
+  date-days-from-today='${args.dateDaysFromToday}'
+  years-to-add-to-end-date='${args.yearsToAddToEndDate}'
+  sum-field-label='${args.sumFieldLabel}'
+  add-row-text='${args.addRowText}'
+  element-helper-text='${args.elementHelperText}'
+  >
+  </pn-dropdown-with-multi-input-rows>
+        `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  dropdownData: '[{"caption": "Option1", "value": 4, "checked": false}, {"caption": "Option2", "value": 8, "checked": false}]',
+  languageCode: 'en',
+  firstDropdownLabel: 'dropdown1',
+  firstDropdownHelperText: 'dropdown1 help',
+  secondDropdownLabel: 'dropdown2',
+  secondDropdownHelperText: 'dropdown2 help',
+  secondDropdownMax: 53,
+  deleteMultipleRowsWarningText: 'Når du ændrer Antal Udgivelser til et lavere antal end først valgt, skal du være opmærksom på at allerede indtastede indleveringer slettes',
+  confirmDeleteButtonText: 'Slet',
+  abortDeleteButtonText: 'Fortryd',
+  fristInputLabel: 'first input',
+  fristInputPlaceholder: 'amount',
+  firstInputMin: 500,
+  firstInputMax: 2000000,
+  firstInputWarning: 1500,
+  firstInputWarningText: 'Antal er pr indlevering skal være på minimum 1500 stk. eller der skal betales op til minimum',
+  firstInputLowErrorText: 'Du kan ikke indlevere under 500 stk.',
+  firstInputHighErrorText: 'Du kan ikke indlevere over 2000000 stk.',
+  secondInputLabel: 'second input',
+  secondInputPlaceholder: 'amount',
+  secondInputMin: 0,
+  secondInputMax: 2000,
+  secondInputWarning: 60,
+  secondInputWarningText: 'Bemærk der betales for mindst 60 gram, uanset vægt',
+  secondInputLowErrorText: '',
+  secondInputHighErrorText: 'Forkert vægt max. 2000',
+  dateLabel: 'date',
+  datePlaceholder: 'YYYY-MM-DD',
+  dateDaysFromToday: 1,
+  yearsToAddToEndDate: 2,
+  sumFieldLabel: 'Sum',
+  addRowText: 'Add Row',
+  elementHelperText: 'Helpful text',
+};

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

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

package/collection/components/input/pn-multiple-input/pn-multiple-input.css

@@ -0,0 +1,16 @@
+pn-multiple-input .multiple-input-generated-row,
+pn-multiple-input .multiple-input-row {
+  display: flex;
+  gap: 1rem;
+}
+pn-multiple-input .multiple-input-generated-row pn-marketweb-input,
+pn-multiple-input .multiple-input-row pn-marketweb-input {
+  width: 100%;
+}
+pn-multiple-input .multiple-input-slot {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

package/collection/components/input/pn-multiple-input/pn-multiple-input.js

@@ -0,0 +1,185 @@
+import { h, Host } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'debounce';
+export class PnMultipleInput {
+  constructor() {
+    this.pnSlotElement = null;
+    this._formValues = [];
+    this.label = null;
+    this.placeholder = null;
+    this.addRowButtonText = null;
+    this.rowData = [];
+  }
+  componentWillLoad() {
+    const elemtnId = this.generateUniqueId();
+    const newRow = { id: elemtnId, input: '' };
+    this.rowData = [...this.rowData, newRow];
+  }
+  componentDidLoad() {
+    this.addEventHandlers();
+  }
+  componentDidUpdate() {
+    this.addEventHandlers();
+  }
+  addEventHandlers() {
+    const rows = this.pnSlotElement.querySelectorAll('pn-marketweb-input');
+    rows.forEach(element => {
+      element.addEventListener('keyup', debounce(this.handleInput.bind(this), 500));
+    });
+  }
+  generateUniqueId() {
+    return uuidv4();
+  }
+  deleteRow(indexToRemove) {
+    if (indexToRemove < 0) {
+      return;
+    }
+    this.rowData.splice(indexToRemove, 1);
+    this.rowData = [...this.rowData];
+    this.emitValues();
+  }
+  addRow() {
+    const newRow = { id: this.generateUniqueId(), input: '' };
+    this.rowData = [...this.rowData, newRow];
+    this.emitValues();
+  }
+  handleInput(e) {
+    const target = e.target;
+    const inputElm = target.closest('pn-marketweb-input');
+    if (!inputElm) {
+      return;
+    }
+    const inputElmId = inputElm.id;
+    const value = target.value;
+    const index = this.rowData.findIndex(item => item.id === inputElmId);
+    if (index < 0) {
+      return;
+    }
+    this.rowData[index] = Object.assign(Object.assign({}, this.rowData[index]), { input: value });
+    this.emitValues();
+  }
+  emitValues() {
+    this._formValues = [];
+    const label = this.label ? this.label : 'InputField';
+    this.rowData.forEach(item => {
+      const rowValue = { row: [] };
+      if (item.input) {
+        const dropDownValue = { name: label, value: item.input };
+        rowValue.row.push(dropDownValue);
+      }
+      if (rowValue.row.length === 1) {
+        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('');
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { ref: el => (this.pnSlotElement = el), class: "multiple-input-slot" }, (_a = this.rowData) === null || _a === void 0 ? void 0 : _a.map((data, i) => {
+      return (h("div", { class: "multiple-input-generated-row" }, h("pn-marketweb-input", { label: this.label, type: "text", placeholder: this.placeholder, value: data.input, id: data.id }), i > 0 ? (h("pn-button", { "icon-only": true, "aria-label": "Delete", icon: "minus", appearance: "warning", onClick: () => {
+          this.deleteRow(i);
+        }, index: i, id: data.id }, "Delete")) : null));
+    })), h("dvi", { class: "multiple-input-row" }, h("pn-button", { "icon-only": this.addRowButtonText ? false : true, "left-icon": "true", "aria-label": "Add", icon: "plus", appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
+        this.addRow();
+      } }, this.addRowButtonText))));
+  }
+  static get is() { return "pn-multiple-input"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-multiple-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-multiple-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "addRowButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rowData": {}
+    };
+  }
+  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"; }
+}

package/collection/components/input/pn-multiple-input/pn-multiple-input.stories.js

@@ -0,0 +1,24 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Multiple Input',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `<pn-multiple-input
+    label='${args.label}'
+    placeholder='${args.placeholder}'
+    add-row-button-text='${args.addRowButtonText}'
+    >
+    </pn-multiple-input>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'label',
+  placeholder: 'placeholder',
+  addRowButtonText: 'add',
+};

package/collection/components/input/pn-multiple-input/types.js

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

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js

@@ -30,7 +30,7 @@ export class PnMarketwebSiteheader {
     this.searchPlaceholder = '';
     this.spaMode = false;
     this.checkUserLoggedInStateInterval = 0;
-    this.pageId = undefined;
+    this.pageId = '';
     this.i18n = {
       searchlabel: '',
       searchplaceholder: '',
@@ -737,13 +737,14 @@ export class PnMarketwebSiteheader {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "page-id",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -468,7 +468,7 @@ const DotComSiteHeaderTemplate = ({ ...args }) => {
     user-fullname="${args.name}"
     user-loggedin="${args.loggedin}"
     show-unified-login=${args.unified}
-    show-profile-selection=${args.showProfileSelection}
+    show-profile-selection=${args.showProfileSelection}    
     >
       <pn-button slot="toprightend" href="http:www.google.se" small="true">Get started</pn-button>
       <pn-button slot="menu-footer-cta" href="http:www.google.se" small="true">Get started</pn-button>

package/components/index.d.ts

@@ -12,6 +12,8 @@ export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/c
 export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
 export { PnDateAndTime as PnDateAndTime } from '../types/components/input/pn-date-and-time/pn-date-and-time';
 export { pnDropdownChoiceAddsRow as PnDropdownChoiceAddsRow } from '../types/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row';
+export { PnDropdownWithMultiInputRows as PnDropdownWithMultiInputRows } from '../types/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows';
+export { PnDropdownWithMultiInputRowsRow as PnDropdownWithMultiInputRowsRow } from '../types/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row';
 export { PnFilterCheckbox as PnFilterCheckbox } from '../types/components/input/pn-filter-checkbox/pn-filter-checkbox';
 export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-price/pn-find-price';
 export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';
@@ -39,6 +41,7 @@ export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/input/pn-multi-formfield/pn-multi-formfield';
 export { PnMultiRowConnectedDropdown as PnMultiRowConnectedDropdown } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown';
 export { PnMultiRowConnectedDropdownRow as PnMultiRowConnectedDropdownRow } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row';
+export { PnMultipleInput as PnMultipleInput } from '../types/components/input/pn-multiple-input/pn-multiple-input';
 export { PnSpotlight as PnParcelTracker } from '../types/components/cta/pn-parcel-tracker/pn-parcel-tracker';
 export { PnPexPricefinder as PnPexPricefinder } from '../types/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder';
 export { PnPlayOnScroll as PnPlayOnScroll } from '../types/components/animation/pn-play-on-scroll/pn-play-on-scroll';

package/components/index.js

@@ -12,6 +12,8 @@ export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnC
 export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
 export { PnDateAndTime, defineCustomElement as defineCustomElementPnDateAndTime } from './pn-date-and-time.js';
 export { PnDropdownChoiceAddsRow, defineCustomElement as defineCustomElementPnDropdownChoiceAddsRow } from './pn-dropdown-choice-adds-row.js';
+export { PnDropdownWithMultiInputRows, defineCustomElement as defineCustomElementPnDropdownWithMultiInputRows } from './pn-dropdown-with-multi-input-rows.js';
+export { PnDropdownWithMultiInputRowsRow, defineCustomElement as defineCustomElementPnDropdownWithMultiInputRowsRow } from './pn-dropdown-with-multi-input-rows-row.js';
 export { PnFilterCheckbox, defineCustomElement as defineCustomElementPnFilterCheckbox } from './pn-filter-checkbox.js';
 export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } from './pn-find-price.js';
 export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';
@@ -39,6 +41,7 @@ export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomE
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
 export { PnMultiRowConnectedDropdown, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdown } from './pn-multi-row-connected-dropdown.js';
 export { PnMultiRowConnectedDropdownRow, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdownRow } from './pn-multi-row-connected-dropdown-row.js';
+export { PnMultipleInput, defineCustomElement as defineCustomElementPnMultipleInput } from './pn-multiple-input.js';
 export { PnParcelTracker, defineCustomElement as defineCustomElementPnParcelTracker } from './pn-parcel-tracker.js';
 export { PnPexPricefinder, defineCustomElement as defineCustomElementPnPexPricefinder } from './pn-pex-pricefinder.js';
 export { PnPlayOnScroll, defineCustomElement as defineCustomElementPnPlayOnScroll } from './pn-play-on-scroll.js';

package/components/pn-dropdown-with-multi-input-rows-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnDropdownWithMultiInputRowsRow extends Components.PnDropdownWithMultiInputRowsRow, HTMLElement {}
+export const PnDropdownWithMultiInputRowsRow: {
+  prototype: PnDropdownWithMultiInputRowsRow;
+  new (): PnDropdownWithMultiInputRowsRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PnDropdownWithMultiInputRowsRow$1, d as defineCustomElement$1 } from './pn-dropdown-with-multi-input-rows-row2.js';
+
+const PnDropdownWithMultiInputRowsRow = PnDropdownWithMultiInputRowsRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDropdownWithMultiInputRowsRow, defineCustomElement };

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

@@ -0,0 +1,232 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$1 } from './pn-marketweb-input2.js';
+
+const pnDropdownWithMultiInputRowsRowCss = "pn-dropdown-with-multi-input-rows-row .input-element-row{display:-ms-flexbox;display:flex;gap:1rem;margin-bottom:1rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container{width:30%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-marketweb-input .input-container{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-date-picker{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container{margin-top:0.3rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__error{color:red;line-height:1}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__warning{line-height:1}pn-dropdown-with-multi-input-rows-row .delete-button-contianer{margin-top:0.6rem}";
+
+const PnDropdownWithMultiInputRowsRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rowValueChange = createEvent(this, "rowValueChange", 7);
+    this.deleteRowEvent = createEvent(this, "deleteRowEvent", 7);
+    this.firstInputChange = createEvent(this, "firstInputChange", 7);
+    this.secondInputChange = createEvent(this, "secondInputChange", 7);
+    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_1.debounce(this.emitRowValues.bind(this), 500);
+    this.pnFirstInputField.addEventListener('keyup', debounce_1.debounce(this.handleFirstInput.bind(this), 500));
+    this.pnSecondInputField.addEventListener('keyup', debounce_1.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)));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "predefinedValue": ["applyPredefinedValue"]
+  }; }
+  static get style() { return pnDropdownWithMultiInputRowsRowCss; }
+}, [0, "pn-dropdown-with-multi-input-rows-row", {
+    "languageCode": [1, "language-code"],
+    "fristInputPlaceholder": [1, "frist-input-placeholder"],
+    "firstInputMin": [2, "first-input-min"],
+    "firstInputMax": [2, "first-input-max"],
+    "firstInputWarning": [2, "first-input-warning"],
+    "firstInputWarningText": [1, "first-input-warning-text"],
+    "firstInputLowErrorText": [1, "first-input-low-error-text"],
+    "firstInputHighErrorText": [1, "first-input-high-error-text"],
+    "secondInputPlaceholder": [1, "second-input-placeholder"],
+    "secondInputMin": [2, "second-input-min"],
+    "secondInputMax": [2, "second-input-max"],
+    "secondInputWarning": [2, "second-input-warning"],
+    "secondInputWarningText": [1, "second-input-warning-text"],
+    "secondInputLowErrorText": [1, "second-input-low-error-text"],
+    "secondInputHighErrorText": [1, "second-input-high-error-text"],
+    "dateLabel": [1, "date-label"],
+    "datePlaceholder": [1, "date-placeholder"],
+    "firstValidDate": [1, "first-valid-date"],
+    "lastValidDate": [1, "last-valid-date"],
+    "predefinedValue": [1, "predefined-value"],
+    "rowIndex": [2, "row-index"],
+    "minRowCount": [2, "min-row-count"],
+    "showFirstInputWarning": [32],
+    "showFirstInputLowError": [32],
+    "showFirstInputHighError": [32],
+    "showSecondInputWarning": [32],
+    "showSecondInputLowError": [32],
+    "showSecondInputHighError": [32],
+    "firstInputValue": [32],
+    "secondInputValue": [32],
+    "dateValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-dropdown-with-multi-input-rows-row", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-dropdown-with-multi-input-rows-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnDropdownWithMultiInputRowsRow);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnDropdownWithMultiInputRowsRow as P, defineCustomElement as d };

package/components/pn-dropdown-with-multi-input-rows.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnDropdownWithMultiInputRows extends Components.PnDropdownWithMultiInputRows, HTMLElement {}
+export const PnDropdownWithMultiInputRows: {
+  prototype: PnDropdownWithMultiInputRows;
+  new (): PnDropdownWithMultiInputRows;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;