@postnord/pn-marketweb-components 3.5.3 → 4.0.0

package/pn-market-web-components/{p-0ac30ee9.entry.js.map → p-d75a2f7c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnDropdownChoiceAddsRowCss","PnDropdownChoiceAddsRowStyle0","pnDropdownChoiceAddsRow","pnRowSelectDropdown","tableHead","tableBody","_dropdownData","rowvalues","dropdownDataWatcher","this","dropdownData","JSON","parse","componentWillLoad","componentDidLoad","setInitialValues","addEventHandlers","addEventListener","debounce","addRowElement","bind","nextRowIndex","setRowSelectDropdownArr","rowSelectDropdownArr","forEach","element","push","label","formRowEvent","e","debouncedAddValue","updateHiddenFieldValue","target","matches","eventName","rowDropdown","closest","querySelector","allRows","querySelectorAll","mainDropdown","hostElement","length","setAttribute","dropdownEmptyWarning","formValue","emit","allRowsValid","formValues","map","row","nameElm","dropdownElm","inputElm","rowData","name","rowNameLabel","value","innerHTML","pnSelect","nativeSelect","dropdownSelection","rowDropdownLabel","input","inputValue","parseInt","rowInputLabel","toString","includes","stringify","validateInputs","error","console","selectedElement","selectedValue","removeAttribute","newRow","document","createElement","className","onclick","rowNameColumn","dataset","appendChild","selectedR","find","item","values","rowHasDropdown","dropdownCol","createDropdownColumn","emptyDropdownCol","rowInputColumn","createInputColumn","deleteButton","createDeleteButtonColumn","updateRowSelectDropdown","getCurrentRow","dropdownColumn","selectedItem","arr","selectedOptionValues","currentRow","parentElement","textContent","dropdown","rowDropdownPlaceholder","placeholder","selected","disabled","childItem","childOption","inputColumn","totalInputLimit","buttonColumn","buttonElm","deleteRow","createTextNode","rowDeleteButtonText","call","el","dropdownPlaceholder","rowName","selectOptions","elm","preventDefault","targetElm","currentTarget","targetRow","remove","index","dropdownSelections","numberInputs","selectionEmpty","showWarning","dropdownElem","selection","dropdownVal","inputElem","currentNumber","currentValue","hasAttribute","inputLimitWarning","isNaN","inputEmptyWarning","render","h","Host","key","class","ref","addRowDropdownName","addRowDropdownLabel","language","languageCode","addRowDropdownPlaceholder"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["pnDropdownChoiceAddsRowCss","PnDropdownChoiceAddsRowStyle0","pnDropdownChoiceAddsRow","pnRowSelectDropdown","tableHead","tableBody","_dropdownData","rowvalues","dropdownDataWatcher","this","dropdownData","JSON","parse","componentWillLoad","componentDidLoad","setInitialValues","addEventHandlers","addEventListener","debounce","addRowElement","bind","nextRowIndex","setRowSelectDropdownArr","rowSelectDropdownArr","forEach","element","push","label","formRowEvent","e","debouncedAddValue","updateHiddenFieldValue","target","matches","eventName","rowDropdown","closest","querySelector","allRows","querySelectorAll","mainDropdown","hostElement","length","setAttribute","dropdownEmptyWarning","formValue","emit","allRowsValid","formValues","map","row","nameElm","dropdownElm","inputElm","rowData","name","rowNameLabel","value","innerHTML","pnSelect","nativeSelect","dropdownSelection","rowDropdownLabel","input","inputValue","parseInt","rowInputLabel","toString","includes","stringify","validateInputs","error","console","selectedElement","selectedValue","removeAttribute","newRow","document","createElement","className","onclick","rowNameColumn","dataset","appendChild","selectedR","find","item","values","rowHasDropdown","dropdownCol","createDropdownColumn","emptyDropdownCol","rowInputColumn","createInputColumn","deleteButton","createDeleteButtonColumn","updateRowSelectDropdown","getCurrentRow","dropdownColumn","selectedItem","arr","selectedOptionValues","currentRow","parentElement","textContent","dropdown","rowDropdownPlaceholder","placeholder","selected","disabled","childItem","childOption","inputColumn","totalInputLimit","buttonColumn","buttonElm","deleteRow","createTextNode","rowDeleteButtonText","call","el","dropdownPlaceholder","rowName","selectOptions","elm","preventDefault","targetElm","currentTarget","targetRow","remove","index","dropdownSelections","numberInputs","selectionEmpty","showWarning","dropdownElem","selection","dropdownVal","inputElem","currentNumber","currentValue","hasAttribute","inputLimitWarning","isNaN","inputEmptyWarning","render","h","Host","key","class","ref","addRowDropdownName","addRowDropdownLabel","language","languageCode","addRowDropdownPlaceholder"],"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"],"mappings":"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","ignoreList":[]}

package/pn-market-web-components/p-daa74e60.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,g as e,h as s,d as n}from"./p-82546a44.js";import{d as l}from"./p-3e4d9396.js";import{m as h}from"./p-b2f2fbb6.js";const a="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 r=a;const o=class{constructor(e){t(this,e);this.rowValueChange=i(this,"rowValueChange",7);this.deleteRowEvent=i(this,"deleteRowEvent",7);this.firstInputChange=i(this,"firstInputChange",7);this.secondInputChange=i(this,"secondInputChange",7);this.languageCode=null;this.firstInputPlaceholder=null;this.firstInputMin=null;this.firstInputMax=null;this.firstInputWarning=null;this.firstInputWarningText=null;this.firstInputLowErrorText=null;this.firstInputHighErrorText=null;this.secondInputPlaceholder=null;this.secondInputMin=null;this.secondInputMax=null;this.secondInputWarning=null;this.secondInputWarningText=null;this.secondInputLowErrorText=null;this.secondInputHighErrorText=null;this.dateLabel=null;this.datePlaceholder=null;this.firstValidDate=null;this.lastValidDate=null;this.predefinedValue=null;this.rowIndex=null;this.minRowCount=null;this.disabledDates=null;this.showFirstInputWarning=false;this.showFirstInputLowError=false;this.showFirstInputHighError=false;this.showSecondInputWarning=false;this.showSecondInputLowError=false;this.showSecondInputHighError=false;this.firstInputValue="";this.secondInputValue="";this.dateValue=""}get hostElement(){return e(this)}_predefinedValue;pnFirstInputField=null;pnSecondInputField=null;pnDatePicker=null;pnDeleteRowButton=null;rowValueChange;deleteRowEvent;firstInputChange;secondInputChange;componentWillLoad(){this.getPredefinedValues();this.setInitialValues()}componentDidLoad(){this.addEventHandlers()}getPredefinedValues(){this._predefinedValue=JSON.parse(this.predefinedValue)}applyPredefinedValue(){this.getPredefinedValues();this.setInitialValues();if(this.firstInputValue?.length){this.validateFirstInput(parseInt(this.firstInputValue))}if(this.secondInputValue?.length){this.validateSecondInput(parseInt(this.secondInputValue))}if(this.rowIndex>=this.minRowCount){this.pnDeleteRowButton.addEventListener("click",this.deleteRow.bind(this))}}setInitialValues(){this.firstInputValue=this._predefinedValue.firstInput;this.secondInputValue=this._predefinedValue.secondInput;this.dateValue=this._predefinedValue.date}addEventHandlers(){const t=l(this.emitRowValues.bind(this),500);this.pnFirstInputField.addEventListener("keyup",l(this.handleFirstInput.bind(this),500));this.pnSecondInputField.addEventListener("keyup",l(this.handleSecondInput.bind(this),500));this.pnDatePicker.addEventListener("dateselection",this.handleDateChange.bind(this));this.pnDatePicker.addEventListener("dateselection",t)}handleFirstInput(t){const i=t.target;const e=parseInt(i.value);if(e>0){this.firstInputValue=i.value;this.firstInputChange.emit({id:this._predefinedValue.id,firstInput:this.firstInputValue,secondInput:this.secondInputValue,date:this.dateValue})}this.validateFirstInput(e);this.emitRowValues()}handleSecondInput(t){const i=t.target;const e=parseInt(i.value);if(e>0){this.secondInputValue=i.value;this.secondInputChange.emit({id:this._predefinedValue.id,firstInput:this.firstInputValue,secondInput:this.secondInputValue,date:this.dateValue})}this.validateSecondInput(e);this.emitRowValues()}validateFirstInput(t){this.showFirstInputWarning=false;this.showFirstInputLowError=false;this.showFirstInputHighError=false;if(t<this.firstInputWarning){this.showFirstInputWarning=true}if(t<this.firstInputMin){this.showFirstInputWarning=false;this.showFirstInputLowError=true}if(t>this.firstInputMax){this.showFirstInputWarning=false;this.showFirstInputLowError=false;this.showFirstInputHighError=true}}validateSecondInput(t){this.showSecondInputWarning=false;this.showSecondInputLowError=false;this.showSecondInputHighError=false;if(t<this.secondInputWarning){this.showSecondInputWarning=true}if(t<this.secondInputMin){this.showSecondInputWarning=false;this.showSecondInputLowError=true}if(t>this.secondInputMax){this.showSecondInputWarning=false;this.showSecondInputLowError=false;this.showSecondInputHighError=true}}handleDateChange(t){const i=t.target;if(i===this.pnDatePicker){this.dateValue=t.detail.start}}emitRowValues(){this.rowValueChange.emit({id:this._predefinedValue.id,firstInput:this.firstInputValue,secondInput:this.secondInputValue,date:this.dateValue})}deleteRow(){this.deleteRowEvent.emit(this._predefinedValue.id)}render(){return s(n,{key:"4925aca4d5b55256deda95cdeef466ecad054a51"},s("div",{key:"6162a985244fd8fd93fd5cd268c8b21e9d133942",class:"input-element-row"},s("div",{key:"aaad2fac34e4151a8c9b30080105d14a44941357",class:"input-container"},s("pn-input",{key:"b504279f4ba8a730021ed4debd0be6b42afbb8d7",ref:t=>this.pnFirstInputField=t,type:"number",placeholder:this.firstInputPlaceholder,value:this.firstInputValue,min:"1"}),this.showFirstInputLowError||this.showFirstInputHighError||this.showFirstInputWarning?s("div",{class:"input-element-message-container"},this.showFirstInputLowError?s("div",{class:"input-element-message-container__error"},s("small",null,this.firstInputLowErrorText)):null,this.showFirstInputHighError?s("div",{class:"input-element-message-container__error"},s("small",null,this.firstInputHighErrorText)):null,this.showFirstInputWarning?s("div",{class:"input-element-message-container__warning"},s("small",null,this.firstInputWarningText)):null):null),s("div",{key:"b3d182742c6c5344d7d57a507026bf918a6d2e05",class:"input-container"},s("pn-input",{key:"e8fd472708d96bedd538c09e9b6ed7ccd7ae098e",ref:t=>this.pnSecondInputField=t,type:"number",placeholder:this.secondInputPlaceholder,value:this.secondInputValue,min:"1"}),this.showSecondInputLowError||this.showSecondInputHighError||this.showSecondInputWarning?s("div",{class:"input-element-message-container"},this.showSecondInputLowError?s("div",{class:"input-element-message-container__error"},s("small",null,this.secondInputLowErrorText)):null,this.showSecondInputHighError?s("div",{class:"input-element-message-container__error"},s("small",null,this.secondInputHighErrorText)):null,this.showSecondInputWarning?s("div",{class:"input-element-message-container__warning"},s("small",null,this.secondInputWarningText)):null):null),s("div",{key:"8da4638217aee0b48cfe8bc9371bc588dfc3ac0d",class:"input-container"},s("pn-date-picker",{key:"0d9c861a7a122c767c991a8400fb044ad134a2bc",ref:t=>this.pnDatePicker=t,range:"false","disable-weekends":true,"disabled-dates":this.disabledDates,"min-date":this.firstValidDate,"max-date":this.lastValidDate,language:this.languageCode,placeholder:this.datePlaceholder,start:this.dateValue?.length?this.dateValue:null})),this.rowIndex>=this.minRowCount?s("div",{class:"delete-button-container"},s("pn-button",{ref:t=>this.pnDeleteRowButton=t,small:"true",icon:h,appearance:"warning",index:this.rowIndex,onClick:()=>{this.deleteRow()}},"Delete")):null))}static get watchers(){return{predefinedValue:["applyPredefinedValue"]}}};o.style=r;export{o as pn_dropdown_with_multi_input_rows_row};
+//# sourceMappingURL=p-daa74e60.entry.js.map

package/pn-market-web-components/{p-7076038b.entry.js.map → p-daa74e60.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnDropdownWithMultiInputRowsRowCss","PnDropdownWithMultiInputRowsRowStyle0","PnDropdownWithMultiInputRowsRow","_predefinedValue","pnFirstInputField","pnSecondInputField","pnDatePicker","pnDeleteRowButton","rowValueChange","deleteRowEvent","firstInputChange","secondInputChange","componentWillLoad","this","getPredefinedValues","setInitialValues","componentDidLoad","addEventHandlers","JSON","parse","predefinedValue","applyPredefinedValue","firstInputValue","length","validateFirstInput","parseInt","secondInputValue","validateSecondInput","rowIndex","minRowCount","addEventListener","deleteRow","bind","firstInput","secondInput","dateValue","date","emmitValues","debounce","emitRowValues","handleFirstInput","handleSecondInput","handleDateChange","e","elm","target","value","emit","id","input","showFirstInputWarning","showFirstInputLowError","showFirstInputHighError","firstInputWarning","firstInputMin","firstInputMax","showSecondInputWarning","showSecondInputLowError","showSecondInputHighError","secondInputWarning","secondInputMin","secondInputMax","detail","start","render","h","Host","key","class","ref","el","type","placeholder","firstInputPlaceholder","min","firstInputLowErrorText","firstInputHighErrorText","firstInputWarningText","secondInputPlaceholder","secondInputLowErrorText","secondInputHighErrorText","secondInputWarningText","range","disabledDates","firstValidDate","lastValidDate","language","languageCode","datePlaceholder","small","icon","minus","appearance","index","onClick"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["pnDropdownWithMultiInputRowsRowCss","PnDropdownWithMultiInputRowsRowStyle0","PnDropdownWithMultiInputRowsRow","_predefinedValue","pnFirstInputField","pnSecondInputField","pnDatePicker","pnDeleteRowButton","rowValueChange","deleteRowEvent","firstInputChange","secondInputChange","componentWillLoad","this","getPredefinedValues","setInitialValues","componentDidLoad","addEventHandlers","JSON","parse","predefinedValue","applyPredefinedValue","firstInputValue","length","validateFirstInput","parseInt","secondInputValue","validateSecondInput","rowIndex","minRowCount","addEventListener","deleteRow","bind","firstInput","secondInput","dateValue","date","emmitValues","debounce","emitRowValues","handleFirstInput","handleSecondInput","handleDateChange","e","elm","target","value","emit","id","input","showFirstInputWarning","showFirstInputLowError","showFirstInputHighError","firstInputWarning","firstInputMin","firstInputMax","showSecondInputWarning","showSecondInputLowError","showSecondInputHighError","secondInputWarning","secondInputMin","secondInputMax","detail","start","render","h","Host","key","class","ref","el","type","placeholder","firstInputPlaceholder","min","firstInputLowErrorText","firstInputHighErrorText","firstInputWarningText","secondInputPlaceholder","secondInputLowErrorText","secondInputHighErrorText","secondInputWarningText","range","disabledDates","firstValidDate","lastValidDate","language","languageCode","datePlaceholder","small","icon","minus","appearance","index","onClick"],"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"],"mappings":"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","ignoreList":[]}

package/pn-market-web-components/p-dc2ee6f8.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as n,d as t}from"./p-82546a44.js";import{P as l}from"./p-cf8a1fb9.js";import"./p-3478f368.js";import"./p-8d78b631.js";const i="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-level-up-modal .pn-modal-header{z-index:0}pn-level-up-modal .pn-modal{max-width:63.1rem}@media screen and (max-width: 768px){pn-level-up-modal .pn-modal{height:100%;max-height:100%}}pn-level-up-modal .level-up-computer-modal .pn-modal-content .modal-content{justify-self:center;display:flex;flex-wrap:wrap;flex-direction:column;gap:2em;margin:2em;width:max-content;align-content:space-around}pn-level-up-modal .pn-modal-label{margin:2.2rem 0}@media screen and (max-width: 768px){pn-level-up-modal .pn-modal-label{justify-self:center}}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content{height:100%;align-content:center;align-items:center}}pn-level-up-modal .level-up-phone-modal .pn-modal-content pn-spinner{justify-self:center}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container{display:flex;flex-direction:row;align-items:center;gap:1em}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container{flex-direction:column}}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol{font-size:1.8rem;line-height:1.6;margin-left:2rem;padding-left:2rem}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list li{margin-bottom:1rem}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol{font-size:1.6rem}}";const a=i;const o=class{constructor(n){e(this,n);this.open=undefined;this.endpoint=undefined;this.instructionPhoneLineOne=undefined;this.instructionPhoneLineTwo=undefined;this.instructionPhoneLineThree=undefined;this.headingText=undefined;this.outdatedQRMessage=undefined;this.expiresInMessage=undefined;this.system=undefined;this.qrAriaLabel=undefined;this.openModalToggle=undefined;this.isLoading=true}_bankIDUrl;_levelupService;_levelUpModal;componentWillLoad(){this._levelupService=new l(this.endpoint);this.updateOpen()}updateBankIDUrl=async()=>{this.isLoading=true;let e=await this._levelupService.levelupAuthorize(this.system,null);this.isLoading=false;this._bankIDUrl=e.url;await this._levelupService.levelupTokenGrant(e.id,"30",null).then((e=>{if(e.code===200){this._levelupService.newLevelupUser()}}))};updateOpen(){if(this.open==="open"){this.handleOpen();this.openModalToggle=true;if(this._levelUpModal){if(this._levelUpModal.open===true){this._levelUpModal.open=false}this._levelUpModal.open=true}}else{this.openModalToggle=false}}handleOpen=async()=>{await this.updateBankIDUrl()};render(){return n(t,{key:"0431f6d5caf8183d3e1c432a3ad663fa8648b1b4"},n("pn-modal",{key:"bb6f2be2f52908943154e99c02e7c3f7b9e648b6",ref:e=>this._levelUpModal=e,open:this.openModalToggle,class:"level-up-phone-modal","allow-overflow":"true",label:this.headingText},this.isLoading?n("pn-spinner",{light:"false",size:"1.5"}):n("div",{class:"modal-content-container"},n("div",{class:"modal-content-qr"},n("pn-qr-code-generator",{url:this._bankIDUrl,"countdown-seconds":"30","outdated-message":this.outdatedQRMessage,"expires-in-message":this.expiresInMessage,"update-code-every-second":true,"aria-label":this.qrAriaLabel})),n("div",{class:"modal-content-list"},n("ol",null,this.instructionPhoneLineOne&&n("li",null,this.instructionPhoneLineOne),this.instructionPhoneLineTwo&&n("li",null,this.instructionPhoneLineTwo),this.instructionPhoneLineThree&&n("li",null,this.instructionPhoneLineThree))))))}static get watchers(){return{open:["updateOpen"]}}};o.style=a;export{o as pn_level_up_modal};
+//# sourceMappingURL=p-dc2ee6f8.entry.js.map

package/pn-market-web-components/p-dc2ee6f8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pnLevelUpModalCss","PnLevelUpModalStyle0","PnLevelUpModal","_bankIDUrl","_levelupService","_levelUpModal","componentWillLoad","this","PnLevelUpService","endpoint","updateOpen","updateBankIDUrl","async","isLoading","authResponse","levelupAuthorize","system","url","levelupTokenGrant","id","then","response","code","newLevelupUser","open","handleOpen","openModalToggle","render","h","Host","key","ref","el","class","label","headingText","light","size","outdatedQRMessage","expiresInMessage","qrAriaLabel","instructionPhoneLineOne","instructionPhoneLineTwo","instructionPhoneLineThree"],"sources":["src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.scss?tag=pn-level-up-modal","src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.tsx"],"sourcesContent":["@import \"../../../../globals/main.scss\";\n\npn-level-up-modal {\n    .pn-modal-header {\n        z-index: 0;\n    }\n\n    .pn-modal {\n        max-width: 63.1rem;\n\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            max-height: 100%;\n        }\n    }\n\n    .level-up-computer-modal .pn-modal-content .modal-content {\n        justify-self: center;\n        display: flex;\n        flex-wrap: wrap;\n        flex-direction: column;\n        gap: 2em;\n        margin: 2em;\n        width: max-content;\n        align-content: space-around;\n    }\n\n    .pn-modal-label {\n        margin: 2.2rem 0;\n\n        @media screen and (max-width: $min-width-md) {\n            justify-self: center;\n        }\n    }\n\n    .level-up-phone-modal .pn-modal-content {\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            align-content: center;\n            align-items: center;\n        }\n        \n        pn-spinner {\n            justify-self: center;\n        }\n\n        .modal-content-container {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            gap: 1em;\n\n            @media screen and (max-width: $min-width-md) {\n                flex-direction: column;\n            }\n        }\n\n        .modal-content-list {\n            ol {\n                font-size: 1.8rem;\n                line-height: 1.6;\n                margin-left: 2rem;\n                padding-left: 2rem;\n            }\n\n            li {\n                margin-bottom: 1rem;\n            }\n\n            @media screen and (max-width: $min-width-md) {\n                ol {\n                    font-size: 1.6rem;\n                }\n            }\n        }\n    }\n}","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\nimport { DeviceType } from '../types';\nimport { PnLevelUpService } from '../pn-level-up.service';\n\n@Component({\n  tag: 'pn-level-up-modal',\n  styleUrl: 'pn-level-up-modal.scss',\n})\n\nexport class PnLevelUpModal {\n  @Prop({ reflect: true }) open: 'open' | 'close';\n  @Prop() endpoint: string;\n  @Prop() instructionPhoneLineOne: string;\n  @Prop() instructionPhoneLineTwo: string;\n  @Prop() instructionPhoneLineThree: string;\n  @Prop() headingText: string;\n  @Prop() outdatedQRMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() system: DeviceType;\n  @Prop() qrAriaLabel: string;\n\n  @State() private openModalToggle: boolean;\n  @State() private isLoading: boolean = true;\n\n  private _bankIDUrl: string;\n  private _levelupService: PnLevelUpService;\n  private _levelUpModal: HTMLElement;\n  \n  componentWillLoad() { \n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this.updateOpen();\n  }\n\n  private updateBankIDUrl = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this.system, null);\n    this.isLoading = false;\n    this._bankIDUrl = authResponse.url;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if(response.code === 200) {\n        this._levelupService.newLevelupUser();\n      }\n    });\n  }\n\n  @Watch('open')\n  updateOpen () {\n    if (this.open === 'open') {\n      this.handleOpen();\n      this.openModalToggle = true;\n      if (this._levelUpModal) {\n        if ((this._levelUpModal as any).open === true) {\n          (this._levelUpModal as any).open = false;\n        }\n        (this._levelUpModal as any).open = true;\n      }\n    }\n    else {\n      this.openModalToggle = false;\n    }\n  }\n\n  private handleOpen = async () => {\n    await this.updateBankIDUrl();\n  }\n\n  render() {\n    return (\n      <Host>\n        <pn-modal\n          ref={el => this._levelUpModal = el as HTMLElement}\n          open={this.openModalToggle}\n          class=\"level-up-phone-modal\"\n          allow-overflow='true'\n          label={this.headingText}>\n          {this.isLoading ?\n            (<pn-spinner light=\"false\" size=\"1.5\"></pn-spinner>) : (\n              <div class=\"modal-content-container\">\n                <div class=\"modal-content-qr\">\n                  <pn-qr-code-generator\n                    url={this._bankIDUrl}\n                    countdown-seconds=\"30\"\n                    outdated-message={this.outdatedQRMessage}\n                    expires-in-message={this.expiresInMessage}\n                    update-code-every-second={true}\n                    aria-label={this.qrAriaLabel}>\n                  </pn-qr-code-generator>\n                </div>\n                <div class=\"modal-content-list\">\n                  <ol>\n                    {this.instructionPhoneLineOne && <li>{this.instructionPhoneLineOne}</li>}\n                    {this.instructionPhoneLineTwo && <li>{this.instructionPhoneLineTwo}</li>}\n                    {this.instructionPhoneLineThree && <li>{this.instructionPhoneLineThree}</li>}\n                  </ol>\n                </div>\n              </div>\n            )}\n        </pn-modal>\n      </Host>\n    );\n  }\n}"],"mappings":"sIAAA,MAAMA,EAAoB,+zDAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,uXAaa,I,CAE9BC,WACAC,gBACAC,cAER,iBAAAC,GACEC,KAAKH,gBAAkB,IAAII,EAAiBD,KAAKE,UACjDF,KAAKG,Y,CAGCC,gBAAkBC,UACxBL,KAAKM,UAAY,KACjB,IAAIC,QAAqBP,KAAKH,gBAAgBW,iBAAiBR,KAAKS,OAAQ,MAC5ET,KAAKM,UAAY,MACjBN,KAAKJ,WAAaW,EAAaG,UACzBV,KAAKH,gBAAgBc,kBAAkBJ,EAAaK,GAAI,KAAM,MAAMC,MAAMC,IAC9E,GAAGA,EAASC,OAAS,IAAK,CACxBf,KAAKH,gBAAgBmB,gB,IAEvB,EAIJ,UAAAb,GACE,GAAIH,KAAKiB,OAAS,OAAQ,CACxBjB,KAAKkB,aACLlB,KAAKmB,gBAAkB,KACvB,GAAInB,KAAKF,cAAe,CACtB,GAAKE,KAAKF,cAAsBmB,OAAS,KAAM,CAC5CjB,KAAKF,cAAsBmB,KAAO,K,CAEpCjB,KAAKF,cAAsBmB,KAAO,I,MAGlC,CACHjB,KAAKmB,gBAAkB,K,EAInBD,WAAab,gBACbL,KAAKI,iBAAiB,EAG9B,MAAAgB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,YAAAE,IAAA,2CACEC,IAAKC,GAAMzB,KAAKF,cAAgB2B,EAChCR,KAAMjB,KAAKmB,gBACXO,MAAM,uBAAsB,iBACb,OACfC,MAAO3B,KAAK4B,aACX5B,KAAKM,UACHe,EAAA,cAAYQ,MAAM,QAAQC,KAAK,QAC9BT,EAAA,OAAKK,MAAM,2BACTL,EAAA,OAAKK,MAAM,oBACTL,EAAA,wBACEX,IAAKV,KAAKJ,WAAU,oBACF,KAAI,mBACJI,KAAK+B,kBAAiB,qBACpB/B,KAAKgC,iBAAgB,2BACf,KAAI,aAClBhC,KAAKiC,eAGrBZ,EAAA,OAAKK,MAAM,sBACTL,EAAA,UACGrB,KAAKkC,yBAA2Bb,EAAA,UAAKrB,KAAKkC,yBAC1ClC,KAAKmC,yBAA2Bd,EAAA,UAAKrB,KAAKmC,yBAC1CnC,KAAKoC,2BAA6Bf,EAAA,UAAKrB,KAAKoC,+B","ignoreList":[]}

package/pn-market-web-components/p-e733f44f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,d as t}from"./p-82546a44.js";import{H as n}from"./p-0b920554.js";const a="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}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}.pn-usp-simple{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}.pn-usp-simple .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}.pn-usp-simple .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}.pn-usp-simple .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem);padding:0 6rem}.pn-usp-simple .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.pn-usp-simple .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}.pn-usp-simple .image-container .image{border-radius:50%}@media (min-width: 768px){.pn-usp-simple{flex-direction:row;align-items:center}.pn-usp-simple .content{max-width:60%}.pn-usp-simple .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}.pn-usp-simple .image-container{flex:clamp(15rem, 3vw, 20rem);margin-bottom:0}.pn-usp-simple .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){.pn-usp-simple{max-width:1140px;margin:0 auto}.pn-usp-simple .content{max-width:50%}.pn-usp-simple .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){.pn-usp-simple{max-width:1400px}.pn-usp-simple .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";const s=a;const p=class{constructor(i){e(this,i);this.heading=undefined;this.headingLevel="h2";this.preamble=undefined;this.ctaButtonsLabel=undefined;this.primaryButtonText=undefined;this.primaryButtonUrl=undefined;this.primaryButtonIconSvg=undefined;this.secondaryButtonText=undefined;this.secondaryButtonUrl=undefined;this.pnIllustrationSvg=undefined;this.imageUrl=undefined;this.imageAltText=undefined}get hasPrimaryButton(){return Boolean(this.primaryButtonText&&this.primaryButtonUrl)}get hasSecondaryButton(){return Boolean(this.secondaryButtonText&&this.secondaryButtonUrl)}renderButton(e,t){const n=t?"primary":"secondary";return i("pn-button",{icon:e.iconSvg,"left-icon":Boolean(e.iconSvg),href:e.url,class:"btn","data-button-type":n,appearance:t?"default":"light"},e.text)}render(){const e=this.hasPrimaryButton||this.hasSecondaryButton;const a="usp-heading";return i(t,{key:"86a81876d75377462d4a94cc9ca0d8a7b8150791"},i("div",{key:"59568c012efdb309dc7e9b3ed64a0a344ab28360",class:"pn-usp-simple",role:"region","aria-labelledby":this.heading?a:undefined},i("div",{key:"54685035dc6a2eba2130693961b87fe315023f27",class:"content"},this.heading&&i(n,{key:"1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb",id:a,level:this.headingLevel,cssClass:"heading"},this.heading),this.preamble&&i("div",{key:"d143480b02ecb45130ac2a825e392dbe7c0f3128",class:"preamble"},this.preamble),e&&i("div",{key:"f618b4b041cf79eac3b67dd6d3c26697e29a72c6",class:"cta",role:"group","aria-label":this.ctaButtonsLabel},this.hasPrimaryButton&&this.renderButton({text:this.primaryButtonText,url:this.primaryButtonUrl,iconSvg:this.primaryButtonIconSvg},true),this.hasSecondaryButton&&this.renderButton({text:this.secondaryButtonText,url:this.secondaryButtonUrl},false))),i("div",{key:"cb22f2bd663e90bd009fac12d4662c729bffdd68",class:"image-container","aria-hidden":!this.imageAltText},this.imageUrl&&i("img",{key:"f76f0a6cbdb0cdc8847f062410f7c20c847d8a47",class:"image graphics",src:this.imageUrl,alt:this.imageAltText||"",loading:"lazy"}),!this.imageUrl&&this.pnIllustrationSvg&&i("pn-illustration",{key:"5653434436d33c04820f3ee201fd1e2853008e1b",class:"illustration graphics",illustration:this.pnIllustrationSvg,role:"presentation"}))))}};p.style=s;export{p as pn_usp_simple};
+//# sourceMappingURL=p-e733f44f.entry.js.map

package/pn-market-web-components/p-e733f44f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pnUspSimpleCss","PnUspSimpleStyle0","PnUspSimple","hasPrimaryButton","Boolean","this","primaryButtonText","primaryButtonUrl","hasSecondaryButton","secondaryButtonText","secondaryButtonUrl","renderButton","props","isPrimary","buttonType","h","icon","iconSvg","href","url","class","appearance","text","render","hasButtons","headingId","Host","key","role","heading","undefined","HeadingTag","id","level","headingLevel","cssClass","preamble","ctaButtonsLabel","primaryButtonIconSvg","imageAltText","imageUrl","src","alt","loading","pnIllustrationSvg","illustration"],"sources":["src/components/widgets/pn-usp-simple/pn-usp-simple.scss?tag=pn-usp-simple","src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:root {\n  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\n.pn-usp-simple {\n  background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n  color: $gray900;\n  display: flex;\n  flex-direction: column-reverse;\n  max-width: 100%;\n  padding: clamp(2rem, 5vw, 5rem);\n\n  .heading {\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 700;\n    margin-bottom: 1rem;\n  }\n\n  .preamble {\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    margin-top: var(--usp-preamble-margin);\n    margin-bottom: var(--usp-preamble-margin);\n  }\n\n  .cta {\n    display: flex;\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    flex-direction: column;\n    gap: clamp(1rem, 4vw, 1.2rem);\n    padding: 0 6rem;\n  }\n\n  .image-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 2rem;\n\n    .graphics {\n      --pn-width: #{$graphicsWidth} !important;\n      --pn-height: #{$graphicsWidth} !important;\n    }\n\n    .image {\n      border-radius: 50%;\n    }\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-usp-simple {\n    flex-direction: row;\n    align-items: center;\n\n    .content {\n      max-width: 60%;\n    }\n\n    .cta {\n      flex-direction: row;\n      gap: clamp(2rem, 3vw, 3rem);\n      padding: 0;\n    }\n\n    .image-container {\n      flex: clamp(15rem, 3vw, 20rem);\n      margin-bottom: 0;\n\n      .graphics {\n        --pn-width: #{$graphicsWidthMd};\n        --pn-height: #{$graphicsWidthMd};\n      }\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-usp-simple {\n    max-width: 1140px;\n    margin: 0 auto;\n\n    .content {\n      max-width: 50%;\n    }\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXl};\n        --pn-height: #{$graphicsWidthXl};\n      }\n    }\n  }\n}\n\n@media (min-width: 1640px) {\n  .pn-usp-simple {\n    max-width: 1400px;\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXxl};\n        --pn-height: #{$graphicsWidthXxl};\n      }\n    }\n  }\n}\n","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n  text: string;\n  url: string;\n  iconSvg?: string;\n}\n\n@Component({\n  tag: 'pn-usp-simple',\n  styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() ctaButtonsLabel?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n\n  private get hasPrimaryButton(): boolean {\n    return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n  }\n\n  private get hasSecondaryButton(): boolean {\n    return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n  }\n\n  private renderButton(props: ButtonProps, isPrimary: boolean) {\n    const buttonType = isPrimary ? 'primary' : 'secondary';\n    return (\n      <pn-button\n        icon={props.iconSvg}\n        left-icon={Boolean(props.iconSvg)}\n        href={props.url}\n        class=\"btn\"\n        data-button-type={buttonType}\n        appearance={isPrimary ? 'default' : 'light'}\n      >\n        {props.text}\n      </pn-button>\n    );\n  }\n\n  render() {\n    const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n    const headingId = 'usp-heading';\n\n    return (\n      <Host>\n        <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n          <div class=\"content\">\n            {this.heading && (\n              <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                {this.heading}\n              </HeadingTag>\n            )}\n\n            {this.preamble && (\n              <div class=\"preamble\">\n                {this.preamble}\n              </div>\n            )}\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n                {this.hasPrimaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.primaryButtonText!,\n                      url: this.primaryButtonUrl!,\n                      iconSvg: this.primaryButtonIconSvg,\n                    },\n                    true,\n                  )}\n                {this.hasSecondaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.secondaryButtonText!,\n                      url: this.secondaryButtonUrl!,\n                    },\n                    false,\n                  )}\n              </div>\n            )}\n          </div>\n          <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n            {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAiB,45DACvB,MAAAC,EAAeD,E,MCaFE,EAAW,M,kEAEe,K,sTAYrC,oBAAYC,GACV,OAAOC,QAAQC,KAAKC,mBAAqBD,KAAKE,iB,CAGhD,sBAAYC,GACV,OAAOJ,QAAQC,KAAKI,qBAAuBJ,KAAKK,mB,CAG1C,YAAAC,CAAaC,EAAoBC,GACvC,MAAMC,EAAaD,EAAY,UAAY,YAC3C,OACEE,EAAA,aACEC,KAAMJ,EAAMK,QAAO,YACRb,QAAQQ,EAAMK,SACzBC,KAAMN,EAAMO,IACZC,MAAM,MAAK,mBACON,EAClBO,WAAYR,EAAY,UAAY,SAEnCD,EAAMU,K,CAKb,MAAAC,GACE,MAAMC,EAAanB,KAAKF,kBAAoBE,KAAKG,mBACjD,MAAMiB,EAAY,cAElB,OACEV,EAACW,EAAI,CAAAC,IAAA,4CACHZ,EAAA,OAAAY,IAAA,2CAAKP,MAAM,gBAAgBQ,KAAK,SAAQ,kBAAkBvB,KAAKwB,QAAUJ,EAAYK,WACnFf,EAAA,OAAAY,IAAA,2CAAKP,MAAM,WACRf,KAAKwB,SACJd,EAACgB,EAAU,CAAAJ,IAAA,2CAACK,GAAIP,EAAWQ,MAAO5B,KAAK6B,aAAcC,SAAS,WAC3D9B,KAAKwB,SAITxB,KAAK+B,UACJrB,EAAA,OAAAY,IAAA,2CAAKP,MAAM,YACRf,KAAK+B,UAITZ,GACCT,EAAA,OAAAY,IAAA,2CAAKP,MAAM,MAAMQ,KAAK,QAAO,aAAavB,KAAKgC,iBAC5ChC,KAAKF,kBACJE,KAAKM,aACH,CACEW,KAAMjB,KAAKC,kBACXa,IAAKd,KAAKE,iBACVU,QAASZ,KAAKiC,sBAEhB,MAEHjC,KAAKG,oBACJH,KAAKM,aACH,CACEW,KAAMjB,KAAKI,oBACXU,IAAKd,KAAKK,oBAEZ,SAKVK,EAAA,OAAAY,IAAA,2CAAKP,MAAM,kBAAiB,eAAef,KAAKkC,cAC7ClC,KAAKmC,UAAYzB,EAAA,OAAAY,IAAA,2CAAKP,MAAM,iBAAiBqB,IAAKpC,KAAKmC,SAAUE,IAAKrC,KAAKkC,cAAgB,GAAII,QAAQ,UACtGtC,KAAKmC,UAAYnC,KAAKuC,mBAAqB7B,EAAA,mBAAAY,IAAA,2CAAiBP,MAAM,wBAAwByB,aAAcxC,KAAKuC,kBAAmBhB,KAAK,mB","ignoreList":[]}

package/pn-market-web-components/p-e8622338.entry.js

@@ -0,0 +1,2 @@
+import{r as t,g as c,h as e,d as n}from"./p-82546a44.js";const a="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-quick-cta{width:100%}pn-quick-cta .quick-cta__content{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:2.4rem;width:100%}pn-quick-cta .quick-cta__content .quick-cta__content__heading{padding:0;margin:0;font-size:2.4rem;font-weight:500;color:#0d234b}@media screen and (max-width: 768px){pn-quick-cta .quick-cta__content .quick-cta__content__heading{display:none}}@media screen and (min-width: 1640px){pn-quick-cta .quick-cta__content .quick-cta__content__heading{font-size:2.8rem;font-weight:700}}pn-quick-cta .quick-cta__content .quick-cta__content__preamble{font-weight:400;font-size:1.6rem;line-height:140%;padding:0;margin:0;color:#2d2013}pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a{white-space:nowrap}pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a:hover{text-decoration:none}pn-spotlight[data-cta-color=business] .quick-cta__content__heading{color:#f06365}pn-spotlight[data-cta-color=business] .quick-cta__content__preamble{color:#effbff}pn-spotlight[data-cta-color=private] .quick-cta__content__heading,pn-spotlight[data-cta-color=private] .quick-cta__content__preamble{color:#ffffff}pn-spotlight[data-cta-color=hybrid] .quick-cta__content__heading{color:#005d92}pn-spotlight[data-cta-color=hybrid] .quick-cta__content__preamble{color:#2d2013}";const i=a;const o=class{constructor(c){t(this,c);this.heading=null;this.preamble=null}get hostElement(){return c(this)}render(){return e(n,{key:"ab5954c7894705ca1d6faeb541b63ef9a28ce39e"},e("div",{key:"2fe82eb368e7c6f13a1e541e54f4f2679b99ed20",class:"quick-cta__content"},this.heading&&e("h2",{key:"7f766e4fb92eaa1e9ecc5ae90ec850dd80348585",class:"quick-cta__content__heading"},this.heading),e("p",{key:"1ac42d8d5d8c4995d5122b1f1fa68b42915b18b9",class:"quick-cta__content__preamble"},this.preamble),e("slot",{key:"85be5b2684e761d02886325cd7b3b55a01dbacb4",name:"quick-cta-cta"})))}};o.style=i;export{o as pn_quick_cta};
+//# sourceMappingURL=p-e8622338.entry.js.map

package/pn-market-web-components/{p-b9505c69.entry.js.map → p-e8622338.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnQuickCtaCss","PnQuickCtaStyle0","PnQuickCta","render","h","Host","key","class","this","heading","preamble","name"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n  width: 100%;\n\n  .quick-cta__content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 2.4rem;\n\n    width: 100%;\n\n    .quick-cta__content__heading {\n      padding: 0;\n      margin: 0;\n\n      font-size: 2.4rem;\n      font-weight: 500;\n      color: $blue900;\n\n      @media screen and (max-width: $min-width-md) {\n        display: none;\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\n        font-size: 2.8rem;\n        font-weight: 700;\n      }\n    }\n\n    .quick-cta__content__preamble {\n      font-weight: 400;\n      font-size: 1.6rem;\n      line-height: 140%;\n\n      padding: 0;\n      margin: 0;\n      color: $gray900;\n    }\n\n    [slot='quick-cta-cta'] {\n      a {\n        white-space: nowrap;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n  .quick-cta__content__heading {\n    color: $coral400;\n  }\n  .quick-cta__content__preamble {\n    color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  .quick-cta__content__heading,\n  .quick-cta__content__preamble {\n    color: $white;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  .quick-cta__content__heading {\n    color: $blue700;\n  }\n  .quick-cta__content__preamble {\n    color: $gray900;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quick-cta',\n  styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"quick-cta__content\">\n          { this.heading && <h2 class=\"quick-cta__content__heading\">{this.heading}</h2> }\n          <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n          <slot name=\"quick-cta-cta\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,y2CACtB,MAAAC,EAAeD,E,MCKFE,EAAU,M,sCAEK,K,cACC,I,kCAE3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACPC,KAAKC,SAAWL,EAAA,MAAAE,IAAA,2CAAIC,MAAM,+BAA+BC,KAAKC,SAChEL,EAAA,KAAAE,IAAA,2CAAGC,MAAM,gCAAgCC,KAAKE,UAC9CN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,mB","ignoreList":[]}
+{"version":3,"names":["pnQuickCtaCss","PnQuickCtaStyle0","PnQuickCta","render","h","Host","key","class","this","heading","preamble","name"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n  width: 100%;\n\n  .quick-cta__content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 2.4rem;\n\n    width: 100%;\n\n    .quick-cta__content__heading {\n      padding: 0;\n      margin: 0;\n\n      font-size: 2.4rem;\n      font-weight: 500;\n      color: $blue900;\n\n      @media screen and (max-width: $min-width-md) {\n        display: none;\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\n        font-size: 2.8rem;\n        font-weight: 700;\n      }\n    }\n\n    .quick-cta__content__preamble {\n      font-weight: 400;\n      font-size: 1.6rem;\n      line-height: 140%;\n\n      padding: 0;\n      margin: 0;\n      color: $gray900;\n    }\n\n    [slot='quick-cta-cta'] {\n      a {\n        white-space: nowrap;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n  .quick-cta__content__heading {\n    color: $coral400;\n  }\n  .quick-cta__content__preamble {\n    color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  .quick-cta__content__heading,\n  .quick-cta__content__preamble {\n    color: $white;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  .quick-cta__content__heading {\n    color: $blue700;\n  }\n  .quick-cta__content__preamble {\n    color: $gray900;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quick-cta',\n  styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"quick-cta__content\">\n          { this.heading && <h2 class=\"quick-cta__content__heading\">{this.heading}</h2> }\n          <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n          <slot name=\"quick-cta-cta\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,krDACtB,MAAAC,EAAeD,E,MCKFE,EAAU,M,sCAEK,K,cACC,I,kCAE3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACPC,KAAKC,SAAWL,EAAA,MAAAE,IAAA,2CAAIC,MAAM,+BAA+BC,KAAKC,SAChEL,EAAA,KAAAE,IAAA,2CAAGC,MAAM,gCAAgCC,KAAKE,UAC9CN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,mB","ignoreList":[]}

package/pn-market-web-components/p-eb21f772.entry.js

@@ -0,0 +1,2 @@
+import{r as e,g as i,h as o}from"./p-82546a44.js";import{H as a}from"./p-0b920554.js";const n="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-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container picture{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";const t=n;const c=class{constructor(i){e(this,i);this.blockHeight=null;this.imageSrc=null;this.imageSrcSmallScreenFormat=undefined;this.imageAltText="";this.videoSrc=null;this.parallaxScroll=false;this.showOverlayLayer=false;this.customOverlayBackground=null;this.animateOverlayBackground=false;this.scrollSnapBlock=false;this.fixedBackground=false;this.blockHeading=null;this.blockHeadingLevel="h2";this.blockPreamble=null;this.marginBottom=false;this.pnPlayOnScrollObserverOptions={root:document,threshold:1,rootMargin:"220px 0px 220px 0px"};this.calculatedBlockHeight=undefined;this.hasButtonSlot=true}get block(){return i(this)}get hasVideo(){if(this.videoSrc!==null&&this.videoSrc!=="undefined"){return true}return false}get hasImage(){if(this.imageSrc!==null&&this.imageSrc!=="undefined"){return true}return false}observerScroll;observerSnap;componentWillLoad(){this.hasButtonSlot=!!this.block.querySelector('[slot="cta-button"]')}async componentDidLoad(){const e=document.getElementById("scroll-trigger");this.calculatedBlockHeight=this.block.offsetHeight;const i=this.block.querySelector("#mediaBlockOverlay");if(this.customOverlayBackground!=null||this.customOverlayBackground!="undefined"){i.style.background=`${this.customOverlayBackground}`}if(this.parallaxScroll){this.observerScroll=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){window.addEventListener("scroll",this.handleScroll)}else{window.removeEventListener("scroll",this.handleScroll)}}))}),{rootMargin:`0px 0px`});this.observerScroll.observe(e)}if(this.scrollSnapBlock){this.observerSnap=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){if(this.block instanceof HTMLElement){setTimeout((()=>{this.block.scrollIntoView({behavior:"smooth",block:"start"})}),1e3)}else{console.error("this.block is not a valid HTMLElement")}}}))}),{root:document,rootMargin:"100px 0px 100px 0px",threshold:0});this.observerSnap.observe(e)}}disconnectedCallback(){if(this.observerScroll){this.observerScroll.disconnect()}if(this.observerSnap){this.observerSnap.disconnect()}window.removeEventListener("scroll",this.handleScroll)}handleScroll=()=>{const e=this.block.firstElementChild;const i=this.block.querySelector("#scroll-trigger");const o=this.block.querySelector("#overlayed-button-pause-video");const a=i.getBoundingClientRect().top;const n=e.offsetHeight;const t=n-a;const c=.3;const d=.2;const l=this.block.querySelector(".media-block__media-container");const m=this.block.querySelector(".media-block__content-container");if(l!=null){l.style.transform=`translate(0, ${t*(.1+d)}px)`;if(o!=null){o.style.transform=`translate(0, ${-t*(.3+d)}px)`}}if(m){m.style.transform=`translate(0, ${t*(.5+c)}px)`;const e=Math.max(0,1-t/600);m.style.opacity=`${e}`}};render(){const{showOverlayLayer:e,fixedBackground:i,blockHeight:n,scrollSnapBlock:t,hasButtonSlot:c,hasVideo:d,hasImage:l,animateOverlayBackground:m,marginBottom:b}=this;const h=d;const r=l;const k=["media-block",n?`media-block--height-${n}`:"",e?"media-block--with-overlay":"",m?`media-block--animate-overlay-background`:"",h?"media-block--video":"",t?"scroll-snap":"no-scroll-snap",i?"media-block--fixed-background":"",b?"media-block--margin-bottom":""].join(" ");const s={root:this.blockHeight==="100svh"?this.block:null,threshold:[0,.5,1]};return o("div",{key:"f5ae835cc4299ae08a0c781368c6407f359f8c8e",class:k},o("div",{key:"c7ddb415c0f9fc3ea505dc38f0a1a6ed61eba35b",class:"media-block__block-container"},o("div",{key:"82e5ebb277e31a683eea026dea5481655076dfb1",class:"media-block__media-container"},h?o("pn-play-on-scroll",{"show-overlay":this.showOverlayLayer,observerOptions:s,"video-src":this.videoSrc}):r?o("picture",null,o("source",{media:"(min-width: 1400px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1224px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1140px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1023px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 768px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 500px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("img",{src:this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc,alt:this.imageAltText!=="undefined"?this.imageAltText:"",role:this.imageAltText!=="undefined"?"img":"presentation","aria-hidden":this.imageAltText!=="undefined"?"false":"true"})):null),!h&&o("div",{key:"8d2090b3845bce11806a486c714b7b43b5519880",class:"media-block__overlay-filter",id:"mediaBlockOverlay"}),(this.blockHeading||this.blockPreamble)&&o("div",{key:"9919ba7c0af23dd1323202badbb68c302d037df1",class:"media-block__content-container"},this.blockHeading&&o(a,{key:"5476764a9c75666dc7bdf45c7b7211a071cf78cd",level:this.blockHeadingLevel,cssClass:"media-block__block-heading"},this.blockHeading),this.blockPreamble&&o("p",{key:"d8b7c40d8465c45e8149560446081cc272675fef",class:"media-block__preamble"},this.blockPreamble),c&&o("div",{key:"1273888646c5e960ce36f4b3ecf03cefe16bc6a2",class:"media-block__cta-link"},o("slot",{key:"80d7f2fe2f1657222d385d3e5263c698ddcfeff6",name:"cta-button"})))),o("div",{key:"19f99b2fffe0d4a9152e8cf956aee689978f502f",id:"scroll-trigger"}))}};c.style=t;export{c as pn_media_block};
+//# sourceMappingURL=p-eb21f772.entry.js.map

package/pn-market-web-components/p-eb21f772.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pnMediaBlockCss","PnMediaBlockStyle0","PnmediaBlock","undefined","root","document","threshold","rootMargin","hasVideo","this","videoSrc","hasImage","imageSrc","observerScroll","observerSnap","componentWillLoad","hasButtonSlot","block","querySelector","componentDidLoad","scrollTrigger","getElementById","calculatedBlockHeight","offsetHeight","overlayElement","customOverlayBackground","style","background","parallaxScroll","IntersectionObserver","entries","forEach","entry","isIntersecting","window","addEventListener","handleScroll","removeEventListener","observe","scrollSnapBlock","HTMLElement","setTimeout","scrollIntoView","behavior","console","error","disconnectedCallback","disconnect","mediaBlockElement","firstElementChild","videoPauseButton","scrollTriggerTop","getBoundingClientRect","top","mediaBlockElementHeight","scrollPosition","parallaxSpeedContent","parallaxSpeedMedia","mediaContainer","content","transform","opacity","Math","max","render","showOverlayLayer","fixedBackground","blockHeight","animateOverlayBackground","marginBottom","isVideo","isImage","classes","join","pnPlayOnScrollObserverOptions","h","key","class","observerOptions","media","srcSet","imageSrcSmallScreenFormat","src","alt","imageAltText","role","id","blockHeading","blockPreamble","HeadingTag","level","blockHeadingLevel","cssClass","name"],"sources":["src/components/media/pn-media-block/pn-media-block.scss?tag=pn-media-block","src/components/media/pn-media-block/pn-media-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$animationDuration: 20s;\n\npn-media-block {\n  .media-block {\n    .media-block__block-container {\n      display: grid;\n      overflow: hidden;\n    }\n    .media-block__media-container,\n    .media-block__content-container,\n    .media-block__overlay-filter {\n      grid-area: 1 / 1;\n      width: 100%;\n      position: relative;\n    }\n\n    .media-block__media-container {\n      height: 100vh;\n      overflow: hidden;\n      position: relative;\n\n      img,\n      video {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        object-fit: cover;\n        pointer-events: none;\n        max-width: 100%;\n        max-height: none;\n        height: 100%;\n        width: 100%;\n        pointer-events: none;\n      }\n\n      pn-play-on-scroll {\n        width: 100%;\n        height: 100%;\n      }\n\n      .scroll-wrapper {\n        width: 100%;\n        height: 100%;\n      }\n\n      [slot='scroll-affected'] {\n        width: 100%;\n        height: 100%;\n        display: flex;\n      }\n\n      .scroll-wrapper,\n      .scroll-affected {\n        width: 100%;\n        height: 100%;\n        display: flex;\n      }\n      video {\n        width: 100%;\n        height: 100%;\n      }\n    }\n\n    .media-block__overlay-filter {\n      z-index: 2;\n    }\n\n    .media-block__content-container {\n      z-index: 3;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: opacity 1s;\n      flex-direction: column;\n      margin: 0 auto;\n      padding: 3.4rem 0;\n\n      @include inner-container;\n\n      @media screen and (min-width: $min-width-lg) {\n        padding: 6.4rem 0;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        padding: 7.2rem 0;\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\n        padding: 8rem 0;\n      }\n\n      .media-block__block-heading {\n        max-width: 100rem;\n        text-wrap: balance;\n        color: white;\n        font-size: 3.2rem;\n        text-align: center;\n        font-weight: 700;\n        line-height: 1.1;\n        margin-bottom: 3rem;\n\n        @media screen and (min-width: $min-width-sm) {\n          font-size: 4rem;\n        }\n\n        @media screen and (min-width: $min-width-md) {\n          font-size: 4.8rem;\n        }\n\n        @media screen and (min-width: $min-width-lg) {\n          font-size: 5.6rem;\n        }\n\n        @media screen and (min-width: $min-width-xl) {\n          font-size: 8rem;\n        }\n\n        @media screen and (min-width: $min-width-xxl) {\n          font-size: 8.8rem;\n        }\n      }\n\n      .media-block__preamble {\n        max-width: 80rem;\n        max-width: 80ch;\n        text-wrap: balance;\n        display: flex;\n        color: white;\n        font-size: 1.8rem;\n        text-align: center;\n        font-weight: 300;\n\n        @media screen and (min-width: $min-width-sm) {\n          font-size: 2rem;\n        }\n\n        @media screen and (min-width: $min-width-xl) {\n          font-size: 2.4rem;\n        }\n\n        @media screen and (min-width: $min-width-xxl) {\n          font-weight: 500;\n        }\n      }\n\n      .media-block__cta-link {\n        margin-top: 3rem;\n      }\n    }\n  }\n\n  .media-block--height-100svh {\n    min-height: 100vh;\n\n    @supports (height: 100svh) {\n      height: 100svh;\n    }\n\n    .media-block__block-container {\n      height: 100vh;\n\n      @supports (max-height: 100svh) {\n        max-height: 100svh;\n      }\n\n      .media-block__media-container,\n      .media-block__content-container,\n      .media-block__overlay-filter {\n        height: 100vh;\n\n        @supports (max-height: 100svh) {\n          max-height: 100svh;\n        }\n      }\n\n      .media-block__media-container picture {\n        height: 100vh;\n\n        @supports (max-height: 100svh) {\n          max-height: 100svh;\n        }\n      }\n    }\n  }\n\n  .media-block--height-65svh {\n    min-height: 65svh;\n    overflow: auto;\n\n    .media-block__block-container {\n      height: 65vh;\n\n      @supports (max-height: 100svh) {\n        max-height: 65svh;\n      }\n\n      .media-block__media-container,\n      .media-block__content-container,\n      .media-block__overlay-filter {\n        height: 65vh;\n\n        @supports (max-height: 100svh) {\n          max-height: 65svh;\n        }\n      }\n    }\n\n    .media-block__media-container picture {\n      max-height: none !important;\n      height: auto !important;\n    }\n  }\n\n  .media-block--height-dynamic {\n    height: auto;\n    overflow: auto;\n\n    .media-block__block-container {\n      height: auto;\n      max-height: none;\n\n      .media-block__media-container,\n      .media-block__content-container,\n      .media-block__overlay-filter {\n        height: auto;\n        max-height: none;\n      }\n    }\n  }\n\n  .media-block--with-overlay {\n    .media-block__block-container .media-block__overlay-filter {\n      z-index: 2;\n      background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n    }\n  }\n\n  .media-block--fixed-background {\n    .media-block__block-container {\n      .media-block__media-container,\n      .media-block__overlay-filter {\n        position: relative;\n        overflow: hidden;\n        top: 0;\n        width: 100%;\n        display: flex !important;\n        clip-path: inset(0);\n      }\n\n      .media-block__media-container {\n        picture {\n          position: absolute;\n          top: 0;\n          width: 100%;\n          display: flex !important;\n          height: 100%;\n\n          img {\n            position: fixed;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            z-index: 1;\n          }\n        }\n      }\n    }\n  }\n\n  .media-block--video {\n    .media-block__content-container {\n      max-width: 80%;\n    }\n  }\n\n  .media-block--animate-overlay-background {\n    .media-block__overlay-filter {\n      background-size: 200% 200% !important;\n      animation: overlayBackgroundAnimation $animationDuration ease infinite;\n    }\n  }\n\n  @keyframes overlayBackgroundAnimation {\n    0% {\n      background-position: 100% 100%;\n    }\n    50% {\n      background-position: 50% 60%;\n    }\n    100% {\n      background-position: 100% 100%;\n    }\n  }\n\n  .media-block--margin-bottom {\n    margin-bottom: 3.2rem;\n\n    @media screen and (min-width:$min-width-md) {\n      margin-bottom: 4rem;\n    }\n\n    @media screen and (min-width:$min-width-lg) {\n      margin-bottom: 5.6rem;\n    }\n\n    @media screen and (min-width:$min-width-xl) {\n      margin-bottom: 7.2rem;\n    }\n  }\n}\n","import { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Element, Prop, h, State } from '@stencil/core';\n\nfunction userPrefersReducedMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n@Component({\n  tag: 'pn-media-block',\n  styleUrl: 'pn-media-block.scss',\n})\nexport class PnmediaBlock {\n  @Prop() blockHeight: string = null;\n  @Prop() imageSrc?: string = null;\n  @Prop() imageSrcSmallScreenFormat?: string = undefined;\n  @Prop() imageAltText?: string = '';\n  @Prop() videoSrc?: string = null;\n  @Prop() parallaxScroll: boolean = false;\n  @Prop() showOverlayLayer: boolean = false;\n  @Prop() customOverlayBackground?: string = null;\n  @Prop() animateOverlayBackground: boolean = false;\n  @Prop() scrollSnapBlock: boolean = false;\n  @Prop() fixedBackground: boolean = false;\n  @Prop() blockHeading?: string = null;\n  @Prop() blockHeadingLevel?: string = 'h2';\n  @Prop() blockPreamble?: string = null;\n  @Prop() marginBottom?: boolean = false;\n\n  @State() pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n    root: document,\n    threshold: 1,\n    rootMargin: '220px 0px 220px 0px',\n  };\n\n  @State() calculatedBlockHeight: number;\n  @State() hasButtonSlot: boolean = true;\n\n  @Element() block: HTMLElement;\n\n  get hasVideo() {\n    if (this.videoSrc !== null && this.videoSrc !== 'undefined') {\n      return true;\n    }\n    return false;\n  }\n\n  get hasImage() {\n    if (this.imageSrc !== null && this.imageSrc !== 'undefined') {\n      return true;\n    }\n    return false;\n  }\n\n  private observerScroll: IntersectionObserver;\n  private observerSnap: IntersectionObserver;\n\n  componentWillLoad() {\n    this.hasButtonSlot = !!this.block.querySelector('[slot=\"cta-button\"]');\n  }\n\n  async componentDidLoad() {\n    const scrollTrigger = document.getElementById('scroll-trigger');\n    this.calculatedBlockHeight = this.block.offsetHeight;\n\n    const overlayElement = this.block.querySelector('#mediaBlockOverlay') as HTMLElement;\n    if (this.customOverlayBackground != null || this.customOverlayBackground != 'undefined') {\n      overlayElement.style.background = `${this.customOverlayBackground}`;\n    }\n\n    if (this.parallaxScroll) {\n      this.observerScroll = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              window.addEventListener('scroll', this.handleScroll);\n            } else {\n              window.removeEventListener('scroll', this.handleScroll);\n            }\n          });\n        },\n        { rootMargin: `0px 0px` },\n      );\n\n      this.observerScroll.observe(scrollTrigger);\n    }\n\n    if (this.scrollSnapBlock) {\n      this.observerSnap = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              // The block is within 100px of the viewport, scroll it into view\n              if (this.block instanceof HTMLElement) {\n                setTimeout(() => {\n                  this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }, 1000); // Adjust the delay as needed\n              } else {\n                console.error('this.block is not a valid HTMLElement');\n              }\n            }\n          });\n        },\n        {\n          root: document,\n          rootMargin: '100px 0px 100px 0px',\n          threshold: 0,\n        },\n      );\n\n      this.observerSnap.observe(scrollTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up the observer and event listener when the component is removed\n    if (this.observerScroll) {\n      this.observerScroll.disconnect();\n    }\n    if (this.observerSnap) {\n      this.observerSnap.disconnect();\n    }\n    window.removeEventListener('scroll', this.handleScroll);\n  }\n\n  handleScroll = () => {\n    const mediaBlockElement = this.block.firstElementChild as HTMLElement;\n    const scrollTrigger = this.block.querySelector('#scroll-trigger') as HTMLElement;\n    const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video') as HTMLButtonElement;\n\n    const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;\n    const mediaBlockElementHeight = mediaBlockElement.offsetHeight;\n\n    const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;\n\n    const parallaxSpeedContent = 0.3;\n    const parallaxSpeedMedia = 0.2;\n\n    const mediaContainer = this.block.querySelector('.media-block__media-container') as HTMLElement;\n    const content = this.block.querySelector('.media-block__content-container') as HTMLElement;\n\n    if (mediaContainer != null) {\n      // Move the image or video at a slower speed\n      mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;\n\n      if (videoPauseButton != null) {\n        // Move the pause button up\n        videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;\n      }\n    }\n\n    if (content) {\n      // Move the content at a faster speed\n      content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;\n\n      // Change the opacity based on the scroll position\n      const opacity = Math.max(0, 1 - scrollPosition / 600);\n      content.style.opacity = `${opacity}`;\n    }\n  };\n\n  render() {\n    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;\n\n    const isVideo = hasVideo;\n    const isImage = hasImage;\n\n    const classes = [\n      'media-block',\n      blockHeight ? `media-block--height-${blockHeight}` : '',\n      showOverlayLayer ? 'media-block--with-overlay' : '',\n      animateOverlayBackground ? `media-block--animate-overlay-background` : '',\n      isVideo ? 'media-block--video' : '',\n      scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',\n      fixedBackground ? 'media-block--fixed-background' : '',\n      marginBottom ? 'media-block--margin-bottom' : '',\n    ].join(' ');\n\n    const pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n      root: this.blockHeight === '100svh' ? this.block : null,\n      threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible\n    };\n\n    return (\n      <div class={classes}>\n        <div class=\"media-block__block-container\">\n          <div class=\"media-block__media-container\">\n            {isVideo ? (\n              <pn-play-on-scroll show-overlay={this.showOverlayLayer} observerOptions={pnPlayOnScrollObserverOptions} video-src={this.videoSrc}></pn-play-on-scroll>\n            ) : isImage ? (\n              <picture>\n                <source media=\"(min-width: 1400px)\" srcSet={this.imageSrc} />\n                <source media=\"(min-width: 1224px)\" srcSet={this.imageSrc} />\n                <source media=\"(min-width: 1140px)\" srcSet={this.imageSrc} />\n                <source\n                  media=\"(min-width: 1023px)\"\n                  srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n                />\n                <source\n                  media=\"(min-width: 768px)\"\n                  srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n                />\n                <source\n                  media=\"(min-width: 500px)\"\n                  srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n                />\n                <img\n                  src={this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n                  alt={this.imageAltText !== 'undefined' ? this.imageAltText : ''}\n                  role={this.imageAltText !== 'undefined' ? 'img' : 'presentation'}\n                  aria-hidden={this.imageAltText !== 'undefined' ? 'false' : 'true'}\n                />\n              </picture>\n            ) : null}\n          </div>\n\n          {!isVideo && <div class=\"media-block__overlay-filter\" id=\"mediaBlockOverlay\"></div>}\n\n          {(this.blockHeading || this.blockPreamble) && (\n            <div class=\"media-block__content-container\">\n              {this.blockHeading && (\n                <HeadingTag level={this.blockHeadingLevel} cssClass=\"media-block__block-heading\">\n                  {this.blockHeading}\n                </HeadingTag>\n              )}\n              {this.blockPreamble && <p class=\"media-block__preamble\">{this.blockPreamble}</p>}\n              {hasButtonSlot && (\n                <div class=\"media-block__cta-link\">\n                  <slot name=\"cta-button\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div id=\"scroll-trigger\"></div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/pn-market-web-components/p-efab81a9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,d as i}from"./p-82546a44.js";import{a as n}from"./p-76c2c01f.js";const r="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--marketweb-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";const o=r;const s=class{constructor(e){t(this,e);this.disabled=false;this.error="";this.invalid=false;this.helpertext="";this.label="";this.placeholder="";this.inputid=`${Math.random()}`;this.name="";this.required=false;this.type="text";this.autocomplete="";this.valid=null;this.value="";this.maxlength="";this.min="";this.max="";this.step="";this.pattern="";this.showText=false}getTextMessage(){if(this.error)return this.error;if(this.helpertext)return this.helpertext;return null}toggleTextVisibility(){this.showText=!this.showText}getInputType(){let t=["text","password","url","tel","search","number","email","date","datetime-local","month","week","time"];return t.includes(this.type)&&!this.showText?this.type:"text"}setVal(t){const e=t.composedPath?.()[0];this.value=e.value}getClassNames(){let t="pn-input ";if(this.error.length>0||this.invalid)t+="error ";if(this.valid)t+="valid ";if(this.type==="password")t+="password ";if(this.error||this.invalid||this.valid)t+="icon ";return t}render(){return e(i,{key:"4f7f8f34c1ee53c4afb001753391d4c157e1478b",class:this.getClassNames()},(this.label||this.maxlength)&&e("div",{key:"47d1c694771fc809834c83b1862479fd8a9e9d8d",class:"label-container"},this.label&&e("label",{key:"0fc212d7f191e9a14fbfc125c5f6f8170f89fa9a",htmlFor:this.inputid},this.label),parseInt(this.maxlength)>0&&e("label",{key:"b80c0e7c3a0303ab9f86c0a29869d65e0db2bc60",class:"char-count",htmlFor:this.inputid},`${this.value.length}/${this.maxlength}`)),e("div",{key:"ff9cc8c88c7bd113bae6e70973705fd3e79720e1",class:"input-container"},e("input",{key:"9d7032bf457b824ab3e8e9e4a26f5676f10fd75f",type:this.getInputType(),value:this.value,id:this.inputid,name:this.name,placeholder:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:this.autocomplete,onInput:t=>this.setVal(t),maxlength:this.maxlength?this.maxlength:null,min:this.min?this.min:null,max:this.max?this.max:null,step:this.step?this.step:null,pattern:this.pattern?this.pattern:null}),e("svg",{key:"32edd92bb708da7494c80e21163321c976753506",class:"pn-input-checkmark",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},e("polyline",{key:"c7a4e9e801dd98d2f392954ce1f4cf38f4be59d0",class:"checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"})),this.type==="password"&&!this.disabled&&e("button",{key:"1afd953b2b8f429ef82978649382c969b47b3c52",onClick:()=>this.toggleTextVisibility()},"Show")),this.getTextMessage()&&e("small",{key:"8e10536b12bf476a98e54202c5302c8816d28f74"},this.error&&e("pn-icon",{key:"a86e347e28f92a4b8437e964fbf9d3784dcdf158",icon:n,small:true,color:"warning"}),this.getTextMessage()))}};s.style=o;export{s as pn_marketweb_input};
+//# sourceMappingURL=p-efab81a9.entry.js.map

package/pn-market-web-components/{p-a11fdf9f.entry.js.map → p-efab81a9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnMarketwebInputCss","PnMarketwebInputStyle0","PnMarketwebInput","Math","random","getTextMessage","this","error","helpertext","toggleTextVisibility","showText","getInputType","types","includes","type","setVal","e","target","composedPath","value","getClassNames","classNames","length","invalid","valid","render","h","Host","key","class","label","maxlength","htmlFor","inputid","parseInt","id","name","placeholder","disabled","required","autocomplete","onInput","min","max","step","pattern","xmlns","viewBox","fill","points","onClick","icon","alert_exclamation_circle","small","color"],"sources":["src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" 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          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAsB,+4FAC5B,MAAAC,EAAeD,E,MCMFE,EAAgB,M,uCACC,M,WAEJ,G,aAEG,M,gBAEE,G,WAEL,G,iBACM,G,aACJ,GAAGC,KAAKC,W,UACX,G,cACK,M,UACY,O,kBACT,G,WACN,K,WACD,G,eAEI,G,SACN,G,SACA,G,UACC,G,aACG,G,cASG,K,CAP7B,cAAAC,GACE,GAAIC,KAAKC,MAAO,OAAOD,KAAKC,MAC5B,GAAID,KAAKE,WAAY,OAAOF,KAAKE,WAEjC,OAAO,I,CAIT,oBAAAC,GACEH,KAAKI,UAAYJ,KAAKI,Q,CAGxB,YAAAC,GACE,IAAIC,EAAQ,CAAC,OAAQ,WAAY,MAAO,MAAO,SAAU,SAAU,QAAS,OAAQ,iBAAkB,QAAS,OAAQ,QAEvH,OAAOA,EAAMC,SAASP,KAAKQ,QAAUR,KAAKI,SAAWJ,KAAKQ,KAAO,M,CAGnE,MAAAC,CAAOC,GACL,MAAMC,EAA2BD,EAAEE,iBAAiB,GACpDZ,KAAKa,MAAQF,EAAOE,K,CAGtB,aAAAC,GACE,IAAIC,EAAa,YACjB,GAAIf,KAAKC,MAAMe,OAAS,GAAKhB,KAAKiB,QAASF,GAAc,SACzD,GAAIf,KAAKkB,MAAOH,GAAc,SAC9B,GAAIf,KAAKQ,OAAS,WAAYO,GAAc,YAC5C,GAAIf,KAAKC,OAASD,KAAKiB,SAAWjB,KAAKkB,MAAOH,GAAc,QAE5D,OAAOA,C,CAGT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOvB,KAAKc,kBACdd,KAAKwB,OAASxB,KAAKyB,YACnBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACRvB,KAAKwB,OAASJ,EAAA,SAAAE,IAAA,2CAAOI,QAAS1B,KAAK2B,SAAU3B,KAAKwB,OAClDI,SAAS5B,KAAKyB,WAAa,GAC1BL,EAAA,SAAAE,IAAA,2CAAOC,MAAM,aAAaG,QAAS1B,KAAK2B,SACrC,GAAG3B,KAAKa,MAAMG,UAAUhB,KAAKyB,cAKtCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,SAAAE,IAAA,2CACEd,KAAMR,KAAKK,eACXQ,MAAOb,KAAKa,MACZgB,GAAI7B,KAAK2B,QACTG,KAAM9B,KAAK8B,KACXC,YAAa/B,KAAK+B,YAClBC,SAAUhC,KAAKgC,SACfC,SAAUjC,KAAKiC,SACfC,aAAclC,KAAKkC,aACnBC,QAASzB,GAAKV,KAAKS,OAAOC,GAC1Be,UAAWzB,KAAKyB,UAAYzB,KAAKyB,UAAY,KAC7CW,IAAKpC,KAAKoC,IAAMpC,KAAKoC,IAAM,KAC3BC,IAAKrC,KAAKqC,IAAMrC,KAAKqC,IAAM,KAC3BC,KAAMtC,KAAKsC,KAAOtC,KAAKsC,KAAO,KAC9BC,QAASvC,KAAKuC,QAAUvC,KAAKuC,QAAU,OAEzCnB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBAAqBiB,MAAM,6BAA6BC,QAAQ,YAAYC,KAAK,QAC1FtB,EAAA,YAAAE,IAAA,2CAAUC,MAAM,iBAAiBoB,OAAO,iBAAgB,eAAc,OAGvE3C,KAAKQ,OAAS,aAAeR,KAAKgC,UAAYZ,EAAA,UAAAE,IAAA,2CAAQsB,QAAS,IAAM5C,KAAKG,wBAAsB,SAGlGH,KAAKD,kBACJqB,EAAA,SAAAE,IAAA,4CACGtB,KAAKC,OAASmB,EAAA,WAAAE,IAAA,2CAASuB,KAAMC,EAA0BC,MAAK,KAACC,MAAM,YACnEhD,KAAKD,kB","ignoreList":[]}
+{"version":3,"names":["pnMarketwebInputCss","PnMarketwebInputStyle0","PnMarketwebInput","Math","random","getTextMessage","this","error","helpertext","toggleTextVisibility","showText","getInputType","types","includes","type","setVal","e","target","composedPath","value","getClassNames","classNames","length","invalid","valid","render","h","Host","key","class","label","maxlength","htmlFor","inputid","parseInt","id","name","placeholder","disabled","required","autocomplete","onInput","min","max","step","pattern","xmlns","viewBox","fill","points","onClick","icon","alert_exclamation_circle","small","color"],"sources":["src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" 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          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAsB,wtGAC5B,MAAAC,EAAeD,E,MCMFE,EAAgB,M,uCACC,M,WAEJ,G,aAEG,M,gBAEE,G,WAEL,G,iBACM,G,aACJ,GAAGC,KAAKC,W,UACX,G,cACK,M,UACY,O,kBACT,G,WACN,K,WACD,G,eAEI,G,SACN,G,SACA,G,UACC,G,aACG,G,cASG,K,CAP7B,cAAAC,GACE,GAAIC,KAAKC,MAAO,OAAOD,KAAKC,MAC5B,GAAID,KAAKE,WAAY,OAAOF,KAAKE,WAEjC,OAAO,I,CAIT,oBAAAC,GACEH,KAAKI,UAAYJ,KAAKI,Q,CAGxB,YAAAC,GACE,IAAIC,EAAQ,CAAC,OAAQ,WAAY,MAAO,MAAO,SAAU,SAAU,QAAS,OAAQ,iBAAkB,QAAS,OAAQ,QAEvH,OAAOA,EAAMC,SAASP,KAAKQ,QAAUR,KAAKI,SAAWJ,KAAKQ,KAAO,M,CAGnE,MAAAC,CAAOC,GACL,MAAMC,EAA2BD,EAAEE,iBAAiB,GACpDZ,KAAKa,MAAQF,EAAOE,K,CAGtB,aAAAC,GACE,IAAIC,EAAa,YACjB,GAAIf,KAAKC,MAAMe,OAAS,GAAKhB,KAAKiB,QAASF,GAAc,SACzD,GAAIf,KAAKkB,MAAOH,GAAc,SAC9B,GAAIf,KAAKQ,OAAS,WAAYO,GAAc,YAC5C,GAAIf,KAAKC,OAASD,KAAKiB,SAAWjB,KAAKkB,MAAOH,GAAc,QAE5D,OAAOA,C,CAGT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOvB,KAAKc,kBACdd,KAAKwB,OAASxB,KAAKyB,YACnBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACRvB,KAAKwB,OAASJ,EAAA,SAAAE,IAAA,2CAAOI,QAAS1B,KAAK2B,SAAU3B,KAAKwB,OAClDI,SAAS5B,KAAKyB,WAAa,GAC1BL,EAAA,SAAAE,IAAA,2CAAOC,MAAM,aAAaG,QAAS1B,KAAK2B,SACrC,GAAG3B,KAAKa,MAAMG,UAAUhB,KAAKyB,cAKtCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,SAAAE,IAAA,2CACEd,KAAMR,KAAKK,eACXQ,MAAOb,KAAKa,MACZgB,GAAI7B,KAAK2B,QACTG,KAAM9B,KAAK8B,KACXC,YAAa/B,KAAK+B,YAClBC,SAAUhC,KAAKgC,SACfC,SAAUjC,KAAKiC,SACfC,aAAclC,KAAKkC,aACnBC,QAASzB,GAAKV,KAAKS,OAAOC,GAC1Be,UAAWzB,KAAKyB,UAAYzB,KAAKyB,UAAY,KAC7CW,IAAKpC,KAAKoC,IAAMpC,KAAKoC,IAAM,KAC3BC,IAAKrC,KAAKqC,IAAMrC,KAAKqC,IAAM,KAC3BC,KAAMtC,KAAKsC,KAAOtC,KAAKsC,KAAO,KAC9BC,QAASvC,KAAKuC,QAAUvC,KAAKuC,QAAU,OAEzCnB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBAAqBiB,MAAM,6BAA6BC,QAAQ,YAAYC,KAAK,QAC1FtB,EAAA,YAAAE,IAAA,2CAAUC,MAAM,iBAAiBoB,OAAO,iBAAgB,eAAc,OAGvE3C,KAAKQ,OAAS,aAAeR,KAAKgC,UAAYZ,EAAA,UAAAE,IAAA,2CAAQsB,QAAS,IAAM5C,KAAKG,wBAAsB,SAGlGH,KAAKD,kBACJqB,EAAA,SAAAE,IAAA,4CACGtB,KAAKC,OAASmB,EAAA,WAAAE,IAAA,2CAASuB,KAAMC,EAA0BC,MAAK,KAACC,MAAM,YACnEhD,KAAKD,kB","ignoreList":[]}