@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

package/dist/pn-market-web-components/p-8c26b98d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,g as l,h as s,d as a}from"./p-bb1c965e.js";import{p as i}from"./p-df8bfe03.js";import{v as n}from"./p-4ed69de7.js";const d="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-multi-row-connected-dropdown{gap:1rem}pn-multi-row-connected-dropdown .connected-dropdown__row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;justify-content:space-between}pn-multi-row-connected-dropdown .connected-dropdown__row__no-margin{margin:0}pn-multi-row-connected-dropdown .connected-dropdown__button-right{margin-left:auto}";const o=d;const h=class{constructor(l){e(this,l);this.allFormValues=t(this,"allFormValues",7);this.dropdownData=null;this.languageCode=null;this.label=null;this.firstDropdownLabel=null;this.secondDropdownLabel=null;this.dropdownPlaceholder=null;this.addRowText=null;this.inputFieldLabel=null;this.inputFieldPlaceholder=null;this.disabledDates=null;this.dateButtonText=null;this.datePlaceholder=null;this.dateDaysFromToday=null;this.allowMultipleRows=false;this.allowMultipleDates=false;this.startDateLabel=null;this.endDateLabel=null;this.multiDateHelperText=null;this.generateDatesButtonText=null;this.saveDateButtonText=null;this.noDatesText=null;this.yearsToAddToEndDate=null;this.minAmount=1;this.errorMessageEmpty=undefined;this.errorMessageMinAmount=undefined;this.minWarningAmount=null;this.warningMessageMinAmount=undefined;this.rowCount=null;this.rowData=null;this.formValues=null}get hostElement(){return l(this)}_buttonValueName=null;_firstDropdownValueName=null;_secondDropdownValueName=null;_inputValueName=null;_dateValueName=null;allFormValues;_defaultRow={id:this.generateUniqueId(),buttons:[],firstDropdown:[],secondDropdown:[],input:"",dates:"",dateRange:{days:[],startDate:"",endDate:""}};componentWillLoad(){this.setDaysArr();this.formValues=[];this.rowData=[this._defaultRow];this.rowCount=this.rowData.length;this._buttonValueName=this.label?.length?this.label:"value0";this._firstDropdownValueName=this.firstDropdownLabel?.length?this.firstDropdownLabel:"value1";this._secondDropdownValueName=this.secondDropdownLabel?.length?this.secondDropdownLabel:"value2";this._inputValueName=this.inputFieldLabel?.length?this.inputFieldLabel:"value3";this._dateValueName=this.dateButtonText?.length?this.dateButtonText:"value4"}componentDidLoad(){}emitValuesIfValid(){this.formValues=[];this.rowData.forEach((e=>{const t={row:[]};const l=e.buttons.find((e=>e.selected===true));if(l){const e={name:this._buttonValueName,value:l.label};t.row.push(e)}const s=e.firstDropdown.find((e=>e.selected===true));if(s){const e={name:this._firstDropdownValueName,value:s.label};t.row.push(e)}const a=e.secondDropdown.find((e=>e.selected===true));if(a){const e={name:this._secondDropdownValueName,value:a.label};t.row.push(e)}const i=e.input;if(i?.length){const e={name:this._inputValueName,value:i};t.row.push(e)}const n=e.dates;if(n?.length){const e={name:this._dateValueName,value:n};t.row.push(e)}if(t.row.length===5){this.formValues.push(t)}}));if(this.formValues.length===this.rowData.length){const e=JSON.stringify(this.formValues);this.allFormValues.emit(e)}else{this.allFormValues.emit("")}}predefinedValueChange(e){const t=this.rowData.findIndex((t=>t.id===e.detail.id));const l=e.detail;this.rowData[t]={...this.rowData[t],buttons:l.buttons,firstDropdown:l.firstDropdown,secondDropdown:l.secondDropdown,input:l.input,dates:l.dates,dateRange:l.dateRange};this.emitValuesIfValid()}deleteRowEvent(e){const t=this.rowData.findIndex((t=>t.id===e.detail));this.rowData.splice(t,1);this.rowData=[...this.rowData];this.rowCount=this.rowData.length;this.emitValuesIfValid()}generateUniqueId(){return n()}addRow(){const e=this._defaultRow;e.id=this.generateUniqueId();this.rowData=[...this.rowData,e];this.rowCount=this.rowData.length}setDaysArr(){const e=this.languageCode.toLowerCase();switch(e){case"en":this._defaultRow.dateRange.days=[{label:"Monday",value:"1",selected:false},{label:"Tuesday",value:"2",selected:false},{label:"Wednesday",value:"3",selected:false},{label:"Thursday",value:"4",selected:false},{label:"Friday",value:"5",selected:false}];break;case"sv":this._defaultRow.dateRange.days=[{label:"Måndag",value:"1",selected:false},{label:"Tisdag",value:"2",selected:false},{label:"Onsdag",value:"3",selected:false},{label:"Torsdag",value:"4",selected:false},{label:"Fredag",value:"5",selected:false}];break;case"da":this._defaultRow.dateRange.days=[{label:"Mandag",value:"1",selected:false},{label:"Tirsdag",value:"2",selected:false},{label:"Onsdag",value:"3",selected:false},{label:"Torsdag",value:"4",selected:false},{label:"Fredag",value:"5",selected:false}];break;case"fi":this._defaultRow.dateRange.days=[{label:"Maanantai",value:"1",selected:false},{label:"Tiistai",value:"2",selected:false},{label:"Keskiviikko",value:"3",selected:false},{label:"Torstai",value:"4",selected:false},{label:"Perjantai",value:"5",selected:false}];break;case"no":this._defaultRow.dateRange.days=[{label:"Mandag",value:"1",selected:false},{label:"Tirsdag",value:"2",selected:false},{label:"Onsdag",value:"3",selected:false},{label:"Torsdag",value:"4",selected:false},{label:"Fredag",value:"5",selected:false}];break;default:this._defaultRow.dateRange.days=[{label:"Monday",value:"1",selected:false},{label:"Tuesday",value:"2",selected:false},{label:"Wednesday",value:"3",selected:false},{label:"Thursday",value:"4",selected:false},{label:"Friday",value:"5",selected:false}];break}}render(){return s(a,{key:"301a4cc1ef3e54bd28919b871ae8af510d8a0f49"},this.rowData?.map(((e,t)=>s("div",{class:"generated-row-"+t,id:"generated-row-connected-dropdown-"+t},s("pn-multi-row-connected-dropdown-row",{"dropdown-data":this.dropdownData,"language-code":this.languageCode,label:this.label,"first-dropdown-label":this.firstDropdownLabel,"second-dropdown-label":this.secondDropdownLabel,"dropdown-placeholder":this.dropdownPlaceholder,"add-row-text":this.addRowText,"input-field-label":this.inputFieldLabel,"input-field-placeholder":this.inputFieldPlaceholder,"disabled-dates":this.disabledDates,"date-button-text":this.dateButtonText,"date-placeholder":this.datePlaceholder,"date-days-from-today":this.dateDaysFromToday,"allow-multiple-dates":this.allowMultipleDates,"start-date-label":this.startDateLabel,"end-date-label":this.endDateLabel,"multi-date-helper-text":this.multiDateHelperText,"generate-dates-button-text":this.generateDatesButtonText,"save-date-button-text":this.saveDateButtonText,"no-dates-text":this.noDatesText,index:t,"predefined-value":JSON.stringify(e),"years-to-add-to-end-date":this.yearsToAddToEndDate,"min-amount":this.minAmount,"error-message-empty":this.errorMessageEmpty,"error-message-min-amount":this.errorMessageMinAmount,"min-warning-amount":this.minWarningAmount,"warning-message-min-amount":this.warningMessageMinAmount})))),this.allowMultipleRows?s("div",{class:"connected-dropdown__row"},s("pn-button",{tooltip:this.addRowText?this.addRowText:null,"left-icon":"true",arialabel:"Add",icon:i,appearance:"light",variant:"borderless",class:"connected-dropdown__button-right",onClick:()=>{this.addRow()}},this.addRowText)):null)}};h.style=o;export{h as pn_multi_row_connected_dropdown};
+//# sourceMappingURL=p-8c26b98d.entry.js.map

package/dist/pn-market-web-components/{p-61bd81d7.entry.js.map → p-8c26b98d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnMultiRowConnectedDropdownCss","PnMultiRowConnectedDropdownStyle0","PnMultiRowConnectedDropdown","_buttonValueName","_firstDropdownValueName","_secondDropdownValueName","_inputValueName","_dateValueName","allFormValues","_defaultRow","id","this","generateUniqueId","buttons","firstDropdown","secondDropdown","input","dates","dateRange","days","startDate","endDate","componentWillLoad","setDaysArr","formValues","rowData","rowCount","length","label","firstDropdownLabel","secondDropdownLabel","inputFieldLabel","dateButtonText","componentDidLoad","emitValuesIfValid","forEach","item","rowValue","row","buttonSelection","find","x","selected","buttonValue","name","value","push","firstDropdownSelection","firstDropdownValue","secondDropdownSelection","secondDropdownValue","inputValue","datestValue","valueJsonString","JSON","stringify","emit","predefinedValueChange","e","indexToUpdate","findIndex","data","detail","val","deleteRowEvent","indexToRemove","splice","uuidv4","addRow","newRow","language","languageCode","toLowerCase","render","h","Host","key","map","i","class","dropdownData","dropdownPlaceholder","addRowText","inputFieldPlaceholder","disabledDates","datePlaceholder","dateDaysFromToday","allowMultipleDates","startDateLabel","endDateLabel","multiDateHelperText","generateDatesButtonText","saveDateButtonText","noDatesText","index","yearsToAddToEndDate","minAmount","errorMessageEmpty","errorMessageMinAmount","minWarningAmount","warningMessageMinAmount","allowMultipleRows","tooltip","arialabel","icon","plus","appearance","variant","onClick"],"sources":["src/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.scss?tag=pn-multi-row-connected-dropdown","src/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-multi-row-connected-dropdown {\n  gap: 1rem;\n\n  .connected-dropdown {\n    &__row {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      margin-bottom: 1rem;\n      justify-content: space-between;\n\n      &__no-margin {\n        margin: 0;\n      }\n    }\n\n    &__button-right {\n      margin-left: auto;\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, PredefinedValues, Root, RowValue, SelectItem } from './types';\nimport { v4 as uuidv4 } from 'uuid';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-multi-row-connected-dropdown',\n  styleUrl: 'pn-multi-row-connected-dropdown.scss',\n})\nexport class PnMultiRowConnectedDropdown {\n  @Element() hostElement: Element;\n\n  @Prop() dropdownData: string | Root[] = null;\n  @Prop() languageCode: string = null;\n  @Prop() label: string = null;\n  @Prop() firstDropdownLabel: string = null;\n  @Prop() secondDropdownLabel: string = null;\n  @Prop() dropdownPlaceholder: string = null;\n  @Prop() addRowText: string = null;\n  @Prop() inputFieldLabel: string = null;\n  @Prop() inputFieldPlaceholder: string = null;\n  @Prop() disabledDates: string = null;\n  @Prop() dateButtonText: string = null;\n  @Prop() datePlaceholder: string = null;\n  @Prop() dateDaysFromToday: number = null;\n  @Prop() allowMultipleRows: boolean = false;\n  @Prop() allowMultipleDates: boolean = false;\n  @Prop() startDateLabel: string = null;\n  @Prop() endDateLabel: string = null;\n  @Prop() multiDateHelperText: string = null;\n  @Prop() generateDatesButtonText: string = null;\n  @Prop() saveDateButtonText: string = null;\n  @Prop() noDatesText: string = null;\n  @Prop() yearsToAddToEndDate: number = null;\n  @Prop() minAmount: number = 1;\n  @Prop() errorMessageEmpty: string;\n  @Prop() errorMessageMinAmount: string;\n  @Prop() minWarningAmount: number = null;\n  @Prop() warningMessageMinAmount: string;\n\n  @State() rowCount: number = null;\n  @State() rowData: PredefinedValues[] = null;\n  @State() formValues: FormValue[] = null;\n\n  private _buttonValueName: string = null;\n  private _firstDropdownValueName: string = null;\n  private _secondDropdownValueName: string = null;\n  private _inputValueName: string = null;\n  private _dateValueName: string = null;\n\n  @Event() allFormValues: EventEmitter<string>;\n\n  private _defaultRow: PredefinedValues = {\n    id: this.generateUniqueId(),\n    buttons: [],\n    firstDropdown: [],\n    secondDropdown: [],\n    input: '',\n    dates: '',\n    dateRange: {\n      days: [],\n      startDate: '',\n      endDate: '',\n    },\n  };\n\n  componentWillLoad() {\n    this.setDaysArr();\n    this.formValues = [];\n    this.rowData = [this._defaultRow];\n    this.rowCount = this.rowData.length;\n\n    this._buttonValueName = this.label?.length ? this.label : 'value0';\n    this._firstDropdownValueName = this.firstDropdownLabel?.length ? this.firstDropdownLabel : 'value1';\n    this._secondDropdownValueName = this.secondDropdownLabel?.length ? this.secondDropdownLabel : 'value2';\n    this._inputValueName = this.inputFieldLabel?.length ? this.inputFieldLabel : 'value3';\n    this._dateValueName = this.dateButtonText?.length ? this.dateButtonText : 'value4';\n  }\n\n  componentDidLoad() {}\n\n  emitValuesIfValid() {\n    this.formValues = [];\n    this.rowData.forEach(item => {\n      const rowValue: FormValue = { row: [] };\n\n      const buttonSelection = item.buttons.find(x => x.selected === true);\n      if (buttonSelection) {\n        const buttonValue: RowValue = { name: this._buttonValueName, value: buttonSelection.label };\n        rowValue.row.push(buttonValue);\n      }\n\n      const firstDropdownSelection = item.firstDropdown.find(x => x.selected === true);\n      if (firstDropdownSelection) {\n        const firstDropdownValue: RowValue = { name: this._firstDropdownValueName, value: firstDropdownSelection.label };\n        rowValue.row.push(firstDropdownValue);\n      }\n\n      const secondDropdownSelection = item.secondDropdown.find(x => x.selected === true);\n      if (secondDropdownSelection) {\n        const secondDropdownValue: RowValue = { name: this._secondDropdownValueName, value: secondDropdownSelection.label };\n        rowValue.row.push(secondDropdownValue);\n      }\n\n      const input = item.input;\n      if (input?.length) {\n        const inputValue: RowValue = { name: this._inputValueName, value: input };\n        rowValue.row.push(inputValue);\n      }\n\n      const dates = item.dates;\n      if (dates?.length) {\n        const datestValue: RowValue = { name: this._dateValueName, value: dates };\n        rowValue.row.push(datestValue);\n      }\n\n      if (rowValue.row.length === 5) {\n        this.formValues.push(rowValue);\n      }\n    });\n\n    if (this.formValues.length === this.rowData.length) {\n      const valueJsonString = JSON.stringify(this.formValues);\n      this.allFormValues.emit(valueJsonString);\n    } else {\n      this.allFormValues.emit('');\n    }\n  }\n\n  @Listen('rowValueChange')\n  predefinedValueChange(e) {\n    const indexToUpdate = this.rowData.findIndex(data => data.id === e.detail.id);\n    const val: PredefinedValues = e.detail;\n    this.rowData[indexToUpdate] = {\n      ...this.rowData[indexToUpdate],\n      buttons: val.buttons,\n      firstDropdown: val.firstDropdown,\n      secondDropdown: val.secondDropdown,\n      input: val.input,\n      dates: val.dates,\n      dateRange: val.dateRange,\n    };\n    this.emitValuesIfValid();\n  }\n\n  @Listen('deleteRowEvent')\n  deleteRowEvent(e) {\n    const indexToRemove = this.rowData.findIndex(data => data.id === e.detail);\n    this.rowData.splice(indexToRemove, 1);\n    this.rowData = [...this.rowData];\n    this.rowCount = this.rowData.length;\n    this.emitValuesIfValid();\n  }\n\n  generateUniqueId() {\n    return uuidv4();\n  }\n\n  addRow() {\n    const newRow = this._defaultRow;\n    newRow.id = this.generateUniqueId();\n\n    this.rowData = [...this.rowData, newRow];\n    this.rowCount = this.rowData.length;\n  }\n\n  setDaysArr() {\n    const language = this.languageCode.toLowerCase();\n\n    switch (language) {\n      case 'en':\n        this._defaultRow.dateRange.days = [\n          { label: 'Monday', value: '1', selected: false },\n          { label: 'Tuesday', value: '2', selected: false },\n          { label: 'Wednesday', value: '3', selected: false },\n          { label: 'Thursday', value: '4', selected: false },\n          { label: 'Friday', value: '5', selected: false },\n        ];\n        break;\n\n      case 'sv':\n        this._defaultRow.dateRange.days = [\n          { label: 'Måndag', value: '1', selected: false },\n          { label: 'Tisdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      case 'da':\n        this._defaultRow.dateRange.days = [\n          { label: 'Mandag', value: '1', selected: false },\n          { label: 'Tirsdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      case 'fi':\n        this._defaultRow.dateRange.days = [\n          { label: 'Maanantai', value: '1', selected: false },\n          { label: 'Tiistai', value: '2', selected: false },\n          { label: 'Keskiviikko', value: '3', selected: false },\n          { label: 'Torstai', value: '4', selected: false },\n          { label: 'Perjantai', value: '5', selected: false },\n        ];\n        break;\n\n      case 'no':\n        this._defaultRow.dateRange.days = [\n          { label: 'Mandag', value: '1', selected: false },\n          { label: 'Tirsdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      default:\n        this._defaultRow.dateRange.days = [\n          { label: 'Monday', value: '1', selected: false },\n          { label: 'Tuesday', value: '2', selected: false },\n          { label: 'Wednesday', value: '3', selected: false },\n          { label: 'Thursday', value: '4', selected: false },\n          { label: 'Friday', value: '5', selected: false },\n        ];\n        break;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.rowData?.map((data, i) => {\n          return (\n            <div class={'generated-row-' + i} id={'generated-row-connected-dropdown-' + i}>\n              <pn-multi-row-connected-dropdown-row\n                dropdown-data={this.dropdownData}\n                language-code={this.languageCode}\n                label={this.label}\n                first-dropdown-label={this.firstDropdownLabel}\n                second-dropdown-label={this.secondDropdownLabel}\n                dropdown-placeholder={this.dropdownPlaceholder}\n                add-row-text={this.addRowText}\n                input-field-label={this.inputFieldLabel}\n                input-field-placeholder={this.inputFieldPlaceholder}\n                disabled-dates={this.disabledDates}\n                date-button-text={this.dateButtonText}\n                date-placeholder={this.datePlaceholder}\n                date-days-from-today={this.dateDaysFromToday}\n                allow-multiple-dates={this.allowMultipleDates}\n                start-date-label={this.startDateLabel}\n                end-date-label={this.endDateLabel}\n                multi-date-helper-text={this.multiDateHelperText}\n                generate-dates-button-text={this.generateDatesButtonText}\n                save-date-button-text={this.saveDateButtonText}\n                no-dates-text={this.noDatesText}\n                index={i}\n                predefined-value={JSON.stringify(data)}\n                years-to-add-to-end-date={this.yearsToAddToEndDate}\n                min-amount={this.minAmount}\n                error-message-empty={this.errorMessageEmpty}\n                error-message-min-amount={this.errorMessageMinAmount}\n                min-warning-amount={this.minWarningAmount}\n                warning-message-min-amount={this.warningMessageMinAmount}\n              ></pn-multi-row-connected-dropdown-row>\n            </div>\n          );\n        })}\n\n        {this.allowMultipleRows ? (\n          <div class=\"connected-dropdown__row\">\n            <pn-button\n              tooltip={this.addRowText ? this.addRowText : null}\n              left-icon=\"true\"\n              arialabel=\"Add\"\n              icon={plus}\n              appearance=\"light\"\n              variant=\"borderless\"\n              class=\"connected-dropdown__button-right\"\n              onClick={() => {\n                this.addRow();\n              }}\n            >\n              {this.addRowText}\n            </pn-button>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["pnMultiRowConnectedDropdownCss","PnMultiRowConnectedDropdownStyle0","PnMultiRowConnectedDropdown","_buttonValueName","_firstDropdownValueName","_secondDropdownValueName","_inputValueName","_dateValueName","allFormValues","_defaultRow","id","this","generateUniqueId","buttons","firstDropdown","secondDropdown","input","dates","dateRange","days","startDate","endDate","componentWillLoad","setDaysArr","formValues","rowData","rowCount","length","label","firstDropdownLabel","secondDropdownLabel","inputFieldLabel","dateButtonText","componentDidLoad","emitValuesIfValid","forEach","item","rowValue","row","buttonSelection","find","x","selected","buttonValue","name","value","push","firstDropdownSelection","firstDropdownValue","secondDropdownSelection","secondDropdownValue","inputValue","datestValue","valueJsonString","JSON","stringify","emit","predefinedValueChange","e","indexToUpdate","findIndex","data","detail","val","deleteRowEvent","indexToRemove","splice","uuidv4","addRow","newRow","language","languageCode","toLowerCase","render","h","Host","key","map","i","class","dropdownData","dropdownPlaceholder","addRowText","inputFieldPlaceholder","disabledDates","datePlaceholder","dateDaysFromToday","allowMultipleDates","startDateLabel","endDateLabel","multiDateHelperText","generateDatesButtonText","saveDateButtonText","noDatesText","index","yearsToAddToEndDate","minAmount","errorMessageEmpty","errorMessageMinAmount","minWarningAmount","warningMessageMinAmount","allowMultipleRows","tooltip","arialabel","icon","plus","appearance","variant","onClick"],"sources":["src/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.scss?tag=pn-multi-row-connected-dropdown","src/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-multi-row-connected-dropdown {\n  gap: 1rem;\n\n  .connected-dropdown {\n    &__row {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      margin-bottom: 1rem;\n      justify-content: space-between;\n\n      &__no-margin {\n        margin: 0;\n      }\n    }\n\n    &__button-right {\n      margin-left: auto;\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { FormValue, PredefinedValues, Root, RowValue, SelectItem } from './types';\nimport { v4 as uuidv4 } from 'uuid';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-multi-row-connected-dropdown',\n  styleUrl: 'pn-multi-row-connected-dropdown.scss',\n})\nexport class PnMultiRowConnectedDropdown {\n  @Element() hostElement: Element;\n\n  @Prop() dropdownData: string | Root[] = null;\n  @Prop() languageCode: string = null;\n  @Prop() label: string = null;\n  @Prop() firstDropdownLabel: string = null;\n  @Prop() secondDropdownLabel: string = null;\n  @Prop() dropdownPlaceholder: string = null;\n  @Prop() addRowText: string = null;\n  @Prop() inputFieldLabel: string = null;\n  @Prop() inputFieldPlaceholder: string = null;\n  @Prop() disabledDates: string = null;\n  @Prop() dateButtonText: string = null;\n  @Prop() datePlaceholder: string = null;\n  @Prop() dateDaysFromToday: number = null;\n  @Prop() allowMultipleRows: boolean = false;\n  @Prop() allowMultipleDates: boolean = false;\n  @Prop() startDateLabel: string = null;\n  @Prop() endDateLabel: string = null;\n  @Prop() multiDateHelperText: string = null;\n  @Prop() generateDatesButtonText: string = null;\n  @Prop() saveDateButtonText: string = null;\n  @Prop() noDatesText: string = null;\n  @Prop() yearsToAddToEndDate: number = null;\n  @Prop() minAmount: number = 1;\n  @Prop() errorMessageEmpty: string;\n  @Prop() errorMessageMinAmount: string;\n  @Prop() minWarningAmount: number = null;\n  @Prop() warningMessageMinAmount: string;\n\n  @State() rowCount: number = null;\n  @State() rowData: PredefinedValues[] = null;\n  @State() formValues: FormValue[] = null;\n\n  private _buttonValueName: string = null;\n  private _firstDropdownValueName: string = null;\n  private _secondDropdownValueName: string = null;\n  private _inputValueName: string = null;\n  private _dateValueName: string = null;\n\n  @Event() allFormValues: EventEmitter<string>;\n\n  private _defaultRow: PredefinedValues = {\n    id: this.generateUniqueId(),\n    buttons: [],\n    firstDropdown: [],\n    secondDropdown: [],\n    input: '',\n    dates: '',\n    dateRange: {\n      days: [],\n      startDate: '',\n      endDate: '',\n    },\n  };\n\n  componentWillLoad() {\n    this.setDaysArr();\n    this.formValues = [];\n    this.rowData = [this._defaultRow];\n    this.rowCount = this.rowData.length;\n\n    this._buttonValueName = this.label?.length ? this.label : 'value0';\n    this._firstDropdownValueName = this.firstDropdownLabel?.length ? this.firstDropdownLabel : 'value1';\n    this._secondDropdownValueName = this.secondDropdownLabel?.length ? this.secondDropdownLabel : 'value2';\n    this._inputValueName = this.inputFieldLabel?.length ? this.inputFieldLabel : 'value3';\n    this._dateValueName = this.dateButtonText?.length ? this.dateButtonText : 'value4';\n  }\n\n  componentDidLoad() {}\n\n  emitValuesIfValid() {\n    this.formValues = [];\n    this.rowData.forEach(item => {\n      const rowValue: FormValue = { row: [] };\n\n      const buttonSelection = item.buttons.find(x => x.selected === true);\n      if (buttonSelection) {\n        const buttonValue: RowValue = { name: this._buttonValueName, value: buttonSelection.label };\n        rowValue.row.push(buttonValue);\n      }\n\n      const firstDropdownSelection = item.firstDropdown.find(x => x.selected === true);\n      if (firstDropdownSelection) {\n        const firstDropdownValue: RowValue = { name: this._firstDropdownValueName, value: firstDropdownSelection.label };\n        rowValue.row.push(firstDropdownValue);\n      }\n\n      const secondDropdownSelection = item.secondDropdown.find(x => x.selected === true);\n      if (secondDropdownSelection) {\n        const secondDropdownValue: RowValue = { name: this._secondDropdownValueName, value: secondDropdownSelection.label };\n        rowValue.row.push(secondDropdownValue);\n      }\n\n      const input = item.input;\n      if (input?.length) {\n        const inputValue: RowValue = { name: this._inputValueName, value: input };\n        rowValue.row.push(inputValue);\n      }\n\n      const dates = item.dates;\n      if (dates?.length) {\n        const datestValue: RowValue = { name: this._dateValueName, value: dates };\n        rowValue.row.push(datestValue);\n      }\n\n      if (rowValue.row.length === 5) {\n        this.formValues.push(rowValue);\n      }\n    });\n\n    if (this.formValues.length === this.rowData.length) {\n      const valueJsonString = JSON.stringify(this.formValues);\n      this.allFormValues.emit(valueJsonString);\n    } else {\n      this.allFormValues.emit('');\n    }\n  }\n\n  @Listen('rowValueChange')\n  predefinedValueChange(e) {\n    const indexToUpdate = this.rowData.findIndex(data => data.id === e.detail.id);\n    const val: PredefinedValues = e.detail;\n    this.rowData[indexToUpdate] = {\n      ...this.rowData[indexToUpdate],\n      buttons: val.buttons,\n      firstDropdown: val.firstDropdown,\n      secondDropdown: val.secondDropdown,\n      input: val.input,\n      dates: val.dates,\n      dateRange: val.dateRange,\n    };\n    this.emitValuesIfValid();\n  }\n\n  @Listen('deleteRowEvent')\n  deleteRowEvent(e) {\n    const indexToRemove = this.rowData.findIndex(data => data.id === e.detail);\n    this.rowData.splice(indexToRemove, 1);\n    this.rowData = [...this.rowData];\n    this.rowCount = this.rowData.length;\n    this.emitValuesIfValid();\n  }\n\n  generateUniqueId() {\n    return uuidv4();\n  }\n\n  addRow() {\n    const newRow = this._defaultRow;\n    newRow.id = this.generateUniqueId();\n\n    this.rowData = [...this.rowData, newRow];\n    this.rowCount = this.rowData.length;\n  }\n\n  setDaysArr() {\n    const language = this.languageCode.toLowerCase();\n\n    switch (language) {\n      case 'en':\n        this._defaultRow.dateRange.days = [\n          { label: 'Monday', value: '1', selected: false },\n          { label: 'Tuesday', value: '2', selected: false },\n          { label: 'Wednesday', value: '3', selected: false },\n          { label: 'Thursday', value: '4', selected: false },\n          { label: 'Friday', value: '5', selected: false },\n        ];\n        break;\n\n      case 'sv':\n        this._defaultRow.dateRange.days = [\n          { label: 'Måndag', value: '1', selected: false },\n          { label: 'Tisdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      case 'da':\n        this._defaultRow.dateRange.days = [\n          { label: 'Mandag', value: '1', selected: false },\n          { label: 'Tirsdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      case 'fi':\n        this._defaultRow.dateRange.days = [\n          { label: 'Maanantai', value: '1', selected: false },\n          { label: 'Tiistai', value: '2', selected: false },\n          { label: 'Keskiviikko', value: '3', selected: false },\n          { label: 'Torstai', value: '4', selected: false },\n          { label: 'Perjantai', value: '5', selected: false },\n        ];\n        break;\n\n      case 'no':\n        this._defaultRow.dateRange.days = [\n          { label: 'Mandag', value: '1', selected: false },\n          { label: 'Tirsdag', value: '2', selected: false },\n          { label: 'Onsdag', value: '3', selected: false },\n          { label: 'Torsdag', value: '4', selected: false },\n          { label: 'Fredag', value: '5', selected: false },\n        ];\n        break;\n\n      default:\n        this._defaultRow.dateRange.days = [\n          { label: 'Monday', value: '1', selected: false },\n          { label: 'Tuesday', value: '2', selected: false },\n          { label: 'Wednesday', value: '3', selected: false },\n          { label: 'Thursday', value: '4', selected: false },\n          { label: 'Friday', value: '5', selected: false },\n        ];\n        break;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.rowData?.map((data, i) => {\n          return (\n            <div class={'generated-row-' + i} id={'generated-row-connected-dropdown-' + i}>\n              <pn-multi-row-connected-dropdown-row\n                dropdown-data={this.dropdownData}\n                language-code={this.languageCode}\n                label={this.label}\n                first-dropdown-label={this.firstDropdownLabel}\n                second-dropdown-label={this.secondDropdownLabel}\n                dropdown-placeholder={this.dropdownPlaceholder}\n                add-row-text={this.addRowText}\n                input-field-label={this.inputFieldLabel}\n                input-field-placeholder={this.inputFieldPlaceholder}\n                disabled-dates={this.disabledDates}\n                date-button-text={this.dateButtonText}\n                date-placeholder={this.datePlaceholder}\n                date-days-from-today={this.dateDaysFromToday}\n                allow-multiple-dates={this.allowMultipleDates}\n                start-date-label={this.startDateLabel}\n                end-date-label={this.endDateLabel}\n                multi-date-helper-text={this.multiDateHelperText}\n                generate-dates-button-text={this.generateDatesButtonText}\n                save-date-button-text={this.saveDateButtonText}\n                no-dates-text={this.noDatesText}\n                index={i}\n                predefined-value={JSON.stringify(data)}\n                years-to-add-to-end-date={this.yearsToAddToEndDate}\n                min-amount={this.minAmount}\n                error-message-empty={this.errorMessageEmpty}\n                error-message-min-amount={this.errorMessageMinAmount}\n                min-warning-amount={this.minWarningAmount}\n                warning-message-min-amount={this.warningMessageMinAmount}\n              ></pn-multi-row-connected-dropdown-row>\n            </div>\n          );\n        })}\n\n        {this.allowMultipleRows ? (\n          <div class=\"connected-dropdown__row\">\n            <pn-button\n              tooltip={this.addRowText ? this.addRowText : null}\n              left-icon=\"true\"\n              arialabel=\"Add\"\n              icon={plus}\n              appearance=\"light\"\n              variant=\"borderless\"\n              class=\"connected-dropdown__button-right\"\n              onClick={() => {\n                this.addRow();\n              }}\n            >\n              {this.addRowText}\n            </pn-button>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pn-market-web-components/p-90242f18.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,d as i}from"./p-bb1c965e.js";import{w as s}from"./p-cd8db7cd.js";import{a as n}from"./p-8644928d.js";import{s as a}from"./p-959a37d9.js";import"./p-2509d18d.js";const r={sv:{componentheading:"Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?",deliveryscopeheading:"Endast leveranser inom Sverige",resultlistheading:"Några bra alternativ för dig",weightlabel:"Vikt",maxweightlabel:"Maxvikt",maxmeasurementlabel:"Maxvolym",senddirectcta:"Köp online",stampshopcta:"Köp frimärken",message:"*Vid köp hos valfritt ombud",servicePointHeader:"Eller hitta närmaste serviceställe",servicePointLink:"Sök serviceställe eller brevlåda"},en:{componentheading:"Our prices and terms and conditions for domestic shipments for you as a direct paying customer",deliveryscopeheading:"Deliveries within Sweden only",resultlistheading:"Some suitable options for you",weightlabel:"Weight",maxweightlabel:"Max weight",maxmeasurementlabel:"Maximum measurement",senddirectcta:"Buy Online",stampshopcta:"Buy Stamps",message:"When buying from any agent",servicePointHeader:"Or find nearest service point",servicePointLink:"Search letter-box or service point"},da:{componentheading:"Vad vill du skicka?",deliveryscopeheading:"Kun leveringer indenfor Sverige",resultlistheading:"Some suitable options for you",weightlabel:"Vægt",maxweightlabel:"Max vægt",maxmeasurementlabel:"Maks. Volumen",senddirectcta:"Buy shipping in Send Direct",stampshopcta:"Order home stamps from the webshop"},no:{componentheading:"Vad vill du skicka?",deliveryscopeheading:"Kun leveranser innen Sverige",resultlistheading:"Some suitable options for you",weightlabel:"Vekt",maxweightlabel:"Maks vekt",maxmeasurementlabel:"Maks volum",senddirectcta:"Buy shipping in Send Direct",stampshopcta:"Order home stamps from the webshop"},fi:{componentheading:"Vad vill du skicka?",deliveryscopeheading:"Toimitukset vain Ruotsin sisällä",resultlistheading:"Some suitable options for you",weightlabel:"Paino",maxweightlabel:"Max paino",maxmeasurementlabel:"Max äänenvoimakkuus",senddirectcta:"Buy shipping in Send Direct",stampshopcta:"Order home stamps from the webshop"}};const o={se:{currency:"kr"},dk:{currency:"dk"},fi:{currency:" €"},no:{currency:"kr"}};const l='pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist h2,pn-product-pricelist .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-product-pricelist .content,pn-product-pricelist .weightselection,pn-product-pricelist .resultlist{max-width:50em;margin:0 auto 1.6rem}pn-product-pricelist .weightoption{display:flex;gap:1.6rem}pn-product-pricelist .weightoption-input{width:5em;position:relative;display:none}pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-product-pricelist .weightoption-input-abbreviation{position:absolute;top:50%;transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{flex-grow:1;align-self:flex-end;position:relative;top:0.5em}pn-product-pricelist .weightoption-range input{width:calc(100% - 1.5em)}pn-product-pricelist .weightoption-range datalist{width:100%;display:flex;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count="0"]){margin-top:2em}';const p=l;const h=class{constructor(e){t(this,e);this.source="https://com-inte.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx";this.language="sv";this.market="se";this.productid="";this.filteredItems=[];this.sourceData={types:[],data:[]};this.gotData=false;this.loading=false;this.postagetype={value:""};this.weight={value:0,name:""};this.weightvalue=0}componentWillLoad(){this.setState();this.getDataSource().then((()=>{}))}setState(){if(this.market){a.market=o[this.market]}if(this.language&&r[this.language]){a.i18n=r[this.language]}}async getDataSource(){if(!this.productid){return}this.loading=true;const t=`?cache=${Math.floor(Math.random()*(1e4-1)+1)}`;const e=await fetch(this.source+t);const i=await e.blob();try{const t=await n(i);this.sourceData=t;this.filterItems()}catch(t){this.loading=false;console.warn("Unable to parse data")}}filterItems(){if(!this.sourceData?.data){console.info("Data has not yet been loaded");return}this.loading=false;const t=this.sourceData.data.filter((t=>t.id===this.productid));if(t.length===0){return}this.postagetype.value=t[0].what;if(!s[this.postagetype.value]||s[this.postagetype.value].length===0){return}if(this.weightvalue===0){this.weight=s[this.postagetype.value][0];this.weightvalue=this.weight.value}const e=this.weight.abbreviation.toLocaleLowerCase()==="kg"&&this.postagetype.value==="letter"?this.weight.value*1e3:this.weight.value;let i=t.filter((t=>t.maxweight===e));if(i.length===0){i=t.filter((t=>t.maxweight>=e));if(i.length>0){const t=[...new Map(i.reverse().map((t=>[t["id"],t]))).values()];if(t.length>0){i=t}}}this.filteredItems=i;this.gotData=this.filteredItems.length>0}render(){return e(i,{key:"dbbe8884fadc5b4054c93006fe9ad66e2e6f9c1e"},e("div",{key:"4dd6ec4773b9e67ff698c513ed1d01844b8009d6",class:"content"},e("slot",{key:"d0b5bfd51cde5e4f112a0b25f49e0affcc7ad8aa"})),this.loading?e("pn-spinner",null):null,this.postagetype.value&&s[this.postagetype.value]?e("div",{class:"weightselection"},e("div",{class:"weightoption"},e("div",{class:"weightoption-input"},e("pn-input",{inputid:"weightvalue",name:"weightvalue",type:"number",label:a.i18n.weightlabel,value:this.weightvalue,onChange:t=>{if(t&&t.target&&t.target.value){const e=parseInt(t.target.value,10);if(!isNaN(e)){let t=s[this.postagetype.value].filter((t=>{let i=t.abbreviation==="kg"?t.value*1e3:t.value;return i>=e}));if(t&&t.length>0){this.weight=t[0];this.weightvalue=this.weight.value}}}}}),e("span",{class:"weightoption-input-abbreviation"},this.weight.abbreviation)),e("div",{class:"weightoption-range"},e("input",{type:"range",id:"weightrange",name:"weightrange",list:"weightlist",value:!this.weight.value?0:s[this.postagetype.value].findIndex((t=>t.value===this.weightvalue)),onChange:t=>{const e=t.target.value;this.weight=s[this.postagetype.value][e];this.weightvalue=this.weight.value},min:"0",max:s[this.postagetype.value].length-1}),e("datalist",{id:"weightlist"},s[this.postagetype.value].map(((t,i)=>{let n=t.name;if(s[this.postagetype.value].length>6){n=i%5===0||i===0||i===s[this.postagetype.value].length-1?t.name:""}return e("option",{value:i,...n?{label:n}:{}})})))))):null,e("div",{key:"df6b5a94f13c6ab569a20cde9d78506298513986",class:"resultlist","data-list-count":this.filteredItems.length},this.filteredItems.map((t=>e("div",null,e("pn-find-price-result",{item:t}))))))}static get watchers(){return{market:["setState"],language:["setState"],postagetype:["filterItems"],weightvalue:["filterItems"]}}};h.style=p;export{h as pn_product_pricelist};
+//# sourceMappingURL=p-90242f18.entry.js.map

package/dist/pn-market-web-components/{p-f5d03222.entry.js.map → p-90242f18.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["translations","sv","componentheading","deliveryscopeheading","resultlistheading","weightlabel","maxweightlabel","maxmeasurementlabel","senddirectcta","stampshopcta","message","servicePointHeader","servicePointLink","en","da","no","fi","markets","se","currency","dk","pnProductPricelistCss","PnProductPricelistStyle0","PnFindProductPricelist","types","data","value","name","componentWillLoad","this","setState","getDataSource","then","market","state","language","i18n","productid","loading","cacheBusting","Math","floor","random","req","fetch","source","reqbody","blob","convertedData","convertFileFromStream","sourceData","filterItems","e","console","warn","info","productIdItems","filter","x","id","length","postagetype","what","weights","weightvalue","weight","comparisonWeight","abbreviation","toLocaleLowerCase","weightFilteredData","maxweight","uniqueWeightOptions","Map","reverse","map","item","values","filteredItems","gotData","render","h","Host","key","class","inputid","type","label","onChange","target","weightNum","parseInt","isNaN","matchingWeights","weightInGrams","list","findIndex","min","max","weightindex","labelText"],"sources":["src/components/widgets/pn-product-pricelist/pn-product-pricelist-translations.ts","src/components/widgets/pn-product-pricelist/pn-product-pricelist.scss?tag=pn-product-pricelist","src/components/widgets/pn-product-pricelist/pn-product-pricelist.tsx"],"sourcesContent":["export const translations = {\n  sv: {\n    componentheading: 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',\n    deliveryscopeheading: 'Endast leveranser inom Sverige',\n    resultlistheading: 'Några bra alternativ för dig',\n    weightlabel: 'Vikt',\n    maxweightlabel: 'Maxvikt',\n    maxmeasurementlabel: 'Maxvolym',\n    senddirectcta: 'Köp online',\n    stampshopcta: 'Köp frimärken',\n    message: '*Vid köp hos valfritt ombud',\n    servicePointHeader: 'Eller hitta närmaste serviceställe',\n    servicePointLink: 'Sök serviceställe eller brevlåda',\n  },\n  en: {\n    componentheading: 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',\n    deliveryscopeheading: 'Deliveries within Sweden only',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Weight',\n    maxweightlabel: 'Max weight',\n    maxmeasurementlabel: 'Maximum measurement',\n    senddirectcta: 'Buy Online',\n    stampshopcta: 'Buy Stamps',\n    message: 'When buying from any agent',\n    servicePointHeader: 'Or find nearest service point',\n    servicePointLink: 'Search letter-box or service point',\n  },\n  da: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Kun leveringer indenfor Sverige',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Vægt',\n    maxweightlabel: 'Max vægt',\n    maxmeasurementlabel: 'Maks. Volumen',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n  no: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Kun leveranser innen Sverige',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Vekt',\n    maxweightlabel: 'Maks vekt',\n    maxmeasurementlabel: 'Maks volum',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n  fi: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Toimitukset vain Ruotsin sisällä',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Paino',\n    maxweightlabel: 'Max paino',\n    maxmeasurementlabel: 'Max äänenvoimakkuus',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n};\n\nexport const markets = {\n  se: {\n    currency: 'kr',\n  },\n  dk: {\n    currency: 'dk',\n  },\n  fi: {\n    currency: ' €',\n  },\n  no: {\n    currency: 'kr',\n  },\n};\n","@import '../../../globals/main.scss';\n\npn-product-pricelist {\n  pn-spinner {\n    margin: 1em auto;\n  }\n\n  h2,\n  .heading {\n    text-align: center;\n    font-size: 1.5em;\n    line-height: 1.1;\n    font-weight: bold;\n    margin-bottom: 1rem;\n  }\n\n  .content,\n  .weightselection,\n  .resultlist {\n    max-width: 50em;\n    margin: 0 auto 1.6rem;\n  }\n\n  .weightoption {\n    display: flex;\n    gap: 1.6rem;\n  }\n\n  .weightoption-input {\n    width: 5em;\n    position: relative;\n    display: none;\n\n    input::-webkit-outer-spin-button,\n    input::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  }\n\n  .weightoption-input-abbreviation {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 1.2em;\n    margin-top: 1.55rem;\n    font-weight: 500;\n  }\n\n  .weightoption-range {\n    flex-grow: 1;\n    align-self: flex-end;\n    position: relative;\n    top: 0.5em;\n    input {\n      width: calc(100% - 1.5em);\n    }\n    datalist {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      font-size: 0.75em;\n    }\n  }\n\n  .resultlist:not([data-list-count='0']) {\n    margin-top: 2em;\n  }\n}\n","import { Component, h, Prop, State, Host, Watch } from '@stencil/core';\nimport { translations, markets } from './pn-product-pricelist-translations';\nimport { FindPriceWeight, PnfindPriceMarket, PnfindPricei18n, FindPriceSizeCategory } from '../pn-find-price/pn-find-price-types';\nimport { ProductPriceSourceData, ProductPriceItem } from '../../../globals/shared/productprice/product-price-types';\nimport { ProductPriceListi18n, ProductPriceListMarket, ProductPriceListWeight } from './pn-product-pricelist-types';\nimport { weights } from './data.js';\nimport { convertFileFromStream } from '../../../globals/shared/productprice/convert.js';\n// import { state } from \"./pn-product-pricelist-store\";\nimport { state } from '../pn-find-price/pn-find-price-store';\n\n@Component({\n  tag: 'pn-product-pricelist',\n  styleUrl: 'pn-product-pricelist.scss',\n})\nexport class PnFindProductPricelist {\n  @Prop() source: string = 'https://com-inte.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx';\n  @Prop({ mutable: true }) language: string = 'sv';\n  @Prop({ mutable: true }) market: string = 'se';\n  @Prop() productid: string = '';\n\n  @State() filteredItems: ProductPriceItem[] = [];\n  @State() sourceData: ProductPriceSourceData = { types: [], data: [] };\n  @State() gotData: boolean = false;\n  @State() loading: boolean = false;\n\n  @State() postagetype: any = { value: '' };\n  @State() weight: ProductPriceListWeight = { value: 0, name: '' } as ProductPriceListWeight;\n  @State() weightvalue: number = 0;\n\n  componentWillLoad() {\n    this.setState();\n    this.getDataSource().then(() => {});\n  }\n\n  @Watch('market')\n  @Watch('language')\n  setState() {\n    if (this.market) {\n      state.market = markets[this.market] as ProductPriceListMarket;\n    }\n    if (this.language && translations[this.language]) {\n      state.i18n = translations[this.language] as PnfindPricei18n;\n    }\n  }\n\n  async getDataSource() {\n    if (!this.productid) {\n      return;\n    }\n    this.loading = true;\n    const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;\n    const req = await fetch(this.source + cacheBusting);\n    const reqbody = await req.blob();\n    try {\n      const convertedData = await convertFileFromStream(reqbody);\n      this.sourceData = convertedData;\n      this.filterItems();\n    } catch (e) {\n      this.loading = false;\n      console.warn('Unable to parse data');\n    }\n  }\n\n  @Watch('postagetype')\n  @Watch('weightvalue')\n  filterItems() {\n    if (!this.sourceData?.data) {\n      console.info('Data has not yet been loaded');\n      return;\n    }\n    this.loading = false;\n    const productIdItems = this.sourceData.data.filter(x => x.id === this.productid);\n    if (productIdItems.length === 0) {\n      return;\n    }\n    this.postagetype.value = productIdItems[0].what;\n\n    if (!weights[this.postagetype.value] || weights[this.postagetype.value].length === 0) {\n      return;\n    }\n    if (this.weightvalue === 0) {\n      this.weight = weights[this.postagetype.value][0];\n      this.weightvalue = this.weight.value;\n    }\n\n    // For letters we use grams. Otherwise we use KG\n    const comparisonWeight = this.weight.abbreviation.toLocaleLowerCase() === 'kg' && this.postagetype.value === 'letter' ? this.weight.value * 1000 : this.weight.value;\n\n    let weightFilteredData = productIdItems.filter(x => x.maxweight === comparisonWeight);\n\n    // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value\n    if (weightFilteredData.length === 0) {\n      weightFilteredData = productIdItems.filter(x => x.maxweight >= comparisonWeight);\n      if (weightFilteredData.length > 0) {\n        // We reverse the result array since the map will take the last unique item instead of the first\n        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item['id'], item])).values()];\n        if (uniqueWeightOptions.length > 0) {\n          weightFilteredData = uniqueWeightOptions;\n        }\n      }\n    }\n\n    this.filteredItems = weightFilteredData;\n\n    this.gotData = this.filteredItems.length > 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\">\n          <slot />\n        </div>\n\n        {this.loading ? <pn-spinner></pn-spinner> : null}\n\n        {this.postagetype.value && weights[this.postagetype.value] ? (\n          <div class=\"weightselection\">\n            <div class=\"weightoption\">\n              <div class=\"weightoption-input\">\n                <pn-input\n                  inputid=\"weightvalue\"\n                  name=\"weightvalue\"\n                  type=\"number\"\n                  label={state.i18n.weightlabel}\n                  value={this.weightvalue}\n                  onChange={e => {\n                    if (e && e.target && e.target.value) {\n                      const weightNum = parseInt(e.target.value, 10);\n                      if (!isNaN(weightNum)) {\n                        let matchingWeights = (weights[this.postagetype.value] as ProductPriceListWeight[]).filter(x => {\n                          let weightInGrams = x.abbreviation === 'kg' ? x.value * 1000 : x.value;\n                          return weightInGrams >= weightNum;\n                        });\n                        if (matchingWeights && matchingWeights.length > 0) {\n                          this.weight = matchingWeights[0];\n                          this.weightvalue = this.weight.value;\n                        }\n                      }\n                    }\n                  }}\n                ></pn-input>\n                <span class=\"weightoption-input-abbreviation\">{this.weight.abbreviation}</span>\n              </div>\n              <div class=\"weightoption-range\">\n                <input\n                  type=\"range\"\n                  id=\"weightrange\"\n                  name=\"weightrange\"\n                  list=\"weightlist\"\n                  value={!this.weight.value ? 0 : weights[this.postagetype.value].findIndex(x => x.value === this.weightvalue)}\n                  onChange={e => {\n                    const value = (e.target as HTMLInputElement).value;\n                    this.weight = weights[this.postagetype.value][value];\n                    this.weightvalue = this.weight.value;\n                  }}\n                  min=\"0\"\n                  // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }\n                  max={weights[this.postagetype.value].length - 1}\n                />\n                <datalist id=\"weightlist\">\n                  {weights[this.postagetype.value].map((weight, weightindex) => {\n                    let labelText = weight.name;\n                    if (weights[this.postagetype.value].length > 6) {\n                      labelText = weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1 ? weight.name : '';\n                    }\n                    return <option value={weightindex} {...(labelText ? { label: labelText } : {})}></option>;\n                  })}\n                </datalist>\n              </div>\n            </div>\n          </div>\n        ) : null}\n\n        <div class=\"resultlist\" data-list-count={this.filteredItems.length}>\n          {this.filteredItems.map((item: ProductPriceItem) => (\n            <div>\n              {/* <pn-product-pricelist-result item={item}></pn-product-pricelist-result> */}\n              <pn-find-price-result item={item}></pn-find-price-result>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["translations","sv","componentheading","deliveryscopeheading","resultlistheading","weightlabel","maxweightlabel","maxmeasurementlabel","senddirectcta","stampshopcta","message","servicePointHeader","servicePointLink","en","da","no","fi","markets","se","currency","dk","pnProductPricelistCss","PnProductPricelistStyle0","PnFindProductPricelist","types","data","value","name","componentWillLoad","this","setState","getDataSource","then","market","state","language","i18n","productid","loading","cacheBusting","Math","floor","random","req","fetch","source","reqbody","blob","convertedData","convertFileFromStream","sourceData","filterItems","e","console","warn","info","productIdItems","filter","x","id","length","postagetype","what","weights","weightvalue","weight","comparisonWeight","abbreviation","toLocaleLowerCase","weightFilteredData","maxweight","uniqueWeightOptions","Map","reverse","map","item","values","filteredItems","gotData","render","h","Host","key","class","inputid","type","label","onChange","target","weightNum","parseInt","isNaN","matchingWeights","weightInGrams","list","findIndex","min","max","weightindex","labelText"],"sources":["src/components/widgets/pn-product-pricelist/pn-product-pricelist-translations.ts","src/components/widgets/pn-product-pricelist/pn-product-pricelist.scss?tag=pn-product-pricelist","src/components/widgets/pn-product-pricelist/pn-product-pricelist.tsx"],"sourcesContent":["export const translations = {\n  sv: {\n    componentheading: 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',\n    deliveryscopeheading: 'Endast leveranser inom Sverige',\n    resultlistheading: 'Några bra alternativ för dig',\n    weightlabel: 'Vikt',\n    maxweightlabel: 'Maxvikt',\n    maxmeasurementlabel: 'Maxvolym',\n    senddirectcta: 'Köp online',\n    stampshopcta: 'Köp frimärken',\n    message: '*Vid köp hos valfritt ombud',\n    servicePointHeader: 'Eller hitta närmaste serviceställe',\n    servicePointLink: 'Sök serviceställe eller brevlåda',\n  },\n  en: {\n    componentheading: 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',\n    deliveryscopeheading: 'Deliveries within Sweden only',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Weight',\n    maxweightlabel: 'Max weight',\n    maxmeasurementlabel: 'Maximum measurement',\n    senddirectcta: 'Buy Online',\n    stampshopcta: 'Buy Stamps',\n    message: 'When buying from any agent',\n    servicePointHeader: 'Or find nearest service point',\n    servicePointLink: 'Search letter-box or service point',\n  },\n  da: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Kun leveringer indenfor Sverige',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Vægt',\n    maxweightlabel: 'Max vægt',\n    maxmeasurementlabel: 'Maks. Volumen',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n  no: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Kun leveranser innen Sverige',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Vekt',\n    maxweightlabel: 'Maks vekt',\n    maxmeasurementlabel: 'Maks volum',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n  fi: {\n    componentheading: 'Vad vill du skicka?',\n    deliveryscopeheading: 'Toimitukset vain Ruotsin sisällä',\n    resultlistheading: 'Some suitable options for you',\n    weightlabel: 'Paino',\n    maxweightlabel: 'Max paino',\n    maxmeasurementlabel: 'Max äänenvoimakkuus',\n    senddirectcta: 'Buy shipping in Send Direct',\n    stampshopcta: 'Order home stamps from the webshop',\n  },\n};\n\nexport const markets = {\n  se: {\n    currency: 'kr',\n  },\n  dk: {\n    currency: 'dk',\n  },\n  fi: {\n    currency: ' €',\n  },\n  no: {\n    currency: 'kr',\n  },\n};\n","@import '../../../globals/main.scss';\n\npn-product-pricelist {\n  pn-spinner {\n    margin: 1em auto;\n  }\n\n  h2,\n  .heading {\n    text-align: center;\n    font-size: 1.5em;\n    line-height: 1.1;\n    font-weight: bold;\n    margin-bottom: 1rem;\n  }\n\n  .content,\n  .weightselection,\n  .resultlist {\n    max-width: 50em;\n    margin: 0 auto 1.6rem;\n  }\n\n  .weightoption {\n    display: flex;\n    gap: 1.6rem;\n  }\n\n  .weightoption-input {\n    width: 5em;\n    position: relative;\n    display: none;\n\n    input::-webkit-outer-spin-button,\n    input::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  }\n\n  .weightoption-input-abbreviation {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 1.2em;\n    margin-top: 1.55rem;\n    font-weight: 500;\n  }\n\n  .weightoption-range {\n    flex-grow: 1;\n    align-self: flex-end;\n    position: relative;\n    top: 0.5em;\n    input {\n      width: calc(100% - 1.5em);\n    }\n    datalist {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      font-size: 0.75em;\n    }\n  }\n\n  .resultlist:not([data-list-count='0']) {\n    margin-top: 2em;\n  }\n}\n","import { Component, h, Prop, State, Host, Watch } from '@stencil/core';\nimport { translations, markets } from './pn-product-pricelist-translations';\nimport { FindPriceWeight, PnfindPriceMarket, PnfindPricei18n, FindPriceSizeCategory } from '../pn-find-price/pn-find-price-types';\nimport { ProductPriceSourceData, ProductPriceItem } from '../../../globals/shared/productprice/product-price-types';\nimport { ProductPriceListi18n, ProductPriceListMarket, ProductPriceListWeight } from './pn-product-pricelist-types';\nimport { weights } from './data.js';\nimport { convertFileFromStream } from '../../../globals/shared/productprice/convert.js';\n// import { state } from \"./pn-product-pricelist-store\";\nimport { state } from '../pn-find-price/pn-find-price-store';\n\n@Component({\n  tag: 'pn-product-pricelist',\n  styleUrl: 'pn-product-pricelist.scss',\n})\nexport class PnFindProductPricelist {\n  @Prop() source: string = 'https://com-inte.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx';\n  @Prop({ mutable: true }) language: string = 'sv';\n  @Prop({ mutable: true }) market: string = 'se';\n  @Prop() productid: string = '';\n\n  @State() filteredItems: ProductPriceItem[] = [];\n  @State() sourceData: ProductPriceSourceData = { types: [], data: [] };\n  @State() gotData: boolean = false;\n  @State() loading: boolean = false;\n\n  @State() postagetype: any = { value: '' };\n  @State() weight: ProductPriceListWeight = { value: 0, name: '' } as ProductPriceListWeight;\n  @State() weightvalue: number = 0;\n\n  componentWillLoad() {\n    this.setState();\n    this.getDataSource().then(() => {});\n  }\n\n  @Watch('market')\n  @Watch('language')\n  setState() {\n    if (this.market) {\n      state.market = markets[this.market] as ProductPriceListMarket;\n    }\n    if (this.language && translations[this.language]) {\n      state.i18n = translations[this.language] as PnfindPricei18n;\n    }\n  }\n\n  async getDataSource() {\n    if (!this.productid) {\n      return;\n    }\n    this.loading = true;\n    const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;\n    const req = await fetch(this.source + cacheBusting);\n    const reqbody = await req.blob();\n    try {\n      const convertedData = await convertFileFromStream(reqbody);\n      this.sourceData = convertedData;\n      this.filterItems();\n    } catch (e) {\n      this.loading = false;\n      console.warn('Unable to parse data');\n    }\n  }\n\n  @Watch('postagetype')\n  @Watch('weightvalue')\n  filterItems() {\n    if (!this.sourceData?.data) {\n      console.info('Data has not yet been loaded');\n      return;\n    }\n    this.loading = false;\n    const productIdItems = this.sourceData.data.filter(x => x.id === this.productid);\n    if (productIdItems.length === 0) {\n      return;\n    }\n    this.postagetype.value = productIdItems[0].what;\n\n    if (!weights[this.postagetype.value] || weights[this.postagetype.value].length === 0) {\n      return;\n    }\n    if (this.weightvalue === 0) {\n      this.weight = weights[this.postagetype.value][0];\n      this.weightvalue = this.weight.value;\n    }\n\n    // For letters we use grams. Otherwise we use KG\n    const comparisonWeight = this.weight.abbreviation.toLocaleLowerCase() === 'kg' && this.postagetype.value === 'letter' ? this.weight.value * 1000 : this.weight.value;\n\n    let weightFilteredData = productIdItems.filter(x => x.maxweight === comparisonWeight);\n\n    // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value\n    if (weightFilteredData.length === 0) {\n      weightFilteredData = productIdItems.filter(x => x.maxweight >= comparisonWeight);\n      if (weightFilteredData.length > 0) {\n        // We reverse the result array since the map will take the last unique item instead of the first\n        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item['id'], item])).values()];\n        if (uniqueWeightOptions.length > 0) {\n          weightFilteredData = uniqueWeightOptions;\n        }\n      }\n    }\n\n    this.filteredItems = weightFilteredData;\n\n    this.gotData = this.filteredItems.length > 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\">\n          <slot />\n        </div>\n\n        {this.loading ? <pn-spinner></pn-spinner> : null}\n\n        {this.postagetype.value && weights[this.postagetype.value] ? (\n          <div class=\"weightselection\">\n            <div class=\"weightoption\">\n              <div class=\"weightoption-input\">\n                <pn-input\n                  inputid=\"weightvalue\"\n                  name=\"weightvalue\"\n                  type=\"number\"\n                  label={state.i18n.weightlabel}\n                  value={this.weightvalue}\n                  onChange={e => {\n                    if (e && e.target && e.target.value) {\n                      const weightNum = parseInt(e.target.value, 10);\n                      if (!isNaN(weightNum)) {\n                        let matchingWeights = (weights[this.postagetype.value] as ProductPriceListWeight[]).filter(x => {\n                          let weightInGrams = x.abbreviation === 'kg' ? x.value * 1000 : x.value;\n                          return weightInGrams >= weightNum;\n                        });\n                        if (matchingWeights && matchingWeights.length > 0) {\n                          this.weight = matchingWeights[0];\n                          this.weightvalue = this.weight.value;\n                        }\n                      }\n                    }\n                  }}\n                ></pn-input>\n                <span class=\"weightoption-input-abbreviation\">{this.weight.abbreviation}</span>\n              </div>\n              <div class=\"weightoption-range\">\n                <input\n                  type=\"range\"\n                  id=\"weightrange\"\n                  name=\"weightrange\"\n                  list=\"weightlist\"\n                  value={!this.weight.value ? 0 : weights[this.postagetype.value].findIndex(x => x.value === this.weightvalue)}\n                  onChange={e => {\n                    const value = (e.target as HTMLInputElement).value;\n                    this.weight = weights[this.postagetype.value][value];\n                    this.weightvalue = this.weight.value;\n                  }}\n                  min=\"0\"\n                  // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }\n                  max={weights[this.postagetype.value].length - 1}\n                />\n                <datalist id=\"weightlist\">\n                  {weights[this.postagetype.value].map((weight, weightindex) => {\n                    let labelText = weight.name;\n                    if (weights[this.postagetype.value].length > 6) {\n                      labelText = weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1 ? weight.name : '';\n                    }\n                    return <option value={weightindex} {...(labelText ? { label: labelText } : {})}></option>;\n                  })}\n                </datalist>\n              </div>\n            </div>\n          </div>\n        ) : null}\n\n        <div class=\"resultlist\" data-list-count={this.filteredItems.length}>\n          {this.filteredItems.map((item: ProductPriceItem) => (\n            <div>\n              {/* <pn-product-pricelist-result item={item}></pn-product-pricelist-result> */}\n              <pn-find-price-result item={item}></pn-find-price-result>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pn-market-web-components/p-94a69959.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,g as t,h as n,d}from"./p-bb1c965e.js";import{d as r}from"./p-3e4d9396.js";const c="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-dropdown-choice-adds-row{display:block;width:80rem}pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:50%;margin-bottom:1rem}@media only screen and (max-width: 640px){pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:100%}}pn-dropdown-choice-adds-row .pn-dropdown-choice-table{width:100%;border-spacing:0rem;border:none !important}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th{text-align:left;padding:1rem 0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th label{color:#5e554a;font-size:1.4rem;font-weight:400}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .generated-table-row{display:flex;margin-bottom:2rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header{display:flex;margin:2rem 0 3rem 0;font-weight:500}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name{padding-right:0.5rem;width:35%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name pn-select{width:95%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input{width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input pn-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input pn-input{width:100%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-delete,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-delete{margin:1rem;width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody td{padding:0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody tr:nth-child(even){background-color:#effbff}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody .tr-delete{text-align:center}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td small{color:#a70707;vertical-align:middle}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td pn-icon{margin-right:0.25em;vertical-align:middle}";const i=c;const s=class{constructor(t){e(this,t);this.rowvalues=o(this,"rowvalues",7);this.dropdownData=null;this.languageCode=null;this.addRowDropdownName="";this.addRowDropdownPlaceholder="";this.addRowDropdownLabel="";this.rowNameLabel="";this.rowHasDropdown=true;this.rowDropdownLabel="";this.rowDropdownPlaceholder="";this.rowInputLabel="";this.rowDeleteButtonText="";this.totalInputLimit=0;this.inputLimitWarning=null;this.inputEmptyWarning=null;this.dropdownEmptyWarning=null;this.nextRowIndex=null;this.rowSelectDropdownArr=null;this.formValue=null}get hostElement(){return t(this)}pnRowSelectDropdown=null;tableHead=null;tableBody=null;_dropdownData;rowvalues;dropdownDataWatcher(){if(typeof this.dropdownData==="string"){this._dropdownData=JSON.parse(this.dropdownData)}else{this._dropdownData=this.dropdownData}}componentWillLoad(){this.dropdownDataWatcher()}componentDidLoad(){this.setInitialValues();this.addEventHandlers()}addEventHandlers(){this.pnRowSelectDropdown.addEventListener("change",r(this.addRowElement.bind(this),500))}setInitialValues(){this.nextRowIndex=0;this.setRowSelectDropdownArr()}setRowSelectDropdownArr(){this.rowSelectDropdownArr=[];this._dropdownData.forEach((e=>{this.rowSelectDropdownArr.push(e.label)}))}formRowEvent=e=>{const o=r(this.updateHiddenFieldValue.bind(this),500);if(e.target.matches("input")){["change","keyup"].forEach((t=>{e.target.addEventListener(t,o)}))}else{const t=e.target.closest(".generated-table-row")?.querySelector("pn-select");if(t){t.addEventListener("change",o)}}};updateHiddenFieldValue(){try{const e=[...this.tableBody.querySelectorAll(".generated-table-row")];const o=this.hostElement.querySelector(".pn-row-select-dropdown");if(!o){return}if(!e.length){o.setAttribute("error",`${this.dropdownEmptyWarning||"This field cannot be empty"}`);this.formValue="";this.rowvalues.emit("");return}const t=e.map((e=>{const o=e.querySelector(".tr-name");const t=e.querySelector(".tr-dropdown");const n=e.querySelector(".tr-input");if(!o||!n){throw new Error("Required elements missing from row")}const d={row:[{name:this.rowNameLabel,value:o.innerHTML}]};if(t){const e=t.querySelector("pn-select");const o=e?.querySelector("select");const n=o?.value||"";if(n){d.row.push({name:this.rowDropdownLabel,value:n})}}const r=n.querySelector("input");const c=parseInt(r?.value||"0",10);if(c>0){d.row.push({name:this.rowInputLabel,value:c.toString()})}return d}));if(!t.length||t.length!==e.length){this.formValue="";return}this.formValue=`PN-JSON|${JSON.stringify(t)}`;if(this.validateInputs()){this.rowvalues.emit(this.formValue);return}}catch(e){console.error("Error updating field value: ",e);this.formValue=""}}addRowElement(e){const o=e.target;const t=o?.value;if(!t){return}const n=this.hostElement.querySelector(".pn-row-select-dropdown");n?.removeAttribute("error");if(!this.tableBody){console.error("tableBody is not defined.");return}const d=document.createElement("div");d.setAttribute("index",`${this.nextRowIndex}`);d.className="generated-table-row";d.onclick=e=>this.formRowEvent(e);const r=document.createElement("div");r.className="tr-name";r.innerHTML=t;r.dataset.name=t;d.appendChild(r);const c=this._dropdownData?.find((e=>e.label===t));if(c?.values?.length){this.rowHasDropdown=true;const e=this.createDropdownColumn(t);d.appendChild(e)}else{this.rowHasDropdown=false;const e=document.createElement("div");e.className="tr-column";d.appendChild(e)}const i=this.createInputColumn(t);d.appendChild(i);const s=this.createDeleteButtonColumn();d.appendChild(s);this.tableBody.appendChild(d);this.updateRowSelectDropdown();this.nextRowIndex++}getCurrentRow(e){return this.hostElement.querySelectorAll(`.tr-name[data-name='${e}'`)}createDropdownColumn(e){const o=document.createElement("div");o.setAttribute("class","tr-dropdown");const t=this._dropdownData.find((o=>o.label===e));const n=[];const d=this.getCurrentRow(e);d.forEach((e=>{n.push(e.parentElement?.querySelector(".tr-dropdown [aria-selected=true]")?.textContent)}));if(t.values.length){const n=document.createElement("pn-select");n.setAttribute("name",`${e}-dropdown`);n.setAttribute("placeholder",this.rowDropdownPlaceholder);n.setAttribute("required","true");n.setAttribute("error","");const d=document.createElement("option");d.setAttribute("value","");d.textContent=this.rowDropdownPlaceholder;d.selected=true;d.disabled=true;n.appendChild(d);t.values.forEach((e=>{const o=document.createElement("option");o.setAttribute("label",e.label);o.setAttribute("value",e.label);o.textContent=e.label;n.appendChild(o)}));o.appendChild(n)}return o}createInputColumn(e){const o=document.createElement("div");o.setAttribute("class","tr-input");const t=document.createElement("pn-input");t.setAttribute("type","number");t.setAttribute("name",`${e}-input`);t.setAttribute("placeholder","0");if(this.totalInputLimit>0){t.setAttribute("max",`${this.totalInputLimit}`)}t.setAttribute("min","0");t.setAttribute("error","");o.appendChild(t);return o}createDeleteButtonColumn(){const e=document.createElement("div");e.setAttribute("class","tr-delete");const o=document.createElement("pn-button");o.onclick=e=>this.deleteRow(e);o.setAttribute("appearance","warning");o.setAttribute("small","true");o.appendChild(document.createTextNode(this.rowDeleteButtonText));e.appendChild(o);return e}updateRowSelectDropdown(){[].map.call(this.tableBody.querySelectorAll(".tr-name"),(e=>{const o=e?.parentElement?.querySelector(".tr-dropdown");const t=o?.querySelector(".pn-select-content span")?.textContent;const n={rowName:e?.innerHTML,selectedValue:o?.querySelector("[aria-selected=true]")?.textContent,placeholder:t};return n}));const e=this.pnRowSelectDropdown.querySelectorAll("option");e.forEach((e=>{e.removeAttribute("selected")}))}deleteRow(e){e.preventDefault();this.nextRowIndex--;const o=e.currentTarget;const t=o.closest(".generated-table-row");t.remove();const n=[...this.tableBody.querySelectorAll(".generated-table-row")];n.map(((e,o)=>{e.setAttribute("index",`${o}`)}));this.updateHiddenFieldValue();this.updateRowSelectDropdown()}validateInputs(){const e=this.tableBody.querySelectorAll("pn-select");const o=this.tableBody.querySelectorAll("pn-input");let t=false;let n=false;if(e){e.forEach((e=>{if(!e){return}const o=e.querySelector("select");const n=o?.value||"";if(n===null||n===""){e.setAttribute("error",`${this.dropdownEmptyWarning||"This field cannot be empty"}`);t=true}else{e.setAttribute("error","")}}))}if(o){o.forEach((e=>{if(e){const o=e.querySelector("input");let t=parseInt(o.value);if(this.totalInputLimit<t&&e.hasAttribute("max")){e.setAttribute("error",`${this.inputLimitWarning||"Amount too high"}`);n=true}else if(t<=0||isNaN(t)){e.setAttribute("error",`${this.inputEmptyWarning||"This field cannot be empty"}`);n=true}else{e.setAttribute("error","");n=false}}}))}if(t||n){return false}return true}render(){return n(d,{key:"fd91d96d714f89cab04d27588c78c933e4758a29"},n("div",{key:"3c8c900cc143afe7331b5717649d0ceef3fb1b97",class:"dropdown-choice-form-row"},n("pn-select",{key:"42cf006bfd234c61e115bb3fd90d8fa5bc9b937f",ref:e=>this.pnRowSelectDropdown=e,name:this.addRowDropdownName,label:this.addRowDropdownLabel,class:"pn-row-select-dropdown",language:this.languageCode},n("option",{key:"aa923ce23c5e94ac3ee98701b33a83461cdd40d9",value:"",selected:true,disabled:true},this.addRowDropdownPlaceholder),this.rowSelectDropdownArr?.map((e=>n("option",{label:e,value:e},e))))),n("div",{key:"41cd6fc5cca7544033bbb7e811da28a92f631f44",class:"dropdown-choice-form-row"},n("div",{key:"a76149b35b83be8964ac9e0177d5677f7bdb9c39",class:"pn-dropdown-choice-table"},n("div",{key:"417b71529a5491b4e8900b800bbbf89fe2ef0c6d",ref:e=>this.tableHead=e},this.nextRowIndex===0?null:n("div",{class:"table-header"},n("div",{class:"table-header-name"},n("label",null,this.rowNameLabel)),n("div",{class:"table-header-dropdown"},n("label",null,this.rowDropdownLabel)),n("div",{class:"table-header-input"},n("label",null,this.rowInputLabel)),n("div",{class:"table-header-delete"}))),n("div",{key:"7ff98dc256a4aa7a613ac06474b18fc7f9458aeb",ref:e=>this.tableBody=e,class:"pn-dropdown-choice-table-slot"},n("slot",{key:"659095efebf6f2b123b4586b2d2913431b1cc6c2"})))))}static get watchers(){return{dropdownData:["dropdownDataWatcher"]}}};s.style=i;export{s as pn_dropdown_choice_adds_row};
+//# sourceMappingURL=p-94a69959.entry.js.map

package/dist/pn-market-web-components/p-94a69959.entry.js.map

@@ -0,0 +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","formValues","map","row","nameElm","dropdownElm","inputElm","Error","rowData","name","rowNameLabel","value","innerHTML","pnSelect","nativeSelect","dropdownSelection","rowDropdownLabel","input","inputValue","parseInt","rowInputLabel","toString","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      const formValues = allRows.map(row => {\n        const nameElm = row.querySelector('.tr-name');\n        const dropdownElm = row.querySelector('.tr-dropdown');\n        const inputElm = row.querySelector('.tr-input');\n\n        if (!nameElm || !inputElm) {\n          throw new Error('Required elements missing from row');\n        }\n\n        const rowData = {\n          row: [\n            {\n              name: this.rowNameLabel,\n              value: nameElm.innerHTML\n            }\n          ]\n        };\n\n        if (dropdownElm) {\n          const pnSelect = dropdownElm.querySelector('pn-select');\n          const nativeSelect = pnSelect?.querySelector('select');\n          const dropdownSelection = nativeSelect?.value || '';\n          if (dropdownSelection) {\n            rowData.row.push({\n              name: this.rowDropdownLabel,\n              value: dropdownSelection\n            });\n          }\n        }\n\n        const input = inputElm.querySelector('input');\n        const inputValue = parseInt(input?.value || '0', 10);\n        if (inputValue > 0) {\n          rowData.row.push({\n            name: this.rowInputLabel,\n            value: inputValue.toString()\n          });\n        }\n        return rowData;\n      });\n\n      if (!formValues.length || formValues.length !== allRows.length) {\n        this.formValue = '';\n        return;\n      }\n\n      this.formValue = `PN-JSON|${JSON.stringify(formValues)}`;\n\n      if (this.validateInputs()) {\n        this.rowvalues.emit(this.formValue);\n        return;\n      }\n\n    } catch (error) {\n      console.error('Error updating field value: ', error);\n      this.formValue = '';\n    }\n  }\n\n  addRowElement(e: CustomEvent) {\n    const selectedElement = e.target as HTMLSelectElement;\n    const selectedValue = selectedElement?.value;\n\n    if (!selectedValue) {\n      return;\n    }\n\n    const mainDropdown = this.hostElement.querySelector('.pn-row-select-dropdown');\n    mainDropdown?.removeAttribute('error');\n\n    if (!this.tableBody) {\n      console.error('tableBody is not defined.');\n      return;\n    }\n\n    const newRow = document.createElement('div');\n    newRow.setAttribute('index', `${this.nextRowIndex}`);\n    newRow.className = 'generated-table-row';\n    newRow.onclick = e => this.formRowEvent(e);\n\n    const rowNameColumn = document.createElement('div');\n    rowNameColumn.className = 'tr-name';\n    rowNameColumn.innerHTML = selectedValue;\n    rowNameColumn.dataset.name = selectedValue;\n    newRow.appendChild(rowNameColumn);\n\n    const selectedR = this._dropdownData?.find(item => item.label === selectedValue);\n\n    if (selectedR?.values?.length) {\n      this.rowHasDropdown = true;\n      const dropdownCol = this.createDropdownColumn(selectedValue);\n      newRow.appendChild(dropdownCol);\n    } else {\n      this.rowHasDropdown = false;\n      const emptyDropdownCol = document.createElement('div');\n      emptyDropdownCol.className = 'tr-column';\n      newRow.appendChild(emptyDropdownCol);\n    }\n\n    const rowInputColumn = this.createInputColumn(selectedValue);\n    newRow.appendChild(rowInputColumn);\n\n    const deleteButton = this.createDeleteButtonColumn();\n    newRow.appendChild(deleteButton);\n\n    this.tableBody.appendChild(newRow);\n\n    this.updateRowSelectDropdown();\n    this.nextRowIndex++;\n  }\n\n  getCurrentRow(selectedValue: string) {\n    return this.hostElement.querySelectorAll(`.tr-name[data-name='${selectedValue}'`);\n  }\n\n  createDropdownColumn(selectedValue: string) {\n    const dropdownColumn = document.createElement('div');\n    dropdownColumn.setAttribute('class', 'tr-dropdown');\n    const selectedItem = this._dropdownData.find(arr => arr.label === selectedValue);\n    const selectedOptionValues = [];\n    const currentRow = this.getCurrentRow(selectedValue);\n\n    currentRow.forEach(row => {\n      selectedOptionValues.push(row.parentElement?.querySelector('.tr-dropdown [aria-selected=true]')?.textContent);\n    });\n\n    if (selectedItem.values.length) {\n      const dropdown = document.createElement('pn-select');\n      dropdown.setAttribute('name', `${selectedValue}-dropdown`);\n      dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);\n      dropdown.setAttribute('required', 'true');\n      dropdown.setAttribute('error', '');\n\n      const placeholder = document.createElement('option');\n      placeholder.setAttribute(\"value\", \"\");\n      placeholder.textContent = this.rowDropdownPlaceholder;\n      placeholder.selected = true;\n      placeholder.disabled = true;\n      dropdown.appendChild(placeholder);\n\n      selectedItem.values.forEach(childItem => {\n        const childOption = document.createElement('option');\n        childOption.setAttribute(\"label\", childItem.label);\n        childOption.setAttribute(\"value\", childItem.label);\n        childOption.textContent = childItem.label;\n        dropdown.appendChild(childOption);\n      });\n\n      dropdownColumn.appendChild(dropdown);\n    }\n\n    return dropdownColumn;\n  }\n\n  createInputColumn(selectedValue: string) {\n    const inputColumn = document.createElement('div');\n    inputColumn.setAttribute('class', 'tr-input');\n    const inputElm = document.createElement('pn-input');\n    inputElm.setAttribute('type', 'number');\n    inputElm.setAttribute('name', `${selectedValue}-input`);\n    inputElm.setAttribute('placeholder', '0');\n    if (this.totalInputLimit > 0) {\n      inputElm.setAttribute('max', `${this.totalInputLimit}`);\n    }\n    inputElm.setAttribute('min', '0');\n    inputElm.setAttribute('error', '');\n    inputColumn.appendChild(inputElm);\n    return inputColumn;\n  }\n\n  createDeleteButtonColumn() {\n    const buttonColumn = document.createElement('div');\n    buttonColumn.setAttribute('class', 'tr-delete');\n    const buttonElm = document.createElement('pn-button');\n    buttonElm.onclick = e => this.deleteRow(e);\n    buttonElm.setAttribute('appearance', 'warning');\n    buttonElm.setAttribute('small', 'true');\n    buttonElm.appendChild(document.createTextNode(this.rowDeleteButtonText));\n    buttonColumn.appendChild(buttonElm);\n    return buttonColumn;\n  }\n\n  updateRowSelectDropdown() {\n    type Row = { rowName: string; selectedValue: string; placeholder: string };\n\n    const rows: Row[] = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {\n      const dropdownColumn = el?.parentElement?.querySelector('.tr-dropdown');\n      const dropdownPlaceholder = dropdownColumn?.querySelector('.pn-select-content span')?.textContent;\n      const row: Row = {\n        rowName: el?.innerHTML,\n        selectedValue: dropdownColumn?.querySelector('[aria-selected=true]')?.textContent,\n        placeholder: dropdownPlaceholder,\n      };\n      return row;\n    });\n\n    const selectOptions = this.pnRowSelectDropdown.querySelectorAll('option');\n    selectOptions.forEach(elm => {\n      elm.removeAttribute('selected');\n    });\n  }\n\n  deleteRow(e: Event) {\n    e.preventDefault();\n    this.nextRowIndex--;\n    const targetElm = e.currentTarget as HTMLButtonElement;\n    const targetRow = targetElm.closest('.generated-table-row');\n    targetRow.remove();\n    const allRows = [...this.tableBody.querySelectorAll('.generated-table-row')];\n\n    allRows.map((elm, index) => {\n      elm.setAttribute('index', `${index}`);\n    });\n    this.updateHiddenFieldValue()\n    this.updateRowSelectDropdown();\n  }\n\n  validateInputs() {\n    const dropdownSelections = this.tableBody.querySelectorAll('pn-select');\n    const numberInputs = this.tableBody.querySelectorAll('pn-input');\n    let selectionEmpty = false;\n    let showWarning = false;\n\n    if (dropdownSelections) {\n      dropdownSelections.forEach(dropdownElem => {\n        if (!dropdownElem) {\n          return;\n        }\n\n        const selection = dropdownElem.querySelector('select');\n        const dropdownVal = selection?.value || '';\n\n        if (dropdownVal === null || dropdownVal === \"\") {\n          dropdownElem.setAttribute('error', `${this.dropdownEmptyWarning || \"This field cannot be empty\"}`);\n          selectionEmpty = true;\n        } else {\n          dropdownElem.setAttribute('error', '');\n        }\n      });\n    }\n\n    if (numberInputs) {\n      numberInputs.forEach(inputElem => {\n        if (inputElem) {\n          const currentNumber = inputElem.querySelector(\"input\");\n          let currentValue = parseInt(currentNumber.value);\n\n          if (this.totalInputLimit < currentValue && inputElem.hasAttribute('max')) {\n            inputElem.setAttribute('error', `${this.inputLimitWarning || \"Amount too high\"}`);\n            showWarning = true;\n          } else if (currentValue <= 0 || isNaN(currentValue)) {\n            inputElem.setAttribute('error', `${this.inputEmptyWarning || \"This field cannot be empty\"}`);\n            showWarning = true;\n          } else {\n            inputElem.setAttribute('error', '');\n            showWarning = false;\n          }\n        }\n      });\n    }\n\n    if (selectionEmpty || showWarning) {\n      return false;\n    }\n\n    return true;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown-choice-form-row\">\n          <pn-select\n            ref={el => (this.pnRowSelectDropdown = el as HTMLElement)}\n            name={this.addRowDropdownName}\n            label={this.addRowDropdownLabel}\n            class=\"pn-row-select-dropdown\"\n            language={this.languageCode}>\n            <option value=\"\" selected disabled>{this.addRowDropdownPlaceholder}</option>\n            {this.rowSelectDropdownArr?.map((value: string) => <option label={value} value={value}>{value}</option>)}\n          </pn-select>\n        </div>\n        <div class=\"dropdown-choice-form-row\">\n          <div class=\"pn-dropdown-choice-table\">\n            <div ref={el => (this.tableHead = el as HTMLElement)}>\n              {this.nextRowIndex === 0 ? null : (\n                <div class=\"table-header\">\n                  <div class=\"table-header-name\">\n                    <label>{this.rowNameLabel}</label>\n                  </div>\n                  <div class=\"table-header-dropdown\">\n                    <label>{this.rowDropdownLabel}</label>\n                  </div>\n                  <div class=\"table-header-input\">\n                    <label>{this.rowInputLabel}</label>\n                  </div>\n                  <div class=\"table-header-delete\"></div>\n                </div>\n              )}\n            </div>\n            <div ref={el => (this.tableBody = el as HTMLElement)} class=\"pn-dropdown-choice-table-slot\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pn-market-web-components/p-95519556.entry.js

@@ -0,0 +1,2 @@
+import{r as e,g as t,h as o,d as i}from"./p-bb1c965e.js";import{s as n}from"./p-8af1b914.js";import{a as l}from"./p-36b39340.js";import"./p-2509d18d.js";const a="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-profile-modal{margin:1em auto;display:flex;flex-direction:column;min-width:42.4rem;max-width:38.4rem;width:100%;padding:1.6rem;border-radius:8px;background:#ffffff}.profilemodal-container{padding:3.2rem;border-radius:8px;box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);border:0.1rem solid #f3f2f2;display:flex;flex-direction:column}.profilemodal-logo{display:none}.profilemodal-logo svg{display:block;margin:0 auto 2.4rem}.profilemodal-heading{text-align:center;font-weight:700}.profilemodal-content{margin:1.6rem 0 0}.profilemodal-content pn-segmented-control{transform:translateZ(0) translateX(-50%);left:50%}.profilemodal-cta{margin:1.6rem 0 0;transition:max-height 0.15s ease, opacity 0.15s ease;overflow:hidden;opacity:1}.profilemodal-cta[aria-hidden=true]{max-height:0;opacity:1}.profilemodal-cta>pn-button{width:100%}";const r=a;const d=class{constructor(t){e(this,t);this.heading=null;this.continueCtaText=null;this.choosenCompanyText=null;this.toText=null;this.chooseCustomerNumberText=null;this.isLoading=true}get hostElement(){return t(this)}componentWillLoad(){this.populateState();this.bindEvents()}populateState(){n.i18n.chooseCustomerNumberText=this.chooseCustomerNumberText;n.i18n.choosenCompanyText=this.choosenCompanyText;n.i18n.toText=this.toText;const e=this.hostElement.querySelector('pn-profile-modal-type[selected="true"]');if(e){n.selectedType=e.getAttribute("name")}}bindEvents(){const e=this.hostElement.querySelector("pn-segmented-control");if(e){e.addEventListener("change",this.onSegmentControlChange.bind(this))}}onSegmentControlChange(e){const t=e.target.value;const o=this.hostElement.querySelector(`[typeid="${t}"]`);if(o){const e=[...this.hostElement.querySelectorAll("pn-profile-modal-type")];e.forEach((e=>{e.setAttribute("selected",(e.getAttribute("typeid")===t)+"")}))}}onCTAClick(){if(!n.selectedUrl){console.log("no Url as been selected, will not continue")}}onUrlSelected(e){if(!e||!e.detail){return}n.selectedUrl=e.detail;const t=this.hostElement.querySelector(".profilemodal-cta pn-button");if(t){t.scrollIntoView({block:"start",inline:"nearest",behavior:"smooth"})}}render(){return o(i,{key:"763e310e52b30a79e2e6ac58670354c0ba782c07"},o("div",{key:"7896a9116cd2763c4c88813d2f22957ff0bf1c0b",class:"profilemodal-container"},o("div",{key:"ed023c0028a54f333fce9e4b445f0d4285b9da1c",class:"profilemodal-logo"},o("svg",{key:"41528c0c7a5c5b0211b2141036ae4672d8849847",viewBox:"0 0 133 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",width:"17.1rem",height:"3.2rem"},o("path",{key:"8f1dbba8d553f7556ec151eb3f01e28e40179faa","fill-rule":"evenodd","clip-rule":"evenodd",fill:"#00A0D6",d:"M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z"}))),this.heading===""?null:o("div",{class:"profilemodal-heading"},this.heading),o("div",{key:"d6ea1dfd8826b5d0c35c0fbea1f277e9fddf79cb",class:"profilemodal-content"},o("slot",{key:"9f64c3d1f0b5a478eb4315e2dfe308dcb32e6686"})),this.continueCtaText?o("div",{class:"profilemodal-cta","aria-hidden":!n.selectedUrl+""},o("pn-button",{onclick:this.onCTAClick,href:n.selectedUrl,icon:l},this.continueCtaText)):null))}};d.style=r;export{d as pn_profile_modal};
+//# sourceMappingURL=p-95519556.entry.js.map

package/dist/pn-market-web-components/{p-c89cb749.entry.js.map → p-95519556.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnProfileModalCss","PnProfileModalStyle0","PnProfileModal","componentWillLoad","this","populateState","bindEvents","state","i18n","chooseCustomerNumberText","choosenCompanyText","toText","selectedType","hostElement","querySelector","getAttribute","segmentControl","addEventListener","onSegmentControlChange","bind","e","contentId","target","value","content","types","querySelectorAll","forEach","type","setAttribute","onCTAClick","selectedUrl","console","log","onUrlSelected","detail","ctaBtn","scrollIntoView","block","inline","behavior","render","h","Host","key","class","viewBox","fill","xmlns","width","height","d","heading","continueCtaText","onclick","href","icon","arrow_right"],"sources":["src/components/profile/pn-profile-modal/pn-profile-modal.scss?tag=pn-profile-modal","src/components/profile/pn-profile-modal/pn-profile-modal.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-profile-modal {\n  margin: 1em auto;\n  display: flex;\n  flex-direction: column;\n  min-width: 42.4rem;\n  max-width: 38.4rem;\n  width: 100%;\n  padding: 1.6rem;\n  border-radius: 8px;\n  background: $white;\n}\n\n.profilemodal-container {\n  padding: 3.2rem;\n  border-radius: 8px;\n  box-shadow:\n    0 0.06rem 0.18rem rgba(0, 0, 0, 0.1),\n    0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);\n  border: 0.1rem solid $gray50;\n  display: flex;\n  flex-direction: column;\n}\n\n.profilemodal-logo {\n  display: none;\n  svg {\n    display: block;\n    margin: 0 auto 2.4rem;\n  }\n}\n\n.profilemodal-heading {\n  text-align: center;\n  font-weight: 700;\n}\n\n.profilemodal-content {\n  margin: 1.6rem 0 0;\n  pn-segmented-control {\n    transform: translateZ(0) translateX(-50%);\n    left: 50%;\n  }\n}\n\n.profilemodal-cta {\n  margin: 1.6rem 0 0;\n  transition:\n    max-height 0.15s ease,\n    opacity 0.15s ease;\n  overflow: hidden;\n  opacity: 1;\n  &[aria-hidden='true'] {\n    max-height: 0;\n    opacity: 1;\n  }\n  > pn-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\n\nimport state from './pn-profile-modal-store';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n  tag: 'pn-profile-modal',\n  styleUrl: 'pn-profile-modal.scss',\n})\nexport class PnProfileModal {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = null;\n  @Prop() continueCtaText: string = null;\n  @Prop() choosenCompanyText: string = null;\n  @Prop() toText: string = null;\n  @Prop() chooseCustomerNumberText: string = null;\n\n  @State() isLoading: boolean = true;\n\n  componentWillLoad() {\n    this.populateState();\n    this.bindEvents();\n  }\n  populateState() {\n    state.i18n.chooseCustomerNumberText = this.chooseCustomerNumberText;\n    state.i18n.choosenCompanyText = this.choosenCompanyText;\n    state.i18n.toText = this.toText;\n    const selectedType = this.hostElement.querySelector('pn-profile-modal-type[selected=\"true\"]');\n    if (selectedType) {\n      state.selectedType = selectedType.getAttribute('name');\n    }\n  }\n  bindEvents() {\n    const segmentControl = this.hostElement.querySelector('pn-segmented-control');\n    if (segmentControl) {\n      segmentControl.addEventListener('change', this.onSegmentControlChange.bind(this));\n    }\n  }\n  onSegmentControlChange(e) {\n    const contentId = e.target.value;\n    const content = this.hostElement.querySelector(`[typeid=\"${contentId}\"]`);\n    if (content) {\n      const types = [...this.hostElement.querySelectorAll('pn-profile-modal-type')];\n      types.forEach(type => {\n        type.setAttribute('selected', (type.getAttribute('typeid') === contentId) + '');\n      });\n    }\n  }\n\n  onCTAClick() {\n    if (!state.selectedUrl) {\n      console.log('no Url as been selected, will not continue');\n    }\n  }\n  @Listen('urlSelected')\n  onUrlSelected(e) {\n    if (!e || !e.detail) {\n      return;\n    }\n    state.selectedUrl = e.detail;\n    const ctaBtn = this.hostElement.querySelector('.profilemodal-cta pn-button');\n    if (ctaBtn) {\n      ctaBtn.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"profilemodal-container\">\n          <div class=\"profilemodal-logo\">\n            <svg viewBox=\"0 0 133 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.1rem\" height=\"3.2rem\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                fill=\"#00A0D6\"\n                d=\"M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z\"\n              ></path>\n            </svg>\n          </div>\n\n          {this.heading === '' ? null : <div class=\"profilemodal-heading\">{this.heading}</div>}\n          <div class=\"profilemodal-content\">\n            <slot />\n          </div>\n          {this.continueCtaText ? (\n            <div class=\"profilemodal-cta\" aria-hidden={!state.selectedUrl + ''}>\n              <pn-button onclick={this.onCTAClick} href={state.selectedUrl} icon={arrow_right}>\n                {this.continueCtaText}\n              </pn-button>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oJAAA,MAAMA,EAAoB,6vCAC1B,MAAAC,EAAeD,E,MCOFE,EAAc,M,sCAGC,K,qBACQ,K,wBACG,K,YACZ,K,8BACkB,K,eAEb,I,kCAE9B,iBAAAC,GACEC,KAAKC,gBACLD,KAAKE,Y,CAEP,aAAAD,GACEE,EAAMC,KAAKC,yBAA2BL,KAAKK,yBAC3CF,EAAMC,KAAKE,mBAAqBN,KAAKM,mBACrCH,EAAMC,KAAKG,OAASP,KAAKO,OACzB,MAAMC,EAAeR,KAAKS,YAAYC,cAAc,0CACpD,GAAIF,EAAc,CAChBL,EAAMK,aAAeA,EAAaG,aAAa,O,EAGnD,UAAAT,GACE,MAAMU,EAAiBZ,KAAKS,YAAYC,cAAc,wBACtD,GAAIE,EAAgB,CAClBA,EAAeC,iBAAiB,SAAUb,KAAKc,uBAAuBC,KAAKf,M,EAG/E,sBAAAc,CAAuBE,GACrB,MAAMC,EAAYD,EAAEE,OAAOC,MAC3B,MAAMC,EAAUpB,KAAKS,YAAYC,cAAc,YAAYO,OAC3D,GAAIG,EAAS,CACX,MAAMC,EAAQ,IAAIrB,KAAKS,YAAYa,iBAAiB,0BACpDD,EAAME,SAAQC,IACZA,EAAKC,aAAa,YAAaD,EAAKb,aAAa,YAAcM,GAAa,GAAG,G,EAKrF,UAAAS,GACE,IAAKvB,EAAMwB,YAAa,CACtBC,QAAQC,IAAI,6C,EAIhB,aAAAC,CAAcd,GACZ,IAAKA,IAAMA,EAAEe,OAAQ,CACnB,M,CAEF5B,EAAMwB,YAAcX,EAAEe,OACtB,MAAMC,EAAShC,KAAKS,YAAYC,cAAc,+BAC9C,GAAIsB,EAAQ,CACVA,EAAOC,eAAe,CAAEC,MAAO,QAASC,OAAQ,UAAWC,SAAU,U,EAIzE,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKE,QAAQ,aAAaC,KAAK,OAAOC,MAAM,6BAA6BC,MAAM,UAAUC,OAAO,UAC9FR,EAAA,QAAAE,IAAA,uDACY,UAAS,YACT,UACVG,KAAK,UACLI,EAAE,68FAKP/C,KAAKgD,UAAY,GAAK,KAAOV,EAAA,OAAKG,MAAM,wBAAwBzC,KAAKgD,SACtEV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,8CAEDxC,KAAKiD,gBACJX,EAAA,OAAKG,MAAM,mBAAkB,eAAetC,EAAMwB,YAAc,IAC9DW,EAAA,aAAWY,QAASlD,KAAK0B,WAAYyB,KAAMhD,EAAMwB,YAAayB,KAAMC,GACjErD,KAAKiD,kBAGR,M","ignoreList":[]}
+{"version":3,"names":["pnProfileModalCss","PnProfileModalStyle0","PnProfileModal","componentWillLoad","this","populateState","bindEvents","state","i18n","chooseCustomerNumberText","choosenCompanyText","toText","selectedType","hostElement","querySelector","getAttribute","segmentControl","addEventListener","onSegmentControlChange","bind","e","contentId","target","value","content","types","querySelectorAll","forEach","type","setAttribute","onCTAClick","selectedUrl","console","log","onUrlSelected","detail","ctaBtn","scrollIntoView","block","inline","behavior","render","h","Host","key","class","viewBox","fill","xmlns","width","height","d","heading","continueCtaText","onclick","href","icon","arrow_right"],"sources":["src/components/profile/pn-profile-modal/pn-profile-modal.scss?tag=pn-profile-modal","src/components/profile/pn-profile-modal/pn-profile-modal.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-profile-modal {\n  margin: 1em auto;\n  display: flex;\n  flex-direction: column;\n  min-width: 42.4rem;\n  max-width: 38.4rem;\n  width: 100%;\n  padding: 1.6rem;\n  border-radius: 8px;\n  background: $white;\n}\n\n.profilemodal-container {\n  padding: 3.2rem;\n  border-radius: 8px;\n  box-shadow:\n    0 0.06rem 0.18rem rgba(0, 0, 0, 0.1),\n    0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);\n  border: 0.1rem solid $gray50;\n  display: flex;\n  flex-direction: column;\n}\n\n.profilemodal-logo {\n  display: none;\n  svg {\n    display: block;\n    margin: 0 auto 2.4rem;\n  }\n}\n\n.profilemodal-heading {\n  text-align: center;\n  font-weight: 700;\n}\n\n.profilemodal-content {\n  margin: 1.6rem 0 0;\n  pn-segmented-control {\n    transform: translateZ(0) translateX(-50%);\n    left: 50%;\n  }\n}\n\n.profilemodal-cta {\n  margin: 1.6rem 0 0;\n  transition:\n    max-height 0.15s ease,\n    opacity 0.15s ease;\n  overflow: hidden;\n  opacity: 1;\n  &[aria-hidden='true'] {\n    max-height: 0;\n    opacity: 1;\n  }\n  > pn-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\n\nimport state from './pn-profile-modal-store';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n  tag: 'pn-profile-modal',\n  styleUrl: 'pn-profile-modal.scss',\n})\nexport class PnProfileModal {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = null;\n  @Prop() continueCtaText: string = null;\n  @Prop() choosenCompanyText: string = null;\n  @Prop() toText: string = null;\n  @Prop() chooseCustomerNumberText: string = null;\n\n  @State() isLoading: boolean = true;\n\n  componentWillLoad() {\n    this.populateState();\n    this.bindEvents();\n  }\n  populateState() {\n    state.i18n.chooseCustomerNumberText = this.chooseCustomerNumberText;\n    state.i18n.choosenCompanyText = this.choosenCompanyText;\n    state.i18n.toText = this.toText;\n    const selectedType = this.hostElement.querySelector('pn-profile-modal-type[selected=\"true\"]');\n    if (selectedType) {\n      state.selectedType = selectedType.getAttribute('name');\n    }\n  }\n  bindEvents() {\n    const segmentControl = this.hostElement.querySelector('pn-segmented-control');\n    if (segmentControl) {\n      segmentControl.addEventListener('change', this.onSegmentControlChange.bind(this));\n    }\n  }\n  onSegmentControlChange(e) {\n    const contentId = e.target.value;\n    const content = this.hostElement.querySelector(`[typeid=\"${contentId}\"]`);\n    if (content) {\n      const types = [...this.hostElement.querySelectorAll('pn-profile-modal-type')];\n      types.forEach(type => {\n        type.setAttribute('selected', (type.getAttribute('typeid') === contentId) + '');\n      });\n    }\n  }\n\n  onCTAClick() {\n    if (!state.selectedUrl) {\n      console.log('no Url as been selected, will not continue');\n    }\n  }\n  @Listen('urlSelected')\n  onUrlSelected(e) {\n    if (!e || !e.detail) {\n      return;\n    }\n    state.selectedUrl = e.detail;\n    const ctaBtn = this.hostElement.querySelector('.profilemodal-cta pn-button');\n    if (ctaBtn) {\n      ctaBtn.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"profilemodal-container\">\n          <div class=\"profilemodal-logo\">\n            <svg viewBox=\"0 0 133 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.1rem\" height=\"3.2rem\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                fill=\"#00A0D6\"\n                d=\"M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z\"\n              ></path>\n            </svg>\n          </div>\n\n          {this.heading === '' ? null : <div class=\"profilemodal-heading\">{this.heading}</div>}\n          <div class=\"profilemodal-content\">\n            <slot />\n          </div>\n          {this.continueCtaText ? (\n            <div class=\"profilemodal-cta\" aria-hidden={!state.selectedUrl + ''}>\n              <pn-button onclick={this.onCTAClick} href={state.selectedUrl} icon={arrow_right}>\n                {this.continueCtaText}\n              </pn-button>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yJAAA,MAAMA,EAAoB,o7BAC1B,MAAAC,EAAeD,E,MCOFE,EAAc,M,sCAGC,K,qBACQ,K,wBACG,K,YACZ,K,8BACkB,K,eAEb,I,kCAE9B,iBAAAC,GACEC,KAAKC,gBACLD,KAAKE,Y,CAEP,aAAAD,GACEE,EAAMC,KAAKC,yBAA2BL,KAAKK,yBAC3CF,EAAMC,KAAKE,mBAAqBN,KAAKM,mBACrCH,EAAMC,KAAKG,OAASP,KAAKO,OACzB,MAAMC,EAAeR,KAAKS,YAAYC,cAAc,0CACpD,GAAIF,EAAc,CAChBL,EAAMK,aAAeA,EAAaG,aAAa,O,EAGnD,UAAAT,GACE,MAAMU,EAAiBZ,KAAKS,YAAYC,cAAc,wBACtD,GAAIE,EAAgB,CAClBA,EAAeC,iBAAiB,SAAUb,KAAKc,uBAAuBC,KAAKf,M,EAG/E,sBAAAc,CAAuBE,GACrB,MAAMC,EAAYD,EAAEE,OAAOC,MAC3B,MAAMC,EAAUpB,KAAKS,YAAYC,cAAc,YAAYO,OAC3D,GAAIG,EAAS,CACX,MAAMC,EAAQ,IAAIrB,KAAKS,YAAYa,iBAAiB,0BACpDD,EAAME,SAAQC,IACZA,EAAKC,aAAa,YAAaD,EAAKb,aAAa,YAAcM,GAAa,GAAG,G,EAKrF,UAAAS,GACE,IAAKvB,EAAMwB,YAAa,CACtBC,QAAQC,IAAI,6C,EAIhB,aAAAC,CAAcd,GACZ,IAAKA,IAAMA,EAAEe,OAAQ,CACnB,M,CAEF5B,EAAMwB,YAAcX,EAAEe,OACtB,MAAMC,EAAShC,KAAKS,YAAYC,cAAc,+BAC9C,GAAIsB,EAAQ,CACVA,EAAOC,eAAe,CAAEC,MAAO,QAASC,OAAQ,UAAWC,SAAU,U,EAIzE,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKE,QAAQ,aAAaC,KAAK,OAAOC,MAAM,6BAA6BC,MAAM,UAAUC,OAAO,UAC9FR,EAAA,QAAAE,IAAA,uDACY,UAAS,YACT,UACVG,KAAK,UACLI,EAAE,68FAKP/C,KAAKgD,UAAY,GAAK,KAAOV,EAAA,OAAKG,MAAM,wBAAwBzC,KAAKgD,SACtEV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,8CAEDxC,KAAKiD,gBACJX,EAAA,OAAKG,MAAM,mBAAkB,eAAetC,EAAMwB,YAAc,IAC9DW,EAAA,aAAWY,QAASlD,KAAK0B,WAAYyB,KAAMhD,EAAMwB,YAAayB,KAAMC,GACjErD,KAAKiD,kBAGR,M","ignoreList":[]}

package/dist/pn-market-web-components/{p-930e2943.js → p-959a37d9.js}

@@ -1,2 +1,2 @@
-import{c as e}from"./p-8836de82.js";const{state:a,onChange:t}=e({i18n:{componentheading:"",deliveryscopeheading:"",resultlistheading:"",sizeheading:"",weightheading:"",weightlabel:"",maxweightlabel:"",maxmeasurementlabel:"",senddirectcta:"",stampshopcta:"",message:"",servicePointHeader:"",servicePointLink:"",realPostcard:"",realPostcardMobile:"",ombudHeader:""},market:{currency:"",country:"",servicePoint:""}});export{a as s};
-//# sourceMappingURL=p-930e2943.js.map
+import{c as e}from"./p-2509d18d.js";const{state:a,onChange:t}=e({i18n:{componentheading:"",deliveryscopeheading:"",resultlistheading:"",sizeheading:"",weightheading:"",weightlabel:"",maxweightlabel:"",maxmeasurementlabel:"",senddirectcta:"",stampshopcta:"",message:"",servicePointHeader:"",servicePointLink:"",realPostcard:"",realPostcardMobile:"",ombudHeader:""},market:{currency:"",country:"",servicePoint:""}});export{a as s};
+//# sourceMappingURL=p-959a37d9.js.map

package/dist/pn-market-web-components/p-a38118be.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as n,d as a}from"./p-bb1c965e.js";const o="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.4rem 1.6rem;width:100%;background-color:#0d234b;border-radius:2.4rem}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content{padding:4rem 2.4rem 1.6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{padding:5.6rem 2.4rem 3.2rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n)~pn-stats-info-data{width:50%}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}}pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:0;padding:2.4rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;border-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0;border-bottom-left-radius:0;max-width:54rem;background-position:-999px -999px;background-size:0}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem;border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:flex;align-items:center;background-color:#0d234b;padding-left:4rem;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{clip-path:circle(50%);object-fit:cover;object-position:center;aspect-ratio:1;max-width:45rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:2.4rem;border-bottom-left-radius:2.4rem;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:2.4rem;border-bottom-right-radius:2.4rem;border-bottom-left-radius:0;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:5.6rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5.6rem;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:1rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:54rem;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0d234b}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0d234b}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0d234b}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#f06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__map{background-color:#005e41}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container [slot=illustration]{background-color:#005e41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:#005e41}}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__map{background-color:#edfbf3}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container [slot=illustration]{background-color:#edfbf3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:#edfbf3}}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map{background-color:#e9e6e5}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration]{background-color:#e9e6e5}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:#e9e6e5}}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map{background-color:#00a0d6}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration]{background-color:#00a0d6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:#00a0d6}}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__map{background-color:#effbff}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container [slot=illustration]{background-color:#effbff}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:#effbff}}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__map{background-color:#fef7f6}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container [slot=illustration]{background-color:#fef7f6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:#fef7f6}}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__map{background-color:#f9f8f8}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container [slot=illustration]{background-color:#f9f8f8}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:#f9f8f8}}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content__preamble{color:#0d234b}";const s=o;const i='[ { "preamble": "Million parcels","formatStyle":"None", "format":"En","startValue":0, "data": 2023, "unit": null, "duration": 0 }, { "preamble": "Million parcels", "format": "En", "startValue":40, "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "startValue":0, "format":"En", "formatStyle":"None", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue":100, "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "startValue": 30, "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue": 20, "data": 226, "unit": null, "duration": 1000 }]';const e=class{constructor(n){t(this,n);this.heading=null;this.dataArray=i;this.backgroundUrl=null;this.myParsedArray=JSON.parse(this.dataArray)}parseMyArrayProp(t){if(t)this.myParsedArray=JSON.parse(t)}render(){return n(a,{key:"4040f13125e6100df1801a6545f681050617409a"},n("div",{key:"51ca98b16eac1402169c0045a3b8e93f530013c5",class:"pn-stats-info__container"},n("div",{key:"c441538ce4df1ca3eb1d1893e4977bc3db2399f5",class:"pn-stats-info__container__map",style:{backgroundImage:`url(${this.backgroundUrl})`}}),n("div",{key:"78445b4b79e02216ab51987b9161784549d256bf",class:"pn-stats-info-image-container"},n("slot",{key:"28368b7e52b6ccf527b7adf4e9d8f3a5d49c6b39",name:"illustration"})),n("div",{key:"2b49c7774f9859db711fb0c064183e9d3be4585d",class:"pn-stats-info__container__content",style:{backgroundImage:`url(${this.backgroundUrl})`}},this.heading&&n("h3",{key:"53d122a0f95dabd687dc71a494872651bab5652f",class:"pn-stats-info__container__content__heading"},this.heading),n("div",{key:"79557faeb6e29b21d69cf08809faa3bb6d2e18ef",class:"pn-stats-info__container__content__data"},this.myParsedArray&&this.myParsedArray.map(((t,a)=>n("pn-stats-info-data",{index:a,startValue:t.startValue,data:t.data,unit:t.unit,preamble:t.preamble,duration:t.duration,format:t.format,formatStyle:t.formatStyle})))))))}static get watchers(){return{dataArray:["parseMyArrayProp"]}}};e.style=s;export{e as pn_stats_info};
+//# sourceMappingURL=p-a38118be.entry.js.map

package/dist/pn-market-web-components/{p-08b473e0.entry.js.map → p-a38118be.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnStatsInfoCss","PnStatsInfoStyle0","mockStringArray","PnStatsInfo","JSON","parse","this","dataArray","parseMyArrayProp","newValue","myParsedArray","render","h","Host","key","class","style","backgroundImage","backgroundUrl","name","heading","map","stats","index","startValue","data","unit","preamble","duration","format","formatStyle"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n  .pn-stats-info__container {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .pn-stats-info__container__map {\n    display: none;\n  }\n\n  .pn-stats-info-image-container {\n    display: none;\n  }\n\n  .pn-stats-info__container__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 2.4rem 2.4rem 1.6rem;\n\n    width: 100%;\n    background-color: $blue900;\n\n    border-radius: 2.4rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 4rem 2.4rem 1.6rem;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      padding: 5.6rem 2.4rem 3.2rem;\n    }\n  }\n\n  .pn-stats-info__container__content__heading {\n    color: $coral400;\n    margin-bottom: 2.4rem;\n    align-self: center;\n    text-align: center;\n\n    font-size: 3rem;\n    line-height: 110%;\n\n    @media screen and (min-width: $min-width-xl) {\n      font-weight: 700;\n      font-size: 4.8rem;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    width: 100%;\n    //one item\n\n    pn-stats-info-data:first-child:nth-last-child(2n),\n    pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n      width: 50%;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      pn-stats-info-data:first-child:nth-last-child(1) {\n        width: 100%;\n      }\n\n      // two items\n      pn-stats-info-data:first-child:nth-last-child(2),\n      pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n        width: 50%;\n      }\n\n      //multiples of  tree items\n      pn-stats-info-data:first-child:nth-last-child(3n),\n      pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n        width: 33%;\n      }\n\n      //8 items\n      pn-stats-info-data:first-child:nth-last-child(8),\n      pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n        width: 25%;\n      }\n    }\n\n    .pn-stats-info-data__container {\n      justify-content: flex-start;\n      min-height: 0;\n      padding: 2.4rem;\n\n      @media screen and (min-width: $min-width-md) {\n        min-height: 0;\n      }\n      @media screen and (min-width: $min-width-lg) {\n        min-height: 0;\n      }\n      @media screen and (min-width: $min-width-xl) {\n        min-height: 0;\n      }\n    }\n  }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n  .pn-stats-info__container__map {\n    display: none;\n\n    @media screen and (min-width: $min-width-md) {\n      display: block;\n      max-width: 46rem;\n      width: 100%;\n      background-color: $blue900;\n      background-repeat: no-repeat;\n      background-position: bottom center;\n      background-size: 55%;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      background-size: contain;\n    }\n\n    border-top-left-radius: 2.4rem;\n    border-bottom-left-radius: 2.4rem;\n  }\n\n  .pn-stats-info-image-container {\n    display: none;\n  }\n\n  .pn-stats-info__container__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    width: 100%;\n    background-color: $blue900;\n    background-repeat: no-repeat;\n    background-position: bottom left;\n    background-size: 50%;\n    background-blend-mode: overlay;\n\n    border-radius: 2.4rem;\n\n    @media screen and (min-width: $min-width-md) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      max-width: 54rem;\n      background-position: -999px -999px;\n      background-size: 0;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      max-width: 100%;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    min-height: 0;\n  }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n  .pn-stats-info__container {\n    flex-direction: column;\n    padding-top: 0;\n\n    @media screen and (min-width: $min-width-lg) {\n      flex-direction: row;\n    }\n  }\n\n  .pn-stats-info__container__map {\n    display: none;\n  }\n\n  .pn-stats-info-image-container {\n    display: block;\n    position: relative;\n\n    & [slot='illustration'] {\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        border-top-left-radius: 2.4rem;\n        border-top-right-radius: 2.4rem;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      display: flex;\n      align-items: center;\n      background-color: $blue900;\n      padding-left: 4rem;\n      border-top-left-radius: 2.4rem;\n      border-bottom-left-radius: 2.4rem;\n\n      & [slot='illustration'] {\n        img {\n          clip-path: circle(50%);\n          object-fit: cover;\n          object-position: center;\n          aspect-ratio: 1;\n          max-width: 45rem;\n        }\n      }\n    }\n  }\n\n  .pn-stats-info__container__content {\n    width: 100%;\n    max-width: 100%;\n    border-bottom-right-radius: 2.4rem;\n    border-bottom-left-radius: 2.4rem;\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n\n    @media screen and (min-width: $min-width-md) {\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      border-top-right-radius: 2.4rem;\n      border-bottom-right-radius: 2.4rem;\n      border-bottom-left-radius: 0;\n      max-width: 100%;\n    }\n  }\n\n  .pn-stats-info__container__content__heading {\n    @media screen and (min-width: $min-width-lg) {\n      font-size: 4.8rem;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    width: 100%;\n    height: auto;\n    min-height: 0;\n    .pn-stats-info-data__container {\n      justify-content: flex-start;\n      min-height: 5.6rem;\n\n      @media screen and (min-width: $min-width-md) {\n        min-height: 5.6rem;\n        padding: 2.4rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        min-height: 5rem;\n      }\n    }\n\n    .pn-stats-info-data__container__content__data {\n      @media screen and (min-width: $min-width-lg) {\n        font-size: 5.6rem;\n      }\n    }\n\n    .pn-stats-info-data__container__content__unit {\n      @media screen and (min-width: $min-width-lg) {\n        font-size: 5.6rem;\n      }\n    }\n  }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n  padding: 0;\n  margin-bottom: 3rem;\n\n  overflow: hidden;\n\n  .container > .mb-5 {\n    margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n  }\n  .statsblock {\n    margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n  }\n}\n\n//i combo\n.comboquotestatsblock {\n  pn-stats-info {\n    width: 100%;\n\n    .pn-stats-info__container {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n\n      padding-top: 2rem;\n      @media screen and (min-width: $min-width-md) {\n        padding-top: 6rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        padding-top: 8rem;\n      }\n    }\n\n    .pn-stats-info__container__map {\n      display: none;\n\n      @media screen and (min-width: $min-width-md) {\n        display: block;\n        max-width: 46rem;\n        width: 100%;\n        background-color: $blue900;\n        background-repeat: no-repeat;\n        background-position: bottom center;\n        background-size: 55%;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-size: contain;\n      }\n    }\n\n    .pn-stats-info-image-container {\n      display: none;\n    }\n\n    .pn-stats-info__container__content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 1rem;\n\n      //map\n      width: 100%;\n      background-color: $blue900;\n      background-repeat: no-repeat;\n      background-position: bottom left;\n      background-size: 50%;\n      background-blend-mode: overlay;\n      padding-bottom: 2rem;\n      @media screen and (min-width: $min-width-md) {\n        max-width: 54rem;\n        background-position: -999px -999px;\n        background-size: 0;\n        padding-bottom: 4rem;\n        padding-right: 4rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        max-width: 100%;\n        padding-bottom: 6rem;\n        padding-right: 6rem;\n      }\n    }\n\n    .pn-stats-info__container__content__heading {\n      color: $coral400;\n      margin-bottom: 2.4rem;\n      align-self: center;\n      text-align: center;\n\n      font-size: 3rem;\n      line-height: 110%;\n\n      @media screen and (min-width: $min-width-xl) {\n        font-weight: 700;\n        font-size: 4.8rem;\n      }\n    }\n\n    .pn-stats-info__container__content__data {\n      height: 100%;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      min-height: 20rem;\n\n      @media screen and (min-width: $min-width-xxl) {\n        width: 65rem;\n      }\n    }\n  }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue900;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue900;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue900;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $coral400;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $white;\n  }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $green700;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $green700;\n    }\n    \n    @media screen and (min-width: $min-width-lg) {\n      background-color: $green700;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $white;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $white;\n  }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $green25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $green25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $green25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $gray100;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $gray100;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $gray100;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue400;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue400;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue400;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $white;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $coral25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $coral25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $coral25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $gray25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $gray25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $gray25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n  '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n  tag: 'pn-stats-info',\n  styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n  @Prop() heading: string = null;\n  @Prop() dataArray: string = mockStringArray;\n  @Prop() backgroundUrl: string = null;\n\n  @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n  @Watch('dataArray')\n  parseMyArrayProp(newValue: string) {\n    if (newValue) this.myParsedArray = JSON.parse(newValue);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-stats-info__container\">\n          <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n          <div class=\"pn-stats-info-image-container\">\n            <slot name=\"illustration\" />\n          </div>\n\n          <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n            {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n            <div class=\"pn-stats-info__container__content__data\">\n              {this.myParsedArray &&\n                this.myParsedArray.map((stats, index) => {\n                  return (\n                    <pn-stats-info-data\n                      index={index}\n                      startValue={stats.startValue}\n                      data={stats.data}\n                      unit={stats.unit}\n                      preamble={stats.preamble}\n                      duration={stats.duration}\n                      format={stats.format}\n                      formatStyle={stats.formatStyle}\n                    ></pn-stats-info-data>\n                  );\n                })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,+uhBACvB,MAAAC,EAAeD,ECGf,MAAME,EACJ,osB,MAMWC,EAAW,M,sCACI,K,eACED,E,mBACI,K,mBAEiBE,KAAKC,MAAMC,KAAKC,U,CAGjE,gBAAAC,CAAiBC,GACf,GAAIA,EAAUH,KAAKI,cAAgBN,KAAKC,MAAMI,E,CAGhD,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCAAgCC,MAAO,CAAEC,gBAAiB,OAAOX,KAAKY,oBAEjFN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iCACTH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGbP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCAAoCC,MAAO,CAAEC,gBAAiB,OAAOX,KAAKY,mBAClFZ,KAAKc,SAAWR,EAAA,MAAAE,IAAA,2CAAIC,MAAM,8CAA8CT,KAAKc,SAC9ER,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2CACRT,KAAKI,eACJJ,KAAKI,cAAcW,KAAI,CAACC,EAAOC,IAE3BX,EAAA,sBACEW,MAAOA,EACPC,WAAYF,EAAME,WAClBC,KAAMH,EAAMG,KACZC,KAAMJ,EAAMI,KACZC,SAAUL,EAAMK,SAChBC,SAAUN,EAAMM,SAChBC,OAAQP,EAAMO,OACdC,YAAaR,EAAMQ,mB","ignoreList":[]}
+{"version":3,"names":["pnStatsInfoCss","PnStatsInfoStyle0","mockStringArray","PnStatsInfo","JSON","parse","this","dataArray","parseMyArrayProp","newValue","myParsedArray","render","h","Host","key","class","style","backgroundImage","backgroundUrl","name","heading","map","stats","index","startValue","data","unit","preamble","duration","format","formatStyle"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n  .pn-stats-info__container {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .pn-stats-info__container__map {\n    display: none;\n  }\n\n  .pn-stats-info-image-container {\n    display: none;\n  }\n\n  .pn-stats-info__container__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 2.4rem 2.4rem 1.6rem;\n\n    width: 100%;\n    background-color: $blue900;\n\n    border-radius: 2.4rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 4rem 2.4rem 1.6rem;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      padding: 5.6rem 2.4rem 3.2rem;\n    }\n  }\n\n  .pn-stats-info__container__content__heading {\n    color: $coral400;\n    margin-bottom: 2.4rem;\n    align-self: center;\n    text-align: center;\n\n    font-size: 3rem;\n    line-height: 110%;\n\n    @media screen and (min-width: $min-width-xl) {\n      font-weight: 700;\n      font-size: 4.8rem;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    width: 100%;\n    //one item\n\n    pn-stats-info-data:first-child:nth-last-child(2n),\n    pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n      width: 50%;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      pn-stats-info-data:first-child:nth-last-child(1) {\n        width: 100%;\n      }\n\n      // two items\n      pn-stats-info-data:first-child:nth-last-child(2),\n      pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n        width: 50%;\n      }\n\n      //multiples of  tree items\n      pn-stats-info-data:first-child:nth-last-child(3n),\n      pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n        width: 33%;\n      }\n\n      //8 items\n      pn-stats-info-data:first-child:nth-last-child(8),\n      pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n        width: 25%;\n      }\n    }\n\n    .pn-stats-info-data__container {\n      justify-content: flex-start;\n      min-height: 0;\n      padding: 2.4rem;\n\n      @media screen and (min-width: $min-width-md) {\n        min-height: 0;\n      }\n      @media screen and (min-width: $min-width-lg) {\n        min-height: 0;\n      }\n      @media screen and (min-width: $min-width-xl) {\n        min-height: 0;\n      }\n    }\n  }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n  .pn-stats-info__container__map {\n    display: none;\n\n    @media screen and (min-width: $min-width-md) {\n      display: block;\n      max-width: 46rem;\n      width: 100%;\n      background-color: $blue900;\n      background-repeat: no-repeat;\n      background-position: bottom center;\n      background-size: 55%;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      background-size: contain;\n    }\n\n    border-top-left-radius: 2.4rem;\n    border-bottom-left-radius: 2.4rem;\n  }\n\n  .pn-stats-info-image-container {\n    display: none;\n  }\n\n  .pn-stats-info__container__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    width: 100%;\n    background-color: $blue900;\n    background-repeat: no-repeat;\n    background-position: bottom left;\n    background-size: 50%;\n    background-blend-mode: overlay;\n\n    border-radius: 2.4rem;\n\n    @media screen and (min-width: $min-width-md) {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      max-width: 54rem;\n      background-position: -999px -999px;\n      background-size: 0;\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      max-width: 100%;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    min-height: 0;\n  }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n  .pn-stats-info__container {\n    flex-direction: column;\n    padding-top: 0;\n\n    @media screen and (min-width: $min-width-lg) {\n      flex-direction: row;\n    }\n  }\n\n  .pn-stats-info__container__map {\n    display: none;\n  }\n\n  .pn-stats-info-image-container {\n    display: block;\n    position: relative;\n\n    & [slot='illustration'] {\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        border-top-left-radius: 2.4rem;\n        border-top-right-radius: 2.4rem;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      display: flex;\n      align-items: center;\n      background-color: $blue900;\n      padding-left: 4rem;\n      border-top-left-radius: 2.4rem;\n      border-bottom-left-radius: 2.4rem;\n\n      & [slot='illustration'] {\n        img {\n          clip-path: circle(50%);\n          object-fit: cover;\n          object-position: center;\n          aspect-ratio: 1;\n          max-width: 45rem;\n        }\n      }\n    }\n  }\n\n  .pn-stats-info__container__content {\n    width: 100%;\n    max-width: 100%;\n    border-bottom-right-radius: 2.4rem;\n    border-bottom-left-radius: 2.4rem;\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n\n    @media screen and (min-width: $min-width-md) {\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      border-top-right-radius: 2.4rem;\n      border-bottom-right-radius: 2.4rem;\n      border-bottom-left-radius: 0;\n      max-width: 100%;\n    }\n  }\n\n  .pn-stats-info__container__content__heading {\n    @media screen and (min-width: $min-width-lg) {\n      font-size: 4.8rem;\n    }\n  }\n\n  .pn-stats-info__container__content__data {\n    width: 100%;\n    height: auto;\n    min-height: 0;\n    .pn-stats-info-data__container {\n      justify-content: flex-start;\n      min-height: 5.6rem;\n\n      @media screen and (min-width: $min-width-md) {\n        min-height: 5.6rem;\n        padding: 2.4rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        min-height: 5rem;\n      }\n    }\n\n    .pn-stats-info-data__container__content__data {\n      @media screen and (min-width: $min-width-lg) {\n        font-size: 5.6rem;\n      }\n    }\n\n    .pn-stats-info-data__container__content__unit {\n      @media screen and (min-width: $min-width-lg) {\n        font-size: 5.6rem;\n      }\n    }\n  }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n  padding: 0;\n  margin-bottom: 3rem;\n\n  overflow: hidden;\n\n  .container > .mb-5 {\n    margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n  }\n  .statsblock {\n    margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n  }\n}\n\n//i combo\n.comboquotestatsblock {\n  pn-stats-info {\n    width: 100%;\n\n    .pn-stats-info__container {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n\n      padding-top: 2rem;\n      @media screen and (min-width: $min-width-md) {\n        padding-top: 6rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        padding-top: 8rem;\n      }\n    }\n\n    .pn-stats-info__container__map {\n      display: none;\n\n      @media screen and (min-width: $min-width-md) {\n        display: block;\n        max-width: 46rem;\n        width: 100%;\n        background-color: $blue900;\n        background-repeat: no-repeat;\n        background-position: bottom center;\n        background-size: 55%;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-size: contain;\n      }\n    }\n\n    .pn-stats-info-image-container {\n      display: none;\n    }\n\n    .pn-stats-info__container__content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: 1rem;\n\n      //map\n      width: 100%;\n      background-color: $blue900;\n      background-repeat: no-repeat;\n      background-position: bottom left;\n      background-size: 50%;\n      background-blend-mode: overlay;\n      padding-bottom: 2rem;\n      @media screen and (min-width: $min-width-md) {\n        max-width: 54rem;\n        background-position: -999px -999px;\n        background-size: 0;\n        padding-bottom: 4rem;\n        padding-right: 4rem;\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        max-width: 100%;\n        padding-bottom: 6rem;\n        padding-right: 6rem;\n      }\n    }\n\n    .pn-stats-info__container__content__heading {\n      color: $coral400;\n      margin-bottom: 2.4rem;\n      align-self: center;\n      text-align: center;\n\n      font-size: 3rem;\n      line-height: 110%;\n\n      @media screen and (min-width: $min-width-xl) {\n        font-weight: 700;\n        font-size: 4.8rem;\n      }\n    }\n\n    .pn-stats-info__container__content__data {\n      height: 100%;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      min-height: 20rem;\n\n      @media screen and (min-width: $min-width-xxl) {\n        width: 65rem;\n      }\n    }\n  }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue900;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue900;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue900;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $coral400;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $white;\n  }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $green700;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $green700;\n    }\n    \n    @media screen and (min-width: $min-width-lg) {\n      background-color: $green700;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $white;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $white;\n  }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $green25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $green25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $green25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $gray100;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $gray100;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $gray100;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue400;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue400;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue400;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $white;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $blue25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $blue25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $blue25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $coral25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $coral25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $coral25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n  .pn-stats-info__container__content,\n  .pn-stats-info__container__map {\n    background-color: $gray25;\n  }\n\n  .pn-stats-info-image-container {\n    background-color: transparent;\n    [slot='illustration'] {\n      background-color: $gray25;\n    }\n    @media screen and (min-width: $min-width-lg) {\n      background-color: $gray25;\n    }\n  }\n\n  .pn-stats-info__container__content__heading,\n  .pn-stats-info-data__container__content {\n    color: $blue700;\n  }\n\n  .pn-stats-info-data__container__content__preamble {\n    color: $blue900;\n  }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n  '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n  tag: 'pn-stats-info',\n  styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n  @Prop() heading: string = null;\n  @Prop() dataArray: string = mockStringArray;\n  @Prop() backgroundUrl: string = null;\n\n  @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n  @Watch('dataArray')\n  parseMyArrayProp(newValue: string) {\n    if (newValue) this.myParsedArray = JSON.parse(newValue);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-stats-info__container\">\n          <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n          <div class=\"pn-stats-info-image-container\">\n            <slot name=\"illustration\" />\n          </div>\n\n          <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n            {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n            <div class=\"pn-stats-info__container__content__data\">\n              {this.myParsedArray &&\n                this.myParsedArray.map((stats, index) => {\n                  return (\n                    <pn-stats-info-data\n                      index={index}\n                      startValue={stats.startValue}\n                      data={stats.data}\n                      unit={stats.unit}\n                      preamble={stats.preamble}\n                      duration={stats.duration}\n                      format={stats.format}\n                      formatStyle={stats.formatStyle}\n                    ></pn-stats-info-data>\n                  );\n                })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,s6gBACvB,MAAAC,EAAeD,ECGf,MAAME,EACJ,osB,MAMWC,EAAW,M,sCACI,K,eACED,E,mBACI,K,mBAEiBE,KAAKC,MAAMC,KAAKC,U,CAGjE,gBAAAC,CAAiBC,GACf,GAAIA,EAAUH,KAAKI,cAAgBN,KAAKC,MAAMI,E,CAGhD,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCAAgCC,MAAO,CAAEC,gBAAiB,OAAOX,KAAKY,oBAEjFN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iCACTH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGbP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCAAoCC,MAAO,CAAEC,gBAAiB,OAAOX,KAAKY,mBAClFZ,KAAKc,SAAWR,EAAA,MAAAE,IAAA,2CAAIC,MAAM,8CAA8CT,KAAKc,SAC9ER,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2CACRT,KAAKI,eACJJ,KAAKI,cAAcW,KAAI,CAACC,EAAOC,IAE3BX,EAAA,sBACEW,MAAOA,EACPC,WAAYF,EAAME,WAClBC,KAAMH,EAAMG,KACZC,KAAMJ,EAAMI,KACZC,SAAUL,EAAMK,SAChBC,SAAUN,EAAMM,SAChBC,OAAQP,EAAMO,OACdC,YAAaR,EAAMQ,mB","ignoreList":[]}

package/dist/pn-market-web-components/p-a419cd91.entry.js

@@ -0,0 +1,2 @@
+import{r as a,g as r,h as e,d as c}from"./p-bb1c965e.js";import{a as t}from"./p-36b39340.js";const n="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-charts-card{width:100%;height:100%;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:flex;flex-direction:column;border-radius:2.4rem;padding:2.4rem}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__wrapper{padding:3.2rem}}pn-charts-card .pn-charts-card__heading__wrapper{display:flex;flex-direction:row;justify-content:space-between;gap:0.8rem}pn-charts-card .pn-charts-card__heading{font-weight:700;font-size:2.4rem;line-height:110%}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading{font-size:3.2rem}}pn-charts-card .pn-charts-card__heading__highlight{font-weight:700;font-size:2.4rem;line-height:110%;color:#005d92}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}pn-charts-card .pn-charts-card__text__wrapper{display:flex;flex-direction:column;justify-content:space-between}pn-charts-card .pn-charts-card__text__wrapper span{display:block;margin-bottom:5.4rem}pn-charts-card .pn-charts-card__preamble{font-weight:400;font-size:1.6rem;line-height:140%;flex-grow:1;margin-bottom:1.6rem}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__preamble{font-size:2rem}}pn-charts-card .pn-charts-card__source{display:flex;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#005d92;color:#ffffff;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:1;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:fit-content}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem;padding:0.6rem}}pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-weight:400;font-size:1.6rem;line-height:140%;color:#005d92;margin-bottom:0}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-size:2rem}}pn-charts-card .pn-charts-card__source a{text-decoration:none;color:#005d92;font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92;font-weight:400}pn-charts-card .pn-charts-card__source a:hover{text-decoration:underline}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source a{font-size:2rem}}pn-charts-card .pn-charts-card__source a pn-icon svg path{fill:#005d92}pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after{display:none}.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:2.4rem}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:4rem}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{margin-bottom:3.2rem;gap:1.6rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{justify-content:flex-start}}.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{flex-direction:row-reverse;gap:5.6rem}}@media screen and (min-width: 1200px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:4rem}}@media screen and (min-width: 1640px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__text__container{justify-content:center}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__text__container{width:100%}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:flex}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:none}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:flex}}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__preamble{flex-grow:0;font-size:2rem}}pn-charts-card[data-chart-color=blue]>.pn-charts-card__wrapper{background-color:#effbff}pn-charts-card[data-chart-color=coral]>.pn-charts-card__wrapper{background-color:#fdefee}pn-charts-card[data-chart-color=green]>.pn-charts-card__wrapper{background-color:#dcf6e7}pn-charts-card[data-chart-color=white]>.pn-charts-card__wrapper{background-color:#ffffff}pn-charts-card[data-chart-color=gray]>.pn-charts-card__wrapper{background-color:#f9f8f8}";const d=n;const i=class{constructor(r){a(this,r);this.header=null;this.highlight=undefined;this.preamble=undefined;this.label=undefined;this.source=undefined;this.sourceUrl=undefined;this.ctaLinkText=undefined;this.openInNewWindow=false}get hostElement(){return r(this)}showCtaLinkText=()=>{if(this.ctaLinkText){return e("a",{class:"link--animated",href:this.sourceUrl,rel:this.openInNewWindow?"noopener nofollower noreferrer":null,target:this.openInNewWindow?"_blank":null},this.ctaLinkText," ",e("pn-icon",{icon:t}," "))}return null};render(){return e(c,{key:"6f733408b55d43315de16b39f2ca0cb48cad1a10"},e("slot",{key:"47962ca07bd4ab85bf72ee27f3e56d96fd02936d",name:"clickable-block-wrapper"}),e("div",{key:"96e09155b42f594c6866262b81b68c07c5b194ca",class:"pn-charts-card__wrapper"},this.header&&e("div",{key:"c578bbaacd00e4963b2678b2e01b70c5033ab573",class:"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical"},e("h2",{key:"1efbdcebf15c7af69b72219e5cd21b26873d8c69",class:"pn-charts-card__heading"},this.header),e("div",{key:"0591981bd49e82a510aeda2b986e3711672a997e",class:"pn-charts-card__heading__highlight"},this.highlight)),e("div",{key:"e35bde7b730cb7a41eb1d7eff4454010bdb666ae",class:"pn-charts-card__content__wrapper"},e("slot",{key:"908090196e4f205b347fc13309b3dd06b1de168c",name:"chart"}),e("div",{key:"d546186e8244af382ac220514aa7edf5eecb033a",class:"pn-charts-card__text__container"},this.header&&e("div",{key:"123ff886ddad4911522385a01f43db2787928cc9",class:"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal"},e("h2",{key:"5f02a104d719cfc5c785c2ce40ee389c4e8c3a66",class:"pn-charts-card__heading pn-charts-card__heading"},this.header),e("div",{key:"050bc7518f8e0afcefcedfbe529286b778650cb8",class:"pn-charts-card__heading__highlight"},this.highlight)),e("span",{key:"dd21c533f436b8c3b3755a3de80fa759800f122e",class:"pn-charts-card__preamble"},this.preamble),e("div",{key:"2442b29c8f74de7001698d6fb431420b53e3345d",class:"pn-charts-card__text__wrapper"},e("div",{key:"9f98181d22c1e2448d5af89e79904b459b059af6",class:"pn-charts-card__source"},e("label",{key:"9634730f55c11cca03ec1505dcd5977b70e72e74"},this.label),this.source?e("p",{class:"pn-chart-card__text__heading"},this.source):null,this.showCtaLinkText()))))))}};i.style=d;export{i as pn_charts_card};
+//# sourceMappingURL=p-a419cd91.entry.js.map