@postnord/pn-marketweb-components 3.5.1 → 3.5.3

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

@@ -1 +0,0 @@
-{"version":3,"names":["translations","sv","errorEmpty","errorPostalCode","required","en","da","no","fi","de","zh","fr","es","nl","it","tr","pl","pt","pnAddressAutofillCss","PnAddressAutofillStyle0","PnAddressAutofill","pnInputPostalCode","pnInputCity","pnInputStreetAddress","pnInputStreetNumber","postalCodeInputField","streetAddressInputField","streetNumberInputField","pnInputHiddenValue","endpointPath","locationEndpointPath","_postalCodeProps","_cityProps","_streetAddressProps","_streetNumberProps","addresscomplete","fetchHelper","FetchHelper","componentWillLoad","this","setInitialValues","setProps","postalCodeProps","cityProps","streetAddressProps","streetNumberProps","props","JSON","parse","componentDidLoad","querySelector","addEventHandlers","href","window","location","marketWebContextService","MarketWebContextService","environment","getEnvironmentName","endpoint","indexOf","getEndpoint","market","language","getLanguage","setTranslations","postalCodeRequiredLabel","streetRequiredLabel","postalCodeInputRequired","translation","streetAddressInputRequired","debounceTimeout","addEventListener","e","isLoading","clearTimeout","setTimeout","fetchPostalCodeData","handleAddressDropdown","bind","addFormFieldEvent","allInputs","hostElement","querySelectorAll","forEach","element","eventName","debounceUpdate","debounce","updateHiddenValue","target","streetNumber","value","validAddress","postalCode","city","streetAddress","fullAddress","emit","postalCodeLength","length","resetFields","data","fetchPostalCode","cityInfo","addresses","find","addr","endpointBase","endsWith","slice","fetchUrl","countryCode","fetchJson","mode","cache","setAttribute","postalCodeInputError","error","console","fetchAddress","locationSearch","inputs","document","getElementsByTagName","Array","from","removeAttribute","showStreetAddressError","showStreetNumberError","normalizeChar","street","houseNumber","toLowerCase","streetAddressInputHelpertext","streetNumberInputHelpertext","streetAddressInputError","streetNumberInputError","str","specialCharMap","str1","normalize","replace","split","map","char","join","render","h","Host","key","class","postalCodeCityLabel","type","name","postalCodeInputName","placeholder","postalCodeInputPlaceholder","ref","el","autocomplete","helpertext","postalCodeInputHelpertext","cityInputName","disabled","cityInputPlaceholder","cityInputHelpertext","streetAddressNumberLabel","streetAddressInputName","streetAddressInputPlaceholder","streetNumberInputName","streetNumberInputRequired","streetNumberInputPlaceholder"],"sources":["src/components/input/pn-address-autofill/translations.ts","src/components/input/pn-address-autofill/pn-address-autofill.scss?tag=pn-address-autofill","src/components/input/pn-address-autofill/pn-address-autofill.tsx"],"sourcesContent":["export const translations = {\n  'sv': {\n    errorEmpty: 'Får inte vara tom',\n    errorPostalCode: 'Kan inte hitta postkoden',\n    required: 'obligatoriskt'\n  },\n  'en': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n    required: 'required'\n\n  },\n  'da': {\n    errorEmpty: 'Kan ikke være tom',\n    errorPostalCode: 'Kunne ikke finde postnummeret',\n    required: 'påkrævet'\n  },\n  'no': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'fi': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n    required: 'pakollinen'\n  },\n  'de': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'zh': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'fr': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'es': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'nl': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'it': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'tr': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'pl': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'pt': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n  'pt-BR': {\n    errorEmpty: 'Cannot be empty',\n    errorPostalCode: 'Could not find postalcode',\n  },\n};\n","@import '../../../globals/main.scss';\n\npn-address-autofill {\n  pn-marketweb-input {\n    width: 50%;\n  }\n\n  .input-container-row {\n    display: flex;\n    //flex-grow: 1;\n    gap: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  .label-container {\n    color: $gray700;\n    font-size: 0.875em;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n  }\n\n  .autocomplete-items {\n    position: absolute;\n    border-radius: 0.8rem;\n    border: 0.1rem solid $gray700;\n    width: 100%;\n    max-height: 30rem;\n    overflow-y: auto;\n\n    &:hover,\n    :focus {\n      border: 0.1rem solid $blue400;\n    }\n\n    div {\n      padding: 1.6rem;\n      cursor: pointer;\n      background-color: #fff;\n      border: 0.1rem solid transparent;\n\n      &:first-child {\n        border-radius: 0.8rem 0.8rem 0 0;\n      }\n\n      &:last-child {\n        border-radius: 0 0 0.8rem 0.8rem;\n      }\n\n      &:hover {\n        background-color: #e0f8ff;\n      }\n    }\n\n    .autocomplete-active {\n      background-color: #e0f8ff;\n    }\n  }\n  \n  .autocomplete-items:empty {\n    display: none;\n  }\n\n  pn-input {\n    max-width: 25rem;\n    width: 100%;\n  }\n}\n","import { Component, Prop, h, Element, State, Host, EventEmitter, Event } from '@stencil/core';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { Root, PostalCodeProps, CityProps, StreetAddressProps, StreetNumberProps } from './types';\nimport debounce from 'debounce';\nimport { translations } from './translations';\n\n@Component({\n  tag: 'pn-address-autofill',\n  styleUrl: 'pn-address-autofill.scss',\n})\nexport class PnAddressAutofill {\n  @Element() hostElement: Element;\n  pnInputPostalCode: HTMLElement = null;\n  pnInputCity: HTMLElement = null;\n  pnInputStreetAddress: HTMLElement = null;\n  pnInputStreetNumber: HTMLElement = null;\n  postalCodeInputField: HTMLInputElement = null;\n  streetAddressInputField: HTMLInputElement = null;\n  streetNumberInputField: HTMLInputElement = null;\n  pnInputHiddenValue: HTMLElement = null;\n  endpointPath = '/api/location/get-by-postalcode';\n  locationEndpointPath = '/api/location/get-by-location';\n  private _postalCodeProps: PostalCodeProps = null;\n  private _cityProps: CityProps = null;\n  private _streetAddressProps: StreetAddressProps = null;\n  private _streetNumberProps: StreetNumberProps = null;\n\n  /** Specifies which market we want to show (se,dk,fi,no,com) */\n  @Prop({ mutable: true, reflect: true }) market: string = null; //se\n  /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */\n  @Prop({ mutable: true, reflect: true }) environment: string = null; //sv\n  @Prop() endpoint: string = null;\n  @Prop() cache: boolean = true;\n  @Prop() countryCode: string = null;\n  @Prop() language: string = null;\n\n  @Prop() postalCodeProps: string | PostalCodeProps = null;\n  @Prop() cityProps: string | CityProps = null;\n  @Prop() streetAddressProps: string | StreetAddressProps = null;\n  @Prop() streetNumberProps: string | StreetNumberProps = null;\n\n  @State() postalCode: string = null;\n  @State() city: string = null;\n  @State() streetAddress: string = null;\n  @State() streetNumber: string = null;\n  @State() validAddress: boolean = false;\n  @State() translation: any;\n  @State() postalCodeRequiredLabel: string = null;\n  @State() streetRequiredLabel: string = null;\n\n  @State() fullAddress: string = null;\n  @State() isLoading: boolean = true;\n\n  @Event() addresscomplete: EventEmitter<string>;\n\n  fetchHelper = new FetchHelper('PostalCodeCityAutofill');\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this._postalCodeProps = this.setProps(this.postalCodeProps);\n    this._cityProps = this.setProps(this.cityProps);\n    this._streetAddressProps = this.setProps(this.streetAddressProps);\n    this._streetNumberProps = this.setProps(this.streetNumberProps);\n  }\n\n  setProps(props) {\n    if (typeof props === 'string') {\n      return JSON.parse(props);\n    } else {\n      return props;\n    }\n  }\n\n  componentDidLoad() {\n    this.postalCodeInputField = this.pnInputPostalCode.querySelector('input');\n    this.streetAddressInputField = this.pnInputStreetAddress.querySelector('input');\n    this.streetNumberInputField = this.pnInputStreetNumber.querySelector('input');\n\n    this.addEventHandlers();\n  }\n\n  async setInitialValues(href = window.location.href) {\n    const marketWebContextService = new MarketWebContextService(href);\n\n    if (!this.environment) {\n      this.environment = await marketWebContextService.getEnvironmentName();\n    }\n\n    if (!this.endpoint && this.environment?.indexOf('local') === -1) {\n      this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);\n    }\n\n    if (!this.endpoint) {\n      this.endpoint = '';\n    }\n\n    if (!this.language) {\n      this.language = await marketWebContextService.getLanguage();\n    }\n\n    this.setTranslations()\n\n    this.postalCodeRequiredLabel = \"\";\n    this.streetRequiredLabel = \"\";\n\n    if(this._postalCodeProps.postalCodeInputRequired === true) {\n      this.postalCodeRequiredLabel = \" (\" + this.translation.required + \")\"; \n    }\n\n    if(this._streetAddressProps.streetAddressInputRequired === true) {\n      this.streetRequiredLabel = \" (\" + this.translation.required + \")\"; \n    }\n  }\n\n    setTranslations() {\n      if (this.language === 'nb') {\n        this.language = 'no';\n      }\n      if (this.language && translations[this.language]) {\n        this.translation = translations[this.language];\n      }\n    }\n\n  addEventHandlers() {\n    let debounceTimeout: number | undefined;\n\n    this.postalCodeInputField.addEventListener('keyup', (e) => {\n      this.isLoading = true;\n      clearTimeout(debounceTimeout);\n      debounceTimeout = window.setTimeout(() => {\n        this.fetchPostalCodeData(e);\n      }, 300);\n    });\n\n    this.streetAddressInputField.addEventListener('blur', this.handleAddressDropdown.bind(this));\n    this.streetNumberInputField.addEventListener('blur', this.handleAddressDropdown.bind(this));\n    this.addFormFieldEvent();\n  }\n\n  addFormFieldEvent() {\n    const allInputs = this.hostElement.querySelectorAll('input');\n    allInputs.forEach(element => {\n      ['keyup', 'change', 'blur'].forEach(eventName => {\n        const debounceUpdate = debounce(this.updateHiddenValue.bind(this), 1000);\n        element.addEventListener(eventName, debounceUpdate);\n      });\n    });\n  }\n\n  updateHiddenValue(e) {\n    if (e.target === this.streetNumberInputField) {\n      this.streetNumber = this.streetNumberInputField.value;\n    }\n\n    if (this.validAddress && this.postalCode && this.city && this.streetAddress && this.streetNumber) {\n      this.fullAddress = `${this.streetAddress} ${this.streetNumber}, ${this.city} ${this.postalCode}`;\n    } else {\n      this.fullAddress = '';\n    }\n\n    this.addresscomplete.emit(this.fullAddress);\n  }\n\n  async fetchPostalCodeData(e: Event) {\n    if (!e) {\n      return;\n    }\n    const postalCode = this.postalCodeInputField.value;\n\n    var postalCodeLength = 4;\n\n    if (postalCode.length < postalCodeLength) {\n      this.resetFields();\n      return;\n    }\n\n    if (this.postalCode === postalCode) {\n      return;\n    }\n\n    this.resetFields();\n    this.postalCode = postalCode;\n\n    var data = (await this.fetchPostalCode(postalCode));\n\n    const cityInfo = data.addresses?.find(addr => addr.postalCode === postalCode);\n    this.city = cityInfo?.city || null;\n\n    this.isLoading = false;\n  }\n\n\n  async fetchPostalCode(postalCode) {\n    const endpointBase = this.endpoint.endsWith('/')\n      ? this.endpoint.slice(0, -1)\n      : this.endpoint;\n\n    const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&postalCode=${postalCode}`;\n\n    try {\n      const data = await this.fetchHelper.fetchJson(fetchUrl, { mode: 'cors' }, this.cache) as Root;\n\n      if (!data?.addresses?.length) {\n        this.pnInputPostalCode.setAttribute('error', this._postalCodeProps.postalCodeInputError);\n        return;\n      }\n      return data;\n    }\n    catch (error) {\n      console.error(\"Error fetching address data:\", error);\n      this.isLoading = true;\n      return null;\n    }\n  }\n\n\n  async fetchAddress() {\n    const endpointBase = this.endpoint.endsWith('/')\n      ? this.endpoint.slice(0, -1)\n      : this.endpoint;\n\n    //merge street and number\n    var locationSearch = this.streetAddress + ' ' + this.streetNumber;\n\n    //this is Air search api which will return the address, without postcode, postalcode verification is done in handleAddressDropdown\n    const fetchUrl = `${endpointBase}${this.locationEndpointPath}?countryCode=${this.countryCode}&query=${locationSearch}`;\n\n    try {\n      const data = await this.fetchHelper.fetchJson(fetchUrl, { mode: 'cors' }, this.cache) as Root;\n      return data;\n    }\n    catch (error) {\n      console.error(\"Error fetching address data:\", error);\n      this.isLoading = true;\n      return null;\n    }\n\n  }\n\n  private resetFields() {\n    this.streetAddressInputField.value = '';\n    this.streetNumberInputField.value = '';\n    this.city = null;\n    this.streetAddress = null;\n    this.streetNumber = null;\n    this.validAddress  = false;\n\n    let inputs = document.getElementsByTagName('pn-input');\n\n    Array.from(inputs).forEach(element => {\n      element.removeAttribute('error');\n    });\n  }\n\n  async handleAddressDropdown(e: Event) {\n    const streetAddress = this.streetAddressInputField.value;\n    const streetNumber = this.streetNumberInputField.value;\n\n    //no data fetching if both the inputs are empty\n    if (!streetAddress && !streetNumber) {\n      return;\n    }\n\n    //skip the data fetch if there is no change in input\n    if (this.streetAddress === streetAddress && this.streetNumber === streetNumber) {\n      return;\n    }\n\n    //set the values\n    if (streetAddress) {\n      this.streetAddress = streetAddress;\n    }\n    if (streetNumber) {\n      this.streetNumber = streetNumber;\n    }\n\n    //fetch data\n    var data = await this.fetchAddress();\n\n    //verify the error\n    var showStreetAddressError = false;\n    var showStreetNumberError = false;\n\n    if (!data?.addresses?.length) {\n      if (e.target === this.streetAddressInputField) {\n        showStreetAddressError = true;\n      }\n      if (e.target === this.streetNumberInputField) {\n        showStreetNumberError = true;\n      }\n    } else {\n      if (this.streetAddress && !data.addresses.find(addr => this.normalizeChar(addr.street) === this.normalizeChar(this.streetAddress) && addr.postalCode === this.postalCode)) {\n        showStreetAddressError = true;\n      }\n      if (this.streetNumber && !data.addresses.find(addr => addr.houseNumber.toLowerCase() === this.streetNumber.toLowerCase() && addr.postalCode === this.postalCode)) {\n        showStreetNumberError = true;\n      }\n    }\n\n    //helpertext changes are temp fix to show the error text, this can be removed once the upgrade is done and fixes this issue.\n    this.pnInputStreetAddress.removeAttribute('error');\n    this.pnInputStreetAddress.setAttribute('helpertext', this._streetAddressProps.streetAddressInputHelpertext);\n\n    this.pnInputStreetNumber.removeAttribute('error');\n    this.pnInputStreetNumber.setAttribute('helpertext', this._streetNumberProps.streetNumberInputHelpertext);\n\n    this.validAddress = true;\n\n    if (showStreetAddressError) {\n      this.pnInputStreetAddress.setAttribute('error', this._streetAddressProps.streetAddressInputError);\n      this.pnInputStreetAddress.setAttribute('helpertext', this._streetAddressProps.streetAddressInputError);\n      this.validAddress = false;\n    }\n    if (showStreetNumberError) {\n      this.pnInputStreetNumber.setAttribute('error', this._streetNumberProps.streetNumberInputError);\n      this.pnInputStreetNumber.setAttribute('helpertext', this._streetNumberProps.streetNumberInputError);\n      this.validAddress = false;\n    }\n  }\n\n  //this function is added to compare the street input values if entered without special characters like é, ø ect\n  normalizeChar(str) {\n\n    const specialCharMap = {\n      'ø': 'o',\n      'Ø': 'o',\n      'æ': 'ae',\n      'Æ': 'ae',\n      // Add more as needed\n    };\n\n    var str1 = str.normalize(\"NFD\").replace(/[\\u0300-\\u036f]/g, \"\")\n      .split('').map(char => specialCharMap[char] || char)\n      .join('').toLowerCase()\n    return str1;\n  }\n\n  render() {\n    return (\n      <Host class=\"pn-address-autofill\">\n        {this._postalCodeProps?.postalCodeCityLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._postalCodeProps.postalCodeCityLabel + ' ' + this.postalCodeRequiredLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-input\n            type=\"number\"\n            name={this._postalCodeProps?.postalCodeInputName}\n            required={this._postalCodeProps?.postalCodeInputRequired}\n            placeholder={this._postalCodeProps?.postalCodeInputPlaceholder}\n            ref={el => (this.pnInputPostalCode = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._postalCodeProps?.postalCodeInputHelpertext}\n          ></pn-input>\n\n          <pn-input\n            type=\"text\"\n            name={this._cityProps?.cityInputName}\n            disabled\n            value={this.city}\n            placeholder={this._cityProps?.cityInputPlaceholder}\n            autocomplete=\"off\"\n            helpertext={this._cityProps?.cityInputHelpertext}\n          ></pn-input>\n        </div>\n\n        {this._streetAddressProps?.streetAddressNumberLabel ? (\n          <div class=\"label-container\">\n            <label>{`${this._streetAddressProps.streetAddressNumberLabel + ' ' + this.streetRequiredLabel}`}</label>\n          </div>\n        ) : null}\n        <div class=\"input-container-row\">\n          <pn-input\n            type=\"text\"\n            name={this._streetAddressProps?.streetAddressInputName}\n            required={this._streetAddressProps?.streetAddressInputRequired}\n            value={this.streetAddress}\n            placeholder={this._streetAddressProps?.streetAddressInputPlaceholder}\n            ref={el => (this.pnInputStreetAddress = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetAddressProps?.streetAddressInputHelpertext}\n            disabled={this.isLoading}\n          ></pn-input>\n\n          <pn-input\n            type=\"text\"\n            name={this._streetNumberProps?.streetNumberInputName}\n            required={this._streetNumberProps?.streetNumberInputRequired}\n            value={this.streetNumber}\n            placeholder={this._streetNumberProps?.streetNumberInputPlaceholder}\n            ref={el => (this.pnInputStreetNumber = el as HTMLElement)}\n            autocomplete=\"off\"\n            helpertext={this._streetNumberProps?.streetNumberInputHelpertext}\n            disabled={this.isLoading}\n          ></pn-input>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/pn-market-web-components/p-7c3091eb.entry.js

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

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

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

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

@@ -1,2 +0,0 @@
-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/pn-market-web-components/p-94a69959.entry.js.map

@@ -1 +0,0 @@
-{"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":"+FAAA,MAAMA,EAA6B,0tFACnC,MAAAC,EAAeD,E,MCOFE,EAAuB,M,gFAOM,K,kBACT,K,wBACM,G,+BACO,G,yBACN,G,kBACP,G,oBACG,K,sBACC,G,4BACM,G,mBACT,G,yBACM,G,qBACJ,E,uBACE,K,uBACA,K,0BACG,K,kBAEP,K,0BACU,K,eACb,I,kCAvB7BC,oBAAmC,KACnCC,UAAyB,KACzBC,UAAyB,KACjBC,cAsBCC,UAGT,mBAAAC,GACE,UAAWC,KAAKC,eAAiB,SAAU,CACzCD,KAAKH,cAAgBK,KAAKC,MAAMH,KAAKC,a,KAChC,CACLD,KAAKH,cAAgBG,KAAKC,Y,EAI9B,iBAAAG,GACEJ,KAAKD,qB,CAGP,gBAAAM,GACEL,KAAKM,mBACLN,KAAKO,kB,CAGP,gBAAAA,GACEP,KAAKN,oBAAoBc,iBAAiB,SAAUC,EAAST,KAAKU,cAAcC,KAAKX,MAAO,K,CAG9F,gBAAAM,GACEN,KAAKY,aAAe,EACpBZ,KAAKa,yB,CAGP,uBAAAA,GACEb,KAAKc,qBAAuB,GAC5Bd,KAAKH,cAAckB,SAAQC,IACzBhB,KAAKc,qBAAqBG,KAAKD,EAAQE,MAAM,G,CAIjDC,aAAeC,IACb,MAAMC,EAAoBZ,EAAST,KAAKsB,uBAAuBX,KAAKX,MAAO,KAE3E,GAAIoB,EAAEG,OAAOC,QAAQ,SAAU,CAC7B,CAAC,SAAU,SAAST,SAAQU,IAC1BL,EAAEG,OAAOf,iBAAiBiB,EAAWJ,EAAkB,G,KAEpD,CACL,MAAMK,EAAcN,EAAEG,OAAOI,QAAQ,yBAAyBC,cAAc,aAC5E,GAAIF,EAAa,CACfA,EAAYlB,iBAAiB,SAAUa,E,IAK7C,sBAAAC,GACE,IACE,MAAMO,EAAU,IAAI7B,KAAKJ,UAAUkC,iBAAiB,yBACpD,MAAMC,EAAe/B,KAAKgC,YAAYJ,cAAc,2BAEpD,IAAKG,EAAc,CACjB,M,CAGF,IAAKF,EAAQI,OAAQ,CACnBF,EAAaG,aAAa,QAAS,GAAGlC,KAAKmC,sBAAwB,gCACnEnC,KAAKoC,UAAY,GACjBpC,KAAKF,UAAUuC,KAAK,IACpB,M,CAGF,MAAMC,EAAaT,EAAQU,KAAIC,IAC7B,MAAMC,EAAUD,EAAIZ,cAAc,YAClC,MAAMc,EAAcF,EAAIZ,cAAc,gBACtC,MAAMe,EAAWH,EAAIZ,cAAc,aAEnC,IAAKa,IAAYE,EAAU,CACzB,MAAM,IAAIC,MAAM,qC,CAGlB,MAAMC,EAAU,CACdL,IAAK,CACH,CACEM,KAAM9C,KAAK+C,aACXC,MAAOP,EAAQQ,aAKrB,GAAIP,EAAa,CACf,MAAMQ,EAAWR,EAAYd,cAAc,aAC3C,MAAMuB,EAAeD,GAAUtB,cAAc,UAC7C,MAAMwB,EAAoBD,GAAcH,OAAS,GACjD,GAAII,EAAmB,CACrBP,EAAQL,IAAIvB,KAAK,CACf6B,KAAM9C,KAAKqD,iBACXL,MAAOI,G,EAKb,MAAME,EAAQX,EAASf,cAAc,SACrC,MAAM2B,EAAaC,SAASF,GAAON,OAAS,IAAK,IACjD,GAAIO,EAAa,EAAG,CAClBV,EAAQL,IAAIvB,KAAK,CACf6B,KAAM9C,KAAKyD,cACXT,MAAOO,EAAWG,Y,CAGtB,OAAOb,CAAO,IAGhB,IAAKP,EAAWL,QAAUK,EAAWL,SAAWJ,EAAQI,OAAQ,CAC9DjC,KAAKoC,UAAY,GACjB,M,CAGFpC,KAAKoC,UAAY,WAAWlC,KAAKyD,UAAUrB,KAE3C,GAAItC,KAAK4D,iBAAkB,CACzB5D,KAAKF,UAAUuC,KAAKrC,KAAKoC,WACzB,M,EAGF,MAAOyB,GACPC,QAAQD,MAAM,+BAAgCA,GAC9C7D,KAAKoC,UAAY,E,EAIrB,aAAA1B,CAAcU,GACZ,MAAM2C,EAAkB3C,EAAEG,OAC1B,MAAMyC,EAAgBD,GAAiBf,MAEvC,IAAKgB,EAAe,CAClB,M,CAGF,MAAMjC,EAAe/B,KAAKgC,YAAYJ,cAAc,2BACpDG,GAAckC,gBAAgB,SAE9B,IAAKjE,KAAKJ,UAAW,CACnBkE,QAAQD,MAAM,6BACd,M,CAGF,MAAMK,EAASC,SAASC,cAAc,OACtCF,EAAOhC,aAAa,QAAS,GAAGlC,KAAKY,gBACrCsD,EAAOG,UAAY,sBACnBH,EAAOI,QAAUlD,GAAKpB,KAAKmB,aAAaC,GAExC,MAAMmD,EAAgBJ,SAASC,cAAc,OAC7CG,EAAcF,UAAY,UAC1BE,EAActB,UAAYe,EAC1BO,EAAcC,QAAQ1B,KAAOkB,EAC7BE,EAAOO,YAAYF,GAEnB,MAAMG,EAAY1E,KAAKH,eAAe8E,MAAKC,GAAQA,EAAK1D,QAAU8C,IAElE,GAAIU,GAAWG,QAAQ5C,OAAQ,CAC7BjC,KAAK8E,eAAiB,KACtB,MAAMC,EAAc/E,KAAKgF,qBAAqBhB,GAC9CE,EAAOO,YAAYM,E,KACd,CACL/E,KAAK8E,eAAiB,MACtB,MAAMG,EAAmBd,SAASC,cAAc,OAChDa,EAAiBZ,UAAY,YAC7BH,EAAOO,YAAYQ,E,CAGrB,MAAMC,EAAiBlF,KAAKmF,kBAAkBnB,GAC9CE,EAAOO,YAAYS,GAEnB,MAAME,EAAepF,KAAKqF,2BAC1BnB,EAAOO,YAAYW,GAEnBpF,KAAKJ,UAAU6E,YAAYP,GAE3BlE,KAAKsF,0BACLtF,KAAKY,c,CAGP,aAAA2E,CAAcvB,GACZ,OAAOhE,KAAKgC,YAAYF,iBAAiB,uBAAuBkC,K,CAGlE,oBAAAgB,CAAqBhB,GACnB,MAAMwB,EAAiBrB,SAASC,cAAc,OAC9CoB,EAAetD,aAAa,QAAS,eACrC,MAAMuD,EAAezF,KAAKH,cAAc8E,MAAKe,GAAOA,EAAIxE,QAAU8C,IAClE,MAAM2B,EAAuB,GAC7B,MAAMC,EAAa5F,KAAKuF,cAAcvB,GAEtC4B,EAAW7E,SAAQyB,IACjBmD,EAAqB1E,KAAKuB,EAAIqD,eAAejE,cAAc,sCAAsCkE,YAAY,IAG/G,GAAIL,EAAaZ,OAAO5C,OAAQ,CAC9B,MAAM8D,EAAW5B,SAASC,cAAc,aACxC2B,EAAS7D,aAAa,OAAQ,GAAG8B,cACjC+B,EAAS7D,aAAa,cAAelC,KAAKgG,wBAC1CD,EAAS7D,aAAa,WAAY,QAClC6D,EAAS7D,aAAa,QAAS,IAE/B,MAAM+D,EAAc9B,SAASC,cAAc,UAC3C6B,EAAY/D,aAAa,QAAS,IAClC+D,EAAYH,YAAc9F,KAAKgG,uBAC/BC,EAAYC,SAAW,KACvBD,EAAYE,SAAW,KACvBJ,EAAStB,YAAYwB,GAErBR,EAAaZ,OAAO9D,SAAQqF,IAC1B,MAAMC,EAAclC,SAASC,cAAc,UAC3CiC,EAAYnE,aAAa,QAASkE,EAAUlF,OAC5CmF,EAAYnE,aAAa,QAASkE,EAAUlF,OAC5CmF,EAAYP,YAAcM,EAAUlF,MACpC6E,EAAStB,YAAY4B,EAAY,IAGnCb,EAAef,YAAYsB,E,CAG7B,OAAOP,C,CAGT,iBAAAL,CAAkBnB,GAChB,MAAMsC,EAAcnC,SAASC,cAAc,OAC3CkC,EAAYpE,aAAa,QAAS,YAClC,MAAMS,EAAWwB,SAASC,cAAc,YACxCzB,EAAST,aAAa,OAAQ,UAC9BS,EAAST,aAAa,OAAQ,GAAG8B,WACjCrB,EAAST,aAAa,cAAe,KACrC,GAAIlC,KAAKuG,gBAAkB,EAAG,CAC5B5D,EAAST,aAAa,MAAO,GAAGlC,KAAKuG,kB,CAEvC5D,EAAST,aAAa,MAAO,KAC7BS,EAAST,aAAa,QAAS,IAC/BoE,EAAY7B,YAAY9B,GACxB,OAAO2D,C,CAGT,wBAAAjB,GACE,MAAMmB,EAAerC,SAASC,cAAc,OAC5CoC,EAAatE,aAAa,QAAS,aACnC,MAAMuE,EAAYtC,SAASC,cAAc,aACzCqC,EAAUnC,QAAUlD,GAAKpB,KAAK0G,UAAUtF,GACxCqF,EAAUvE,aAAa,aAAc,WACrCuE,EAAUvE,aAAa,QAAS,QAChCuE,EAAUhC,YAAYN,SAASwC,eAAe3G,KAAK4G,sBACnDJ,EAAa/B,YAAYgC,GACzB,OAAOD,C,CAGT,uBAAAlB,GAGsB,GAAG/C,IAAIsE,KAAK7G,KAAKJ,UAAUkC,iBAAiB,aAAagF,IAC3E,MAAMtB,EAAiBsB,GAAIjB,eAAejE,cAAc,gBACxD,MAAMmF,EAAsBvB,GAAgB5D,cAAc,4BAA4BkE,YACtF,MAAMtD,EAAW,CACfwE,QAASF,GAAI7D,UACbe,cAAewB,GAAgB5D,cAAc,yBAAyBkE,YACtEG,YAAac,GAEf,OAAOvE,CAAG,IAGZ,MAAMyE,EAAgBjH,KAAKN,oBAAoBoC,iBAAiB,UAChEmF,EAAclG,SAAQmG,IACpBA,EAAIjD,gBAAgB,WAAW,G,CAInC,SAAAyC,CAAUtF,GACRA,EAAE+F,iBACFnH,KAAKY,eACL,MAAMwG,EAAYhG,EAAEiG,cACpB,MAAMC,EAAYF,EAAUzF,QAAQ,wBACpC2F,EAAUC,SACV,MAAM1F,EAAU,IAAI7B,KAAKJ,UAAUkC,iBAAiB,yBAEpDD,EAAQU,KAAI,CAAC2E,EAAKM,KAChBN,EAAIhF,aAAa,QAAS,GAAGsF,IAAQ,IAEvCxH,KAAKsB,yBACLtB,KAAKsF,yB,CAGP,cAAA1B,GACE,MAAM6D,EAAqBzH,KAAKJ,UAAUkC,iBAAiB,aAC3D,MAAM4F,EAAe1H,KAAKJ,UAAUkC,iBAAiB,YACrD,IAAI6F,EAAiB,MACrB,IAAIC,EAAc,MAElB,GAAIH,EAAoB,CACtBA,EAAmB1G,SAAQ8G,IACzB,IAAKA,EAAc,CACjB,M,CAGF,MAAMC,EAAYD,EAAajG,cAAc,UAC7C,MAAMmG,EAAcD,GAAW9E,OAAS,GAExC,GAAI+E,IAAgB,MAAQA,IAAgB,GAAI,CAC9CF,EAAa3F,aAAa,QAAS,GAAGlC,KAAKmC,sBAAwB,gCACnEwF,EAAiB,I,KACZ,CACLE,EAAa3F,aAAa,QAAS,G,KAKzC,GAAIwF,EAAc,CAChBA,EAAa3G,SAAQiH,IACnB,GAAIA,EAAW,CACb,MAAMC,EAAgBD,EAAUpG,cAAc,SAC9C,IAAIsG,EAAe1E,SAASyE,EAAcjF,OAE1C,GAAIhD,KAAKuG,gBAAkB2B,GAAgBF,EAAUG,aAAa,OAAQ,CACxEH,EAAU9F,aAAa,QAAS,GAAGlC,KAAKoI,mBAAqB,qBAC7DR,EAAc,I,MACT,GAAIM,GAAgB,GAAKG,MAAMH,GAAe,CACnDF,EAAU9F,aAAa,QAAS,GAAGlC,KAAKsI,mBAAqB,gCAC7DV,EAAc,I,KACT,CACLI,EAAU9F,aAAa,QAAS,IAChC0F,EAAc,K,MAMtB,GAAID,GAAkBC,EAAa,CACjC,OAAO,K,CAGT,OAAO,I,CAGT,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,aAAAE,IAAA,2CACEE,IAAK9B,GAAO9G,KAAKN,oBAAsBoH,EACvChE,KAAM9C,KAAK6I,mBACX3H,MAAOlB,KAAK8I,oBACZH,MAAM,yBACNI,SAAU/I,KAAKgJ,cACfR,EAAA,UAAAE,IAAA,2CAAQ1F,MAAM,GAAGkD,SAAQ,KAACC,SAAQ,MAAEnG,KAAKiJ,2BACxCjJ,KAAKc,sBAAsByB,KAAKS,GAAkBwF,EAAA,UAAQtH,MAAO8B,EAAOA,MAAOA,GAAQA,OAG5FwF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,OAAAE,IAAA,2CAAKE,IAAK9B,GAAO9G,KAAKL,UAAYmH,GAC/B9G,KAAKY,eAAiB,EAAI,KACzB4H,EAAA,OAAKG,MAAM,gBACTH,EAAA,OAAKG,MAAM,qBACTH,EAAA,aAAQxI,KAAK+C,eAEfyF,EAAA,OAAKG,MAAM,yBACTH,EAAA,aAAQxI,KAAKqD,mBAEfmF,EAAA,OAAKG,MAAM,sBACTH,EAAA,aAAQxI,KAAKyD,gBAEf+E,EAAA,OAAKG,MAAM,0BAIjBH,EAAA,OAAAE,IAAA,2CAAKE,IAAK9B,GAAO9G,KAAKJ,UAAYkH,EAAoB6B,MAAM,iCAC1DH,EAAA,QAAAE,IAAA,gD","ignoreList":[]}

package/umd/modules/@postnord/web-components/cjs/angle_down-0b63ebde.js.map

@@ -1 +0,0 @@
-{"file":"angle_down-0b63ebde.js","mappings":";;;;;;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,UAAU,GAAG;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/cjs/angle_right-c8c55b43.js.map

@@ -1 +0,0 @@
-{"file":"angle_right-c8c55b43.js","mappings":";;;;;;AAAA,MAAMA,MAAI,GAAG,yQAAyQ,CAAC;AAC3Q,MAAC,UAAU,GAAGA;;ACD1B,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,WAAW,GAAG;;;;;","names":["icon"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_left.js","node_modules/pn-design-assets/pn-assets/icons/angle_right.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_left = icon;\nexport const angleLeft = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_right = icon;\nexport const angleRight = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/components/angle_down.js.map

@@ -1 +0,0 @@
-{"file":"angle_down.js","mappings":";;;;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,UAAU,GAAG;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/components/angle_right.js.map

@@ -1 +0,0 @@
-{"file":"angle_right.js","mappings":";;;;AAAA,MAAMA,MAAI,GAAG,yQAAyQ,CAAC;AAC3Q,MAAC,UAAU,GAAGA;;ACD1B,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,WAAW,GAAG;;;;","names":["icon"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_left.js","node_modules/pn-design-assets/pn-assets/icons/angle_right.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_left = icon;\nexport const angleLeft = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_right = icon;\nexport const angleRight = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/esm/angle_down-d788f691.js.map

@@ -1 +0,0 @@
-{"file":"angle_down-d788f691.js","mappings":";;;;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,UAAU,GAAG;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/esm/angle_right-b52095c9.js.map

@@ -1 +0,0 @@
-{"file":"angle_right-b52095c9.js","mappings":";;;;AAAA,MAAMA,MAAI,GAAG,yQAAyQ,CAAC;AAC3Q,MAAC,UAAU,GAAGA;;ACD1B,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,WAAW,GAAG;;;;","names":["icon"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_left.js","node_modules/pn-design-assets/pn-assets/icons/angle_right.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_left = icon;\nexport const angleLeft = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_right = icon;\nexport const angleRight = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/postnord-web-components/p-203ad7de.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pnAccordionRowCss","PnAccordionRowStyle0","PnAccordionRow","details","summary","content","animation","defaultAnimationDuration","animationDuration","this","togglerow","handleRowState","event","detail","state","style","overflow","closeAccordion","componentWillLoad","slottedLabel","hostElement","querySelector","label","toggleOpen","open","emit","element","clickHandler","e","preventDefault","isClosing","openAccordion","x","width","y","top","getBoundingClientRect","clientCor","clientX","clientY","ripple","height","offsetHeight","requestAnimationFrame","isExpanding","startHeight","endHeight","cancelAnimations","animate","reduceMotion","duration","easing","onfinish","animationFinish","oncancel","cancel","render","h","Host","key","class","ref","el","id","buttonid","onClick","transparent","name","icon","angle_down","contentid"],"sources":["src/components/content/pn-accordion/row/pn-accordion-row.scss?tag=pn-accordion-row","src/components/content/pn-accordion/row/pn-accordion-row.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-accordion-row {\n  position: relative;\n  margin: 0 -0.25em 0;\n}\n\npn-accordion-row .pn-accordion-row {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n\n  &-summary {\n    color: main.$gray900;\n    position: relative;\n    border: none;\n    outline: 0;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    width: 100%;\n    padding: 0.25em;\n    font-size: 1em;\n    font-weight: 400;\n    border-radius: 0.5em;\n\n    list-style: none;\n\n    &:hover > .pn-accordion-row-text {\n      background-color: main.$blue50;\n    }\n\n    &:focus-visible > .pn-accordion-row-text {\n      @include main.pn-focus-visible();\n    }\n\n    &::-webkit-details-marker {\n      display: none;\n    }\n  }\n\n  &-text {\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    padding: 0.75em;\n    background-color: main.$white;\n    border-radius: 0.5em;\n    -webkit-tap-highlight-color: transparent;\n\n    &[data-transparent] {\n      background-color: transparent;\n    }\n\n    @include main.pn-focus-base();\n    @include main.pn-transition('background-color, outline-color');\n    @include main.pn-ripple(main.$blue700);\n  }\n\n  &-icon {\n    margin-left: auto;\n    flex-shrink: 0;\n    @include main.pn-transition('transform');\n    path {\n      fill: main.$blue700;\n    }\n  }\n\n  &[open] .pn-accordion-row-icon {\n    transform: rotate(-180deg);\n  }\n\n  &-content {\n    color: main.$gray900;\n    display: block;\n    padding: 1em;\n  }\n}\n","import { Component, h, Host, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { angle_down } from 'pn-design-assets/pn-assets/icons.js';\nimport { reduceMotion, ripple } from '@/index';\n\n/**\n * Use this row component inside a `pn-accordion` to create an accordion group.\n *\n * **Note**: you can use the `pn-accordion-row` without the parent accordion.\n * But you will have to style the gap between each row.\n *\n * @slot label - Include your own HTML as the label.\n * ```\n * <h3 slot=\"label\">Custom title</h3>\n * ```\n */\n@Component({\n  tag: 'pn-accordion-row',\n  styleUrl: 'pn-accordion-row.scss',\n})\nexport class PnAccordionRow {\n  private details: HTMLDetailsElement;\n  private summary: HTMLElement;\n  private content: HTMLDivElement;\n  private animation: Animation;\n\n  private readonly defaultAnimationDuration: number = 400;\n  private animationDuration: number = this.defaultAnimationDuration;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing = false;\n  @State() isExpanding = false;\n\n  /** The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom HTML content in there. */\n  @Prop({ mutable: true }) label: string;\n  /** The open/close status of the accordion row. */\n  @Prop({ mutable: true }) state?: boolean = false;\n\n  /** Optional unique id for the `summary` element. @category ID */\n  @Prop() buttonid?: string;\n  /** Optional unique id for the `div` element containing the content. @category ID */\n  @Prop() contentid?: string;\n  /** Optional prop that removes the default white background on the accordion row */\n  @Prop() transparent: boolean = false;\n\n  /** Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. */\n  @Event() togglerow: EventEmitter<{ element: HTMLElement; state: Boolean }>;\n\n  /** Internal function for closing rows when using the `single` prop on the `pn-accordion`. */\n  @Listen('rowstate')\n  handleRowState(event: CustomEvent) {\n    if (event.detail !== this.state) {\n      this.details.style.overflow = 'hidden';\n      this.closeAccordion();\n    }\n  }\n\n  componentWillLoad() {\n    const slottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.label = slottedLabel ? null : this.label;\n  }\n\n  private toggleOpen(open?: boolean) {\n    const state = open ?? !this.state;\n    if (this.state !== open) this.togglerow.emit({ element: this.details, state });\n    this.state = state;\n  }\n\n  private clickHandler(e: MouseEvent) {\n    e.preventDefault();\n\n    this.details.style.overflow = 'hidden';\n\n    if (this.isClosing || !this.state) this.openAccordion();\n    else if (this.isClosing || this.state) this.closeAccordion();\n\n    const { x, width, y, top } = this.hostElement.getBoundingClientRect();\n    const clientCor = e.clientX === 0 && e.clientY === 0 ? { clientX: x + width - 24, clientY: y - top } : e;\n\n    ripple(clientCor, this.hostElement, '.pn-accordion-row-text');\n  }\n\n  private openAccordion() {\n    this.details.style.height = `${this.details.offsetHeight}px`;\n    this.toggleOpen(true);\n\n    requestAnimationFrame(() => {\n      this.isExpanding = true;\n\n      const startHeight = `${this.details.offsetHeight}px`;\n      const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;\n\n      this.cancelAnimations();\n\n      this.animate(true, startHeight, endHeight);\n    });\n  }\n\n  private closeAccordion() {\n    this.isClosing = true;\n\n    const startHeight = `${this.details.offsetHeight}px`;\n    const endHeight = `${this.summary.offsetHeight}px`;\n\n    this.cancelAnimations();\n\n    this.animate(false, startHeight, endHeight);\n  }\n\n  private animate(open: boolean, startHeight: string, endHeight: string) {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.defaultAnimationDuration;\n\n    this.animation = this.details.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n\n    this.animation.onfinish = () => this.animationFinish(open);\n\n    this.animation.oncancel = () => {\n      if (open) this.isExpanding = false;\n      else this.isClosing = false;\n    };\n  }\n\n  private animationFinish(open: boolean) {\n    this.toggleOpen(open);\n    this.cancelAnimations();\n\n    this.isClosing = false;\n    this.isExpanding = false;\n\n    this.details.style.height = '';\n    this.details.style.overflow = '';\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  render() {\n    return (\n      <Host>\n        <details class=\"pn-accordion-row\" open={this.state} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n          <summary\n            id={this.buttonid}\n            class=\"pn-accordion-row-summary\"\n            onClick={e => this.clickHandler(e)}\n            ref={el => (this.summary = el)}\n          >\n            <div class=\"pn-accordion-row-text\" data-transparent={this.transparent}>\n              {this.label ? this.label : ''}\n              <slot name=\"label\" />\n\n              <pn-icon class=\"pn-accordion-row-icon\" icon={angle_down} />\n            </div>\n          </summary>\n\n          <div id={this.contentid} class=\"pn-accordion-row-content\" ref={(el: HTMLDivElement) => (this.content = el)}>\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-2615282e.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as n,c as a,g as t,f as o,h as e,a as i}from"./p-43660913.js";import{r as s,k as l,e as d}from"./p-f64d17a6.js";import{c as r}from"./p-92b0338a.js";const m={CLOSE_MODAL:{en:"Close dialog",sv:"Stäng dialogrutan",da:"Luk dialogboks",fi:"Sulje valintaikkuna",no:"Lukk dialogboksen"}};const c="/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  --pn-modal-overflow: hidden auto;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  overflow: var(--pn-modal-overflow);\n  max-width: var(--pn-modal-max-width);\n  max-height: 85vh;\n  padding: clamp(1em, 5vw, 1.5em) 0;\n  border: 0.0625em solid #f3f2f2;\n  border-radius: 0.5em;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0.75em;\n  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: #ffffff;\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: opacity, overlay, display, transform, outline-color;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\npn-modal .pn-modal::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-webkit-scrollbar-thumb {\n  cursor: pointer;\n  background-color: #969087;\n  border-radius: 1em;\n  border: 0.25em solid #ffffff;\n}\npn-modal .pn-modal::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal::-webkit-scrollbar-corner, pn-modal .pn-modal::-webkit-scrollbar-button {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 0.5em 0 0 0.5em;\n  transform: translate(20%, 0%);\n}\npn-modal .pn-modal[open] {\n  display: flex;\n  opacity: 1;\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open] {\n    display: flex;\n    opacity: 0;\n    transform: translate(0%, 20%);\n  }\n}\npn-modal .pn-modal[open][data-sheet] {\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open][data-sheet] {\n    transform: translate(20%, 0%);\n  }\n}\npn-modal .pn-modal::backdrop {\n  background-color: rgba(0, 0, 0, 0);\n  transition-property: opacity, background-color, overlay, display;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal::backdrop {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[open]::backdrop {\n  background-color: rgba(0, 0, 0, 0.55);\n}\n@starting-style {\n  pn-modal .pn-modal[open]::backdrop {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\npn-modal .pn-modal-close-button {\n  position: absolute;\n  right: 0.5em;\n  top: 0.5em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: 0 clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-label {\n  line-height: 1.5;\n  padding-right: 1.5em;\n  margin: 0;\n}\npn-modal .pn-modal-text {\n  margin: 0;\n}\npn-modal .pn-modal-content {\n  padding: 0 clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons [slot=buttons]:not(pn-button) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons:empty {\n  display: none;\n}\n\n@media (max-width: 30em) {\n  pn-modal .pn-modal {\n    width: 100%;\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}";const p=c;const h=class{constructor(t){n(this,t);this.modalToggle=a(this,"modalToggle",7);this.modalVisiblity=a(this,"modalVisiblity",7);this.close=a(this,"close",7);this.isClosing=false;this.isOpening=false;this.label=undefined;this.helpertext=undefined;this.language=null;this.open=false;this.persistent=false;this.hideClose=false;this.allowOverflow=false;this.sheet=false;this.maxWidth=null}mo;standardAnimationDuration=400;animationDuration=this.standardAnimationDuration;modalTimeout;modalElement;get hostElement(){return t(this)}handleOpen(){if(this.open)this.openModal();else{this.closeModal();this.close.emit(true)}this.handleOverflow();clearTimeout(this.modalTimeout);this.isClosing=!this.open&&true;if(s())this.animationDuration=0;else this.animationDuration=this.standardAnimationDuration;this.modalTimeout=setTimeout((()=>{this.isClosing=false;this.modalVisiblity.emit({visible:this.open})}),this.animationDuration)}handleMaxWidth(){const n=this.maxWidth||"45em";this.modalElement.style.setProperty("--pn-modal-max-width",n)}modalToggle;modalVisiblity;close;connectedCallback(){this.mo=new MutationObserver((()=>o(this.hostElement)));this.mo.observe(this.hostElement,{childList:true,subtree:true})}disconnectedCallback(){if(this.mo)this.mo.disconnect()}async componentWillLoad(){if(this.language===null)await l(this.hostElement)}componentDidLoad(){this.handleMaxWidth();if(this.open)this.openModal()}translate(n){return m?.[n]?.[this.language||d]||n}handleOverflow(){if(!this.allowOverflow)return;const n=this.modalElement.scrollHeight>innerHeight*.85?"hidden auto":"unset";this.modalElement.style.setProperty("--pn-modal-overflow",n)}isSameModal(n){return this.modalElement.isSameNode(n)}handleKeyboard(n){if(n.key!=="Escape")return;n.preventDefault();n.stopImmediatePropagation();if(!this.persistent)this.setModalClose()}clickModalBackground(n){const{clientY:a,clientX:t}=n;const o=n.target.localName!==this.modalElement.localName;const e=!this.isSameModal(n.target);if(o||e)return;const{top:i,left:s,height:l,width:d}=this.modalElement.getBoundingClientRect();const r=i<=a&&a<=i+l&&s<=t&&t<=s+d;if(!r&&!this.persistent)this.toggleOpen(false)}setModalClose(){this.toggleOpen(false)}closeModal(){this.modalElement.close()}openModal(){this.modalElement.showModal()}toggleOpen(n){this.open=n??!this.open}render(){return e(i,{key:"6bf631cc88584b24782904a9918091736e27c3d6"},e("dialog",{key:"543806f18626bd7f8f6983a5c3769f8bf0422544",class:"pn-modal","data-closing":this.isClosing,"data-sheet":this.sheet,onClose:()=>this.setModalClose(),onCancel:()=>this.setModalClose(),onToggle:()=>this.modalToggle.emit({open:this.open}),onKeyDown:n=>this.handleKeyboard(n),onClick:n=>this.clickModalBackground(n),ref:n=>this.modalElement=n},!this.hideClose&&e("pn-button",{key:"60350dfcac19aa570b78e4fb82ca2a0a288de1b7",small:true,class:"pn-modal-close-button",icon:r,iconOnly:true,arialabel:this.translate("CLOSE_MODAL"),appearance:"light",variant:"borderless",type:"button",onPnClick:()=>this.setModalClose()}),e("header",{key:"ba3d857e5f0b57c9567b045843f3b3a1aee9f06d",class:"pn-modal-header"},this.label&&e("h2",{key:"524b36cbeb3f1e0274fb29a3656638c4c221cec9",class:"pn-modal-label"},this.label),this.helpertext&&e("p",{key:"330777c3c194177f7fc811eb45f2ee3a585894fc",class:"pn-modal-text"},this.helpertext),e("slot",{key:"62dbf64100d4e62974a18752423a781db737333f",name:"header"})),e("section",{key:"57618a994095a9f24c7a142d86fa788cca531062",class:"pn-modal-content"},e("slot",{key:"14f533135af35a88d1fb03b8e57cd133d3981629"})),e("nav",{key:"d355d6c0024893a26b1e17bf187a7d0e3142b766",class:"pn-modal-buttons"},e("slot",{key:"20020f7fd89b706bfaf5825090d6a0470e91b577",name:"buttons"}))))}static get watchers(){return{open:["handleOpen"],maxWidth:["handleMaxWidth"]}}};h.style=p;export{h as pn_modal};
-//# sourceMappingURL=p-2615282e.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-2615282e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","CLOSE_MODAL","en","sv","da","fi","no","pnModalCss","PnModalStyle0","PnModal","mo","standardAnimationDuration","animationDuration","this","modalTimeout","modalElement","handleOpen","open","openModal","closeModal","close","emit","handleOverflow","clearTimeout","isClosing","reduceMotion","setTimeout","modalVisiblity","visible","handleMaxWidth","width","maxWidth","style","setProperty","modalToggle","connectedCallback","MutationObserver","forceUpdate","hostElement","observe","childList","subtree","disconnectedCallback","disconnect","componentWillLoad","language","awaitTopbar","componentDidLoad","translate","prop","allowOverflow","overflow","scrollHeight","innerHeight","isSameModal","target","isSameNode","handleKeyboard","event","key","preventDefault","stopImmediatePropagation","persistent","setModalClose","clickModalBackground","clientY","clientX","notInsideAnyModal","localName","notThisModal","top","left","height","getBoundingClientRect","isInModal","toggleOpen","showModal","state","render","h","Host","class","sheet","onClose","onCancel","onToggle","onKeyDown","onClick","ref","el","hideClose","small","icon","closeIcon","iconOnly","arialabel","appearance","variant","type","onPnClick","label","helpertext","name"],"sources":["src/components/feedback/pn-modal/translation.ts","src/components/feedback/pn-modal/pn-modal.scss?tag=pn-modal","src/components/feedback/pn-modal/pn-modal.tsx"],"sourcesContent":["export const translations = {\n  CLOSE_MODAL: {\n    en: 'Close dialog',\n    sv: 'Stäng dialogrutan',\n    da: 'Luk dialogboks',\n    fi: 'Sulje valintaikkuna',\n    no: 'Lukk dialogboksen',\n  },\n};\n\nexport type PnTranslations = keyof typeof translations;\n","@use 'sass:string';\n@use 'src/globals/main';\n\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  --pn-modal-overflow: hidden auto;\n\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n\n  overflow: var(--pn-modal-overflow);\n\n  max-width: var(--pn-modal-max-width);\n  max-height: 85vh;\n  padding: clamp(1em, 5vw, 1.5em) 0;\n\n  border: 0.0625em solid main.$gray50;\n  border-radius: 0.5em;\n\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0.75em;\n\n  box-shadow:\n    0 0.25em 0.875em rgba(0, 0, 0, 0.18),\n    0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: main.$white;\n\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n\n  @include main.pn-focus(main.$white);\n  @include main.pn-scrollbar;\n\n  @include main.pn-transition('opacity, overlay, display, transform, outline-color', main.$timing-layout);\n  transition-behavior: allow-discrete;\n\n  &[data-sheet] {\n    margin: 0 0 0 auto;\n    height: 100%;\n    max-height: unset;\n    border-radius: 0.5em 0 0 0.5em;\n    transform: translate(20%, 0%);\n  }\n\n  &[open] {\n    display: flex;\n    opacity: 1;\n    transform: translate(0%, 0%);\n\n    @starting-style {\n      display: flex;\n      opacity: 0;\n      transform: translate(0%, 20%);\n    }\n\n    &[data-sheet] {\n      transform: translate(0%, 0%);\n      @starting-style {\n        transform: translate(20%, 0%);\n      }\n    }\n  }\n\n  &::backdrop {\n    background-color: rgba(main.$black, 0);\n\n    @include main.pn-transition('opacity, background-color, overlay, display', main.$timing-layout);\n    transition-behavior: allow-discrete;\n  }\n\n  &[open]::backdrop {\n    background-color: rgba(main.$black, 0.55);\n    @starting-style {\n      background-color: rgba(main.$black, 0);\n    }\n  }\n\n  &-close-button {\n    position: absolute;\n    right: 0.5em;\n    top: 0.5em;\n  }\n\n  &-header {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5em;\n    padding: 0 clamp(1em, 5vw, 1.5em);\n  }\n\n  &-label {\n    line-height: 1.5;\n    padding-right: 1.5em;\n    margin: 0;\n  }\n\n  &-text {\n    margin: 0;\n  }\n\n  &-content {\n    padding: 0 clamp(1em, 5vw, 1.5em);\n  }\n\n  &-buttons {\n    background-color: main.$white;\n    border-top: 0.0625em solid main.$gray200;\n    padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n    display: flex;\n    justify-content: flex-end;\n    gap: 0.5em;\n    [slot='buttons']:not(pn-button) {\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.5em;\n    }\n    &:empty {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 30em) {\n  pn-modal .pn-modal {\n    width: 100%;\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter, forceUpdate, State } from '@stencil/core';\nimport { awaitTopbar, en, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/**\n * Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n *\n * @slot - The default slot, will be placed in the middle content area.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n */\n@Component({\n  tag: 'pn-modal',\n  styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n  private mo: MutationObserver;\n\n  private readonly standardAnimationDuration = 400;\n  private animationDuration: number = this.standardAnimationDuration;\n\n  modalTimeout: NodeJS.Timeout;\n\n  private modalElement: HTMLDialogElement;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing: boolean = false;\n  @State() isOpening: boolean = false;\n\n  /** Set a label for the modal. */\n  @Prop() label?: string;\n  /** Set a descriptive text for the modal. */\n  @Prop() helpertext?: string;\n  /** Set the language. */\n  @Prop() language?: PnLanguages = null;\n\n  /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features */\n  @Prop() persistent?: boolean = false;\n  /** Hide the close button. If you disable this, make sure you build your own cancel button. @category Features */\n  @Prop() hideClose?: boolean = false;\n  /**\n   * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n   * Do not use if you have a lot of conditional rendering inside the modal.\n   */\n  @Prop() allowOverflow?: boolean = false;\n\n  /** Use the `sheet` visual. Aligns the modal to the right. @category Visual */\n  @Prop() sheet?: boolean = false;\n  /** Define your own max width of the modal. Default is `45em`. @category Visual */\n  @Prop() maxWidth?: string = null;\n\n  @Watch('open')\n  handleOpen() {\n    if (this.open) this.openModal();\n    else {\n      this.closeModal();\n      /** In the next update, we can remove this one so you can finally stack modals. */\n      this.close.emit(true);\n    }\n\n    this.handleOverflow();\n\n    clearTimeout(this.modalTimeout);\n    this.isClosing = !this.open && true;\n\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.standardAnimationDuration;\n\n    this.modalTimeout = setTimeout(() => {\n      this.isClosing = false;\n      this.modalVisiblity.emit({ visible: this.open });\n    }, this.animationDuration);\n  }\n\n  @Watch('maxWidth')\n  handleMaxWidth() {\n    const width = this.maxWidth || '45em';\n    this.modalElement.style.setProperty('--pn-modal-max-width', width);\n  }\n\n  /** This event is fired when the modal is toggled. */\n  @Event() modalToggle: EventEmitter<{ open: boolean }>;\n  /** This event is dispatched after the opening/closing animation has finished playing. */\n  @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n  /**\n   * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n   * @deprecated Use the new `modalToggle` event instead.\n   */\n  @Event() close: EventEmitter<boolean>;\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  async componentWillLoad() {\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.handleMaxWidth();\n    if (this.open) this.openModal();\n  }\n\n  private translate(prop: PnTranslations) {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private handleOverflow() {\n    if (!this.allowOverflow) return;\n    const overflow = this.modalElement.scrollHeight > innerHeight * 0.85 ? 'hidden auto' : 'unset';\n    this.modalElement.style.setProperty('--pn-modal-overflow', overflow);\n  }\n\n  private isSameModal(target: HTMLElement) {\n    return this.modalElement.isSameNode(target);\n  }\n\n  private handleKeyboard(event: KeyboardEvent) {\n    if (event.key !== 'Escape') return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    if (!this.persistent) this.setModalClose();\n  }\n\n  private clickModalBackground(event: MouseEvent) {\n    const { clientY, clientX } = event;\n\n    const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n    const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n    if (notInsideAnyModal || notThisModal) return;\n\n    const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n    const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n    if (!isInModal && !this.persistent) this.toggleOpen(false);\n  }\n\n  private setModalClose() {\n    this.toggleOpen(false);\n  }\n\n  private closeModal() {\n    this.modalElement.close();\n  }\n\n  private openModal() {\n    this.modalElement.showModal();\n  }\n\n  private toggleOpen(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"pn-modal\"\n          data-closing={this.isClosing}\n          data-sheet={this.sheet}\n          onClose={() => this.setModalClose()}\n          onCancel={() => this.setModalClose()}\n          onToggle={() => this.modalToggle.emit({ open: this.open })}\n          onKeyDown={event => this.handleKeyboard(event)}\n          onClick={event => this.clickModalBackground(event)}\n          ref={el => (this.modalElement = el)}\n        >\n          {!this.hideClose && (\n            <pn-button\n              small\n              class=\"pn-modal-close-button\"\n              icon={closeIcon}\n              iconOnly={true}\n              arialabel={this.translate('CLOSE_MODAL')}\n              appearance=\"light\"\n              variant=\"borderless\"\n              type=\"button\"\n              onPnClick={() => this.setModalClose()}\n            />\n          )}\n\n          <header class=\"pn-modal-header\">\n            {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n            {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n            <slot name=\"header\"></slot>\n          </header>\n\n          <section class=\"pn-modal-content\">\n            <slot></slot>\n          </section>\n\n          <nav class=\"pn-modal-buttons\">\n            <slot name=\"buttons\"></slot>\n          </nav>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as n,c as t,g as i,h as e,a as o}from"./p-43660913.js";import{u as a,k as s,e as c,r,j as u,h as p,o as m,i as l}from"./p-f64d17a6.js";import{a as d}from"./p-bf967b50.js";import{a as h,b}from"./p-c96ff403.js";import{o as f}from"./p-773aa70a.js";const g={BACK:{sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"}};const k="pn-action-menu{--pn-menu-height:unset;display:inline-block;position:relative}pn-action-menu .pn-action-menu{position:relative}pn-action-menu .pn-action-menu-container{--pn-action-menu-offset:0;scroll-behavior:smooth;list-style:none;text-align:left;position:absolute;z-index:100;top:calc(100% + 0.5em);left:var(--pn-action-menu-offset);right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;margin:0;padding:0;width:16em;visibility:hidden;overflow:hidden;}pn-action-menu .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}pn-action-menu .pn-action-menu-container[data-left]{right:0;left:unset}pn-action-menu .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}pn-action-menu .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{border-radius:0.5em;visibility:hidden;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}pn-action-menu .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-sub{left:0;height:100%;box-shadow:unset;transform:translateX(0);visibility:hidden}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}pn-action-menu .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-container::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}pn-action-menu .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-list::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-group{margin:0;padding:0;list-style:none}pn-action-menu .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}pn-action-menu .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}pn-action-menu .pn-action-menu-sub{z-index:110;position:absolute;top:0;width:100%;min-width:12em;margin:0;padding:0;list-style:none;background:#ffffff;border-radius:0.5em;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);transform:translateX(-0.5em);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0s, 0s, 0.2s}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-button{display:none}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}pn-action-menu .pn-action-menu-sub[data-open=false]{pointer-events:none}pn-action-menu .pn-action-menu-sub[data-x=left]{left:-100%}pn-action-menu .pn-action-menu-sub[data-x=center]{left:0}pn-action-menu .pn-action-menu-sub[data-x=right]{left:100%}pn-action-menu .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}pn-action-menu .pn-action-menu-sub[data-y=bottom]{top:0}pn-action-menu .pn-action-menu-item{position:relative}pn-action-menu .pn-action-menu-item:first-child>.pn-action-menu-item-content>.pn-action-menu-button{border-top-left-radius:0.5em;border-top-right-radius:0.5em}pn-action-menu .pn-action-menu-item:last-child>.pn-action-menu-item-content>.pn-action-menu-button{border-bottom-right-radius:0.5em;border-bottom-left-radius:0.5em}pn-action-menu .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}pn-action-menu .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}pn-action-menu .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}pn-action-menu .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}pn-action-menu .pn-action-menu-item-content{display:flex;align-items:center;flex-direction:row;flex:1 1 100%;gap:0.5em;position:relative}pn-action-menu .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}pn-action-menu .pn-action-menu-item-content>pn-icon{padding:0 0.25em}pn-action-menu .pn-action-menu-item[data-group],pn-action-menu .pn-action-menu-item[data-sub]{flex-direction:column}pn-action-menu .pn-action-menu-button{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:0.75em 1em;border:0;width:100%;text-align:left;text-decoration-color:transparent;overflow:hidden;display:flex;align-items:center;flex:1 1 100%;gap:0.5em;font-size:1em;min-height:1.5em;background-color:#ffffff;transition-property:background-color, color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem;outline-offset:-0.2rem;}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#0d234b;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-action-menu .pn-action-menu-button:focus-visible{outline-color:#005d92}pn-action-menu .pn-action-menu-button>pn-icon .pn-icon-svg>path{transform-origin:center;transform:rotate(0deg);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-button>pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-button>pn-icon[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}pn-action-menu .pn-action-menu-button>pn-icon:last-child{margin-left:auto}pn-action-menu .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-button:hover{background-color:#effbff}pn-action-menu .pn-action-menu-button:focus{background-color:#e0f8ff}pn-action-menu .pn-action-menu-button[href]:hover,pn-action-menu .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}pn-action-menu .pn-action-menu-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;margin-left:auto;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0s}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}pn-action-menu .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}pn-action-menu .pn-action-menu-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-input{position:absolute;z-index:10;cursor:pointer;height:100%;width:100%;top:0;left:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox polyline.pn-action-menu-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}pn-action-menu .pn-action-menu-input:checked:hover{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:disabled{pointer-events:none}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-radio .pn-action-menu-radio-outer{outline-color:#005d92}pn-action-menu .pn-action-menu-p{margin:0}pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button .pn-icon-svg{transform:rotate(0deg);transition-delay:0.2s;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}";const v=k;const y=class{constructor(i){n(this,i);this.menuToggle=t(this,"menuToggle",7);this.menuVisible=t(this,"menuVisible",7);this.menuOption=t(this,"menuOption",7);this.smallMenu=null;this.upwards=false;this.activeSubmenu=[];this.isClosing=false;this.isExpanding=false;this.options=[];this.button=undefined;this.menuId=this.id;this.language=null;this.open=false;this.menuUp=false;this.menuLeft=false}id=`pn-action-menu-${a()}`;menuButtonId=`${this.id}-button`;menuListId=`${this.id}-list`;menuTrigger;menuContainer;menuList;animation;duration=400;animationDuration=this.duration;timeout;menuWidth=256;get hostElement(){return i(this)}menuToggle;menuVisible;menuOption;handleOptions(){this.setMenuLayout()}openHandler(){this.setAnimationDuration();requestAnimationFrame((()=>{if(this.open&&!(this.isClosing||this.isExpanding)){this.setOffset();this.setMenuLayout()}this.gridHandler();this.menuToggle.emit({open:this.open});clearTimeout(this.timeout);this.timeout=setTimeout((()=>{if(!this.open){this.activeSubmenu=[];const n=this.hostElement.querySelectorAll("[data-x]");Array.from(n).forEach((n=>{n.removeAttribute("data-x");n.removeAttribute("data-y")}))}this.menuVisible.emit({visible:this.open})}),this.animationDuration)}))}handleMenuId(){this.menuButtonId=`${this.menuId}-button`;this.menuListId=`${this.menuId}-list`}handleResize(){if(this.open)this.toggleActionMenu(false)}async componentWillLoad(){if(!this.options.length)console.warn(`${this.hostElement.localName}: No options set.`);this.handleMenuId();this.setAnimationDuration();if(this.language!==null)await s(this.hostElement)}componentDidLoad(){this.setOffset();if(this.open)this.gridHandler()}translate(n){return g[n][this.language||c]}toggleActionMenu(n){this.open=n??!this.open}setMenuLayout(){if(!this.menuContainer)return;if(!(this.isClosing||this.isExpanding))this.resetMaxHeight();const n=this.getMenuMeasurements();this.setDirection(n);this.setMenuSize(n);this.setMaxHeight(n)}setDirection({hUp:n,hDown:t,sUp:i,sDown:e}){const o=i>n;const a=e>t;const s=e>i;this.upwards=this.menuUp&&o||!a&&!s}setMenuSize({hUp:n,hDown:t,sUp:i,sDown:e}){const o=l();const a=this.upwards?i>n:e>t;const s=o||!a;if(s!==this.smallMenu){this.smallMenu=s}}setMaxHeight({hUp:n,hDown:t,sUp:i,sDown:e}){if(this.smallMenu){const o=n>i?n-16:n;const a=t>e?t-8:t;this.hostElement.style.setProperty("--pn-menu-height",`${this.upwards?o:a}px`)}else this.resetMaxHeight()}resetMaxHeight(){this.hostElement.style.setProperty("--pn-menu-height","unset")}setAnimationDuration(){if(r())this.animationDuration=0;else this.animationDuration=this.duration}getRect(n){return n.getBoundingClientRect()}getMenuMeasurements(){const n=Array.from(this.menuContainer.querySelectorAll("menu"));const t=Math.max(...n.map((n=>n.scrollHeight)));const i=this.getRect(this.menuTrigger);const e=this.getRect(this.menuContainer);const o=i.top-u();const a=o>t?t:o;const s=innerHeight-e.top;const c=s>t?t:s;return{hUp:a,hDown:c,sUp:o,sDown:s}}setOffset(){const n=this.getRect(this.hostElement);const t=n.left-p()+this.menuWidth;const i=t>innerWidth;const e=i?t-innerWidth+16:0;if(this.menuContainer)this.menuContainer.style.setProperty("--pn-action-menu-offset",`-${e}px`)}getListId(n){return`pn-menu-${n.value}-list`}getButtonId(n){return`pn-menu-${n.value}-button`}getTriggerIcon(){if(this.button?.icon)return;return d}getSubMenuPath(n,t,i=[]){for(const e of n){const n=[...i,e.value];if(e.value===t)return n;if(e.options||e.group){const i=this.getSubMenuPath(e.options||e.group,t,n);if(i)return i}}return null}closeEachSubMenu(){this.menuTrigger?.querySelector("button")?.focus({preventScroll:true});const n=setInterval((()=>{if(this.smallMenu||this.activeSubmenu.length===0){clearInterval(n);this.toggleActionMenu(false)}else{this.activeSubmenu.pop();this.activeSubmenu=[...this.activeSubmenu]}}),150)}escButton(n,t){const{key:i}=n;if(i==="Escape"){n.preventDefault();n.stopImmediatePropagation();this.isSubmenuActive(t.value)?this.toggleSub(t):this.toggleActionMenu()}}gridHandler(){if(this.open)this.openGrid();else this.closeGrid()}openGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isClosing?t:0;this.menuContainer.style.height=`${n.height}px`;this.isExpanding=true;this.animateGrid(true,`${i}px`,`${n.height}px`)}closeGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isExpanding?t:n.height;this.menuContainer.style.height=`0px`;this.isClosing=true;this.animateGrid(false,`${i}px`,`0px`)}animateGrid(n,t,i){this.cancelAnimations();this.animation=this.menuContainer.animate({height:[t,i]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>n?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();this.menuContainer.style.height=this.isClosing?"0px":"";this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}async optionSelect(n,t){const i=n?.options?.length?"submenu":!!n.input?"input":n.href?"link":"button";const e=i==="submenu";if(e)this.toggleSub(n);else if(i==="button")this.closeEachSubMenu();else if(i==="input")n.checked=t.target.checked;this.menuOption.emit({option:n,type:i,click:t,open:e?this.isSubmenuActive(n.value):null});const o=t.target;const a=o.localName==="input"?o.nextElementSibling:o.className==="pn-action-menu-button"?o:o.closest(".pn-action-menu-button");const{x:s,width:c,y:r,top:u}=this.getRect(a);const p={clientX:s+c-24,clientY:r-u};m(t.type==="click"?t:p,a);this.menuContainer.scrollTo({top:0})}toggleSub(n){const{value:t}=n;const i=this.getSubMenuPath(this.options,t);const e=this.activeSubmenu.includes(t);e&&i.splice(this.activeSubmenu.indexOf(t),1);const o=this.hostElement.querySelector(`#${this.getListId(n)}`);const a=this.getRect(o);const s=a.left;const c=innerWidth-a.right-8;const r=s>a.width;const u=c>a.width;const p=this.menuUp&&a.top-a.height>0;const m=p?"top":"bottom";if(!e&&!o.dataset.x)o.setAttribute("data-x",this.menuLeft&&r?"left":u?"right":r?"left":"center");if(!e&&!o.dataset.y)o.setAttribute("data-y",m);if(JSON.stringify(i)===JSON.stringify(this.activeSubmenu))this.activeSubmenu=this.activeSubmenu.filter((n=>n!==t));else this.activeSubmenu=[...i]}isSubmenuActive(n){return this.activeSubmenu.includes(n)}isMenuActive(){const n=this.options.find((({value:n})=>this.activeSubmenu.every((t=>t===n))));return this.smallMenu&&(this.activeSubmenu?.length===0||n)}isCurrentSubMenu(n){return Boolean(this.activeSubmenu[this.activeSubmenu.length-1]===n)}getOptionTrailing(n){const t=n.options?.length&&b;const i=n.trailingIcon;const o=n.target==="_blank"&&f;const a=t||i||o;if(a){return e("pn-icon",{icon:a,color:"blue700","data-suffix":true,"data-active":this.isSubmenuActive(n.value)})}if(n.suffix){return e("span",{class:"pn-action-menu-item-suffix"},n.suffix)}}renderCheckbox(n){const t=`pn-menu-${n.value}-label`;const i=`pn-menu-${n.value}-helpertext`;return e("div",{class:"pn-action-menu-item-content"},e("input",{type:n.input,id:t,class:"pn-action-menu-input",name:n.name,value:n.value,checked:n.checked,disabled:n.disabled,"aria-describedby":n.helpertext?i:null,onInput:t=>this.optionSelect(n,t),tabIndex:this.open?null:-1}),e("div",{class:"pn-action-menu-button"},!!n.icon&&e("pn-icon",{icon:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("label",{htmlFor:t,class:"pn-action-menu-item-label"},n.label),n.helpertext&&e("p",{id:i,class:"pn-action-menu-item-helpertext"},e("span",null,n.helpertext))),n.input==="checkbox"?e("div",{class:"pn-action-menu-checkbox"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},e("polyline",{class:"pn-action-menu-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}))):e("div",{class:"pn-action-menu-radio"},e("div",{class:"pn-action-menu-radio-outer"},e("div",{class:"pn-action-menu-radio-inner"})))))}renderButton(n){const t=n.label==="BACK";const i=!!n?.options?.length;const o=!!n?.group?.length;const a=!!n.href&&!i&&!o;const s=t?"-close":"";const c=t||!!n.icon;const r=t?null:this.getOptionTrailing(n);const u=this.isSubmenuActive(n.value);const p=i?{"aria-haspopup":"true","aria-controls":u?this.getListId(n):null,"aria-expanded":u?.toString()}:{};const m=a?{href:n.href,target:n.target}:{disabled:n.disabled};const l=a?"a":"button";return o?e("div",{class:"pn-action-menu-group-label"},e("p",{class:"pn-action-menu-p"},n.label),n.helpertext&&e("p",{class:"pn-action-menu-group-helpertext"},n.helpertext)):e("div",{class:"pn-action-menu-item-content","data-close":t},e(l,{id:this.getButtonId(n)+s,class:"pn-action-menu-button",...p,...m,tabIndex:this.open?null:-1,onClick:t=>this.optionSelect(n,t),onKeyDown:t=>this.escButton(t,n)},c&&e("pn-icon",{icon:t?h:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("span",{class:"pn-action-menu-item-label"},t?this.translate("BACK"):n.label),n.helpertext&&!a&&e("span",{class:"pn-action-menu-item-helpertext"},n.helpertext)),r))}renderSub(n){return e("menu",{id:this.getListId(n),"aria-labelledby":this.getButtonId(n),class:"pn-action-menu-sub","data-open":this.isSubmenuActive(n.value)?.toString(),"data-current":this.isCurrentSubMenu(n.value)},this.smallMenu&&e("li",{class:"pn-action-menu-item"},this.renderButton({label:"BACK",value:n.value,options:n.options})),n.options.map((n=>this.renderMenuItem(n))))}renderGroup(n){return e("menu",{class:"pn-action-menu-group"},n.group.map((n=>this.renderMenuItem(n))))}renderMenuItem(n){const t=!!n?.options?.length;const i=!t&&!!n?.group?.length;const o=!!n.input&&!t&&!i;return e("li",{class:"pn-action-menu-item","data-group":i,"data-sub":t},o?this.renderCheckbox(n):this.renderButton(n),t?this.renderSub(n):i&&this.renderGroup(n))}renderMenu(){return e("div",{id:this.menuListId,class:"pn-action-menu-container",role:"region","aria-labelledby":this.menuButtonId,"data-open":this.open,"data-moving":this.isClosing||this.isExpanding,"data-upwards":this.upwards,"data-small":this.smallMenu,style:{height:"0px"},ref:n=>this.menuContainer=n},e("menu",{class:"pn-action-menu-list",ref:n=>this.menuList=n,"data-current":this.isMenuActive()},this.options?.map((n=>this.renderMenuItem(n)))))}render(){return e(o,{key:"5a1638b9b0f880ebd9f3ebe2571df19c6b852baf"},e("div",{key:"87bf62a943099ce0a556ade3ce3eb11eedb003b2",id:this.menuId!==this.id?this.menuId:null,class:"pn-action-menu"},e("pn-button",{key:"a3024016a2a5962d9eefc3c4d617f946a3575c23",icon:this.getTriggerIcon(),...this.button,buttonId:this.menuButtonId,tooltipUp:!this.upwards,ariahaspopup:"true",ariacontrols:this.open?this.menuListId:null,ariaexpanded:this.open.toString(),"data-default-icon":!this.button?.icon,onPnClick:()=>this.toggleActionMenu(),ref:n=>this.menuTrigger=n}),this.renderMenu()))}static get watchers(){return{options:["handleOptions"],open:["openHandler"],menuId:["handleMenuId"]}}};y.style=v;export{y as pn_action_menu};
-//# sourceMappingURL=p-3bd59ac8.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","BACK","sv","en","da","fi","no","pnActionMenuCss","PnActionMenuStyle0","PnActionMenu","this","id","uuidv4","menuButtonId","menuListId","menuTrigger","menuContainer","menuList","animation","duration","animationDuration","timeout","menuWidth","menuToggle","menuVisible","menuOption","handleOptions","setMenuLayout","openHandler","setAnimationDuration","requestAnimationFrame","open","isClosing","isExpanding","setOffset","gridHandler","emit","clearTimeout","setTimeout","activeSubmenu","subMenus","hostElement","querySelectorAll","Array","from","forEach","el","removeAttribute","visible","handleMenuId","menuId","handleResize","toggleActionMenu","componentWillLoad","options","length","console","warn","localName","language","awaitTopbar","componentDidLoad","translate","prop","state","resetMaxHeight","measurements","getMenuMeasurements","setDirection","setMenuSize","setMaxHeight","hUp","hDown","sUp","sDown","fitsUpwards","fitsDownards","moreSpaceDown","upwards","menuUp","isWidthSmall","isSmallScreen","menuFits","isSmall","smallMenu","heightUp","heightDown","style","setProperty","reduceMotion","getRect","element","getBoundingClientRect","allLists","maxHeight","Math","max","map","scrollHeight","rectButton","rectMenu","top","getTotalHeightOffset","innerHeight","data","fullWidth","left","getMenuWidth","isWide","innerWidth","offset","getListId","option","value","getButtonId","getTriggerIcon","button","icon","angle_down","getSubMenuPath","path","item","newPath","group","result","closeEachSubMenu","querySelector","focus","preventScroll","interval","setInterval","clearInterval","pop","escButton","event","key","preventDefault","stopImmediatePropagation","isSubmenuActive","toggleSub","openGrid","closeGrid","list","clientHeight","height","animateGrid","startHeight","endHeight","cancelAnimations","animate","easing","onfinish","animationFinish","oncancel","cancel","optionSelect","click","type","input","href","isSubMenu","checked","target","nextElementSibling","className","closest","x","width","y","clientCor","clientX","clientY","ripple","scrollTo","isActive","includes","splice","indexOf","spaceLeft","spaceRight","right","fitsLeft","fitsRight","climbUp","yDirection","dataset","setAttribute","menuLeft","JSON","stringify","filter","isMenuActive","isRootSubInsideGroup","find","every","val","isCurrentSubMenu","Boolean","getOptionTrailing","useButtonIcon","angle_right","useTrailingIcon","trailingIcon","useLinkIcon","open_in_new","h","color","suffix","class","renderCheckbox","idHelper","name","disabled","helpertext","onInput","tabIndex","htmlFor","label","xmlns","viewBox","fill","points","renderButton","isCloseButton","isSub","isGroup","isLink","appendedId","hasIcon","trailingObject","subMenuAttrs","toString","attrs","Tag","onClick","onKeyDown","angle_left","renderSub","renderMenuItem","renderGroup","isCheckbox","renderMenu","role","ref","render","Host","buttonId","tooltipUp","ariahaspopup","ariacontrols","ariaexpanded","onPnClick"],"sources":["src/components/buttons/pn-action-menu/translation.ts","src/components/buttons/pn-action-menu/pn-action-menu.scss?tag=pn-action-menu","src/components/buttons/pn-action-menu/pn-action-menu.tsx"],"sourcesContent":["export const translations = {\n  BACK: {\n    sv: 'Tillbaka',\n    en: 'Back',\n    da: 'Tilbage',\n    fi: 'Takaisin',\n    no: 'Tilbake',\n  },\n};\n\nexport type PnMenuTextProp = keyof typeof translations;\n","@use 'src/globals/main';\n\npn-action-menu {\n  --pn-menu-height: unset;\n  display: inline-block;\n  position: relative;\n}\n\npn-action-menu .pn-action-menu {\n  position: relative;\n\n  &-container {\n    --pn-action-menu-offset: 0;\n\n    scroll-behavior: smooth;\n    list-style: none;\n    text-align: left;\n\n    position: absolute;\n    z-index: 100;\n\n    top: calc(100% + 0.5em);\n    left: var(--pn-action-menu-offset);\n    right: 0;\n\n    background-color: main.$white;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    border-radius: main.$border-radius;\n    margin: 0;\n    padding: 0;\n    width: 16em;\n\n    visibility: hidden;\n    overflow: hidden;\n\n    &[data-open] {\n      visibility: visible;\n      overflow: unset;\n    }\n\n    &[data-left] {\n      right: 0;\n      left: unset;\n    }\n\n    &[data-upwards] {\n      top: unset;\n      bottom: calc(100% + 0.5em);\n      transform-origin: bottom left;\n    }\n\n    &[data-moving] {\n      overflow: hidden;\n      visibility: visible;\n      pointer-events: none;\n    }\n\n    /** Special rules for the small menu */\n    &[data-small] {\n      .pn-action-menu-list {\n        border-radius: 0.5em;\n        visibility: hidden;\n        @include main.pn-transition('visibility');\n        transition-delay: main.$timing;\n        &[data-current] {\n          overflow-x: auto;\n          visibility: visible;\n          transition-delay: 0s;\n        }\n      }\n\n      &[data-moving] > .pn-action-menu-list {\n        visibility: visible;\n      }\n\n      .pn-action-menu-item {\n        position: unset;\n      }\n\n      .pn-action-menu-sub {\n        left: 0;\n        height: 100%;\n        box-shadow: unset;\n        transform: translateX(0);\n        visibility: hidden;\n        &[data-current] {\n          visibility: visible;\n          overflow-x: auto;\n        }\n      }\n    }\n\n    @include main.pn-scrollbar();\n  }\n\n  &-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    height: var(--pn-menu-height);\n    @include main.pn-scrollbar();\n  }\n\n  &-group {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    &-label {\n      display: block;\n      color: main.$gray900;\n      font-weight: 700;\n      font-size: 0.875em;\n      padding: 1em 1em 0.5em;\n    }\n    &-helpertext {\n      display: block;\n      color: main.$gray700;\n      font-weight: 400;\n      margin: 0.25em 0 0;\n    }\n  }\n\n  &-sub {\n    z-index: 110;\n    position: absolute;\n    top: 0;\n\n    width: 100%;\n    min-width: 12em;\n\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n    background: main.$white;\n    border-radius: main.$border-radius;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    transform: translateX(-0.5em);\n    opacity: 0;\n    visibility: hidden;\n\n    @include main.pn-scrollbar();\n    @include main.pn-transition('transform, opacity, visibility');\n    transition-delay: 0s, 0s, main.$timing;\n\n    &[data-open='true'] {\n      transform: translateX(0);\n      opacity: 1;\n      visibility: visible;\n      transition-delay: 0s, 0s, 0s;\n    }\n\n    &[data-open='false'] {\n      pointer-events: none;\n    }\n\n    &[data-x='left'] {\n      left: -100%;\n    }\n\n    &[data-x='center'] {\n      left: 0;\n    }\n\n    &[data-x='right'] {\n      left: 100%;\n    }\n\n    &[data-y='top'] {\n      top: unset;\n      bottom: 0;\n    }\n\n    &[data-y='bottom'] {\n      top: 0;\n    }\n  }\n\n  &-item {\n    position: relative;\n\n    &:first-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-top-left-radius: 0.5em;\n      border-top-right-radius: 0.5em;\n    }\n    &:last-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-bottom-right-radius: 0.5em;\n      border-bottom-left-radius: 0.5em;\n    }\n\n    &-text {\n      display: flex;\n      flex-direction: column;\n      margin-right: auto;\n    }\n\n    &-label {\n      color: main.$blue700;\n      font-weight: 500;\n      text-decoration: none;\n    }\n\n    &-suffix {\n      margin-left: auto;\n      font-weight: 400;\n      color: main.$gray700;\n    }\n\n    &-helpertext {\n      color: main.$gray700;\n      font-weight: 400;\n    }\n\n    &-content {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      flex: 1 1 100%;\n      gap: 0.5em;\n      position: relative;\n\n      &[data-close] {\n        border-bottom: 0.0625em solid main.$gray200;\n      }\n\n      > pn-icon {\n        padding: 0 0.25em;\n      }\n    }\n\n    &[data-group],\n    &[data-sub] {\n      flex-direction: column;\n    }\n  }\n\n  &-button {\n    cursor: pointer;\n    position: relative;\n    -webkit-tap-highlight-color: transparent;\n\n    line-height: 1.5;\n    padding: 0.75em 1em;\n    border: 0;\n    width: 100%;\n    text-align: left;\n    text-decoration-color: transparent;\n\n    overflow: hidden;\n\n    display: flex;\n    align-items: center;\n    flex: 1 1 100%;\n    gap: 0.5em;\n\n    font-size: 1em;\n    min-height: 1.5em;\n    background-color: main.$white;\n\n    @include main.pn-transition('background-color, color, outline-color, text-decoration-color');\n    @include main.pn-ripple(main.$blue900);\n    @include main.pn-focus();\n    outline-offset: -0.2rem;\n\n    > pn-icon {\n      .pn-icon-svg > path {\n        transform-origin: center;\n        transform: rotate(0deg);\n        @include main.pn-transition('transform');\n      }\n\n      &[data-suffix][data-active] > .pn-icon-svg > path {\n        transform: rotate(180deg);\n      }\n\n      &:last-child {\n        margin-left: auto;\n      }\n    }\n\n    &:disabled {\n      pointer-events: none;\n      color: main.$gray700;\n      background-color: main.$gray50;\n    }\n\n    &:hover {\n      background-color: main.$blue25;\n    }\n\n    &:focus {\n      background-color: main.$blue50;\n    }\n\n    &[href] {\n      &:hover,\n      &:focus {\n        text-decoration-color: main.$blue700;\n      }\n    }\n\n    /*\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 0.25em;\n      height: 100%;\n      background-color: transparent;\n      @include main.pn-transition('background-color');\n    }\n\n    &[aria-expanded='true']::before {\n      background-color: main.$blue700;\n    }\n    */\n  }\n\n  &-checkbox {\n    background-color: main.$white;\n    flex: 0 0 1.5em;\n    width: 1.5em;\n    height: 1.5em;\n    border: 0.0625em solid main.$gray400;\n    border-radius: 0.25em;\n    margin-left: auto;\n\n    @include main.pn-focus-base;\n    @include main.pn-transition('background-color, border-color, outline-color');\n\n    svg polyline {\n      stroke: main.$white;\n      stroke-linecap: round;\n      stroke-dasharray: 23;\n      @include main.pn-transition('stroke-dashoffset');\n      transition-delay: 0s;\n\n      &.pn-action-menu-checkbox-checkmark-path {\n        stroke-dashoffset: 23;\n      }\n    }\n  }\n\n  &-radio {\n    display: flex;\n    gap: 0.75em;\n    padding: 0;\n    margin-left: auto;\n\n    &-outer {\n      background-color: main.$input-background;\n      border: main.$input-border;\n      border-radius: 50%;\n      height: 1.5em;\n      width: 1.5em;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      @include main.pn-focus-base;\n      @include main.pn-transition('border-color, background-color, outline-color');\n    }\n\n    &-inner {\n      transform: scale(0);\n      height: 0.75em;\n      width: 0.75em;\n      background-color: main.$input-button-background-box-active;\n      border-radius: 50%;\n      transform-origin: center center;\n      @include main.pn-transition('background-color, transform');\n    }\n  }\n\n  &-input {\n    position: absolute;\n    z-index: 10;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    -webkit-tap-highlight-color: transparent;\n\n    &:checked {\n      + .pn-action-menu-button {\n        background-color: main.$blue25;\n        .pn-action-menu-checkbox {\n          border-color: main.$blue700;\n          background-color: main.$blue700;\n          polyline.pn-action-menu-checkbox-checkmark-path {\n            transition-delay: main.$timing;\n            stroke-dashoffset: 0;\n          }\n        }\n        .pn-action-menu-radio {\n          &-outer {\n            border-color: main.$border-color-default-active;\n          }\n          &-inner {\n            transform: scale(1);\n            background-color: main.$input-button-background-box-active;\n          }\n        }\n      }\n\n      &:hover {\n        background-color: main.$blue50;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      + .pn-action-menu-button {\n        pointer-events: none;\n        color: main.$gray700;\n        background-color: main.$gray50;\n\n        .pn-action-menu-item-label {\n          color: main.$gray700;\n        }\n        .pn-action-menu-checkbox {\n          background-color: main.$gray50;\n        }\n        .pn-action-menu-radio-outer {\n          border-color: main.$gray400;\n          background-color: main.$gray50;\n        }\n        .pn-icon-svg path {\n          fill: main.$gray700;\n        }\n      }\n\n      &:checked + .pn-action-menu-button {\n        .pn-action-menu-radio-inner {\n          background-color: main.$gray400;\n        }\n        .pn-action-menu-checkbox {\n          border-color: main.$gray400;\n          background-color: main.$gray400;\n        }\n      }\n    }\n\n    &:hover + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-radio-outer {\n        border-color: main.$input-button-background-box-active;\n        background-color: main.$input-button-background-hover;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-checkbox,\n      .pn-action-menu-radio .pn-action-menu-radio-outer {\n        @include main.pn-focus-visible();\n      }\n    }\n  }\n\n  &-p {\n    margin: 0;\n  }\n\n  > pn-button[data-default-icon] .pn-button {\n    &[aria-expanded='true'] .pn-icon-svg {\n      transform: rotate(180deg);\n      transition-delay: 0s;\n    }\n    .pn-icon-svg {\n      transform: rotate(0deg);\n      transition-delay: main.$timing;\n      @include main.pn-transition('transform');\n    }\n  }\n}\n","import { Component, Prop, State, Watch, Element, h, Host, Event, EventEmitter, Listen } from '@stencil/core';\n\nimport {\n  awaitTopbar,\n  en,\n  getMenuWidth,\n  getTotalHeightOffset,\n  isSmallScreen,\n  reduceMotion,\n  ripple,\n  uuidv4,\n} from '@/index';\nimport type {\n  PnLanguages,\n  PnActionMenuItem,\n  Components,\n  PnActionMenuInput,\n  PnActionMenuGroup,\n  PnMeasurements,\n} from '@/index';\n\nimport { translations, PnMenuTextProp } from './translation';\n\nimport { angle_down, angle_left, angle_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * Create a list of actions in an accessible way.\n *\n * Option types include:\n *\n * - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n *\n * You can group these actions in groups and/or sub menus.\n *\n * - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n *\n * @see {@link PnActionMenuItem}\n */\n@Component({\n  tag: 'pn-action-menu',\n  styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n  private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n  private menuButtonId: string = `${this.id}-button`;\n  private menuListId: string = `${this.id}-list`;\n\n  private menuTrigger: HTMLPnButtonElement;\n  private menuContainer: HTMLDivElement;\n  private menuList: HTMLMenuElement;\n\n  private animation: Animation;\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n\n  private timeout: NodeJS.Timeout;\n\n  /** 16em */\n  private readonly menuWidth: number = 256;\n\n  @Element() private hostElement: HTMLElement;\n\n  @State() private smallMenu: boolean = null;\n  @State() private upwards: boolean = false;\n\n  @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n  @State() private isClosing = false;\n  @State() private isExpanding = false;\n\n  /** Array of action menu options. @see {@link PnActionMenuItem} */\n  @Prop() options: PnActionMenuItem[] = [];\n  /** Set any prop from the `pn-button` component here. @see {@link Components.PnButton} */\n  @Prop() button: Components.PnButton;\n\n  /** Set a custom ID for the menu. */\n  @Prop() menuId?: string = this.id;\n  /** Manually set the language. */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  /** Open/close the action menu manually. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prefer that the menu open upwards, if there is enough space. @category Features */\n  @Prop() menuUp?: boolean = false;\n  /** Prefer that the submenus opens to the left, if there is enough space. @category Features */\n  @Prop() menuLeft?: boolean = false;\n\n  /** Emitted when the menu is opened or closed. */\n  @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n  /** Emitted when the menu is fully hidden/visible after the animation has played. */\n  @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n  /** Emitted when an option is clicked (button, link, input or submenus). */\n  @Event() private menuOption: EventEmitter<{\n    /** Which type of menu item was clicked. */\n    type: 'button' | 'link' | 'input' | 'submenu';\n    /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */\n    click: MouseEvent | Event;\n    /** The full {@link PnActionMenuItem} object. */\n    option: PnActionMenuItem;\n    /** If the submenu is open/closed. */\n    open?: Boolean;\n  }>;\n\n  @Watch('options')\n  handleOptions() {\n    this.setMenuLayout();\n  }\n\n  @Watch('open')\n  openHandler() {\n    this.setAnimationDuration();\n\n    requestAnimationFrame(() => {\n      if (this.open && !(this.isClosing || this.isExpanding)) {\n        this.setOffset();\n        this.setMenuLayout();\n      }\n\n      this.gridHandler();\n\n      this.menuToggle.emit({ open: this.open });\n\n      clearTimeout(this.timeout);\n      this.timeout = setTimeout(() => {\n        if (!this.open) {\n          this.activeSubmenu = [];\n          const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n          Array.from(subMenus).forEach(el => {\n            el.removeAttribute('data-x');\n            el.removeAttribute('data-y');\n          });\n        }\n\n        this.menuVisible.emit({ visible: this.open });\n      }, this.animationDuration);\n    });\n  }\n\n  @Watch('menuId')\n  handleMenuId() {\n    this.menuButtonId = `${this.menuId}-button`;\n    this.menuListId = `${this.menuId}-list`;\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.open) this.toggleActionMenu(false);\n  }\n\n  async componentWillLoad() {\n    if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n    this.handleMenuId();\n    this.setAnimationDuration();\n\n    if (this.language !== null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.setOffset();\n\n    if (this.open) this.gridHandler();\n  }\n\n  private translate(prop: PnMenuTextProp) {\n    return translations[prop][this.language || en];\n  }\n\n  /** Open/close the action menu. */\n  private toggleActionMenu(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  private setMenuLayout() {\n    if (!this.menuContainer) return;\n\n    if (!(this.isClosing || this.isExpanding)) this.resetMaxHeight();\n\n    const measurements = this.getMenuMeasurements();\n\n    this.setDirection(measurements);\n    this.setMenuSize(measurements);\n    this.setMaxHeight(measurements);\n  }\n\n  private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const fitsUpwards = sUp > hUp;\n    const fitsDownards = sDown > hDown;\n    const moreSpaceDown = sDown > sUp;\n    this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);\n  }\n\n  private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const isWidthSmall = isSmallScreen();\n    const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n    const isSmall = isWidthSmall || !menuFits;\n\n    if (isSmall !== this.smallMenu) {\n      this.smallMenu = isSmall;\n    }\n  }\n\n  private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    if (this.smallMenu) {\n      const heightUp = hUp > sUp ? hUp - 16 : hUp;\n      const heightDown = hDown > sDown ? hDown - 8 : hDown;\n      this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n    } else this.resetMaxHeight();\n  }\n\n  private resetMaxHeight() {\n    this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n  }\n\n  private setAnimationDuration() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private getMenuMeasurements(): PnMeasurements {\n    const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n    const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n    const rectButton = this.getRect(this.menuTrigger);\n    const rectMenu = this.getRect(this.menuContainer);\n\n    /** Measurements upwards. */\n    const sUp = rectButton.top - getTotalHeightOffset();\n    const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n    /** Measurements downwards. */\n    const sDown = innerHeight - rectMenu.top;\n    const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n    return {\n      hUp,\n      hDown,\n      sUp,\n      sDown,\n    };\n  }\n\n  private setOffset() {\n    const data = this.getRect(this.hostElement);\n    const fullWidth = data.left - getMenuWidth() + this.menuWidth;\n    const isWide = fullWidth > innerWidth;\n    const offset = isWide ? fullWidth - innerWidth + 16 : 0;\n\n    if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);\n  }\n\n  private getListId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-list`;\n  }\n\n  private getButtonId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-button`;\n  }\n\n  private getTriggerIcon() {\n    if (this.button?.icon) return;\n    return angle_down;\n  }\n\n  /** Set the path of open sub menus. */\n  private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n    for (const item of options) {\n      const newPath = [...path, item.value];\n      if (item.value === value) return newPath;\n\n      if (item.options || item.group) {\n        const result = this.getSubMenuPath(item.options || item.group, value, newPath);\n        if (result) return result;\n      }\n    }\n    return null;\n  }\n\n  private closeEachSubMenu() {\n    this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n    const interval = setInterval(() => {\n      if (this.smallMenu || this.activeSubmenu.length === 0) {\n        clearInterval(interval);\n        this.toggleActionMenu(false);\n      } else {\n        this.activeSubmenu.pop();\n        this.activeSubmenu = [...this.activeSubmenu];\n      }\n    }, 150);\n  }\n\n  private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n    const { key } = event;\n\n    if (key === 'Escape') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n    }\n  }\n\n  // Animation Start\n\n  private gridHandler() {\n    if (this.open) this.openGrid();\n    else this.closeGrid();\n  }\n\n  private openGrid() {\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isClosing ? clientHeight : 0;\n    this.menuContainer.style.height = `${list.height}px`;\n\n    this.isExpanding = true;\n    this.animateGrid(true, `${height}px`, `${list.height}px`);\n  }\n\n  private closeGrid() {\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isExpanding ? clientHeight : list.height;\n    this.menuContainer.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateGrid(false, `${height}px`, `0px`);\n  }\n\n  private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.menuContainer.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    this.menuContainer.style.height = this.isClosing ? '0px' : '';\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  // Animation end\n\n  private async optionSelect(option: PnActionMenuItem, click: MouseEvent | Event) {\n    const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n    const isSubMenu = type === 'submenu';\n\n    if (isSubMenu) this.toggleSub(option);\n    else if (type === 'button') this.closeEachSubMenu();\n    else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n    this.menuOption.emit({\n      option,\n      type,\n      click,\n      open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n    });\n\n    const target = click.target as HTMLElement;\n    const element =\n      target.localName === 'input'\n        ? (target.nextElementSibling as HTMLElement)\n        : target.className === 'pn-action-menu-button'\n          ? target\n          : target.closest<HTMLElement>('.pn-action-menu-button');\n\n    const { x, width, y, top } = this.getRect(element as HTMLElement);\n    const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n    ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n    this.menuContainer.scrollTo({ top: 0 });\n  }\n\n  /** Toggle individual sub-menus inside the action menu by using the `option['value']`. */\n  private toggleSub(option: PnActionMenuItem) {\n    const { value } = option;\n\n    const path = this.getSubMenuPath(this.options, value);\n    const isActive = this.activeSubmenu.includes(value);\n    isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n    const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n    const data = this.getRect(item);\n\n    const spaceLeft = data.left;\n    const spaceRight = innerWidth - data.right - 8;\n\n    const fitsLeft = spaceLeft > data.width;\n    const fitsRight = spaceRight > data.width;\n\n    const climbUp = this.menuUp && data.top - data.height > 0;\n    const yDirection = climbUp ? 'top' : 'bottom';\n\n    if (!isActive && !item.dataset.x)\n      item.setAttribute(\n        'data-x',\n        this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n      );\n    if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n    if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n      this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n    else this.activeSubmenu = [...path];\n  }\n\n  /** Check if a sub-menu is active. */\n  private isSubmenuActive(value: string): boolean {\n    return this.activeSubmenu.includes(value);\n  }\n\n  private isMenuActive() {\n    const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n    return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);\n  }\n\n  private isCurrentSubMenu(value: string) {\n    return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n  }\n\n  private getOptionTrailing(option: PnActionMenuItem) {\n    const useButtonIcon = option.options?.length && angle_right;\n    const useTrailingIcon = option.trailingIcon;\n    const useLinkIcon = option.target === '_blank' && open_in_new;\n\n    /** If the user has defined a trialing icon, use it first. */\n    const icon = useButtonIcon || useTrailingIcon || useLinkIcon;\n\n    if (icon) {\n      return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n    }\n    if (option.suffix) {\n      return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n    }\n  }\n\n  private renderCheckbox(option: PnActionMenuInput) {\n    const id = `pn-menu-${option.value}-label`;\n    const idHelper = `pn-menu-${option.value}-helpertext`;\n    return (\n      <div class=\"pn-action-menu-item-content\">\n        <input\n          type={option.input}\n          id={id}\n          class=\"pn-action-menu-input\"\n          name={option.name}\n          value={option.value}\n          checked={option.checked}\n          disabled={option.disabled}\n          aria-describedby={option.helpertext ? idHelper : null}\n          onInput={event => this.optionSelect(option, event)}\n          tabIndex={this.open ? null : -1}\n        />\n\n        <div class=\"pn-action-menu-button\">\n          {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n          <div class=\"pn-action-menu-item-text\">\n            <label htmlFor={id} class=\"pn-action-menu-item-label\">\n              {option.label}\n            </label>\n            {option.helpertext && (\n              <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n                <span>{option.helpertext}</span>\n              </p>\n            )}\n          </div>\n          {option.input === 'checkbox' ? (\n            <div class=\"pn-action-menu-checkbox\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n              </svg>\n            </div>\n          ) : (\n            <div class=\"pn-action-menu-radio\">\n              <div class=\"pn-action-menu-radio-outer\">\n                <div class=\"pn-action-menu-radio-inner\" />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private renderButton(option: PnActionMenuItem) {\n    const isCloseButton = option.label === 'BACK';\n    const isSub = !!option?.options?.length;\n    const isGroup = !!option?.group?.length;\n    const isLink = !!option.href && !isSub && !isGroup;\n\n    const appendedId = isCloseButton ? '-close' : '';\n    const hasIcon = isCloseButton || !!option.icon;\n\n    const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n    const open = this.isSubmenuActive(option.value);\n    const subMenuAttrs = isSub\n      ? {\n          'aria-haspopup': 'true',\n          'aria-controls': open ? this.getListId(option) : null,\n          'aria-expanded': open?.toString(),\n        }\n      : {};\n\n    const attrs = isLink\n      ? {\n          href: option.href,\n          target: option.target,\n        }\n      : {\n          disabled: option.disabled,\n        };\n\n    const Tag = isLink ? 'a' : 'button';\n\n    return isGroup ? (\n      <div class=\"pn-action-menu-group-label\">\n        <p class=\"pn-action-menu-p\">{option.label}</p>\n        {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n      </div>\n    ) : (\n      <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n        <Tag\n          id={this.getButtonId(option) + appendedId}\n          class=\"pn-action-menu-button\"\n          {...subMenuAttrs}\n          {...attrs}\n          tabIndex={this.open ? null : -1}\n          onClick={event => this.optionSelect(option, event)}\n          onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n        >\n          {hasIcon && <pn-icon icon={isCloseButton ? angle_left : option.icon} color=\"blue700\" />}\n          <div class=\"pn-action-menu-item-text\">\n            <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n            {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n          </div>\n          {trailingObject}\n        </Tag>\n      </div>\n    );\n  }\n\n  private renderSub(option: PnActionMenuItem) {\n    return (\n      <menu\n        id={this.getListId(option)}\n        aria-labelledby={this.getButtonId(option)}\n        class=\"pn-action-menu-sub\"\n        data-open={this.isSubmenuActive(option.value)?.toString()}\n        data-current={this.isCurrentSubMenu(option.value)}\n      >\n        {this.smallMenu && (\n          <li class=\"pn-action-menu-item\">\n            {this.renderButton({\n              label: 'BACK',\n              value: option.value,\n              options: option.options,\n            })}\n          </li>\n        )}\n        {option.options.map(item => this.renderMenuItem(item))}\n      </menu>\n    );\n  }\n\n  private renderGroup(option: PnActionMenuGroup) {\n    return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n  }\n\n  private renderMenuItem(option: PnActionMenuItem) {\n    const isSub = !!option?.options?.length;\n    const isGroup = !isSub && !!option?.group?.length;\n\n    const isCheckbox = !!option.input && !isSub && !isGroup;\n\n    return (\n      <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n        {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n        {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n      </li>\n    );\n  }\n\n  private renderMenu() {\n    return (\n      <div\n        id={this.menuListId}\n        class=\"pn-action-menu-container\"\n        role=\"region\"\n        aria-labelledby={this.menuButtonId}\n        data-open={this.open}\n        data-moving={this.isClosing || this.isExpanding}\n        data-upwards={this.upwards}\n        data-small={this.smallMenu}\n        style={{ height: '0px' }}\n        ref={el => (this.menuContainer = el)}\n      >\n        <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n          {this.options?.map(option => this.renderMenuItem(option))}\n        </menu>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n          <pn-button\n            icon={this.getTriggerIcon()}\n            {...this.button}\n            buttonId={this.menuButtonId}\n            tooltipUp={!this.upwards}\n            ariahaspopup=\"true\"\n            ariacontrols={this.open ? this.menuListId : null}\n            ariaexpanded={this.open.toString()}\n            data-default-icon={!this.button?.icon}\n            onPnClick={() => this.toggleActionMenu()}\n            ref={el => (this.menuTrigger = el)}\n          />\n          {this.renderMenu()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}