npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1186) hide show

package/esm/pn-dropdown-choice-adds-row.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-c311acd6.js';
 import { d as debounce } from './index-1190bec4.js';
-const pnDropdownChoiceAddsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-dropdown-choice-adds-row{display:block;width:80rem}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;border:none !important}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 .generated-table-row{display:flex;margin-bottom:2rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header{display:flex;margin:2rem 0 3rem 0;font-weight:500}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name{padding-right:0.5rem;width:35%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name pn-select{width:95%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input{width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input pn-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input pn-input{width:100%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-delete,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-delete{margin:1rem;width:15%}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 pnDropdownChoiceAddsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-dropdown-choice-adds-row{display:block;width:80rem}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;border:none !important}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 .generated-table-row{display:flex;margin-bottom:2rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header{display:flex;margin:2rem 0 3rem 0;font-weight:500}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name{padding-right:0.5rem;width:35%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name pn-select{width:95%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input{width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input pn-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input pn-input{width:100%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-delete,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-delete{margin:1rem;width:15%}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 PnDropdownChoiceAddsRowStyle0 = pnDropdownChoiceAddsRowCss;
 const pnDropdownChoiceAddsRow = class {
@@ -88,12 +88,14 @@ const pnDropdownChoiceAddsRow = class {
                 this.rowvalues.emit('');
                 return;
             }
+            let allRowsValid = true;
             const formValues = allRows.map(row => {
                 const nameElm = row.querySelector('.tr-name');
                 const dropdownElm = row.querySelector('.tr-dropdown');
                 const inputElm = row.querySelector('.tr-input');
                 if (!nameElm || !inputElm) {
-                    throw new Error('Required elements missing from row');
+                    allRowsValid = false;
+                    return null;
                 }
                 const rowData = {
                     row: [
@@ -103,11 +105,14 @@ const pnDropdownChoiceAddsRow = class {
                         }
                     ]
                 };
-                if (dropdownElm) {
+                if (dropdownElm && dropdownElm.querySelector('pn-select')) {
                     const pnSelect = dropdownElm.querySelector('pn-select');
                     const nativeSelect = pnSelect?.querySelector('select');
                     const dropdownSelection = nativeSelect?.value || '';
-                    if (dropdownSelection) {
+                    if (!dropdownSelection) {
+                        allRowsValid = false;
+                    }
+                    else {
                         rowData.row.push({
                             name: this.rowDropdownLabel,
                             value: dropdownSelection
@@ -122,16 +127,22 @@ const pnDropdownChoiceAddsRow = class {
                         value: inputValue.toString()
                     });
                 }
+                else {
+                    allRowsValid = false;
+                }
                 return rowData;
             });
-            if (!formValues.length || formValues.length !== allRows.length) {
+            if (!allRowsValid || !formValues.length || formValues.includes(null)) {
                 this.formValue = '';
+                this.rowvalues.emit('');
                 return;
             }
             this.formValue = `PN-JSON|${JSON.stringify(formValues)}`;
             if (this.validateInputs()) {
                 this.rowvalues.emit(this.formValue);
-                return;
+            }
+            else {
+                this.rowvalues.emit('');
             }
         }
         catch (error) {
@@ -179,6 +190,7 @@ const pnDropdownChoiceAddsRow = class {
         this.tableBody.appendChild(newRow);
         this.updateRowSelectDropdown();
         this.nextRowIndex++;
+        selectedElement.value = '';
     }
     getCurrentRow(selectedValue) {
         return this.hostElement.querySelectorAll(`.tr-name[data-name='${selectedValue}'`);
@@ -317,7 +329,7 @@ const pnDropdownChoiceAddsRow = class {
         return true;
     }
     render() {
-        return (h(Host, { key: 'fd91d96d714f89cab04d27588c78c933e4758a29' }, h("div", { key: '3c8c900cc143afe7331b5717649d0ceef3fb1b97', class: "dropdown-choice-form-row" }, h("pn-select", { key: '42cf006bfd234c61e115bb3fd90d8fa5bc9b937f', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", language: this.languageCode }, h("option", { key: 'aa923ce23c5e94ac3ee98701b33a83461cdd40d9', value: "", selected: true, disabled: true }, this.addRowDropdownPlaceholder), this.rowSelectDropdownArr?.map((value) => h("option", { label: value, value: value }, value)))), h("div", { key: '41cd6fc5cca7544033bbb7e811da28a92f631f44', class: "dropdown-choice-form-row" }, h("div", { key: 'a76149b35b83be8964ac9e0177d5677f7bdb9c39', class: "pn-dropdown-choice-table" }, h("div", { key: '417b71529a5491b4e8900b800bbbf89fe2ef0c6d', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("div", { class: "table-header" }, h("div", { class: "table-header-name" }, h("label", null, this.rowNameLabel)), h("div", { class: "table-header-dropdown" }, h("label", null, this.rowDropdownLabel)), h("div", { class: "table-header-input" }, h("label", null, this.rowInputLabel)), h("div", { class: "table-header-delete" })))), h("div", { key: '7ff98dc256a4aa7a613ac06474b18fc7f9458aeb', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", { key: '659095efebf6f2b123b4586b2d2913431b1cc6c2' }))))));
+        return (h(Host, { key: '4d75a1a804885406d9bf70647ee031b283001316' }, h("div", { key: '4db2eab15b25d322bd8081f22fa0dfb4e40ff1d8', class: "dropdown-choice-form-row" }, h("pn-select", { key: '34479df6fd80391a95628b34a9d3d4007a43700a', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", language: this.languageCode }, h("option", { key: 'c445488973b9c7127a55f0f83cfb46276f3a165e', value: "", selected: true, disabled: true }, this.addRowDropdownPlaceholder), this.rowSelectDropdownArr?.map((value) => h("option", { label: value, value: value }, value)))), h("div", { key: '15abdc5dae3056d3e81069c01e67245aacba5c59', class: "dropdown-choice-form-row" }, h("div", { key: '2386cfc37b14b5769e095596f191054b2fb3e0af', class: "pn-dropdown-choice-table" }, h("div", { key: '123b39e0fc0dba53aa35da0dea41178f77633c76', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("div", { class: "table-header" }, h("div", { class: "table-header-name" }, h("label", null, this.rowNameLabel)), h("div", { class: "table-header-dropdown" }, h("label", null, this.rowDropdownLabel)), h("div", { class: "table-header-input" }, h("label", null, this.rowInputLabel)), h("div", { class: "table-header-delete" })))), h("div", { key: '8d6e932979cd2065cbf77a70e74e30d087351b24', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", { key: '8957b9b3b30d090c51bc993ff4676f91a2846a15' }))))));
     }
     static get watchers() { return {
         "dropdownData": ["dropdownDataWatcher"]

package/esm/pn-dropdown-choice-adds-row.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-dropdown-choice-adds-row.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.scss?tag=pn-dropdown-choice-adds-row","src/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-dropdown-choice-adds-row {\n display: block;\n width: 80rem;\n\n .pn-row-select-dropdown {\n width: 50%;\n margin-bottom: 1rem;\n }\n\n @media only screen and (max-width: 640px) {\n .pn-row-select-dropdown {\n width: 100%;\n }\n }\n\n .pn-dropdown-choice-table {\n width: 100%;\n border-spacing: 0rem;\n border: none !important;\n\n thead {\n th {\n text-align: left;\n padding: 1rem 0.5rem;\n\n label {\n color: $gray700;\n font-size: 1.4rem;\n font-weight: 400;\n }\n }\n }\n \n .generated-table-row {\n display: flex;\n margin-bottom: 2rem;\n }\n\n .table-header {\n display: flex;\n margin: 2rem 0 3rem 0;\n font-weight: 500;\n }\n\n .table-header, .tr {\n &-dropdown, &-column, &-name {\n padding-right: 0.5rem;\n width: 35%;\n\n pn-select {\n width: 95%;\n }\n }\n\n &-input {\n width: 15%;\n\n pn-input {\n width: 100%;\n }\n }\n\n &-delete {\n margin: 1rem;\n width: 15%;\n }\n }\n\n tbody {\n td {\n padding: 0.5rem;\n }\n\n tr:nth-child(even) {\n background-color: #effbff;\n }\n\n .tr-delete {\n text-align: center;\n }\n }\n\n tfoot {\n td {\n small {\n color: $warning;\n vertical-align: middle;\n }\n\n pn-icon {\n margin-right: 0.25em;\n vertical-align: middle;\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter } from '@stencil/core';\nimport { FormValue, RowValue, Root } from './types';\nimport debounce from 'debounce';\n\n@Component({\n tag: 'pn-dropdown-choice-adds-row',\n styleUrl: 'pn-dropdown-choice-adds-row.scss',\n})\nexport class pnDropdownChoiceAddsRow {\n @Element() hostElement: Element;\n pnRowSelectDropdown: HTMLElement = null;\n tableHead: HTMLElement = null;\n tableBody: HTMLElement = null;\n private _dropdownData: Root[];\n\n @Prop() dropdownData: string \| Root[] = null;\n @Prop() languageCode: string = null;\n @Prop() addRowDropdownName: string = '';\n @Prop() addRowDropdownPlaceholder: string = '';\n @Prop() addRowDropdownLabel: string = '';\n @Prop() rowNameLabel: string = '';\n @Prop() rowHasDropdown: boolean = true;\n @Prop() rowDropdownLabel: string = '';\n @Prop() rowDropdownPlaceholder: string = '';\n @Prop() rowInputLabel: string = '';\n @Prop() rowDeleteButtonText: string = '';\n @Prop() totalInputLimit: number = 0;\n @Prop() inputLimitWarning: string = null;\n @Prop() inputEmptyWarning: string = null;\n @Prop() dropdownEmptyWarning: string = null;\n\n @State() nextRowIndex: number = null;\n @State() rowSelectDropdownArr: string[] = null;\n @State() formValue: string = null;\n\n @Event() rowvalues: EventEmitter<string>;\n\n @Watch('dropdownData')\n dropdownDataWatcher() {\n if (typeof this.dropdownData === 'string') {\n this._dropdownData = JSON.parse(this.dropdownData);\n } else {\n this._dropdownData = this.dropdownData;\n }\n }\n\n componentWillLoad() {\n this.dropdownDataWatcher();\n }\n\n componentDidLoad() {\n this.setInitialValues();\n this.addEventHandlers();\n }\n\n addEventHandlers() {\n this.pnRowSelectDropdown.addEventListener('change', debounce(this.addRowElement.bind(this), 500));\n }\n\n setInitialValues() {\n this.nextRowIndex = 0;\n this.setRowSelectDropdownArr();\n }\n\n setRowSelectDropdownArr() {\n this.rowSelectDropdownArr = [];\n this._dropdownData.forEach(element => {\n this.rowSelectDropdownArr.push(element.label);\n });\n }\n\n formRowEvent = e => {\n const debouncedAddValue = debounce(this.updateHiddenFieldValue.bind(this), 500);\n\n if (e.target.matches('input')) {\n ['change', 'keyup'].forEach(eventName => {\n e.target.addEventListener(eventName, debouncedAddValue);\n });\n } else {\n const rowDropdown = e.target.closest('.generated-table-row')?.querySelector('pn-select') as HTMLElement;\n if (rowDropdown) {\n rowDropdown.addEventListener('change', debouncedAddValue);\n }\n }\n };\n\n updateHiddenFieldValue() {\n try {\n const allRows = [...this.tableBody.querySelectorAll('.generated-table-row')];\n const mainDropdown = this.hostElement.querySelector('.pn-row-select-dropdown');\n\n if (!mainDropdown) {\n return;\n }\n\n if (!allRows.length) {\n mainDropdown.setAttribute('error', `${this.dropdownEmptyWarning \|\| \"This field cannot be empty\"}`);\n this.formValue = '';\n this.rowvalues.emit('');\n return;\n }\n\n const formValues = allRows.map(row => {\n const nameElm = row.querySelector('.tr-name');\n const dropdownElm = row.querySelector('.tr-dropdown');\n const inputElm = row.querySelector('.tr-input');\n\n if (!nameElm \|\| !inputElm) {\n throw new Error('Required elements missing from row');\n }\n\n const rowData = {\n row: [\n {\n name: this.rowNameLabel,\n value: nameElm.innerHTML\n }\n ]\n };\n\n if (dropdownElm) {\n const pnSelect = dropdownElm.querySelector('pn-select');\n const nativeSelect = pnSelect?.querySelector('select');\n const dropdownSelection = nativeSelect?.value \|\| '';\n if (dropdownSelection) {\n rowData.row.push({\n name: this.rowDropdownLabel,\n value: dropdownSelection\n });\n }\n }\n\n const input = inputElm.querySelector('input');\n const inputValue = parseInt(input?.value \|\| '0', 10);\n if (inputValue > 0) {\n rowData.row.push({\n name: this.rowInputLabel,\n value: inputValue.toString()\n });\n }\n return rowData;\n });\n\n if (!formValues.length \|\| formValues.length !== allRows.length) {\n this.formValue = '';\n return;\n }\n\n this.formValue = `PN-JSON\|${JSON.stringify(formValues)}`;\n\n if (this.validateInputs()) {\n this.rowvalues.emit(this.formValue);\n return;\n }\n\n } catch (error) {\n console.error('Error updating field value: ', error);\n this.formValue = '';\n }\n }\n\n addRowElement(e: CustomEvent) {\n const selectedElement = e.target as HTMLSelectElement;\n const selectedValue = selectedElement?.value;\n\n if (!selectedValue) {\n return;\n }\n\n const mainDropdown = this.hostElement.querySelector('.pn-row-select-dropdown');\n mainDropdown?.removeAttribute('error');\n\n if (!this.tableBody) {\n console.error('tableBody is not defined.');\n return;\n }\n\n const newRow = document.createElement('div');\n newRow.setAttribute('index', `${this.nextRowIndex}`);\n newRow.className = 'generated-table-row';\n newRow.onclick = e => this.formRowEvent(e);\n\n const rowNameColumn = document.createElement('div');\n rowNameColumn.className = 'tr-name';\n rowNameColumn.innerHTML = selectedValue;\n rowNameColumn.dataset.name = selectedValue;\n newRow.appendChild(rowNameColumn);\n\n const selectedR = this._dropdownData?.find(item => item.label === selectedValue);\n\n if (selectedR?.values?.length) {\n this.rowHasDropdown = true;\n const dropdownCol = this.createDropdownColumn(selectedValue);\n newRow.appendChild(dropdownCol);\n } else {\n this.rowHasDropdown = false;\n const emptyDropdownCol = document.createElement('div');\n emptyDropdownCol.className = 'tr-column';\n newRow.appendChild(emptyDropdownCol);\n }\n\n const rowInputColumn = this.createInputColumn(selectedValue);\n newRow.appendChild(rowInputColumn);\n\n const deleteButton = this.createDeleteButtonColumn();\n newRow.appendChild(deleteButton);\n\n this.tableBody.appendChild(newRow);\n\n this.updateRowSelectDropdown();\n this.nextRowIndex++;\n }\n\n getCurrentRow(selectedValue: string) {\n return this.hostElement.querySelectorAll(`.tr-name[data-name='${selectedValue}'`);\n }\n\n createDropdownColumn(selectedValue: string) {\n const dropdownColumn = document.createElement('div');\n dropdownColumn.setAttribute('class', 'tr-dropdown');\n const selectedItem = this._dropdownData.find(arr => arr.label === selectedValue);\n const selectedOptionValues = [];\n const currentRow = this.getCurrentRow(selectedValue);\n\n currentRow.forEach(row => {\n selectedOptionValues.push(row.parentElement?.querySelector('.tr-dropdown [aria-selected=true]')?.textContent);\n });\n\n if (selectedItem.values.length) {\n const dropdown = document.createElement('pn-select');\n dropdown.setAttribute('name', `${selectedValue}-dropdown`);\n dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);\n dropdown.setAttribute('required', 'true');\n dropdown.setAttribute('error', '');\n\n const placeholder = document.createElement('option');\n placeholder.setAttribute(\"value\", \"\");\n placeholder.textContent = this.rowDropdownPlaceholder;\n placeholder.selected = true;\n placeholder.disabled = true;\n dropdown.appendChild(placeholder);\n\n selectedItem.values.forEach(childItem => {\n const childOption = document.createElement('option');\n childOption.setAttribute(\"label\", childItem.label);\n childOption.setAttribute(\"value\", childItem.label);\n childOption.textContent = childItem.label;\n dropdown.appendChild(childOption);\n });\n\n dropdownColumn.appendChild(dropdown);\n }\n\n return dropdownColumn;\n }\n\n createInputColumn(selectedValue: string) {\n const inputColumn = document.createElement('div');\n inputColumn.setAttribute('class', 'tr-input');\n const inputElm = document.createElement('pn-input');\n inputElm.setAttribute('type', 'number');\n inputElm.setAttribute('name', `${selectedValue}-input`);\n inputElm.setAttribute('placeholder', '0');\n if (this.totalInputLimit > 0) {\n inputElm.setAttribute('max', `${this.totalInputLimit}`);\n }\n inputElm.setAttribute('min', '0');\n inputElm.setAttribute('error', '');\n inputColumn.appendChild(inputElm);\n return inputColumn;\n }\n\n createDeleteButtonColumn() {\n const buttonColumn = document.createElement('div');\n buttonColumn.setAttribute('class', 'tr-delete');\n const buttonElm = document.createElement('pn-button');\n buttonElm.onclick = e => this.deleteRow(e);\n buttonElm.setAttribute('appearance', 'warning');\n buttonElm.setAttribute('small', 'true');\n buttonElm.appendChild(document.createTextNode(this.rowDeleteButtonText));\n buttonColumn.appendChild(buttonElm);\n return buttonColumn;\n }\n\n updateRowSelectDropdown() {\n type Row = { rowName: string; selectedValue: string; placeholder: string };\n\n const rows: Row[] = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {\n const dropdownColumn = el?.parentElement?.querySelector('.tr-dropdown');\n const dropdownPlaceholder = dropdownColumn?.querySelector('.pn-select-content span')?.textContent;\n const row: Row = {\n rowName: el?.innerHTML,\n selectedValue: dropdownColumn?.querySelector('[aria-selected=true]')?.textContent,\n placeholder: dropdownPlaceholder,\n };\n return row;\n });\n\n const selectOptions = this.pnRowSelectDropdown.querySelectorAll('option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n deleteRow(e: Event) {\n e.preventDefault();\n this.nextRowIndex--;\n const targetElm = e.currentTarget as HTMLButtonElement;\n const targetRow = targetElm.closest('.generated-table-row');\n targetRow.remove();\n const allRows = [...this.tableBody.querySelectorAll('.generated-table-row')];\n\n allRows.map((elm, index) => {\n elm.setAttribute('index', `${index}`);\n });\n this.updateHiddenFieldValue()\n this.updateRowSelectDropdown();\n }\n\n validateInputs() {\n const dropdownSelections = this.tableBody.querySelectorAll('pn-select');\n const numberInputs = this.tableBody.querySelectorAll('pn-input');\n let selectionEmpty = false;\n let showWarning = false;\n\n if (dropdownSelections) {\n dropdownSelections.forEach(dropdownElem => {\n if (!dropdownElem) {\n return;\n }\n\n const selection = dropdownElem.querySelector('select');\n const dropdownVal = selection?.value \|\| '';\n\n if (dropdownVal === null \|\| dropdownVal === \"\") {\n dropdownElem.setAttribute('error', `${this.dropdownEmptyWarning \|\| \"This field cannot be empty\"}`);\n selectionEmpty = true;\n } else {\n dropdownElem.setAttribute('error', '');\n }\n });\n }\n\n if (numberInputs) {\n numberInputs.forEach(inputElem => {\n if (inputElem) {\n const currentNumber = inputElem.querySelector(\"input\");\n let currentValue = parseInt(currentNumber.value);\n\n if (this.totalInputLimit < currentValue && inputElem.hasAttribute('max')) {\n inputElem.setAttribute('error', `${this.inputLimitWarning \|\| \"Amount too high\"}`);\n showWarning = true;\n } else if (currentValue <= 0 \|\| isNaN(currentValue)) {\n inputElem.setAttribute('error', `${this.inputEmptyWarning \|\| \"This field cannot be empty\"}`);\n showWarning = true;\n } else {\n inputElem.setAttribute('error', '');\n showWarning = false;\n }\n }\n });\n }\n\n if (selectionEmpty \|\| showWarning) {\n return false;\n }\n\n return true;\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown-choice-form-row\">\n <pn-select\n ref={el => (this.pnRowSelectDropdown = el as HTMLElement)}\n name={this.addRowDropdownName}\n label={this.addRowDropdownLabel}\n class=\"pn-row-select-dropdown\"\n language={this.languageCode}>\n <option value=\"\" selected disabled>{this.addRowDropdownPlaceholder}</option>\n {this.rowSelectDropdownArr?.map((value: string) => <option label={value} value={value}>{value}</option>)}\n </pn-select>\n </div>\n <div class=\"dropdown-choice-form-row\">\n <div class=\"pn-dropdown-choice-table\">\n <div ref={el => (this.tableHead = el as HTMLElement)}>\n {this.nextRowIndex === 0 ? null : (\n <div class=\"table-header\">\n <div class=\"table-header-name\">\n <label>{this.rowNameLabel}</label>\n </div>\n <div class=\"table-header-dropdown\">\n <label>{this.rowDropdownLabel}</label>\n </div>\n <div class=\"table-header-input\">\n <label>{this.rowInputLabel}</label>\n </div>\n <div class=\"table-header-delete\"></div>\n </div>\n )}\n </div>\n <div ref={el => (this.tableBody = el as HTMLElement)} class=\"pn-dropdown-choice-table-slot\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-dropdown-choice-adds-row.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.scss?tag=pn-dropdown-choice-adds-row","src/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-dropdown-choice-adds-row {\n display: block;\n width: 80rem;\n\n .pn-row-select-dropdown {\n width: 50%;\n margin-bottom: 1rem;\n }\n\n @media only screen and (max-width: 640px) {\n .pn-row-select-dropdown {\n width: 100%;\n }\n }\n\n .pn-dropdown-choice-table {\n width: 100%;\n border-spacing: 0rem;\n border: none !important;\n\n thead {\n th {\n text-align: left;\n padding: 1rem 0.5rem;\n\n label {\n color: $gray700;\n font-size: 1.4rem;\n font-weight: 400;\n }\n }\n }\n \n .generated-table-row {\n display: flex;\n margin-bottom: 2rem;\n }\n\n .table-header {\n display: flex;\n margin: 2rem 0 3rem 0;\n font-weight: 500;\n }\n\n .table-header, .tr {\n &-dropdown, &-column, &-name {\n padding-right: 0.5rem;\n width: 35%;\n\n pn-select {\n width: 95%;\n }\n }\n\n &-input {\n width: 15%;\n\n pn-input {\n width: 100%;\n }\n }\n\n &-delete {\n margin: 1rem;\n width: 15%;\n }\n }\n\n tbody {\n td {\n padding: 0.5rem;\n }\n\n tr:nth-child(even) {\n background-color: #effbff;\n }\n\n .tr-delete {\n text-align: center;\n }\n }\n\n tfoot {\n td {\n small {\n color: $warning;\n vertical-align: middle;\n }\n\n pn-icon {\n margin-right: 0.25em;\n vertical-align: middle;\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter } from '@stencil/core';\nimport { FormValue, RowValue, Root } from './types';\nimport debounce from 'debounce';\n\n@Component({\n tag: 'pn-dropdown-choice-adds-row',\n styleUrl: 'pn-dropdown-choice-adds-row.scss',\n})\nexport class pnDropdownChoiceAddsRow {\n @Element() hostElement: Element;\n pnRowSelectDropdown: HTMLElement = null;\n tableHead: HTMLElement = null;\n tableBody: HTMLElement = null;\n private _dropdownData: Root[];\n\n @Prop() dropdownData: string \| Root[] = null;\n @Prop() languageCode: string = null;\n @Prop() addRowDropdownName: string = '';\n @Prop() addRowDropdownPlaceholder: string = '';\n @Prop() addRowDropdownLabel: string = '';\n @Prop() rowNameLabel: string = '';\n @Prop() rowHasDropdown: boolean = true;\n @Prop() rowDropdownLabel: string = '';\n @Prop() rowDropdownPlaceholder: string = '';\n @Prop() rowInputLabel: string = '';\n @Prop() rowDeleteButtonText: string = '';\n @Prop() totalInputLimit: number = 0;\n @Prop() inputLimitWarning: string = null;\n @Prop() inputEmptyWarning: string = null;\n @Prop() dropdownEmptyWarning: string = null;\n\n @State() nextRowIndex: number = null;\n @State() rowSelectDropdownArr: string[] = null;\n @State() formValue: string = null;\n\n @Event() rowvalues: EventEmitter<string>;\n\n @Watch('dropdownData')\n dropdownDataWatcher() {\n if (typeof this.dropdownData === 'string') {\n this._dropdownData = JSON.parse(this.dropdownData);\n } else {\n this._dropdownData = this.dropdownData;\n }\n }\n\n componentWillLoad() {\n this.dropdownDataWatcher();\n }\n\n componentDidLoad() {\n this.setInitialValues();\n this.addEventHandlers();\n }\n\n addEventHandlers() {\n this.pnRowSelectDropdown.addEventListener('change', debounce(this.addRowElement.bind(this), 500));\n }\n\n setInitialValues() {\n this.nextRowIndex = 0;\n this.setRowSelectDropdownArr();\n }\n\n setRowSelectDropdownArr() {\n this.rowSelectDropdownArr = [];\n this._dropdownData.forEach(element => {\n this.rowSelectDropdownArr.push(element.label);\n });\n }\n\n formRowEvent = e => {\n const debouncedAddValue = debounce(this.updateHiddenFieldValue.bind(this), 500);\n\n if (e.target.matches('input')) {\n ['change', 'keyup'].forEach(eventName => {\n e.target.addEventListener(eventName, debouncedAddValue);\n });\n } else {\n const rowDropdown = e.target.closest('.generated-table-row')?.querySelector('pn-select') as HTMLElement;\n if (rowDropdown) {\n rowDropdown.addEventListener('change', debouncedAddValue);\n }\n }\n };\n\n updateHiddenFieldValue() {\n try {\n const allRows = [...this.tableBody.querySelectorAll('.generated-table-row')];\n const mainDropdown = this.hostElement.querySelector('.pn-row-select-dropdown');\n\n if (!mainDropdown) {\n return;\n }\n\n if (!allRows.length) {\n mainDropdown.setAttribute('error', `${this.dropdownEmptyWarning \|\| \"This field cannot be empty\"}`);\n this.formValue = '';\n this.rowvalues.emit('');\n return;\n }\n\n let allRowsValid = true;\n const formValues = allRows.map(row => {\n const nameElm = row.querySelector('.tr-name');\n const dropdownElm = row.querySelector('.tr-dropdown');\n const inputElm = row.querySelector('.tr-input');\n\n if (!nameElm \|\| !inputElm) {\n allRowsValid = false;\n return null;\n }\n\n const rowData = {\n row: [\n {\n name: this.rowNameLabel,\n value: nameElm.innerHTML\n }\n ]\n };\n\n if (dropdownElm && dropdownElm.querySelector('pn-select')) {\n const pnSelect = dropdownElm.querySelector('pn-select');\n const nativeSelect = pnSelect?.querySelector('select');\n const dropdownSelection = nativeSelect?.value \|\| '';\n if (!dropdownSelection) {\n allRowsValid = false;\n } else {\n rowData.row.push({\n name: this.rowDropdownLabel,\n value: dropdownSelection\n });\n }\n }\n\n const input = inputElm.querySelector('input');\n const inputValue = parseInt(input?.value \|\| '0', 10);\n if (inputValue > 0) {\n rowData.row.push({\n name: this.rowInputLabel,\n value: inputValue.toString()\n });\n } else {\n allRowsValid = false;\n }\n return rowData;\n });\n\n if (!allRowsValid \|\| !formValues.length \|\| formValues.includes(null)) {\n this.formValue = '';\n this.rowvalues.emit('');\n return;\n }\n\n this.formValue = `PN-JSON\|${JSON.stringify(formValues)}`;\n \n if (this.validateInputs()) {\n this.rowvalues.emit(this.formValue);\n } else {\n this.rowvalues.emit('');\n }\n\n } catch (error) {\n console.error('Error updating field value: ', error);\n this.formValue = '';\n }\n }\n\n addRowElement(e: CustomEvent) {\n const selectedElement = e.target as HTMLSelectElement;\n const selectedValue = selectedElement?.value;\n\n if (!selectedValue) {\n return;\n }\n\n const mainDropdown = this.hostElement.querySelector('.pn-row-select-dropdown');\n mainDropdown?.removeAttribute('error');\n\n if (!this.tableBody) {\n console.error('tableBody is not defined.');\n return;\n }\n\n const newRow = document.createElement('div');\n newRow.setAttribute('index', `${this.nextRowIndex}`);\n newRow.className = 'generated-table-row';\n newRow.onclick = e => this.formRowEvent(e);\n\n const rowNameColumn = document.createElement('div');\n rowNameColumn.className = 'tr-name';\n rowNameColumn.innerHTML = selectedValue;\n rowNameColumn.dataset.name = selectedValue;\n newRow.appendChild(rowNameColumn);\n\n const selectedR = this._dropdownData?.find(item => item.label === selectedValue);\n\n if (selectedR?.values?.length) {\n this.rowHasDropdown = true;\n const dropdownCol = this.createDropdownColumn(selectedValue);\n newRow.appendChild(dropdownCol);\n } else {\n this.rowHasDropdown = false;\n const emptyDropdownCol = document.createElement('div');\n emptyDropdownCol.className = 'tr-column';\n newRow.appendChild(emptyDropdownCol);\n }\n\n const rowInputColumn = this.createInputColumn(selectedValue);\n newRow.appendChild(rowInputColumn);\n\n const deleteButton = this.createDeleteButtonColumn();\n newRow.appendChild(deleteButton);\n\n this.tableBody.appendChild(newRow);\n\n this.updateRowSelectDropdown();\n this.nextRowIndex++;\n selectedElement.value = '';\n }\n\n getCurrentRow(selectedValue: string) {\n return this.hostElement.querySelectorAll(`.tr-name[data-name='${selectedValue}'`);\n }\n\n createDropdownColumn(selectedValue: string) {\n const dropdownColumn = document.createElement('div');\n dropdownColumn.setAttribute('class', 'tr-dropdown');\n const selectedItem = this._dropdownData.find(arr => arr.label === selectedValue);\n const selectedOptionValues = [];\n const currentRow = this.getCurrentRow(selectedValue);\n\n currentRow.forEach(row => {\n selectedOptionValues.push(row.parentElement?.querySelector('.tr-dropdown [aria-selected=true]')?.textContent);\n });\n\n if (selectedItem.values.length) {\n const dropdown = document.createElement('pn-select');\n dropdown.setAttribute('name', `${selectedValue}-dropdown`);\n dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);\n dropdown.setAttribute('required', 'true');\n dropdown.setAttribute('error', '');\n\n const placeholder = document.createElement('option');\n placeholder.setAttribute(\"value\", \"\");\n placeholder.textContent = this.rowDropdownPlaceholder;\n placeholder.selected = true;\n placeholder.disabled = true;\n dropdown.appendChild(placeholder);\n\n selectedItem.values.forEach(childItem => {\n const childOption = document.createElement('option');\n childOption.setAttribute(\"label\", childItem.label);\n childOption.setAttribute(\"value\", childItem.label);\n childOption.textContent = childItem.label;\n dropdown.appendChild(childOption);\n });\n\n dropdownColumn.appendChild(dropdown);\n }\n\n return dropdownColumn;\n }\n\n createInputColumn(selectedValue: string) {\n const inputColumn = document.createElement('div');\n inputColumn.setAttribute('class', 'tr-input');\n const inputElm = document.createElement('pn-input');\n inputElm.setAttribute('type', 'number');\n inputElm.setAttribute('name', `${selectedValue}-input`);\n inputElm.setAttribute('placeholder', '0');\n if (this.totalInputLimit > 0) {\n inputElm.setAttribute('max', `${this.totalInputLimit}`);\n }\n inputElm.setAttribute('min', '0');\n inputElm.setAttribute('error', '');\n inputColumn.appendChild(inputElm);\n return inputColumn;\n }\n\n createDeleteButtonColumn() {\n const buttonColumn = document.createElement('div');\n buttonColumn.setAttribute('class', 'tr-delete');\n const buttonElm = document.createElement('pn-button');\n buttonElm.onclick = e => this.deleteRow(e);\n buttonElm.setAttribute('appearance', 'warning');\n buttonElm.setAttribute('small', 'true');\n buttonElm.appendChild(document.createTextNode(this.rowDeleteButtonText));\n buttonColumn.appendChild(buttonElm);\n return buttonColumn;\n }\n\n updateRowSelectDropdown() {\n type Row = { rowName: string; selectedValue: string; placeholder: string };\n\n const rows: Row[] = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {\n const dropdownColumn = el?.parentElement?.querySelector('.tr-dropdown');\n const dropdownPlaceholder = dropdownColumn?.querySelector('.pn-select-content span')?.textContent;\n const row: Row = {\n rowName: el?.innerHTML,\n selectedValue: dropdownColumn?.querySelector('[aria-selected=true]')?.textContent,\n placeholder: dropdownPlaceholder,\n };\n return row;\n });\n\n const selectOptions = this.pnRowSelectDropdown.querySelectorAll('option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n deleteRow(e: Event) {\n e.preventDefault();\n this.nextRowIndex--;\n const targetElm = e.currentTarget as HTMLButtonElement;\n const targetRow = targetElm.closest('.generated-table-row');\n targetRow.remove();\n const allRows = [...this.tableBody.querySelectorAll('.generated-table-row')];\n\n allRows.map((elm, index) => {\n elm.setAttribute('index', `${index}`);\n });\n this.updateHiddenFieldValue()\n this.updateRowSelectDropdown();\n }\n\n validateInputs() {\n const dropdownSelections = this.tableBody.querySelectorAll('pn-select');\n const numberInputs = this.tableBody.querySelectorAll('pn-input');\n let selectionEmpty = false;\n let showWarning = false;\n\n if (dropdownSelections) {\n dropdownSelections.forEach(dropdownElem => {\n if (!dropdownElem) {\n return;\n }\n\n const selection = dropdownElem.querySelector('select');\n const dropdownVal = selection?.value \|\| '';\n\n if (dropdownVal === null \|\| dropdownVal === \"\") {\n dropdownElem.setAttribute('error', `${this.dropdownEmptyWarning \|\| \"This field cannot be empty\"}`);\n selectionEmpty = true;\n } else {\n dropdownElem.setAttribute('error', '');\n }\n });\n }\n\n if (numberInputs) {\n numberInputs.forEach(inputElem => {\n if (inputElem) {\n const currentNumber = inputElem.querySelector(\"input\");\n let currentValue = parseInt(currentNumber.value);\n\n if (this.totalInputLimit < currentValue && inputElem.hasAttribute('max')) {\n inputElem.setAttribute('error', `${this.inputLimitWarning \|\| \"Amount too high\"}`);\n showWarning = true;\n } else if (currentValue <= 0 \|\| isNaN(currentValue)) {\n inputElem.setAttribute('error', `${this.inputEmptyWarning \|\| \"This field cannot be empty\"}`);\n showWarning = true;\n } else {\n inputElem.setAttribute('error', '');\n showWarning = false;\n }\n }\n });\n }\n\n if (selectionEmpty \|\| showWarning) {\n return false;\n }\n\n return true;\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown-choice-form-row\">\n <pn-select\n ref={el => (this.pnRowSelectDropdown = el as HTMLElement)}\n name={this.addRowDropdownName}\n label={this.addRowDropdownLabel}\n class=\"pn-row-select-dropdown\"\n language={this.languageCode}>\n <option value=\"\" selected disabled>{this.addRowDropdownPlaceholder}</option>\n {this.rowSelectDropdownArr?.map((value: string) => <option label={value} value={value}>{value}</option>)}\n </pn-select>\n </div>\n <div class=\"dropdown-choice-form-row\">\n <div class=\"pn-dropdown-choice-table\">\n <div ref={el => (this.tableHead = el as HTMLElement)}>\n {this.nextRowIndex === 0 ? null : (\n <div class=\"table-header\">\n <div class=\"table-header-name\">\n <label>{this.rowNameLabel}</label>\n </div>\n <div class=\"table-header-dropdown\">\n <label>{this.rowDropdownLabel}</label>\n </div>\n <div class=\"table-header-input\">\n <label>{this.rowInputLabel}</label>\n </div>\n <div class=\"table-header-delete\"></div>\n </div>\n )}\n </div>\n <div ref={el => (this.tableBody = el as HTMLElement)} class=\"pn-dropdown-choice-table-slot\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/esm/pn-dropdown-with-multi-input-rows-row.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-c311acd6.js';
 import { d as debounce } from './index-1190bec4.js';
 import { m as minus } from './minus-2b8ae0b8.js';
-const pnDropdownWithMultiInputRowsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-dropdown-with-multi-input-rows-row .input-element-row{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}pn-dropdown-with-multi-input-rows-row label.pn-date-picker-label:has(span:empty){display:none}";
+const pnDropdownWithMultiInputRowsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-dropdown-with-multi-input-rows-row .input-element-row{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}pn-dropdown-with-multi-input-rows-row label.pn-date-picker-label:has(span:empty){display:none}";
 const PnDropdownWithMultiInputRowsRowStyle0 = pnDropdownWithMultiInputRowsRowCss;
 const PnDropdownWithMultiInputRowsRow = class {

package/esm/pn-dropdown-with-multi-input-rows-row.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-dropdown-with-multi-input-rows-row.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row.scss?tag=pn-dropdown-with-multi-input-rows-row","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-dropdown-with-multi-input-rows-row {\n .input-element-row {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n\n .input-container {\n width: 30%;\n\n pn-marketweb-input {\n .input-container {\n width: 100%;\n }\n }\n\n pn-date-picker {\n width: 100%;\n }\n\n .input-element-message-container {\n margin-top: 0.3rem;\n &__error {\n color: red;\n line-height: 1;\n }\n\n &__warning {\n line-height: 1;\n }\n }\n }\n }\n\n .delete-button-contianer {\n margin-top: 0.6rem;\n }\n\n label.pn-date-picker-label:has(span:empty) {\n display: none;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, RowValue, Root, PredefinedValues } from './types';\nimport debounce from 'debounce';\nimport { minus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-dropdown-with-multi-input-rows-row',\n styleUrl: 'pn-dropdown-with-multi-input-rows-row.scss',\n})\nexport class PnDropdownWithMultiInputRowsRow {\n @Element() hostElement: Element;\n private _predefinedValue: PredefinedValues;\n pnFirstInputField: HTMLElement = null;\n pnSecondInputField: HTMLElement = null;\n pnDatePicker: HTMLElement = null;\n pnDeleteRowButton: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() firstInputPlaceholder: string = null;\n @Prop() firstInputMin: number = null;\n @Prop() firstInputMax: number = null;\n @Prop() firstInputWarning: number = null;\n @Prop() firstInputWarningText: string = null;\n @Prop() firstInputLowErrorText: string = null;\n @Prop() firstInputHighErrorText: string = null;\n @Prop() secondInputPlaceholder: string = null;\n @Prop() secondInputMin: number = null;\n @Prop() secondInputMax: number = null;\n @Prop() secondInputWarning: number = null;\n @Prop() secondInputWarningText: string = null;\n @Prop() secondInputLowErrorText: string = null;\n @Prop() secondInputHighErrorText: string = null;\n @Prop() dateLabel: string = null;\n @Prop() datePlaceholder: string = null;\n @Prop() firstValidDate: string = null;\n @Prop() lastValidDate: string = null;\n @Prop() predefinedValue: string = null;\n @Prop() rowIndex: number = null;\n @Prop() minRowCount: number = null;\n @Prop() disabledDates: string = null;\n\n @State() showFirstInputWarning: boolean = false;\n @State() showFirstInputLowError: boolean = false;\n @State() showFirstInputHighError: boolean = false;\n @State() showSecondInputWarning: boolean = false;\n @State() showSecondInputLowError: boolean = false;\n @State() showSecondInputHighError: boolean = false;\n\n @State() firstInputValue: string = '';\n @State() secondInputValue: string = '';\n @State() dateValue: string = '';\n\n @Event() rowValueChange: EventEmitter<PredefinedValues>;\n @Event() deleteRowEvent: EventEmitter<string>;\n @Event() firstInputChange: EventEmitter<PredefinedValues>;\n @Event() secondInputChange: EventEmitter<PredefinedValues>;\n\n componentWillLoad() {\n this.getPredefinedValues();\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.addEventHandlers();\n }\n\n getPredefinedValues() {\n this._predefinedValue = JSON.parse(this.predefinedValue);\n }\n\n @Watch('predefinedValue')\n applyPredefinedValue() {\n this.getPredefinedValues();\n this.setInitialValues();\n\n if (this.firstInputValue?.length) {\n this.validateFirstInput(parseInt(this.firstInputValue));\n }\n\n if (this.secondInputValue?.length) {\n this.validateSecondInput(parseInt(this.secondInputValue));\n }\n\n if (this.rowIndex >= this.minRowCount) {\n this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));\n }\n }\n\n setInitialValues() {\n this.firstInputValue = this._predefinedValue.firstInput;\n this.secondInputValue = this._predefinedValue.secondInput;\n this.dateValue = this._predefinedValue.date;\n }\n\n addEventHandlers() {\n const emmitValues = debounce(this.emitRowValues.bind(this), 500);\n this.pnFirstInputField.addEventListener('keyup', debounce(this.handleFirstInput.bind(this), 500));\n this.pnSecondInputField.addEventListener('keyup', debounce(this.handleSecondInput.bind(this), 500));\n this.pnDatePicker.addEventListener('dateselection', this.handleDateChange.bind(this));\n this.pnDatePicker.addEventListener('dateselection', emmitValues);\n }\n\n handleFirstInput(e) {\n const elm = e.target;\n const value = parseInt(elm.value);\n\n if (value > 0) {\n this.firstInputValue = elm.value;\n this.firstInputChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n this.validateFirstInput(value);\n this.emitRowValues();\n }\n\n handleSecondInput(e) {\n const elm = e.target;\n const value = parseInt(elm.value);\n\n if (value > 0) {\n this.secondInputValue = elm.value;\n this.secondInputChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n this.validateSecondInput(value);\n this.emitRowValues();\n }\n\n validateFirstInput(input: number) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = false;\n this.showFirstInputHighError = false;\n\n if (input < this.firstInputWarning) {\n this.showFirstInputWarning = true;\n }\n\n if (input < this.firstInputMin) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = true;\n }\n\n if (input > this.firstInputMax) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = false;\n this.showFirstInputHighError = true;\n }\n }\n\n validateSecondInput(input: number) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = false;\n this.showSecondInputHighError = false;\n\n if (input < this.secondInputWarning) {\n this.showSecondInputWarning = true;\n }\n\n if (input < this.secondInputMin) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = true;\n }\n\n if (input > this.secondInputMax) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = false;\n this.showSecondInputHighError = true;\n }\n }\n\n handleDateChange(e) {\n const elm = e.target;\n if (elm === this.pnDatePicker) {\n this.dateValue = e.detail.start;\n }\n }\n\n emitRowValues() {\n this.rowValueChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n deleteRow() {\n this.deleteRowEvent.emit(this._predefinedValue.id);\n }\n\n render() {\n return (\n <Host>\n <div class=\"input-element-row\">\n <div class=\"input-container\">\n <pn-input\n ref={el => (this.pnFirstInputField = el as HTMLElement)}\n type=\"number\"\n placeholder={this.firstInputPlaceholder}\n value={this.firstInputValue}\n min=\"1\"\n ></pn-input>\n {this.showFirstInputLowError \|\| this.showFirstInputHighError \|\| this.showFirstInputWarning ? (\n <div class=\"input-element-message-container\">\n {this.showFirstInputLowError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.firstInputLowErrorText}</small>\n </div>\n ) : null}\n\n {this.showFirstInputHighError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.firstInputHighErrorText}</small>\n </div>\n ) : null}\n\n {this.showFirstInputWarning ? (\n <div class=\"input-element-message-container__warning\">\n <small>{this.firstInputWarningText}</small>\n </div>\n ) : null}\n </div>\n ) : null}\n </div>\n\n <div class=\"input-container\">\n <pn-input\n ref={el => (this.pnSecondInputField = el as HTMLElement)}\n type=\"number\"\n placeholder={this.secondInputPlaceholder}\n value={this.secondInputValue}\n min=\"1\"\n ></pn-input>\n {this.showSecondInputLowError \|\| this.showSecondInputHighError \|\| this.showSecondInputWarning ? (\n <div class=\"input-element-message-container\">\n {this.showSecondInputLowError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.secondInputLowErrorText}</small>\n </div>\n ) : null}\n\n {this.showSecondInputHighError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.secondInputHighErrorText}</small>\n </div>\n ) : null}\n\n {this.showSecondInputWarning ? (\n <div class=\"input-element-message-container__warning\">\n <small>{this.secondInputWarningText}</small>\n </div>\n ) : null}\n </div>\n ) : null}\n </div>\n\n <div class=\"input-container\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={true}\n disabled-dates={this.disabledDates}\n min-date={this.firstValidDate}\n max-date={this.lastValidDate}\n language={this.languageCode}\n placeholder={this.datePlaceholder}\n start={this.dateValue?.length ? this.dateValue : null}\n ></pn-date-picker>\n </div>\n\n {this.rowIndex >= this.minRowCount ? (\n <div class=\"delete-button-container\">\n <pn-button\n ref={el => (this.pnDeleteRowButton = el as HTMLElement)}\n small=\"true\"\n icon={minus}\n appearance=\"warning\"\n index={this.rowIndex}\n onClick={() => {\n this.deleteRow();\n }}\n >\n Delete\n </pn-button>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-dropdown-with-multi-input-rows-row.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row.scss?tag=pn-dropdown-with-multi-input-rows-row","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-dropdown-with-multi-input-rows-row {\n .input-element-row {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n\n .input-container {\n width: 30%;\n\n pn-marketweb-input {\n .input-container {\n width: 100%;\n }\n }\n\n pn-date-picker {\n width: 100%;\n }\n\n .input-element-message-container {\n margin-top: 0.3rem;\n &__error {\n color: red;\n line-height: 1;\n }\n\n &__warning {\n line-height: 1;\n }\n }\n }\n }\n\n .delete-button-contianer {\n margin-top: 0.6rem;\n }\n\n label.pn-date-picker-label:has(span:empty) {\n display: none;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, RowValue, Root, PredefinedValues } from './types';\nimport debounce from 'debounce';\nimport { minus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-dropdown-with-multi-input-rows-row',\n styleUrl: 'pn-dropdown-with-multi-input-rows-row.scss',\n})\nexport class PnDropdownWithMultiInputRowsRow {\n @Element() hostElement: Element;\n private _predefinedValue: PredefinedValues;\n pnFirstInputField: HTMLElement = null;\n pnSecondInputField: HTMLElement = null;\n pnDatePicker: HTMLElement = null;\n pnDeleteRowButton: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() firstInputPlaceholder: string = null;\n @Prop() firstInputMin: number = null;\n @Prop() firstInputMax: number = null;\n @Prop() firstInputWarning: number = null;\n @Prop() firstInputWarningText: string = null;\n @Prop() firstInputLowErrorText: string = null;\n @Prop() firstInputHighErrorText: string = null;\n @Prop() secondInputPlaceholder: string = null;\n @Prop() secondInputMin: number = null;\n @Prop() secondInputMax: number = null;\n @Prop() secondInputWarning: number = null;\n @Prop() secondInputWarningText: string = null;\n @Prop() secondInputLowErrorText: string = null;\n @Prop() secondInputHighErrorText: string = null;\n @Prop() dateLabel: string = null;\n @Prop() datePlaceholder: string = null;\n @Prop() firstValidDate: string = null;\n @Prop() lastValidDate: string = null;\n @Prop() predefinedValue: string = null;\n @Prop() rowIndex: number = null;\n @Prop() minRowCount: number = null;\n @Prop() disabledDates: string = null;\n\n @State() showFirstInputWarning: boolean = false;\n @State() showFirstInputLowError: boolean = false;\n @State() showFirstInputHighError: boolean = false;\n @State() showSecondInputWarning: boolean = false;\n @State() showSecondInputLowError: boolean = false;\n @State() showSecondInputHighError: boolean = false;\n\n @State() firstInputValue: string = '';\n @State() secondInputValue: string = '';\n @State() dateValue: string = '';\n\n @Event() rowValueChange: EventEmitter<PredefinedValues>;\n @Event() deleteRowEvent: EventEmitter<string>;\n @Event() firstInputChange: EventEmitter<PredefinedValues>;\n @Event() secondInputChange: EventEmitter<PredefinedValues>;\n\n componentWillLoad() {\n this.getPredefinedValues();\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.addEventHandlers();\n }\n\n getPredefinedValues() {\n this._predefinedValue = JSON.parse(this.predefinedValue);\n }\n\n @Watch('predefinedValue')\n applyPredefinedValue() {\n this.getPredefinedValues();\n this.setInitialValues();\n\n if (this.firstInputValue?.length) {\n this.validateFirstInput(parseInt(this.firstInputValue));\n }\n\n if (this.secondInputValue?.length) {\n this.validateSecondInput(parseInt(this.secondInputValue));\n }\n\n if (this.rowIndex >= this.minRowCount) {\n this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));\n }\n }\n\n setInitialValues() {\n this.firstInputValue = this._predefinedValue.firstInput;\n this.secondInputValue = this._predefinedValue.secondInput;\n this.dateValue = this._predefinedValue.date;\n }\n\n addEventHandlers() {\n const emmitValues = debounce(this.emitRowValues.bind(this), 500);\n this.pnFirstInputField.addEventListener('keyup', debounce(this.handleFirstInput.bind(this), 500));\n this.pnSecondInputField.addEventListener('keyup', debounce(this.handleSecondInput.bind(this), 500));\n this.pnDatePicker.addEventListener('dateselection', this.handleDateChange.bind(this));\n this.pnDatePicker.addEventListener('dateselection', emmitValues);\n }\n\n handleFirstInput(e) {\n const elm = e.target;\n const value = parseInt(elm.value);\n\n if (value > 0) {\n this.firstInputValue = elm.value;\n this.firstInputChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n this.validateFirstInput(value);\n this.emitRowValues();\n }\n\n handleSecondInput(e) {\n const elm = e.target;\n const value = parseInt(elm.value);\n\n if (value > 0) {\n this.secondInputValue = elm.value;\n this.secondInputChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n this.validateSecondInput(value);\n this.emitRowValues();\n }\n\n validateFirstInput(input: number) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = false;\n this.showFirstInputHighError = false;\n\n if (input < this.firstInputWarning) {\n this.showFirstInputWarning = true;\n }\n\n if (input < this.firstInputMin) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = true;\n }\n\n if (input > this.firstInputMax) {\n this.showFirstInputWarning = false;\n this.showFirstInputLowError = false;\n this.showFirstInputHighError = true;\n }\n }\n\n validateSecondInput(input: number) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = false;\n this.showSecondInputHighError = false;\n\n if (input < this.secondInputWarning) {\n this.showSecondInputWarning = true;\n }\n\n if (input < this.secondInputMin) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = true;\n }\n\n if (input > this.secondInputMax) {\n this.showSecondInputWarning = false;\n this.showSecondInputLowError = false;\n this.showSecondInputHighError = true;\n }\n }\n\n handleDateChange(e) {\n const elm = e.target;\n if (elm === this.pnDatePicker) {\n this.dateValue = e.detail.start;\n }\n }\n\n emitRowValues() {\n this.rowValueChange.emit({\n id: this._predefinedValue.id,\n firstInput: this.firstInputValue,\n secondInput: this.secondInputValue,\n date: this.dateValue,\n });\n }\n\n deleteRow() {\n this.deleteRowEvent.emit(this._predefinedValue.id);\n }\n\n render() {\n return (\n <Host>\n <div class=\"input-element-row\">\n <div class=\"input-container\">\n <pn-input\n ref={el => (this.pnFirstInputField = el as HTMLElement)}\n type=\"number\"\n placeholder={this.firstInputPlaceholder}\n value={this.firstInputValue}\n min=\"1\"\n ></pn-input>\n {this.showFirstInputLowError \|\| this.showFirstInputHighError \|\| this.showFirstInputWarning ? (\n <div class=\"input-element-message-container\">\n {this.showFirstInputLowError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.firstInputLowErrorText}</small>\n </div>\n ) : null}\n\n {this.showFirstInputHighError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.firstInputHighErrorText}</small>\n </div>\n ) : null}\n\n {this.showFirstInputWarning ? (\n <div class=\"input-element-message-container__warning\">\n <small>{this.firstInputWarningText}</small>\n </div>\n ) : null}\n </div>\n ) : null}\n </div>\n\n <div class=\"input-container\">\n <pn-input\n ref={el => (this.pnSecondInputField = el as HTMLElement)}\n type=\"number\"\n placeholder={this.secondInputPlaceholder}\n value={this.secondInputValue}\n min=\"1\"\n ></pn-input>\n {this.showSecondInputLowError \|\| this.showSecondInputHighError \|\| this.showSecondInputWarning ? (\n <div class=\"input-element-message-container\">\n {this.showSecondInputLowError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.secondInputLowErrorText}</small>\n </div>\n ) : null}\n\n {this.showSecondInputHighError ? (\n <div class=\"input-element-message-container__error\">\n <small>{this.secondInputHighErrorText}</small>\n </div>\n ) : null}\n\n {this.showSecondInputWarning ? (\n <div class=\"input-element-message-container__warning\">\n <small>{this.secondInputWarningText}</small>\n </div>\n ) : null}\n </div>\n ) : null}\n </div>\n\n <div class=\"input-container\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={true}\n disabled-dates={this.disabledDates}\n min-date={this.firstValidDate}\n max-date={this.lastValidDate}\n language={this.languageCode}\n placeholder={this.datePlaceholder}\n start={this.dateValue?.length ? this.dateValue : null}\n ></pn-date-picker>\n </div>\n\n {this.rowIndex >= this.minRowCount ? (\n <div class=\"delete-button-container\">\n <pn-button\n ref={el => (this.pnDeleteRowButton = el as HTMLElement)}\n small=\"true\"\n icon={minus}\n appearance=\"warning\"\n index={this.rowIndex}\n onClick={() => {\n this.deleteRow();\n }}\n >\n Delete\n </pn-button>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/esm/pn-dropdown-with-multi-input-rows.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { g as getElement, r as registerInstance, c as createEvent, h, d as Host } from './index-51d67461.js';
+import { g as getElement, r as registerInstance, c as createEvent, h, d as Host } from './index-c311acd6.js';
 import { d as debounce } from './index-1190bec4.js';
 import { p as plus } from './plus-7ee93ae7.js';
 import { v as v4 } from './v4-964634d6.js';
@@ -15,7 +15,7 @@ const translations = {
     },
 };
-const pnDropdownWithMultiInputRowsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__row{margin-bottom:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__delete{display:flex;gap:1rem;margin-bottom:1rem;padding:1rem;background-color:#f9f8f8}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__delete pn-button{margin-top:0.9rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__label-row{display:flex;gap:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__label{width:30%;font-size:0.875em;color:#5e554a}pn-dropdown-with-multi-input-rows .sum-row{display:flex;justify-content:space-between}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__dropdown{display:inline-flex;align-items:center}pn-dropdown-with-multi-input-rows small{max-width:70%;margin:1rem;align-self:center;position:relative;top:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__row .dropdown-with-multi-input-element__dropdown .pn-row-select-dropdown .pn-select .pn-select-input .pn-select-content{width:18rem}";
+const pnDropdownWithMultiInputRowsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__row{margin-bottom:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__delete{display:flex;gap:1rem;margin-bottom:1rem;padding:1rem;background-color:#f9f8f8}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__delete pn-button{margin-top:0.9rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__label-row{display:flex;gap:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__label{width:30%;font-size:0.875em;color:#5e554a}pn-dropdown-with-multi-input-rows .sum-row{display:flex;justify-content:space-between}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__dropdown{display:inline-flex;align-items:center}pn-dropdown-with-multi-input-rows small{max-width:70%;margin:1rem;align-self:center;position:relative;top:1rem}pn-dropdown-with-multi-input-rows .dropdown-with-multi-input-element__row .dropdown-with-multi-input-element__dropdown .pn-row-select-dropdown .pn-select .pn-select-input .pn-select-content{width:18rem}";
 const PnDropdownWithMultiInputRowsStyle0 = pnDropdownWithMultiInputRowsCss;
 const PnDropdownWithMultiInputRows = class {

package/esm/pn-dropdown-with-multi-input-rows.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-dropdown-with-multi-input-rows.entry.js","mappings":";;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,mBAAmB,EAAE,qBAAqB;KAC3C;IACD,IAAI,EAAE;QACJ,mBAAmB,EAAE,kBAAkB;KACxC;IACD,IAAI,EAAE;QACJ,mBAAmB,EAAE,kBAAkB;KACxC;CACF;;ACVD,MAAM,+BAA+B,GAAG,opCAAopC,CAAC;AAC7rC,2CAAe,+BAA+B;;MCUjC,4BAA4B;;IAEvC,eAAe,GAAgB,IAAI,CAAC;IACpC,gBAAgB,GAAgB,IAAI,CAAC;IACrC,UAAU,GAAgB,IAAI,CAAC;IAC/B,qBAAqB,GAAgB,IAAI,CAAC;IAC1C,mBAAmB,GAAgB,IAAI,CAAC;IAgD/B,aAAa,CAAuB;IAErC,uBAAuB,GAAW,IAAI,CAAC;IACvC,wBAAwB,GAAW,IAAI,CAAC;IAExC,WAAW,CAAmB;IAEtC;;;4BArDwC,IAAI;4BACb,IAAI;kCACE,IAAI;uCACC,IAAI;mCACR,IAAI;wCACC,IAAI;iCACX,IAAI;6CACQ,IAAI;uCACV,IAAI;qCACN,IAAI;+BACV,IAAI;qCACE,IAAI;6BACZ,IAAI;6BACJ,IAAI;iCACA,IAAI;qCACA,IAAI;sCACH,IAAI;uCACH,IAAI;gCACX,IAAI;sCACE,IAAI;8BACZ,IAAI;8BACJ,IAAI;kCACA,IAAI;sCACA,IAAI;uCACH,IAAI;wCACH,IAAI;6BACf,IAAI;yBACR,IAAI;+BACE,IAAI;iCACF,CAAC;mCACC,IAAI;6BACV,IAAI;0BACP,IAAI;iCACG,IAAI;gCAEJ,IAAI;iCACD,EAAE;uBACF,IAAI;0BACR,IAAI;oCACC,EAAE;mCACH,EAAE;sBACf,IAAI;2BACC,IAAI;iCACG,KAAK;;QAWzC,IAAI,CAAC,WAAW,GAAG;YACjB,EAAE,EAAE,IAAI,CAAC,gBAAgB,EAAE;YAC3B,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,IAAI,CAAC,kBAAkB,KAAK,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACvF,IAAI,EAAE,EAAE;SACT,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;KACnE;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,eAAe;QACb,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;YACzC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACvD;aAAM;YACL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE;YACjC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO;gBACnC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;oBAClB,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;iBACnB;aACF,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9D,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SACnD;KACF;IAED,oBAAoB;QAClB,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC;QAC7E,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAE5B,KAAK,IAAI,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,EAAE;YAC7E,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACpC;KACF;IAED,mBAAmB,CAAC,GAAW,EAAE,OAAe;QAC9C,GAAG,CAAC,OAAO,CAAC,IAAI;YACd,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE;gBAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;aAC9B;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;SACF,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;KACZ;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,KAAK,EAAE,EAAE;YAClE,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAChD,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;SACvC;KACF;IAED,gBAAgB;QACd,OAAOA,EAAM,EAAE,CAAC;KACjB;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAC3E,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAEtD,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAChE,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,IAAI,GAAG,UAAU,CAAC;QAElC,IAAI,CAAC,oBAAoB,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;QACjE,IAAI,CAAC,mBAAmB,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;KACpE;IAED,MAAM,CAAC,QAAgB;QACrB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1D,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAEzC,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAQ;QACtC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAkC,CAAC;QACtD,MAAM,aAAa,GAAG,QAAQ,EAAE,KAAK,CAAC;QAEtC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE;YAC1B,OAAO;SACR;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,aAAa,CAAC,CAAC;QAC5F,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,KAAK,CAAC;QAEvC,IAAI,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE;YACvD,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAEnD,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtC;SACF;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B,CAAC,CAAA;IAEF,oBAAoB,GAAG,QAAQ,CAAC,CAAC,CAAQ;QACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAkC,CAAC;QACpD,MAAM,cAAc,GAAG,MAAM,EAAE,KAAK,CAAC;QAErC,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,MAAM,aAAa,GAAG,cAAc,CAAA;QAEpC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE;YAC1B,OAAO;SACR;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;QAEtC,IAAI,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE;YACzC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B;aAAM;YACL,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtC;SACF;QAED,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;QAEtC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B,CAAC,CAAA;IAKF,qBAAqB,CAAC,CAAC;QACrB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC/E,MAAM,GAAG,GAAqB,CAAC,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG;YAC5B,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;YAC9B,UAAU,EAAE,GAAG,CAAC,UAAU;YAC1B,WAAW,EAAE,GAAG,CAAC,WAAW;YAC5B,IAAI,EAAE,GAAG,CAAC,IAAI;SACf,CAAC;QAEF,IAAI,CAAC,CAAC,IAAI,KAAK,kBAAkB,IAAI,aAAa,KAAK,CAAC,EAAE;YACxD,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;SAC7C;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,mBAAmB,IAAI,aAAa,KAAK,CAAC,EAAE;YACzD,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,sBAAsB,CAAC,KAAa;QAClC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;YACzD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;gBACpB,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;gBACtB,UAAU,EAAE,KAAK;aAClB,CAAC;SACH;KACF;IAED,uBAAuB,CAAC,KAAa;QACnC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;YACzD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;gBACpB,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;gBACtB,WAAW,EAAE,KAAK;aACnB,CAAC;SACH;KACF;IAGD,cAAc,CAAC,CAAC;QACd,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QAC5E,IAAI,aAAa,GAAG,CAAC,EAAE;YACrB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAEjC,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrD,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,GAAG,GAAG,CAAC,CAAC;QACZ,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO;YAC3B,IAAI,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE;gBAC/B,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACrC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;KAC9B;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,wBAAwB,KAAK,IAAI,EAAE;YAC1C,OAAO;SACR;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC,wBAAwB,CAAC;QAC1E,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,YAAY,EAAE,KAAK,EAAE,EAAE;YACjD,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,eAAe;QACb,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI;YACxB,MAAM,QAAQ,GAAc,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;YACxC,IAAI,IAAI,CAAC,uBAAuB,EAAE,MAAM,EAAE;gBACxC,MAAM,aAAa,GAAa,EAAE,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBACvG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aAClC;YAED,IAAI,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE;gBAC3B,MAAM,eAAe,GAAa,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;gBACzF,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACpC;YAED,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE;gBAC5B,MAAM,gBAAgB,GAAa,EAAE,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC5F,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACrC;YAED,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAM,SAAS,GAAa,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;gBACvE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC9B;YAED,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAChC;SACF,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;YACnD,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACxD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC1C;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,mCAAmC,IAC7C,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,6CAA6C,IACtD,kEAAW,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAC,2CAA2C,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,IAC3O,+DAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,QAAQ,UAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAU,EAC1E,IAAI,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,IAAI,MAC/B,cAAQ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAU,CACjD,CAAC,CACQ,EACX,IAAI,CAAC,uBAAuB,EAAE,MAAM,GAAG,iBAAQ,IAAI,CAAC,uBAAuB,CAAS,GAAG,IAAI,CACxF,CACF,EAEN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,6CAA6C,IACtD,kEAAW,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAC,2CAA2C,EAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,IAC9O,+DAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,QAAQ,UAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAU,EAC1E,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,IAAI,MAChC,cAAQ,KAAK,EAAE,IAAI,IAAG,IAAI,CAAU,CACrC,CAAC,CACQ,EACX,IAAI,CAAC,wBAAwB,EAAE,MAAM,GAAG,iBAAQ,IAAI,CAAC,wBAAwB,CAAS,GAAG,IAAI,CAC1F,CACF,EAEL,IAAI,CAAC,iBAAiB,IACrB,WAAK,KAAK,EAAC,2CAA2C,IACpD,aAAI,IAAI,CAAC,6BAA6B,CAAK,EAC3C,iBAAW,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,qBAAqB,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAChJ,IAAI,CAAC,uBAAuB,CACnB,EACZ,iBAAW,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,mBAAmB,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,UAAU,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAC3I,IAAI,CAAC,qBAAqB,CACjB,CACR,IACJ,IAAI,EAER,4DAAK,KAAK,EAAC,8CAA8C,IACvD,4DAAK,KAAK,EAAC,0CAA0C,IACnD,gEAAQ,IAAI,CAAC,eAAe,CAAS,CACjC,EACN,4DAAK,KAAK,EAAC,0CAA0C,IACnD,gEAAQ,IAAI,CAAC,gBAAgB,CAAS,CAClC,EACN,4DAAK,KAAK,EAAC,0CAA0C,IACnD,gEAAQ,IAAI,CAAC,SAAS,CAAS,CAC3B,CACF,EAEL,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACzB,QACE,WAAK,KAAK,EAAE,uDAAuD,GAAG,CAAC,EAAE,EAAE,EAAE,gBAAgB,GAAG,CAAC,IAC/F,8DACiB,IAAI,CAAC,YAAY,6BACP,IAAI,CAAC,qBAAqB,qBAClC,IAAI,CAAC,aAAa,qBAClB,IAAI,CAAC,aAAa,yBACd,IAAI,CAAC,iBAAiB,8BACjB,IAAI,CAAC,qBAAqB,gCACxB,IAAI,CAAC,sBAAsB,iCAC1B,IAAI,CAAC,uBAAuB,8BAC/B,IAAI,CAAC,sBAAsB,sBACnC,IAAI,CAAC,cAAc,sBACnB,IAAI,CAAC,cAAc,0BACf,IAAI,CAAC,kBAAkB,+BAClB,IAAI,CAAC,sBAAsB,iCACzB,IAAI,CAAC,uBAAuB,kCAC3B,IAAI,CAAC,wBAAwB,EAC3D,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,cAAc,EAAE,IAAI,CAAC,oBAAoB,EACzC,aAAa,EAAE,IAAI,CAAC,mBAAmB,sBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBACvB,IAAI,CAAC,WAAW,eACpB,CAAC,oBACI,IAAI,CAAC,aAAa,GACK,CACrC,EACN;SACH,CAAC,EAEF,4DAAK,KAAK,EAAC,gDAAgD,IACzD,iEAAU,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,GAAa,EAEpJ,kEACE,OAAO,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,eACvC,MAAM,EAChB,SAAS,EAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,OAAO,EAClB,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE;gBACP,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;aACtC,IAEA,IAAI,CAAC,UAAU,CACN,CACR,EAEL,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,WAAK,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,iBAAiB,CAAO,GAAG,IAAI,CACtH,EACP;KACH;;;;;;;;;","names":["uuidv4"],"sources":["src/components/input/pn-dropdown-with-multi-input-rows/translations.ts","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.scss?tag=pn-dropdown-with-multi-input-rows","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.tsx"],"sourcesContent":["export const translations = {\n 'sv': {\n dropdownPlaceholder: 'Välj ett alternativ',\n },\n 'en': {\n dropdownPlaceholder: 'Select an option',\n },\n 'da': {\n dropdownPlaceholder: 'Vælg en mulighed',\n },\n};","@import '../../../globals/main.scss';\n\npn-dropdown-with-multi-input-rows {\n .dropdown-with-multi-input-element {\n &__row {\n margin-bottom: 1rem;\n }\n\n &__delete {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n padding: 1rem;\n background-color: $gray25;\n\n pn-button {\n margin-top: 0.9rem;\n }\n }\n\n &__label-row {\n display: flex;\n gap: 1rem;\n }\n\n &__label {\n width: 30%;\n font-size: 0.875em;\n color: #5e554a;\n }\n }\n\n \n .sum-row {\n display: flex;\n justify-content: space-between;\n }\n \n .dropdown-with-multi-input-element__dropdown {\n display: inline-flex;\n align-items: center;\n }\n \n small {\n max-width: 70%;\n margin: 1rem;\n align-self: center;\n position: relative;\n top: 1rem;\n }\n \n .dropdown-with-multi-input-element__row \n .dropdown-with-multi-input-element__dropdown \n .pn-row-select-dropdown \n .pn-select \n .pn-select-input\n .pn-select-content {\n width: 18rem;\n }\n\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, RowValue, Root, PredefinedValues, Translationsi18n } from './types';\nimport { v4 as uuidv4 } from 'uuid';\nimport debounce from 'debounce';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-dropdown-with-multi-input-rows',\n styleUrl: 'pn-dropdown-with-multi-input-rows.scss',\n})\nexport class PnDropdownWithMultiInputRows {\n @Element() hostElement: Element;\n pnFirstDropdown: HTMLElement = null;\n pnSecondDropdown: HTMLElement = null;\n pnSumField: HTMLElement = null;\n pnConfirmDeleteButton: HTMLElement = null;\n pnAbortDeleteButton: HTMLElement = null;\n\n @Prop() dropdownData: string \| Root[] = null;\n @Prop() languageCode: string = null;\n @Prop() firstDropdownLabel: string = null;\n @Prop() firstDropdownHelperText: string = null;\n @Prop() secondDropdownLabel: string = null;\n @Prop() secondDropdownHelperText: string = null;\n @Prop() secondDropdownMax: number = null;\n @Prop() deleteMultipleRowsWarningText: string = null;\n @Prop() confirmDeleteButtonText: string = null;\n @Prop() abortDeleteButtonText: string = null;\n @Prop() firstInputLabel: string = null;\n @Prop() firstInputPlaceholder: string = null;\n @Prop() firstInputMin: number = null;\n @Prop() firstInputMax: number = null;\n @Prop() firstInputWarning: number = null;\n @Prop() firstInputWarningText: string = null;\n @Prop() firstInputLowErrorText: string = null;\n @Prop() firstInputHighErrorText: string = null;\n @Prop() secondInputLabel: string = null;\n @Prop() secondInputPlaceholder: string = null;\n @Prop() secondInputMin: number = null;\n @Prop() secondInputMax: number = null;\n @Prop() secondInputWarning: number = null;\n @Prop() secondInputWarningText: string = null;\n @Prop() secondInputLowErrorText: string = null;\n @Prop() secondInputHighErrorText: string = null;\n @Prop() disabledDates: string = null;\n @Prop() dateLabel: string = null;\n @Prop() datePlaceholder: string = null;\n @Prop() dateDaysFromToday: number = 1;\n @Prop() yearsToAddToEndDate: number = null;\n @Prop() sumFieldLabel: string = null;\n @Prop() addRowText: string = null;\n @Prop() elementHelperText: string = null;\n\n @State() dropdownDataRoot: Root[] = null;\n @State() secondDropdownArr: number[] = [];\n @State() rowData: PredefinedValues[] = null;\n @State() formValues: FormValue[] = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n @State() rowSum: string = null;\n @State() minRowCount: number = null;\n @State() showDeleteConfirm: boolean = false;\n @State() i18n: Translationsi18n;\n\n @Event() allFormValues: EventEmitter<string>;\n\n private _firstDropdownSelection: string = null;\n private _secondDropdownSelection: number = null;\n\n private _defaultRow: PredefinedValues;\n\n constructor() {\n this._defaultRow = {\n id: this.generateUniqueId(),\n firstInput: '',\n secondInput: this.secondInputWarning !== null ? this.secondInputWarning.toString() : '',\n date: '',\n };\n }\n\n componentWillLoad() {\n this.formValues = [];\n this.setDropDownData();\n this.updateSecondDropdown();\n this.setRowData();\n this.setFirstValidDate();\n this.setTranslations();\n }\n\n @Watch('languageCode')\n setTranslations() {\n this.i18n = translations[this.languageCode] \|\| translations['en'];\n }\n\n componentDidLoad() {\n this.updateSum();\n }\n\n setDropDownData() {\n if (typeof this.dropdownData === 'string') {\n this.dropdownDataRoot = JSON.parse(this.dropdownData);\n } else {\n this.dropdownDataRoot = this.dropdownData;\n }\n\n if (this.dropdownDataRoot?.length) {\n this.dropdownDataRoot.forEach(element => {\n if (!element.value) {\n element.value = 0;\n }\n });\n }\n\n if (this.dropdownDataRoot.length > 0) {\n this.dropdownDataRoot[0].checked = true;\n this._firstDropdownSelection = this.dropdownDataRoot[0].label;\n this._secondDropdownSelection = this.dropdownDataRoot[0].value;\n this.minRowCount = this.dropdownDataRoot[0].value;\n }\n }\n\n updateSecondDropdown() {\n const selectedItem = this.dropdownDataRoot.find(arr => arr.checked === true);\n this.secondDropdownArr = [];\n\n for (let index = selectedItem.value; index <= this.secondDropdownMax; index++) {\n this.secondDropdownArr.push(index);\n }\n }\n\n updateSelectItemArr(arr: Root[], caption: string) {\n arr.forEach(item => {\n if (item.label === caption) {\n item.checked = !item.checked;\n } else {\n item.checked = false;\n }\n });\n return arr;\n }\n\n setRowData() {\n this.rowData = [];\n for (let index = 0; index < this._secondDropdownSelection; index++) {\n const row = Object.assign({}, this._defaultRow);\n row.id = this.generateUniqueId();\n this.rowData = [...this.rowData, row];\n }\n }\n\n generateUniqueId() {\n return uuidv4();\n }\n\n setFirstValidDate() {\n const yearsToadd = this.yearsToAddToEndDate ? this.yearsToAddToEndDate : 2;\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + yearsToadd;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n addRow(newRowId: string) {\n const newRow = Object.assign({}, this.rowData[0]);\n newRow.id = newRowId ? newRowId : this.generateUniqueId();\n newRow.date = '';\n this.rowData = [...this.rowData, newRow];\n\n this.secondDropdownArr = [...this.secondDropdownArr];\n this.updateSum();\n this.emitValuesIfValid();\n }\n\n handleFirstDropdown = debounce((e: Event) => {\n const selected = e.target as HTMLSelectElement \| null;\n const selectedValue = selected?.value;\n\n if (!selectedValue?.length) {\n return;\n }\n\n const selectionRoot = this.dropdownDataRoot.find(x => x.value.toString() === selectedValue);\n this.minRowCount = selectionRoot.value;\n\n if (selectionRoot.value > this._secondDropdownSelection) {\n this.dropdownDataRoot = [...this.dropdownDataRoot];\n\n for (let index = this.rowData?.length; index < selectionRoot.value; index++) {\n this.addRow(this.generateUniqueId());\n }\n }\n\n this.updateSecondDropdown();\n this.updateSum();\n this.emitValuesIfValid();\n })\n\n handleSecondDropdown = debounce((e: Event) => {\n const target = e.target as HTMLSelectElement \| null;\n const selectedOption = target?.value;\n\n if (!selectedOption) {\n return;\n }\n\n const selectedValue = selectedOption\n\n if (!selectedValue?.length) {\n return;\n }\n\n const value = parseInt(selectedValue);\n\n if (value < this._secondDropdownSelection) {\n this.showDeleteConfirm = true;\n } else {\n for (let index = this.rowData?.length; index < value; index++) {\n this.addRow(this.generateUniqueId());\n }\n }\n\n this._secondDropdownSelection = value;\n\n this.updateSum();\n this.emitValuesIfValid();\n })\n\n @Listen('rowValueChange')\n @Listen('firstInputChange')\n @Listen('secondInputChange')\n predefinedValueChange(e) {\n const indexToUpdate = this.rowData?.findIndex(data => data.id === e.detail.id);\n const val: PredefinedValues = e.detail;\n this.rowData[indexToUpdate] = {\n ...this.rowData[indexToUpdate],\n firstInput: val.firstInput,\n secondInput: val.secondInput,\n date: val.date,\n };\n\n if (e.type === 'firstInputChange' && indexToUpdate === 0) {\n this.updateFirstInputOfRows(val.firstInput);\n }\n\n if (e.type === 'secondInputChange' && indexToUpdate === 0) {\n this.updateSecondInputOfRows(val.secondInput);\n }\n\n this.rowData = [...this.rowData];\n this.emitValuesIfValid();\n this.updateSum();\n }\n\n updateFirstInputOfRows(value: string) {\n for (let index = 1; index < this.rowData?.length; index++) {\n this.rowData[index] = {\n ...this.rowData[index],\n firstInput: value,\n };\n }\n }\n\n updateSecondInputOfRows(value: string) {\n for (let index = 1; index < this.rowData?.length; index++) {\n this.rowData[index] = {\n ...this.rowData[index],\n secondInput: value,\n };\n }\n }\n\n @Listen('deleteRowEvent')\n deleteRowEvent(e) {\n const indexToRemove = this.rowData?.findIndex(data => data.id === e.detail);\n if (indexToRemove < 0) {\n return;\n }\n\n this.rowData?.splice(indexToRemove, 1);\n this.rowData = [...this.rowData];\n\n this.secondDropdownArr = [...this.secondDropdownArr];\n this.emitValuesIfValid();\n this.updateSum();\n }\n\n updateSum() {\n this.rowSum = '';\n let sum = 0;\n this.rowData?.forEach(element => {\n if (element?.firstInput?.length) {\n sum += parseInt(element.firstInput);\n }\n });\n\n this.rowSum = sum.toString();\n }\n\n deleteExcessRows() {\n if (this._secondDropdownSelection === null) {\n return;\n }\n\n const rowsToDelete = this.rowData?.length - this._secondDropdownSelection;\n for (let index = 0; index < rowsToDelete; index++) {\n this.rowData?.pop();\n }\n this.rowData = [...this.rowData];\n this.showDeleteConfirm = false;\n this.updateSum();\n }\n\n abortDeleteRows() {\n this.showDeleteConfirm = false;\n }\n\n emitValuesIfValid() {\n this.formValues = [];\n this.rowData?.forEach(item => {\n const rowValue: FormValue = { row: [] };\n if (this._firstDropdownSelection?.length) {\n const dropDownValue: RowValue = { name: this.firstDropdownLabel, value: this._firstDropdownSelection };\n rowValue.row.push(dropDownValue);\n }\n\n if (item.firstInput?.length) {\n const firstInputValue: RowValue = { name: this.firstInputLabel, value: item.firstInput };\n rowValue.row.push(firstInputValue);\n }\n\n if (item.secondInput?.length) {\n const secondInputValue: RowValue = { name: this.secondInputLabel, value: item.secondInput };\n rowValue.row.push(secondInputValue);\n }\n\n if (item.date) {\n const dateValue: RowValue = { name: this.dateLabel, value: item.date };\n rowValue.row.push(dateValue);\n }\n\n if (rowValue.row.length === 4) {\n this.formValues.push(rowValue);\n }\n });\n\n if (this.formValues.length === this.rowData?.length) {\n const valueJsonString = JSON.stringify(this.formValues);\n this.allFormValues.emit(valueJsonString);\n } else {\n this.allFormValues.emit('');\n }\n }\n\n render() {\n return (\n <Host class=\"dropdown-with-multi-input-element\">\n <div class=\"dropdown-with-multi-input-element__row\">\n <div class=\"dropdown-with-multi-input-element__dropdown\">\n <pn-select ref={el => (this.pnFirstDropdown = el as HTMLElement)} onChange={debounce(this.handleFirstDropdown.bind(this), 500)} class=\"pn-row-select-dropdown dropDown1-dropdown\" label={this.firstDropdownLabel} language={this.languageCode}>\n <option value=\"\" disabled selected>{this.i18n.dropdownPlaceholder}</option>\n {this.dropdownDataRoot?.map((item) => (\n <option value={item.value}>{item.label}</option>\n ))}\n </pn-select>\n {this.firstDropdownHelperText?.length ? <small>{this.firstDropdownHelperText}</small> : null}\n </div>\n </div>\n\n <div class=\"dropdown-with-multi-input-element__row\">\n <div class=\"dropdown-with-multi-input-element__dropdown\">\n <pn-select ref={el => (this.pnSecondDropdown = el as HTMLElement)} onChange={debounce(this.handleSecondDropdown.bind(this), 500)} class=\"pn-row-select-dropdown dropDown2-dropdown\" label={this.secondDropdownLabel} language={this.languageCode}>\n <option value=\"\" disabled selected>{this.i18n.dropdownPlaceholder}</option>\n {this.secondDropdownArr?.map((item) => (\n <option value={item}>{item}</option>\n ))}\n </pn-select>\n {this.secondDropdownHelperText?.length ? <small>{this.secondDropdownHelperText}</small> : null}\n </div>\n </div>\n\n {this.showDeleteConfirm ? (\n <div class=\"dropdown-with-multi-input-element__delete\">\n <p>{this.deleteMultipleRowsWarningText}</p>\n <pn-button ref={el => (this.pnConfirmDeleteButton = el as HTMLElement)} small=\"true\" appearance=\"warning\" onClick={this.deleteExcessRows.bind(this)}>\n {this.confirmDeleteButtonText}\n </pn-button>\n <pn-button ref={el => (this.pnAbortDeleteButton = el as HTMLElement)} small=\"true\" appearance=\"light\" onClick={this.abortDeleteRows.bind(this)}>\n {this.abortDeleteButtonText}\n </pn-button>\n </div>\n ) : null}\n\n <div class=\"dropdown-with-multi-input-element__label-row\">\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.firstInputLabel}</label>\n </div>\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.secondInputLabel}</label>\n </div>\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.dateLabel}</label>\n </div>\n </div>\n\n {this.rowData?.map((data, i) => {\n return (\n <div class={'dropdown-with-multi-input-element__row generated-row-' + i} id={'generated-row-' + i}>\n <pn-dropdown-with-multi-input-rows-row\n language-code={this.languageCode}\n first-input-placeholder={this.firstInputPlaceholder}\n first-input-min={this.firstInputMin}\n first-input-max={this.firstInputMax}\n first-input-warning={this.firstInputWarning}\n first-input-warning-text={this.firstInputWarningText}\n first-input-low-error-text={this.firstInputLowErrorText}\n first-input-high-error-text={this.firstInputHighErrorText}\n second-input-placeholder={this.secondInputPlaceholder}\n second-input-min={this.secondInputMin}\n second-input-max={this.secondInputMax}\n second-input-warning={this.secondInputWarning}\n second-input-warning-text={this.secondInputWarningText}\n second-input-low-error-text={this.secondInputLowErrorText}\n second-input-high-error-text={this.secondInputHighErrorText}\n datePlaceholder={this.datePlaceholder}\n firstValidDate={this.firstValidDateString}\n lastValidDate={this.lastValidDateString}\n predefined-value={JSON.stringify(data)}\n min-row-count={this.minRowCount}\n row-index={i}\n disabled-dates={this.disabledDates}\n ></pn-dropdown-with-multi-input-rows-row>\n </div>\n );\n })}\n\n <div class=\"dropdown-with-multi-input-element__row sum-row\">\n <pn-input disabled={true} ref={el => (this.pnSumField = el as HTMLElement)} type=\"number\" value={this.rowSum} label={this.sumFieldLabel}></pn-input>\n\n <pn-button\n tooltip={this.addRowText ? this.addRowText : null}\n left-icon=\"true\"\n arialabel=\"Add\"\n icon={plus}\n appearance=\"light\"\n variant=\"borderless\"\n class=\"connected-dropdown__button-right\"\n onClick={() => {\n this.addRow(this.generateUniqueId());\n }}\n >\n {this.addRowText}\n </pn-button>\n </div>\n\n {this.elementHelperText?.length ? <div class=\"dropdown-with-multi-input-element__row\">{this.elementHelperText}</div> : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-dropdown-with-multi-input-rows.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/input/pn-dropdown-with-multi-input-rows/translations.ts","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.scss?tag=pn-dropdown-with-multi-input-rows","src/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.tsx"],"sourcesContent":["export const translations = {\n 'sv': {\n dropdownPlaceholder: 'Välj ett alternativ',\n },\n 'en': {\n dropdownPlaceholder: 'Select an option',\n },\n 'da': {\n dropdownPlaceholder: 'Vælg en mulighed',\n },\n};","@import '../../../globals/main.scss';\n\npn-dropdown-with-multi-input-rows {\n .dropdown-with-multi-input-element {\n &__row {\n margin-bottom: 1rem;\n }\n\n &__delete {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n padding: 1rem;\n background-color: $gray25;\n\n pn-button {\n margin-top: 0.9rem;\n }\n }\n\n &__label-row {\n display: flex;\n gap: 1rem;\n }\n\n &__label {\n width: 30%;\n font-size: 0.875em;\n color: #5e554a;\n }\n }\n\n \n .sum-row {\n display: flex;\n justify-content: space-between;\n }\n \n .dropdown-with-multi-input-element__dropdown {\n display: inline-flex;\n align-items: center;\n }\n \n small {\n max-width: 70%;\n margin: 1rem;\n align-self: center;\n position: relative;\n top: 1rem;\n }\n \n .dropdown-with-multi-input-element__row \n .dropdown-with-multi-input-element__dropdown \n .pn-row-select-dropdown \n .pn-select \n .pn-select-input\n .pn-select-content {\n width: 18rem;\n }\n\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, RowValue, Root, PredefinedValues, Translationsi18n } from './types';\nimport { v4 as uuidv4 } from 'uuid';\nimport debounce from 'debounce';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-dropdown-with-multi-input-rows',\n styleUrl: 'pn-dropdown-with-multi-input-rows.scss',\n})\nexport class PnDropdownWithMultiInputRows {\n @Element() hostElement: Element;\n pnFirstDropdown: HTMLElement = null;\n pnSecondDropdown: HTMLElement = null;\n pnSumField: HTMLElement = null;\n pnConfirmDeleteButton: HTMLElement = null;\n pnAbortDeleteButton: HTMLElement = null;\n\n @Prop() dropdownData: string \| Root[] = null;\n @Prop() languageCode: string = null;\n @Prop() firstDropdownLabel: string = null;\n @Prop() firstDropdownHelperText: string = null;\n @Prop() secondDropdownLabel: string = null;\n @Prop() secondDropdownHelperText: string = null;\n @Prop() secondDropdownMax: number = null;\n @Prop() deleteMultipleRowsWarningText: string = null;\n @Prop() confirmDeleteButtonText: string = null;\n @Prop() abortDeleteButtonText: string = null;\n @Prop() firstInputLabel: string = null;\n @Prop() firstInputPlaceholder: string = null;\n @Prop() firstInputMin: number = null;\n @Prop() firstInputMax: number = null;\n @Prop() firstInputWarning: number = null;\n @Prop() firstInputWarningText: string = null;\n @Prop() firstInputLowErrorText: string = null;\n @Prop() firstInputHighErrorText: string = null;\n @Prop() secondInputLabel: string = null;\n @Prop() secondInputPlaceholder: string = null;\n @Prop() secondInputMin: number = null;\n @Prop() secondInputMax: number = null;\n @Prop() secondInputWarning: number = null;\n @Prop() secondInputWarningText: string = null;\n @Prop() secondInputLowErrorText: string = null;\n @Prop() secondInputHighErrorText: string = null;\n @Prop() disabledDates: string = null;\n @Prop() dateLabel: string = null;\n @Prop() datePlaceholder: string = null;\n @Prop() dateDaysFromToday: number = 1;\n @Prop() yearsToAddToEndDate: number = null;\n @Prop() sumFieldLabel: string = null;\n @Prop() addRowText: string = null;\n @Prop() elementHelperText: string = null;\n\n @State() dropdownDataRoot: Root[] = null;\n @State() secondDropdownArr: number[] = [];\n @State() rowData: PredefinedValues[] = null;\n @State() formValues: FormValue[] = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n @State() rowSum: string = null;\n @State() minRowCount: number = null;\n @State() showDeleteConfirm: boolean = false;\n @State() i18n: Translationsi18n;\n\n @Event() allFormValues: EventEmitter<string>;\n\n private _firstDropdownSelection: string = null;\n private _secondDropdownSelection: number = null;\n\n private _defaultRow: PredefinedValues;\n\n constructor() {\n this._defaultRow = {\n id: this.generateUniqueId(),\n firstInput: '',\n secondInput: this.secondInputWarning !== null ? this.secondInputWarning.toString() : '',\n date: '',\n };\n }\n\n componentWillLoad() {\n this.formValues = [];\n this.setDropDownData();\n this.updateSecondDropdown();\n this.setRowData();\n this.setFirstValidDate();\n this.setTranslations();\n }\n\n @Watch('languageCode')\n setTranslations() {\n this.i18n = translations[this.languageCode] \|\| translations['en'];\n }\n\n componentDidLoad() {\n this.updateSum();\n }\n\n setDropDownData() {\n if (typeof this.dropdownData === 'string') {\n this.dropdownDataRoot = JSON.parse(this.dropdownData);\n } else {\n this.dropdownDataRoot = this.dropdownData;\n }\n\n if (this.dropdownDataRoot?.length) {\n this.dropdownDataRoot.forEach(element => {\n if (!element.value) {\n element.value = 0;\n }\n });\n }\n\n if (this.dropdownDataRoot.length > 0) {\n this.dropdownDataRoot[0].checked = true;\n this._firstDropdownSelection = this.dropdownDataRoot[0].label;\n this._secondDropdownSelection = this.dropdownDataRoot[0].value;\n this.minRowCount = this.dropdownDataRoot[0].value;\n }\n }\n\n updateSecondDropdown() {\n const selectedItem = this.dropdownDataRoot.find(arr => arr.checked === true);\n this.secondDropdownArr = [];\n\n for (let index = selectedItem.value; index <= this.secondDropdownMax; index++) {\n this.secondDropdownArr.push(index);\n }\n }\n\n updateSelectItemArr(arr: Root[], caption: string) {\n arr.forEach(item => {\n if (item.label === caption) {\n item.checked = !item.checked;\n } else {\n item.checked = false;\n }\n });\n return arr;\n }\n\n setRowData() {\n this.rowData = [];\n for (let index = 0; index < this._secondDropdownSelection; index++) {\n const row = Object.assign({}, this._defaultRow);\n row.id = this.generateUniqueId();\n this.rowData = [...this.rowData, row];\n }\n }\n\n generateUniqueId() {\n return uuidv4();\n }\n\n setFirstValidDate() {\n const yearsToadd = this.yearsToAddToEndDate ? this.yearsToAddToEndDate : 2;\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + yearsToadd;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n addRow(newRowId: string) {\n const newRow = Object.assign({}, this.rowData[0]);\n newRow.id = newRowId ? newRowId : this.generateUniqueId();\n newRow.date = '';\n this.rowData = [...this.rowData, newRow];\n\n this.secondDropdownArr = [...this.secondDropdownArr];\n this.updateSum();\n this.emitValuesIfValid();\n }\n\n handleFirstDropdown = debounce((e: Event) => {\n const selected = e.target as HTMLSelectElement \| null;\n const selectedValue = selected?.value;\n\n if (!selectedValue?.length) {\n return;\n }\n\n const selectionRoot = this.dropdownDataRoot.find(x => x.value.toString() === selectedValue);\n this.minRowCount = selectionRoot.value;\n\n if (selectionRoot.value > this._secondDropdownSelection) {\n this.dropdownDataRoot = [...this.dropdownDataRoot];\n\n for (let index = this.rowData?.length; index < selectionRoot.value; index++) {\n this.addRow(this.generateUniqueId());\n }\n }\n\n this.updateSecondDropdown();\n this.updateSum();\n this.emitValuesIfValid();\n })\n\n handleSecondDropdown = debounce((e: Event) => {\n const target = e.target as HTMLSelectElement \| null;\n const selectedOption = target?.value;\n\n if (!selectedOption) {\n return;\n }\n\n const selectedValue = selectedOption\n\n if (!selectedValue?.length) {\n return;\n }\n\n const value = parseInt(selectedValue);\n\n if (value < this._secondDropdownSelection) {\n this.showDeleteConfirm = true;\n } else {\n for (let index = this.rowData?.length; index < value; index++) {\n this.addRow(this.generateUniqueId());\n }\n }\n\n this._secondDropdownSelection = value;\n\n this.updateSum();\n this.emitValuesIfValid();\n })\n\n @Listen('rowValueChange')\n @Listen('firstInputChange')\n @Listen('secondInputChange')\n predefinedValueChange(e) {\n const indexToUpdate = this.rowData?.findIndex(data => data.id === e.detail.id);\n const val: PredefinedValues = e.detail;\n this.rowData[indexToUpdate] = {\n ...this.rowData[indexToUpdate],\n firstInput: val.firstInput,\n secondInput: val.secondInput,\n date: val.date,\n };\n\n if (e.type === 'firstInputChange' && indexToUpdate === 0) {\n this.updateFirstInputOfRows(val.firstInput);\n }\n\n if (e.type === 'secondInputChange' && indexToUpdate === 0) {\n this.updateSecondInputOfRows(val.secondInput);\n }\n\n this.rowData = [...this.rowData];\n this.emitValuesIfValid();\n this.updateSum();\n }\n\n updateFirstInputOfRows(value: string) {\n for (let index = 1; index < this.rowData?.length; index++) {\n this.rowData[index] = {\n ...this.rowData[index],\n firstInput: value,\n };\n }\n }\n\n updateSecondInputOfRows(value: string) {\n for (let index = 1; index < this.rowData?.length; index++) {\n this.rowData[index] = {\n ...this.rowData[index],\n secondInput: value,\n };\n }\n }\n\n @Listen('deleteRowEvent')\n deleteRowEvent(e) {\n const indexToRemove = this.rowData?.findIndex(data => data.id === e.detail);\n if (indexToRemove < 0) {\n return;\n }\n\n this.rowData?.splice(indexToRemove, 1);\n this.rowData = [...this.rowData];\n\n this.secondDropdownArr = [...this.secondDropdownArr];\n this.emitValuesIfValid();\n this.updateSum();\n }\n\n updateSum() {\n this.rowSum = '';\n let sum = 0;\n this.rowData?.forEach(element => {\n if (element?.firstInput?.length) {\n sum += parseInt(element.firstInput);\n }\n });\n\n this.rowSum = sum.toString();\n }\n\n deleteExcessRows() {\n if (this._secondDropdownSelection === null) {\n return;\n }\n\n const rowsToDelete = this.rowData?.length - this._secondDropdownSelection;\n for (let index = 0; index < rowsToDelete; index++) {\n this.rowData?.pop();\n }\n this.rowData = [...this.rowData];\n this.showDeleteConfirm = false;\n this.updateSum();\n }\n\n abortDeleteRows() {\n this.showDeleteConfirm = false;\n }\n\n emitValuesIfValid() {\n this.formValues = [];\n this.rowData?.forEach(item => {\n const rowValue: FormValue = { row: [] };\n if (this._firstDropdownSelection?.length) {\n const dropDownValue: RowValue = { name: this.firstDropdownLabel, value: this._firstDropdownSelection };\n rowValue.row.push(dropDownValue);\n }\n\n if (item.firstInput?.length) {\n const firstInputValue: RowValue = { name: this.firstInputLabel, value: item.firstInput };\n rowValue.row.push(firstInputValue);\n }\n\n if (item.secondInput?.length) {\n const secondInputValue: RowValue = { name: this.secondInputLabel, value: item.secondInput };\n rowValue.row.push(secondInputValue);\n }\n\n if (item.date) {\n const dateValue: RowValue = { name: this.dateLabel, value: item.date };\n rowValue.row.push(dateValue);\n }\n\n if (rowValue.row.length === 4) {\n this.formValues.push(rowValue);\n }\n });\n\n if (this.formValues.length === this.rowData?.length) {\n const valueJsonString = JSON.stringify(this.formValues);\n this.allFormValues.emit(valueJsonString);\n } else {\n this.allFormValues.emit('');\n }\n }\n\n render() {\n return (\n <Host class=\"dropdown-with-multi-input-element\">\n <div class=\"dropdown-with-multi-input-element__row\">\n <div class=\"dropdown-with-multi-input-element__dropdown\">\n <pn-select ref={el => (this.pnFirstDropdown = el as HTMLElement)} onChange={debounce(this.handleFirstDropdown.bind(this), 500)} class=\"pn-row-select-dropdown dropDown1-dropdown\" label={this.firstDropdownLabel} language={this.languageCode}>\n <option value=\"\" disabled selected>{this.i18n.dropdownPlaceholder}</option>\n {this.dropdownDataRoot?.map((item) => (\n <option value={item.value}>{item.label}</option>\n ))}\n </pn-select>\n {this.firstDropdownHelperText?.length ? <small>{this.firstDropdownHelperText}</small> : null}\n </div>\n </div>\n\n <div class=\"dropdown-with-multi-input-element__row\">\n <div class=\"dropdown-with-multi-input-element__dropdown\">\n <pn-select ref={el => (this.pnSecondDropdown = el as HTMLElement)} onChange={debounce(this.handleSecondDropdown.bind(this), 500)} class=\"pn-row-select-dropdown dropDown2-dropdown\" label={this.secondDropdownLabel} language={this.languageCode}>\n <option value=\"\" disabled selected>{this.i18n.dropdownPlaceholder}</option>\n {this.secondDropdownArr?.map((item) => (\n <option value={item}>{item}</option>\n ))}\n </pn-select>\n {this.secondDropdownHelperText?.length ? <small>{this.secondDropdownHelperText}</small> : null}\n </div>\n </div>\n\n {this.showDeleteConfirm ? (\n <div class=\"dropdown-with-multi-input-element__delete\">\n <p>{this.deleteMultipleRowsWarningText}</p>\n <pn-button ref={el => (this.pnConfirmDeleteButton = el as HTMLElement)} small=\"true\" appearance=\"warning\" onClick={this.deleteExcessRows.bind(this)}>\n {this.confirmDeleteButtonText}\n </pn-button>\n <pn-button ref={el => (this.pnAbortDeleteButton = el as HTMLElement)} small=\"true\" appearance=\"light\" onClick={this.abortDeleteRows.bind(this)}>\n {this.abortDeleteButtonText}\n </pn-button>\n </div>\n ) : null}\n\n <div class=\"dropdown-with-multi-input-element__label-row\">\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.firstInputLabel}</label>\n </div>\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.secondInputLabel}</label>\n </div>\n <div class=\"dropdown-with-multi-input-element__label\">\n <label>{this.dateLabel}</label>\n </div>\n </div>\n\n {this.rowData?.map((data, i) => {\n return (\n <div class={'dropdown-with-multi-input-element__row generated-row-' + i} id={'generated-row-' + i}>\n <pn-dropdown-with-multi-input-rows-row\n language-code={this.languageCode}\n first-input-placeholder={this.firstInputPlaceholder}\n first-input-min={this.firstInputMin}\n first-input-max={this.firstInputMax}\n first-input-warning={this.firstInputWarning}\n first-input-warning-text={this.firstInputWarningText}\n first-input-low-error-text={this.firstInputLowErrorText}\n first-input-high-error-text={this.firstInputHighErrorText}\n second-input-placeholder={this.secondInputPlaceholder}\n second-input-min={this.secondInputMin}\n second-input-max={this.secondInputMax}\n second-input-warning={this.secondInputWarning}\n second-input-warning-text={this.secondInputWarningText}\n second-input-low-error-text={this.secondInputLowErrorText}\n second-input-high-error-text={this.secondInputHighErrorText}\n datePlaceholder={this.datePlaceholder}\n firstValidDate={this.firstValidDateString}\n lastValidDate={this.lastValidDateString}\n predefined-value={JSON.stringify(data)}\n min-row-count={this.minRowCount}\n row-index={i}\n disabled-dates={this.disabledDates}\n ></pn-dropdown-with-multi-input-rows-row>\n </div>\n );\n })}\n\n <div class=\"dropdown-with-multi-input-element__row sum-row\">\n <pn-input disabled={true} ref={el => (this.pnSumField = el as HTMLElement)} type=\"number\" value={this.rowSum} label={this.sumFieldLabel}></pn-input>\n\n <pn-button\n tooltip={this.addRowText ? this.addRowText : null}\n left-icon=\"true\"\n arialabel=\"Add\"\n icon={plus}\n appearance=\"light\"\n variant=\"borderless\"\n class=\"connected-dropdown__button-right\"\n onClick={() => {\n this.addRow(this.generateUniqueId());\n }}\n >\n {this.addRowText}\n </pn-button>\n </div>\n\n {this.elementHelperText?.length ? <div class=\"dropdown-with-multi-input-element__row\">{this.elementHelperText}</div> : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/esm/pn-filter-checkbox.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
-const pnFilterCheckboxCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}:host{display:inline-block;user-select:none}:host input{opacity:0;position:absolute}:host input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:flex;justify-content:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;transition-duration:220ms;transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-property:border, background, box-shadow}:host input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}:host input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#fff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-delay:none;transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}:host input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005d92;background:#e0f8ff}:host input[type=checkbox]:checked+label.pn-checkbox,:host input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005d92;border:0.1rem solid #005d92}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline,:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{transition-delay:220ms}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}:host input[type=checkbox]:focus+label.pn-checkbox,:host input[type=checkbox]:active+label.pn-checkbox{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}:host input[type=checkbox]:disabled+label.pn-checkbox{background-color:#d3cecb;border:0.1rem solid #969087;cursor:not-allowed}:host input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}:host input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}:host input[type=checkbox]:disabled:active+label.pn-checkbox{box-shadow:none}";
+const pnFilterCheckboxCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{display:inline-block;user-select:none}:host input{opacity:0;position:absolute}:host input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:flex;justify-content:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;transition-duration:220ms;transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-property:border, background, box-shadow}:host input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}:host input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#fff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-delay:none;transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}:host input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005d92;background:#e0f8ff}:host input[type=checkbox]:checked+label.pn-checkbox,:host input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005d92;border:0.1rem solid #005d92}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline,:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{transition-delay:220ms}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}:host input[type=checkbox]:focus+label.pn-checkbox,:host input[type=checkbox]:active+label.pn-checkbox{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}:host input[type=checkbox]:disabled+label.pn-checkbox{background-color:#d3cecb;border:0.1rem solid #969087;cursor:not-allowed}:host input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}:host input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}:host input[type=checkbox]:disabled:active+label.pn-checkbox{box-shadow:none}";
 const PnFilterCheckboxStyle0 = pnFilterCheckboxCss;
 const PnFilterCheckbox = class {

package/esm/pn-filter-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-filter-checkbox.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,~~ygEAAygE~~,CAAC;~~AACtiE~~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","names":[],"sources":["src/components/input/pn-filter-checkbox/pn-filter-checkbox.scss?tag=pn-filter-checkbox&encapsulation=shadow","src/components/input/pn-filter-checkbox/pn-filter-checkbox.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\n:host {\n display: inline-block;\n user-select: none;\n\n input {\n opacity: 0;\n position: absolute;\n }\n\n input[type='checkbox'] {\n & + label.pn-checkbox {\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n background: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border: 0.1rem solid $gray400;\n cursor: pointer;\n border-radius: 0.4rem;\n cursor: pointer;\n transition-duration: $bg-timing;\n transition-timing-function: $easing;\n transition-property: border, background, box-shadow;\n\n svg {\n width: 80%;\n fill: none;\n\n polyline {\n stroke: #fff;\n transform-origin: 0 0;\n stroke-linecap: round;\n stroke-dasharray: 23;\n stroke-dashoffset: 23;\n transition-delay: none;\n transition: stroke-dashoffset $check-timing $easing;\n }\n }\n }\n\n &:hover + label.pn-checkbox {\n border: 0.1rem solid $blue700;\n background: $blue50;\n }\n\n &:checked + label.pn-checkbox,\n &:indeterminate + label.pn-checkbox {\n background: $blue700;\n border: 0.1rem solid $blue700;\n\n svg polyline {\n transition-delay: $bg-timing;\n }\n }\n\n &:checked + label.pn-checkbox {\n svg polyline.checkmark-path {\n stroke-dashoffset: 0;\n }\n }\n\n &:indeterminate + label.pn-checkbox {\n svg polyline.indeterminate-path {\n stroke-dashoffset: 0;\n }\n }\n\n &:focus + label.pn-checkbox,\n &:active + label.pn-checkbox {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem $blue700;\n }\n\n &:disabled + label.pn-checkbox {\n background-color: $gray200;\n border: 0.1rem solid $gray400;\n cursor: not-allowed;\n\n svg polyline {\n stroke: $gray400;\n }\n }\n\n &:disabled:checked + label.pn-checkbox {\n border: 0.1rem solid transparent;\n }\n\n &:disabled:active + label.pn-checkbox {\n box-shadow: none;\n }\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-filter-checkbox',\n styleUrl: 'pn-filter-checkbox.scss',\n shadow: true,\n})\nexport class PnFilterCheckbox {\n /** This will be emitted on change and input, like a native checkbox /\n @Prop({ reflect: true }) value: any;\n /* The name of the checkbox group /\n @Prop() name: string;\n /* The string you put here will be what you'd make the ID of a native radio button, you can't name props \"id\" because it's reserved\n * so we went with the more descriptive name \"checkboxid\", if you want to create labels for your checkbox, you will bind it to this ID\n */\n @Prop() checkboxid: string;\n @Prop() disabled?: boolean = false;\n @Prop() checked?: boolean = false;\n @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @Listen('change')\n handlechange() {\n this.indeterminate = false;\n }\n\n componentDidLoad() {\n this.checkAndSetIndeterminateState();\n this.bindEvents();\n }\n\n componentDidUpdate() {\n this.checkAndSetIndeterminateState();\n }\n\n bindEvents() {\n const labels = document.querySelectorAll('label[for=\"' + this.checkboxid + '\"]');\n labels.forEach(label => {\n label.addEventListener('click', () => {\n this.hostElement.shadowRoot.querySelector('label').click();\n });\n });\n\n const checkboxInput = this.hostElement.shadowRoot.querySelector('input');\n checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));\n }\n\n onCheckboxChange(checkboxInput: HTMLInputElement) {\n let outsideInput: HTMLInputElement = this.hostElement.querySelector('input.hidden-' + this.checkboxid) as HTMLInputElement \| null;\n if (outsideInput) {\n outsideInput.value = checkboxInput.checked ? this.value : '';\n outsideInput.dispatchEvent(new CustomEvent('change', { detail: outsideInput }));\n }\n }\n\n checkAndSetIndeterminateState() {\n let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`) as HTMLInputElement;\n\n if (checkbox) {\n checkbox.indeterminate = this.indeterminate;\n }\n }\n\n private renderInputOutsideShadowRoot() {\n let input: HTMLInputElement = this.hostElement.querySelector('input.hidden-' + this.checkboxid) as HTMLInputElement \| null;\n if (!input) {\n input = this.hostElement.ownerDocument.createElement('input');\n input.type = 'hidden';\n input.classList.add('hidden-' + this.checkboxid);\n this.hostElement.appendChild(input);\n }\n\n input.name = this.name ?? this.checkboxid;\n }\n\n render() {\n this.renderInputOutsideShadowRoot();\n\n return (\n <Host checked={this.checked} id={this.checkboxid}>\n <input type=\"checkbox\" id={this.checkboxid} value={this.value} name={this.name \|\| this.checkboxid} disabled={this.disabled} checked={this.checked} />\n <label htmlFor={this.checkboxid} class=\"pn-checkbox\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n <polyline class=\"indeterminate-path\" points=\"4,12 20,12\" stroke-width=\"3\" />\n </svg>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-filter-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/input/pn-filter-checkbox/pn-filter-checkbox.scss?tag=pn-filter-checkbox&encapsulation=shadow","src/components/input/pn-filter-checkbox/pn-filter-checkbox.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\n:host {\n display: inline-block;\n user-select: none;\n\n input {\n opacity: 0;\n position: absolute;\n }\n\n input[type='checkbox'] {\n & + label.pn-checkbox {\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n background: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border: 0.1rem solid $gray400;\n cursor: pointer;\n border-radius: 0.4rem;\n cursor: pointer;\n transition-duration: $bg-timing;\n transition-timing-function: $easing;\n transition-property: border, background, box-shadow;\n\n svg {\n width: 80%;\n fill: none;\n\n polyline {\n stroke: #fff;\n transform-origin: 0 0;\n stroke-linecap: round;\n stroke-dasharray: 23;\n stroke-dashoffset: 23;\n transition-delay: none;\n transition: stroke-dashoffset $check-timing $easing;\n }\n }\n }\n\n &:hover + label.pn-checkbox {\n border: 0.1rem solid $blue700;\n background: $blue50;\n }\n\n &:checked + label.pn-checkbox,\n &:indeterminate + label.pn-checkbox {\n background: $blue700;\n border: 0.1rem solid $blue700;\n\n svg polyline {\n transition-delay: $bg-timing;\n }\n }\n\n &:checked + label.pn-checkbox {\n svg polyline.checkmark-path {\n stroke-dashoffset: 0;\n }\n }\n\n &:indeterminate + label.pn-checkbox {\n svg polyline.indeterminate-path {\n stroke-dashoffset: 0;\n }\n }\n\n &:focus + label.pn-checkbox,\n &:active + label.pn-checkbox {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem $blue700;\n }\n\n &:disabled + label.pn-checkbox {\n background-color: $gray200;\n border: 0.1rem solid $gray400;\n cursor: not-allowed;\n\n svg polyline {\n stroke: $gray400;\n }\n }\n\n &:disabled:checked + label.pn-checkbox {\n border: 0.1rem solid transparent;\n }\n\n &:disabled:active + label.pn-checkbox {\n box-shadow: none;\n }\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-filter-checkbox',\n styleUrl: 'pn-filter-checkbox.scss',\n shadow: true,\n})\nexport class PnFilterCheckbox {\n /** This will be emitted on change and input, like a native checkbox /\n @Prop({ reflect: true }) value: any;\n /* The name of the checkbox group /\n @Prop() name: string;\n /* The string you put here will be what you'd make the ID of a native radio button, you can't name props \"id\" because it's reserved\n * so we went with the more descriptive name \"checkboxid\", if you want to create labels for your checkbox, you will bind it to this ID\n */\n @Prop() checkboxid: string;\n @Prop() disabled?: boolean = false;\n @Prop() checked?: boolean = false;\n @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @Listen('change')\n handlechange() {\n this.indeterminate = false;\n }\n\n componentDidLoad() {\n this.checkAndSetIndeterminateState();\n this.bindEvents();\n }\n\n componentDidUpdate() {\n this.checkAndSetIndeterminateState();\n }\n\n bindEvents() {\n const labels = document.querySelectorAll('label[for=\"' + this.checkboxid + '\"]');\n labels.forEach(label => {\n label.addEventListener('click', () => {\n this.hostElement.shadowRoot.querySelector('label').click();\n });\n });\n\n const checkboxInput = this.hostElement.shadowRoot.querySelector('input');\n checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));\n }\n\n onCheckboxChange(checkboxInput: HTMLInputElement) {\n let outsideInput: HTMLInputElement = this.hostElement.querySelector('input.hidden-' + this.checkboxid) as HTMLInputElement \| null;\n if (outsideInput) {\n outsideInput.value = checkboxInput.checked ? this.value : '';\n outsideInput.dispatchEvent(new CustomEvent('change', { detail: outsideInput }));\n }\n }\n\n checkAndSetIndeterminateState() {\n let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`) as HTMLInputElement;\n\n if (checkbox) {\n checkbox.indeterminate = this.indeterminate;\n }\n }\n\n private renderInputOutsideShadowRoot() {\n let input: HTMLInputElement = this.hostElement.querySelector('input.hidden-' + this.checkboxid) as HTMLInputElement \| null;\n if (!input) {\n input = this.hostElement.ownerDocument.createElement('input');\n input.type = 'hidden';\n input.classList.add('hidden-' + this.checkboxid);\n this.hostElement.appendChild(input);\n }\n\n input.name = this.name ?? this.checkboxid;\n }\n\n render() {\n this.renderInputOutsideShadowRoot();\n\n return (\n <Host checked={this.checked} id={this.checkboxid}>\n <input type=\"checkbox\" id={this.checkboxid} value={this.value} name={this.name \|\| this.checkboxid} disabled={this.disabled} checked={this.checked} />\n <label htmlFor={this.checkboxid} class=\"pn-checkbox\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n <polyline class=\"indeterminate-path\" points=\"4,12 20,12\" stroke-width=\"3\" />\n </svg>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}