@postnord/pn-marketweb-components 3.0.3 → 3.1.0

package/cjs/pn-proxio-pricegroup.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-proxio-pricegroup.entry.cjs.js","mappings":"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","names":["FetchHelper","translations","MarketWebContextService","h","Host","arrow_left","index","arrow_right"],"sources":["src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.scss?tag=pn-proxio-pricegroup","src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-proxio-pricegroup-common.scss';\n\npn-proxio-pricegroup {\n  div.proxio-pricegroup-container {\n    max-width: 99.4rem;\n  }\n\n  div.weightcontainer {\n    margin: 2.8rem 0;\n  }\n\n  div.weightvaluecontainer {\n    display: flex;\n    flex-direction: row;\n    align-content: center;\n    justify-content: space-between;\n    align-items: flex-start;\n\n    pn-button {\n      transform: translateY(-0.4rem);\n\n      button::before {\n        display: none;\n      }\n    }\n  }\n\n  div.weightradios {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    color: $blue700;\n    width: 80%;\n    margin: 0 3.6rem;\n    position: relative;\n    width: 0%;\n\n    &[data-carousel-container-position='end50'] {\n      width: 45%;\n      margin-left: auto;\n      margin-right: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 40%;\n      }\n    }\n\n    &[data-carousel-container-position='end75'] {\n      width: 65%;\n      margin-left: auto;\n      margin-right: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        margin-right: auto;\n      }\n    }\n\n    &[data-carousel-container-position='start50'] {\n      width: 45%;\n      margin-right: auto;\n      margin-left: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 40%;\n      }\n    }\n\n    &[data-carousel-container-position='start75'] {\n      width: 65%;\n      margin-right: auto;\n      margin-left: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        margin-left: auto;\n      }\n    }\n\n    &[data-carousel-container-position='default'] {\n      flex: 0 0 auto;\n      width: 80%;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 65%;\n      }\n    }\n  }\n\n  div.weightdata {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-content: center;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 1.2rem;\n    min-width: 4rem;\n    cursor: pointer;\n\n    label {\n      font-size: 1.4rem;\n      cursor: pointer;\n    }\n\n    &[data-carousel-position='0'] {\n      font-size: 2rem;\n      font-weight: 700;\n    }\n\n    &[data-carousel-position='2'],\n    &[data-carousel-position='-2'] {\n      @media screen and (max-width: $productcard-media-tablet) {\n        display: none;\n      }\n    }\n\n    &[data-carousel-position='outside'] {\n      display: none;\n    }\n\n    input[type='radio'] {\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      width: 1.2rem;\n      height: 1.2rem;\n      background-color: $blue700;\n      border-radius: 50%;\n      margin: 0;\n      cursor: pointer;\n    }\n\n    input[type='radio']:checked {\n      z-index: 1;\n      transform: translateY(-0.1rem);\n      height: 1.4rem;\n      width: 1.4rem;\n      box-shadow:\n        0 0 0 0.3rem $white,\n        0 0 0 0.4rem $blue700;\n    }\n  }\n\n  div.weightline {\n    width: 100%;\n    background-color: $gray50;\n    z-index: -1;\n    height: 0.8rem;\n    -webkit-transform: translateX(2.1rem) translateY(1.32rem);\n    transform: translateX(2.1rem) translateY(1rem);\n    border-radius: 2rem;\n    margin-right: 3.5rem;\n  }\n\n  pn-button {\n    &[disabled='disabled'] {\n      opacity: 0.2;\n\n      button {\n        cursor: default;\n\n        &.pn-button-light .pn-button-bg:after {\n          background-color: $white;\n        }\n\n        &[data-tooltip-open]:before {\n          display: none;\n        }\n      }\n    }\n\n    button div.button-tooltip {\n      display: none;\n    }\n\n    button:focus .pn-button-bg {\n      box-shadow: none;\n    }\n  }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { translations } from './translations';\nimport { ProductGenericItem, ProxioPriceGroupi18n, ProxioPriceListGroupResponse, ProxioProduct, ProductWeightGroupListItem } from './types';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-proxio-pricegroup',\n  styleUrl: 'pn-proxio-pricegroup.scss',\n})\nexport class PnProxioPricegroup {\n  /** Specifies which endpoint domain we should load from */\n  @Prop({ mutable: true }) endpoint: string = null;\n  //@Prop() culture: string = \"sv-SE\";\n  @Prop() language: string = 'sv';\n  @Prop() market: string = 'se';\n  @Prop() tariffid: string = '';\n  @Prop() cache: boolean = true;\n\n  @State() activeWeightIndex: number = 0;\n  @State() data: ProxioPriceListGroupResponse = null;\n  @State() i18n: ProxioPriceGroupi18n = translations['sv'];\n\n  fetchHelper = new FetchHelper('proxiopricegroup');\n\n  componentWillLoad() {\n    this.setInitialValues().then(() => {\n      this.init();\n    });\n  }\n\n  async setInitialValues(href = window.location.href) {\n    const marketWebContextService = new MarketWebContextService(href);\n    const environment = await marketWebContextService.getEnvironmentName();\n\n    if (!this.endpoint && environment?.indexOf('local') === -1) {\n      const market = await marketWebContextService.getMarket();\n      this.endpoint = await marketWebContextService.getEndpoint(environment, market);\n    }\n\n    if (!this.endpoint) {\n      this.endpoint = '';\n    }\n  }\n\n  init() {\n    this.setLanguage();\n    this.fetchData();\n  }\n\n  async fetchData() {\n    if (!this.market || !this.language || !this.tariffid) {\n      return;\n    }\n    const endpoint = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n    const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n    //const fetchUrl = `https://localhost:51547/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      {\n        mode: 'cors',\n      },\n      this.cache,\n      this.onFetchData.bind(this),\n    )) as any;\n\n    if (data?.proxioProduct) {\n      this.data = data;\n    }\n  }\n\n  onFetchData(data) {\n    this.data = data;\n  }\n\n  @Listen('activeWeightIndex')\n  setActiveWeightIndex(weightIndex: number) {\n    let minIndex = 0;\n    let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;\n    weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;\n    weightIndex = weightIndex < minIndex ? minIndex : weightIndex;\n    this.activeWeightIndex = weightIndex;\n  }\n\n  @Listen('language')\n  setLanguage() {\n    if (translations[this.language]) {\n      this.i18n = translations[this.language] as ProxioPriceGroupi18n;\n    }\n  }\n\n  getPriceString(product: ProxioProduct) {\n    let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';\n    return price ? this.i18n.from + price : '';\n  }\n\n  getProductLink(product: ProxioProduct, productWeightGroupList: ProductWeightGroupListItem[]) {\n    let productId = productWeightGroupList[this.activeWeightIndex]?.item2;\n    let productLink = product.productLink ? product?.productLink : '';\n    return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';\n  }\n\n  isActive(index: number) {\n    return index === this.activeWeightIndex;\n  }\n\n  getCarouselPosition(index: number) {\n    switch (index) {\n      case this.activeWeightIndex - 2: {\n        return -2;\n      }\n      case this.activeWeightIndex - 1: {\n        return -1;\n      }\n      case this.activeWeightIndex: {\n        return 0;\n      }\n      case this.activeWeightIndex + 1: {\n        return 1;\n      }\n      case this.activeWeightIndex + 2: {\n        return 2;\n      }\n      default:\n        return 'outside';\n    }\n  }\n\n  getContainerPosition() {\n    let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;\n    switch (this.activeWeightIndex) {\n      case 0: {\n        return 'end50';\n      }\n      case 1: {\n        return 'end75';\n      }\n      case maxIndex - 1: {\n        return 'start75';\n      }\n      case maxIndex: {\n        return 'start50';\n      }\n      default: {\n        return 'default';\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.data?.proxioProduct ? (\n          <div class=\"proxio-pricegroup-container\">\n            <div class=\"weightcontainer\">\n              {this.data.proxioProduct.weightAndPriceList ? (\n                <div class=\"weightvaluecontainer\">\n                  <pn-button\n                    disabled={this.activeWeightIndex === 0 ? 'disabled' : null}\n                    icon={arrow_left}\n                    appearance=\"light\"\n                    small=\"true\"\n                    onClick={() => this.setActiveWeightIndex(this.activeWeightIndex - 1)}\n                  ></pn-button>\n                  <div class=\"weightradios \" data-carousel-container-position={this.getContainerPosition()}>\n                    <div class=\"weightline\"></div>\n                    {this.data.proxioProduct.weightAndPriceList.map((weightItem, index) =>\n                      this.getCarouselPosition(index) !== null ? (\n                        <div class=\"weightdata\" data-carousel-position={this.getCarouselPosition(index)} onClick={() => this.setActiveWeightIndex(index)}>\n                          <input type=\"radio\" id={'weightradio' + index} name=\"weightradio\" value={index} checked={this.isActive(index)} />\n                          <label htmlFor={'weightradio' + index}>{weightItem.item1}</label>\n                        </div>\n                      ) : null,\n                    )}\n                  </div>\n                  <pn-button\n                    disabled={this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null}\n                    icon={arrow_right}\n                    appearance=\"light\"\n                    small=\"true\"\n                    onClick={() => this.setActiveWeightIndex(this.activeWeightIndex + 1)}\n                  ></pn-button>\n                </div>\n              ) : null}\n            </div>\n            <pn-proxio-productcard>\n              <pn-illustration slot=\"illustrationmobile\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n              <h2 slot=\"title\">{this.data.proxioProduct.productTitle}</h2>\n              <pn-proxio-productcard-description\n                slot=\"description\"\n                heading={this.data.proxioProduct.productPreamble}\n                highlight={this.data.proxioProduct.deliveryDateInformation}\n                list={this.data.proxioProduct.productDescriptionBulletListItems}\n              ></pn-proxio-productcard-description>\n              <div slot=\"information\">\n                <pn-proxio-productcard-information\n                  label={this.i18n.labelMaxDimensions}\n                  information={this.data.proxioProduct.productPackageDimensionsList as ProductGenericItem[]}\n                ></pn-proxio-productcard-information>\n                <pn-proxio-productcard-information\n                  label={this.i18n.labelMaxDimensionsRoll}\n                  information={this.data.proxioProduct.productRollDimensionsList as ProductGenericItem[]}\n                ></pn-proxio-productcard-information>\n              </div>\n              <div slot=\"bottomtags\">\n                {this.data.proxioProduct.usp1 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp1}</pn-titletag> : null}\n                {this.data.proxioProduct.usp2 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp2}</pn-titletag> : null}\n                {this.data.proxioProduct.usp3 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp3}</pn-titletag> : null}\n              </div>\n              <pn-illustration slot=\"illustration\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n              <div slot=\"pricelink\">\n                <pn-proxio-productcard-pricelink\n                  price={this.getPriceString(this.data.proxioProduct)}\n                  link={this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList)}\n                  linktext={this.data.proxioProduct.productLinkText}\n                ></pn-proxio-productcard-pricelink>\n                {this.data.relatedProxioProducts\n                  ? this.data.relatedProxioProducts.map(product => (\n                      <pn-proxio-productcard-pricelink\n                        price={this.getPriceString(product)}\n                        link={product.productLink}\n                        linktext={product.productLinkText}\n                      ></pn-proxio-productcard-pricelink>\n                    ))\n                  : null}\n              </div>\n            </pn-proxio-productcard>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-proxio-pricegroup.entry.cjs.js","mappings":"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","names":["translations","FetchHelper","MarketWebContextService","h","Host","arrow_left","index","arrow_right"],"sources":["src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.scss?tag=pn-proxio-pricegroup","src/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-proxio-pricegroup-common.scss';\n\npn-proxio-pricegroup {\n  div.proxio-pricegroup-container {\n    max-width: 99.4rem;\n  }\n\n  div.weightcontainer {\n    margin: 2.8rem 0;\n  }\n\n  div.weightvaluecontainer {\n    display: flex;\n    flex-direction: row;\n    align-content: center;\n    justify-content: space-between;\n    align-items: flex-start;\n\n    pn-button {\n      transform: translateY(-0.4rem);\n\n      button::before {\n        display: none;\n      }\n    }\n  }\n\n  div.weightradios {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    color: $blue700;\n    width: 80%;\n    margin: 0 3.6rem;\n    position: relative;\n    width: 0%;\n\n    &[data-carousel-container-position='end50'] {\n      width: 45%;\n      margin-left: auto;\n      margin-right: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 40%;\n      }\n    }\n\n    &[data-carousel-container-position='end75'] {\n      width: 65%;\n      margin-left: auto;\n      margin-right: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        margin-right: auto;\n      }\n    }\n\n    &[data-carousel-container-position='start50'] {\n      width: 45%;\n      margin-right: auto;\n      margin-left: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 40%;\n      }\n    }\n\n    &[data-carousel-container-position='start75'] {\n      width: 65%;\n      margin-right: auto;\n      margin-left: 3.6rem;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        margin-left: auto;\n      }\n    }\n\n    &[data-carousel-container-position='default'] {\n      flex: 0 0 auto;\n      width: 80%;\n\n      @media screen and (max-width: $productcard-media-tablet) {\n        width: 65%;\n      }\n    }\n  }\n\n  div.weightdata {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-content: center;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 1.2rem;\n    min-width: 4rem;\n    cursor: pointer;\n\n    label {\n      font-size: 1.4rem;\n      cursor: pointer;\n    }\n\n    &[data-carousel-position='0'] {\n      font-size: 2rem;\n      font-weight: 700;\n    }\n\n    &[data-carousel-position='2'],\n    &[data-carousel-position='-2'] {\n      @media screen and (max-width: $productcard-media-tablet) {\n        display: none;\n      }\n    }\n\n    &[data-carousel-position='outside'] {\n      display: none;\n    }\n\n    input[type='radio'] {\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      width: 1.2rem;\n      height: 1.2rem;\n      background-color: $blue700;\n      border-radius: 50%;\n      margin: 0;\n      cursor: pointer;\n    }\n\n    input[type='radio']:checked {\n      z-index: 1;\n      transform: translateY(-0.1rem);\n      height: 1.4rem;\n      width: 1.4rem;\n      box-shadow:\n        0 0 0 0.3rem $white,\n        0 0 0 0.4rem $blue700;\n    }\n  }\n\n  div.weightline {\n    width: 100%;\n    background-color: $gray50;\n    z-index: -1;\n    height: 0.8rem;\n    -webkit-transform: translateX(2.1rem) translateY(1.32rem);\n    transform: translateX(2.1rem) translateY(1rem);\n    border-radius: 2rem;\n    margin-right: 3.5rem;\n  }\n\n  pn-button {\n    &[disabled='disabled'] {\n      opacity: 0.2;\n\n      button {\n        cursor: default;\n\n        &.pn-button-light .pn-button-bg:after {\n          background-color: $white;\n        }\n\n        &[data-tooltip-open]:before {\n          display: none;\n        }\n      }\n    }\n\n    button div.button-tooltip {\n      display: none;\n    }\n\n    button:focus .pn-button-bg {\n      box-shadow: none;\n    }\n  }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { translations } from './translations';\nimport { ProductGenericItem, ProxioPriceGroupi18n, ProxioPriceListGroupResponse, ProxioProduct, ProductWeightGroupListItem } from './types';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-proxio-pricegroup',\n  styleUrl: 'pn-proxio-pricegroup.scss',\n})\nexport class PnProxioPricegroup {\n  /** Specifies which endpoint domain we should load from */\n  @Prop({ mutable: true }) endpoint: string = null;\n  //@Prop() culture: string = \"sv-SE\";\n  @Prop() language: string = 'sv';\n  @Prop() market: string = 'se';\n  @Prop() tariffid: string = '';\n  @Prop() cache: boolean = true;\n\n  @State() activeWeightIndex: number = 0;\n  @State() data: ProxioPriceListGroupResponse = null;\n  @State() i18n: ProxioPriceGroupi18n = translations['sv'];\n\n  fetchHelper = new FetchHelper('proxiopricegroup');\n\n  componentWillLoad() {\n    this.setInitialValues().then(() => {\n      this.init();\n    });\n  }\n\n  async setInitialValues(href = window.location.href) {\n    const marketWebContextService = new MarketWebContextService(href);\n    const environment = await marketWebContextService.getEnvironmentName();\n\n    if (!this.endpoint && environment?.indexOf('local') === -1) {\n      const market = await marketWebContextService.getMarket();\n      this.endpoint = await marketWebContextService.getEndpoint(environment, market);\n    }\n\n    if (!this.endpoint) {\n      this.endpoint = '';\n    }\n  }\n\n  init() {\n    this.setLanguage();\n    this.fetchData();\n  }\n\n  async fetchData() {\n    if (!this.market || !this.language || !this.tariffid) {\n      return;\n    }\n    const endpoint = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;\n    const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n    //const fetchUrl = `https://localhost:51547/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      {\n        mode: 'cors',\n      },\n      this.cache,\n      this.onFetchData.bind(this),\n    )) as any;\n\n    if (data?.proxioProduct) {\n      this.data = data;\n    }\n  }\n\n  onFetchData(data) {\n    this.data = data;\n  }\n\n  @Listen('activeWeightIndex')\n  setActiveWeightIndex(weightIndex: number) {\n    let minIndex = 0;\n    let maxIndex = this.data.proxioProduct?.weightAndPriceList?.length - 1 ?? minIndex;\n    weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;\n    weightIndex = weightIndex < minIndex ? minIndex : weightIndex;\n    this.activeWeightIndex = weightIndex;\n  }\n\n  @Listen('language')\n  setLanguage() {\n    if (translations[this.language]) {\n      this.i18n = translations[this.language] as ProxioPriceGroupi18n;\n    }\n  }\n\n  getPriceString(product: ProxioProduct) {\n    let price = product.weightAndPriceList ? product?.weightAndPriceList[this.activeWeightIndex]?.item2 : '';\n    return price ? this.i18n.from + price : '';\n  }\n\n  getProductLink(product: ProxioProduct, productWeightGroupList: ProductWeightGroupListItem[]) {\n    let productId = productWeightGroupList[this.activeWeightIndex]?.item2;\n    let productLink = product.productLink ? product?.productLink : '';\n    return productLink ? productLink + (productId ? '?productId=' + productId : '') : '';\n  }\n\n  isActive(index: number) {\n    return index === this.activeWeightIndex;\n  }\n\n  getCarouselPosition(index: number) {\n    switch (index) {\n      case this.activeWeightIndex - 2: {\n        return -2;\n      }\n      case this.activeWeightIndex - 1: {\n        return -1;\n      }\n      case this.activeWeightIndex: {\n        return 0;\n      }\n      case this.activeWeightIndex + 1: {\n        return 1;\n      }\n      case this.activeWeightIndex + 2: {\n        return 2;\n      }\n      default:\n        return 'outside';\n    }\n  }\n\n  getContainerPosition() {\n    let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;\n    switch (this.activeWeightIndex) {\n      case 0: {\n        return 'end50';\n      }\n      case 1: {\n        return 'end75';\n      }\n      case maxIndex - 1: {\n        return 'start75';\n      }\n      case maxIndex: {\n        return 'start50';\n      }\n      default: {\n        return 'default';\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.data?.proxioProduct ? (\n          <div class=\"proxio-pricegroup-container\">\n            <div class=\"weightcontainer\">\n              {this.data.proxioProduct.weightAndPriceList ? (\n                <div class=\"weightvaluecontainer\">\n                  <pn-button\n                    disabled={this.activeWeightIndex === 0 ? 'disabled' : null}\n                    icon={arrow_left}\n                    appearance=\"light\"\n                    small=\"true\"\n                    onClick={() => this.setActiveWeightIndex(this.activeWeightIndex - 1)}\n                  ></pn-button>\n                  <div class=\"weightradios \" data-carousel-container-position={this.getContainerPosition()}>\n                    <div class=\"weightline\"></div>\n                    {this.data.proxioProduct.weightAndPriceList.map((weightItem, index) =>\n                      this.getCarouselPosition(index) !== null ? (\n                        <div class=\"weightdata\" data-carousel-position={this.getCarouselPosition(index)} onClick={() => this.setActiveWeightIndex(index)}>\n                          <input type=\"radio\" id={'weightradio' + index} name=\"weightradio\" value={index} checked={this.isActive(index)} />\n                          <label htmlFor={'weightradio' + index}>{weightItem.item1}</label>\n                        </div>\n                      ) : null,\n                    )}\n                  </div>\n                  <pn-button\n                    disabled={this.activeWeightIndex === this.data.proxioProduct?.weightAndPriceList?.length - 1 ? 'disabled' : null}\n                    icon={arrow_right}\n                    appearance=\"light\"\n                    small=\"true\"\n                    onClick={() => this.setActiveWeightIndex(this.activeWeightIndex + 1)}\n                  ></pn-button>\n                </div>\n              ) : null}\n            </div>\n            <pn-proxio-productcard>\n              <pn-illustration slot=\"illustrationmobile\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n              <h2 slot=\"title\">{this.data.proxioProduct.productTitle}</h2>\n              <pn-proxio-productcard-description\n                slot=\"description\"\n                heading={this.data.proxioProduct.productPreamble}\n                highlight={this.data.proxioProduct.deliveryDateInformation}\n                list={this.data.proxioProduct.productDescriptionBulletListItems}\n              ></pn-proxio-productcard-description>\n              <div slot=\"information\">\n                <pn-proxio-productcard-information\n                  label={this.i18n.labelMaxDimensions}\n                  information={this.data.proxioProduct.productPackageDimensionsList as ProductGenericItem[]}\n                ></pn-proxio-productcard-information>\n                <pn-proxio-productcard-information\n                  label={this.i18n.labelMaxDimensionsRoll}\n                  information={this.data.proxioProduct.productRollDimensionsList as ProductGenericItem[]}\n                ></pn-proxio-productcard-information>\n              </div>\n              <div slot=\"bottomtags\">\n                {this.data.proxioProduct.usp1 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp1}</pn-titletag> : null}\n                {this.data.proxioProduct.usp2 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp2}</pn-titletag> : null}\n                {this.data.proxioProduct.usp3 ? <pn-titletag color=\"gray50\">{this.data.proxioProduct.usp3}</pn-titletag> : null}\n              </div>\n              <pn-illustration slot=\"illustration\" illustration={this.data.proxioProduct.productIcon}></pn-illustration>\n              <div slot=\"pricelink\">\n                <pn-proxio-productcard-pricelink\n                  price={this.getPriceString(this.data.proxioProduct)}\n                  link={this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList)}\n                  linktext={this.data.proxioProduct.productLinkText}\n                ></pn-proxio-productcard-pricelink>\n                {this.data.relatedProxioProducts\n                  ? this.data.relatedProxioProducts.map(product => (\n                      <pn-proxio-productcard-pricelink\n                        price={this.getPriceString(product)}\n                        link={product.productLink}\n                        linktext={product.productLinkText}\n                      ></pn-proxio-productcard-pricelink>\n                    ))\n                  : null}\n              </div>\n            </pn-proxio-productcard>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-quick-cta.cjs.entry.js

@@ -13,10 +13,10 @@ const PnQuickCta = class {
         this.heading = null;
         this.preamble = null;
     }
+    get hostElement() { return index.getElement(this); }
     render() {
         return (index.h(index.Host, { key: 'ab5954c7894705ca1d6faeb541b63ef9a28ce39e' }, index.h("div", { key: '2fe82eb368e7c6f13a1e541e54f4f2679b99ed20', class: "quick-cta__content" }, index.h("h2", { key: '7433fb89198761e4342ec57b1136e82cef01c241', class: "quick-cta__content__heading" }, this.heading), index.h("p", { key: 'c23df3ff66c20f39c9e11ad825fadb90a6cf296a', class: "quick-cta__content__preamble" }, this.preamble), index.h("slot", { key: '8754357951cb3b1fb61b1f619e925a1b3de17879', name: "quick-cta-cta" }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnQuickCta.style = PnQuickCtaStyle0;
 

package/cjs/pn-quick-cta.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-quick-cta.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w2CAAw2C,CAAC;AAC/3C,yBAAe,aAAa;;MCKf,UAAU;;;uBAEK,IAAI;wBACH,IAAI;;IAE/B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,iEAAI,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3DA,gEAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC3DA,mEAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n  width: 100%;\n\n  .quick-cta__content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 2.4rem;\n\n    width: 100%;\n\n    .quick-cta__content__heading {\n      padding: 0;\n      margin: 0;\n\n      font-size: 2.4rem;\n      font-weight: 500;\n      color: $blue900;\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n\n      @media screen and (min-width: 1640px) {\n        font-size: 2.8rem;\n        font-weight: 700;\n      }\n    }\n\n    .quick-cta__content__preamble {\n      font-weight: 400;\n      font-size: 1.6rem;\n      line-height: 140%;\n\n      padding: 0;\n      margin: 0;\n      color: $gray900;\n    }\n\n    [slot='quick-cta-cta'] {\n      a {\n        white-space: nowrap;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n  .quick-cta__content__heading {\n    color: $coral400;\n  }\n  .quick-cta__content__preamble {\n    color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  .quick-cta__content__heading,\n  .quick-cta__content__preamble {\n    color: $white;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  .quick-cta__content__heading {\n    color: $blue700;\n  }\n  .quick-cta__content__preamble {\n    color: $gray900;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quick-cta',\n  styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"quick-cta__content\">\n          <h2 class=\"quick-cta__content__heading\">{this.heading}</h2>\n          <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n          <slot name=\"quick-cta-cta\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-quick-cta.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w2CAAw2C,CAAC;AAC/3C,yBAAe,aAAa;;MCKf,UAAU;;;uBAEK,IAAI;wBACH,IAAI;;;IAE/B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,iEAAI,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3DA,gEAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC3DA,mEAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-quick-cta/pn-quick-cta.scss?tag=pn-quick-cta","src/components/cta/pn-quick-cta/pn-quick-cta.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-quick-cta {\n  width: 100%;\n\n  .quick-cta__content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 2.4rem;\n\n    width: 100%;\n\n    .quick-cta__content__heading {\n      padding: 0;\n      margin: 0;\n\n      font-size: 2.4rem;\n      font-weight: 500;\n      color: $blue900;\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n\n      @media screen and (min-width: 1640px) {\n        font-size: 2.8rem;\n        font-weight: 700;\n      }\n    }\n\n    .quick-cta__content__preamble {\n      font-weight: 400;\n      font-size: 1.6rem;\n      line-height: 140%;\n\n      padding: 0;\n      margin: 0;\n      color: $gray900;\n    }\n\n    [slot='quick-cta-cta'] {\n      a {\n        white-space: nowrap;\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n\n//colors\npn-spotlight[data-cta-color='business'] {\n  .quick-cta__content__heading {\n    color: $coral400;\n  }\n  .quick-cta__content__preamble {\n    color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  .quick-cta__content__heading,\n  .quick-cta__content__preamble {\n    color: $white;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  .quick-cta__content__heading {\n    color: $blue700;\n  }\n  .quick-cta__content__preamble {\n    color: $gray900;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quick-cta',\n  styleUrl: 'pn-quick-cta.scss',\n})\nexport class PnQuickCta {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"quick-cta__content\">\n          <h2 class=\"quick-cta__content__heading\">{this.heading}</h2>\n          <p class=\"quick-cta__content__preamble\">{this.preamble}</p>\n          <slot name=\"quick-cta-cta\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-quote-card.cjs.entry.js

@@ -14,10 +14,10 @@ const PnQuoteCard = class {
         this.name = null;
         this.occupation = null;
     }
+    get hostElement() { return index.getElement(this); }
     render() {
         return (index.h(index.Host, { key: 'adf7a00980ef81bddf83262dcc24540f962abf27' }, index.h("div", { key: '4b8ec2139d33c1d432c269ba04c8e13732b46dcd', class: "pn-quote-card__section" }, index.h("div", { key: '67713c139963d7e2477fcf0b6d078d336a768940', class: "pn-quote-card__container" }, index.h("slot", { key: 'b68d98f863024314c4d14e6697ce2e2396041cc8', name: "vertical-line" }, " "), index.h("div", { key: 'f712e28f92b230e64fe5ffc5abf001443a9d16ec', class: "pn-quote-card__quote__container" }, index.h("blockquote", { key: 'cd1eb6e0c9d973aa816b2c8644be9c05558e7c17', class: "pn-quote-card__quote" }, index.h("svg", { key: '947cdf4204f8e2aea7ba33cb7b2a4c1f3b919415', width: "25", height: "18", viewBox: "0 0 25 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ec7acd41030a16824b604eda941c3cde35e69647', d: "M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z", fill: "white" })), this.quote), index.h("slot", { key: 'ee71250def5a98c730ae00a60761868e4cf2b2f0', name: "horizontal-line" }), index.h("div", { key: '41f86563902c051b7c2ec0d915244b6f6c7b8533', class: "pn-quote-card__reference__container" }, index.h("slot", { key: 'e1dce0ca310574a9da9ba5c15ba823f1e70c61fa', name: "illustration" }), index.h("div", { key: 'a06f795ff2d1d7165b8b0f654c5ee9bd8fb4eca9', class: "pn-quote-card__reference" }, index.h("span", { key: '3507763b1414b00076fdaa9cfb6b5c7ec1e36cb5', class: "pn-quote-card__reference__name" }, this.name), index.h("span", { key: 'ce5f2580a1cb9c00e99536228c0c2cc784ef9fe2', class: "pn-quote-card__reference__occupation" }, this.occupation)))), index.h("div", { key: 'c3c7b60385beb22bfdb9ce05b77f44199d5b8fbb', class: "pn-quote-card__large-photo" }, index.h("slot", { key: 'eb72a8ce622a9166271549bb0090c68e9847ae17', name: "illustration-big" }))))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnQuoteCard.style = PnQuoteCardStyle0;
 

package/cjs/pn-quote-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-quote-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,u6RAAu6R,CAAC;AAC/7R,0BAAe,cAAc;;MCKhB,WAAW;;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;IACjC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,mEAAM,IAAI,EAAC,eAAe,QAAS,EACnCA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,yEAAY,KAAK,EAAC,sBAAsB,IACtCA,kEAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,mEACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE,EAEL,IAAI,CAAC,KAAK,CACA,EAEbA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,EACpCA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,mEAAM,IAAI,EAAC,cAAc,GAAG,EAC5BA,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,mEAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC/DA,mEAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF,EACNA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/cards/pn-quote-card/pn-quote-card.scss?tag=pn-quote-card","src/components/cards/pn-quote-card/pn-quote-card.tsx"],"sourcesContent":["@import '../../../globals/main';\n\npn-quote-card {\n  .pn-quote-card__section {\n  }\n\n  .pn-quote-card__container {\n    margin: 0 auto;\n    display: flex;\n    flex-direction: row;\n\n    min-height: 262px;\n    padding: 0 2.4rem;\n  }\n\n  .pn-quote-card__quote__container {\n    padding: 0 3.2rem;\n  }\n\n  .pn-quote-card__quote {\n    position: relative;\n    font-weight: 400;\n    font-size: 2rem;\n    line-height: 140%;\n    margin: 0;\n\n    svg {\n      position: absolute;\n      left: -3.2rem;\n      top: 0.2rem;\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    gap: 1.6rem;\n\n    align-items: center;\n  }\n\n  .pn-quote-card__reference {\n  }\n\n  .pn-quote-card__reference__name {\n    display: block;\n    font-weight: 400;\n    font-size: 2.4rem;\n    line-height: 2.9rem;\n  }\n\n  .pn-quote-card__reference__occupation {\n    display: block;\n    font-weight: 400;\n    font-size: 1.4rem;\n    line-height: 1.7rem;\n  }\n\n  [slot='illustration'] {\n    padding: 0;\n  }\n\n  [slot='illustration-big'] {\n    padding: 0.8rem 0;\n  }\n\n  [slot='illustration'],\n  [slot='illustration-big'] {\n    aspect-ratio: 1/1;\n\n    picture {\n      aspect-ratio: 1 / 1;\n      img {\n        clip-path: circle(50%);\n        max-width: unset;\n      }\n    }\n  }\n}\n\n//line orientation\n\npn-quote-card {\n  [slot='horizontal-line'],\n  [slot='vertical-line'] {\n    display: flex;\n  }\n}\n\n//Colors\npn-quote-card[data-line-color='white'] {\n  .pn-quote-card__section {\n    background-color: $blue700;\n    color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $white;\n    background-color: $white;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $white;\n    }\n  }\n}\n\npn-quote-card[data-line-color='blue'] {\n  .pn-quote-card__section {\n    background-color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $blue400;\n    background-color: $blue400;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $blue400;\n    }\n  }\n}\n\npn-quote-card[data-line-color='blue900'] {\n  .pn-quote-card__section {\n    background-color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $blue900;\n    background-color: $blue900;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $blue900;\n    }\n  }\n}\n\n//layouts\n\npn-quote-card[data-card-style='standalone'] {\n  &[data-line-color='white'] {\n    .pn-quote-card__section {\n      border-radius: 2.4rem;\n    }\n\n    .pn-quote-card__container {\n      padding: 2.4rem;\n    }\n  }\n  .pn-quote-card__section {\n    max-width: 100%;\n    margin: 0 auto;\n\n    @media screen and (min-width: 992px) {\n      max-width: 70%;\n    }\n    @media screen and (min-width: 1200px) {\n      max-width: 60%;\n    }\n  }\n\n  .pn-quote-card__container {\n    min-height: unset;\n    padding: 0;\n\n    @media screen and (min-width: 768px) {\n      padding: 0 2.4rem;\n    }\n  }\n\n  .pn-quote-card__quote__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: 3.2rem;\n    padding: 2.4rem 1.6rem 1.6rem 1.6rem;\n\n    @media screen and (min-width: 768px) {\n      padding: 2.4rem 3.2rem 1.6rem 3.2rem;\n    }\n  }\n\n  .pn-quote-card__quote {\n    font-size: 1.6rem;\n\n    @media screen and (min-width: 992px) {\n      font-size: 2rem;\n    }\n\n    svg {\n      display: block;\n      margin-bottom: 0.8rem;\n      position: relative;\n      top: 0;\n      left: 0;\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    [slot='illustration'] {\n      picture {\n        img {\n          height: 6rem;\n          width: 6rem;\n        }\n      }\n    }\n    @media screen and (min-width: 992px) {\n      [slot='illustration'] {\n        picture {\n          img {\n            height: 9rem;\n            width: 9rem;\n          }\n        }\n      }\n    }\n  }\n\n  .pn-quote-card__reference__name {\n    font-size: 1.6rem;\n    @media screen and (min-width: 992px) {\n      font-size: 2.4rem;\n    }\n  }\n\n  .pn-quote-card__reference__occupation {\n    font-size: 1.2rem;\n    @media screen and (min-width: 992px) {\n      font-size: 1.4rem;\n    }\n  }\n\n  .pn-quote-card__large-photo {\n    display: none;\n  }\n}\n\npn-quote-card[data-card-style='combo'] {\n  .pn-quote-card__section {\n    width: 100%;\n    margin: 0 auto;\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n    @media screen and (min-width: 992px) {\n      padding-bottom: 0;\n    }\n\n    @media screen and (min-width: 1200px) {\n      padding-top: 10rem;\n    }\n  }\n\n  .pn-quote-card__container {\n    min-height: 10rem;\n    padding-bottom: 0;\n\n    @media screen and (min-width: 768px) {\n      max-width: 90%;\n      width: 100%;\n    }\n\n    @media screen and (min-width: 992px) {\n      max-width: 768px;\n      width: 100%;\n    }\n    @media screen and (min-width: 1200px) {\n      max-width: 1140px;\n      width: 100%;\n      padding: 0 5.6rem;\n    }\n    @media screen and (min-width: 1640px) {\n      max-width: 1440px;\n      width: 100%;\n      padding: 0 12rem;\n    }\n  }\n\n  .pn-quote-card__quote__container {\n    padding-bottom: 0;\n    padding-left: 0;\n    padding-right: 0;\n\n    @media screen and (min-width: 768px) {\n      padding-left: 2.4rem;\n      padding-right: 2.4rem;\n    }\n  }\n\n  .pn-quote-card__quote {\n    font-size: 2rem;\n    padding-left: 2.4rem;\n    svg {\n      left: -0.8rem;\n      top: 0.2rem;\n    }\n\n    @media screen and (min-width: 768px) {\n      padding-left: 4rem;\n      svg {\n        left: 0;\n      }\n    }\n\n    @media screen and (min-width: 992px) {\n      font-size: 2.4rem;\n      svg {\n        left: 0;\n        top: 0.4rem;\n        scale: 1.3;\n      }\n    }\n\n    @media screen and (min-width: 1200px) {\n      padding-left: 0;\n      font-size: 3.2rem;\n      svg {\n        left: -4.8rem;\n        top: 1rem;\n        scale: 1.4;\n      }\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 3.8rem;\n      svg {\n        left: -6.4rem;\n        top: 1.6rem;\n        scale: 1.8;\n      }\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    flex-direction: row-reverse;\n  }\n\n  [slot='illustration'] {\n    picture > img {\n      max-width: 6rem;\n      max-height: 6rem;\n    }\n\n    @media screen and (min-width: 768px) {\n      picture > img {\n        max-width: 10rem;\n        max-height: 10rem;\n      }\n    }\n\n    @media screen and (min-width: 1140px) {\n      display: none;\n    }\n  }\n\n  .pn-quote-card__reference {\n    text-align: right;\n  }\n\n  .pn-quote-card__reference__name {\n    display: block;\n    font-size: 1.4rem;\n    @media screen and (min-width: 768px) {\n      font-size: 1.6rem;\n    }\n\n    @media screen and (min-width: 992px) {\n      font-size: 2rem;\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 3.2rem;\n      margin-bottom: 1rem;\n    }\n  }\n\n  .pn-quote-card__reference__occupation {\n    display: block;\n\n    font-size: 1.2rem;\n    @media screen and (min-width: 992px) {\n      font-size: 1.4rem;\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 1.6rem;\n    }\n  }\n\n  .pn-quote-card__large-photo {\n    display: none;\n\n    @media screen and (min-width: 1140px) {\n      display: block;\n\n      & > [slot='illustration-big'] {\n        width: 18rem;\n        height: 18rem;\n        & picture > img {\n          width: 18rem;\n          height: 18rem;\n        }\n      }\n    }\n\n    @media screen and (min-width: 1640px) {\n      display: block;\n      width: 24rem;\n      height: 24rem;\n      & > [slot='illustration-big'] {\n        position: relative;\n        z-index: 1;\n        width: 24rem;\n        height: 24rem;\n\n        & > picture > img {\n          width: 24rem;\n          height: 24rem;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quote-card',\n  styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() quote: string = null;\n  @Prop() name: string = null;\n  @Prop() occupation: string = null;\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-quote-card__section\">\n          <div class=\"pn-quote-card__container\">\n            <slot name=\"vertical-line\"> </slot>\n            <div class=\"pn-quote-card__quote__container\">\n              <blockquote class=\"pn-quote-card__quote\">\n                <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n                    fill=\"white\"\n                  />\n                </svg>\n\n                {this.quote}\n              </blockquote>\n\n              <slot name=\"horizontal-line\"></slot>\n              <div class=\"pn-quote-card__reference__container\">\n                <slot name=\"illustration\" />\n                <div class=\"pn-quote-card__reference\">\n                  <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n                  <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"pn-quote-card__large-photo\">\n              <slot name=\"illustration-big\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-quote-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,u6RAAu6R,CAAC;AAC/7R,0BAAe,cAAc;;MCKhB,WAAW;;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;;IACjC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,mEAAM,IAAI,EAAC,eAAe,QAAS,EACnCA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,yEAAY,KAAK,EAAC,sBAAsB,IACtCA,kEAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,mEACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE,EAEL,IAAI,CAAC,KAAK,CACA,EAEbA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,EACpCA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,mEAAM,IAAI,EAAC,cAAc,GAAG,EAC5BA,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,mEAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC/DA,mEAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF,EACNA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cards/pn-quote-card/pn-quote-card.scss?tag=pn-quote-card","src/components/cards/pn-quote-card/pn-quote-card.tsx"],"sourcesContent":["@import '../../../globals/main';\n\npn-quote-card {\n  .pn-quote-card__section {\n  }\n\n  .pn-quote-card__container {\n    margin: 0 auto;\n    display: flex;\n    flex-direction: row;\n\n    min-height: 262px;\n    padding: 0 2.4rem;\n  }\n\n  .pn-quote-card__quote__container {\n    padding: 0 3.2rem;\n  }\n\n  .pn-quote-card__quote {\n    position: relative;\n    font-weight: 400;\n    font-size: 2rem;\n    line-height: 140%;\n    margin: 0;\n\n    svg {\n      position: absolute;\n      left: -3.2rem;\n      top: 0.2rem;\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    gap: 1.6rem;\n\n    align-items: center;\n  }\n\n  .pn-quote-card__reference {\n  }\n\n  .pn-quote-card__reference__name {\n    display: block;\n    font-weight: 400;\n    font-size: 2.4rem;\n    line-height: 2.9rem;\n  }\n\n  .pn-quote-card__reference__occupation {\n    display: block;\n    font-weight: 400;\n    font-size: 1.4rem;\n    line-height: 1.7rem;\n  }\n\n  [slot='illustration'] {\n    padding: 0;\n  }\n\n  [slot='illustration-big'] {\n    padding: 0.8rem 0;\n  }\n\n  [slot='illustration'],\n  [slot='illustration-big'] {\n    aspect-ratio: 1/1;\n\n    picture {\n      aspect-ratio: 1 / 1;\n      img {\n        clip-path: circle(50%);\n        max-width: unset;\n      }\n    }\n  }\n}\n\n//line orientation\n\npn-quote-card {\n  [slot='horizontal-line'],\n  [slot='vertical-line'] {\n    display: flex;\n  }\n}\n\n//Colors\npn-quote-card[data-line-color='white'] {\n  .pn-quote-card__section {\n    background-color: $blue700;\n    color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $white;\n    background-color: $white;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $white;\n    }\n  }\n}\n\npn-quote-card[data-line-color='blue'] {\n  .pn-quote-card__section {\n    background-color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $blue400;\n    background-color: $blue400;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $blue400;\n    }\n  }\n}\n\npn-quote-card[data-line-color='blue900'] {\n  .pn-quote-card__section {\n    background-color: $white;\n  }\n\n  .pn-line-shape__line,\n  .pn-line-shape__dot {\n    border-color: $blue900;\n    background-color: $blue900;\n  }\n\n  .pn-quote-card__quote {\n    svg > path {\n      fill: $blue900;\n    }\n  }\n}\n\n//layouts\n\npn-quote-card[data-card-style='standalone'] {\n  &[data-line-color='white'] {\n    .pn-quote-card__section {\n      border-radius: 2.4rem;\n    }\n\n    .pn-quote-card__container {\n      padding: 2.4rem;\n    }\n  }\n  .pn-quote-card__section {\n    max-width: 100%;\n    margin: 0 auto;\n\n    @media screen and (min-width: 992px) {\n      max-width: 70%;\n    }\n    @media screen and (min-width: 1200px) {\n      max-width: 60%;\n    }\n  }\n\n  .pn-quote-card__container {\n    min-height: unset;\n    padding: 0;\n\n    @media screen and (min-width: 768px) {\n      padding: 0 2.4rem;\n    }\n  }\n\n  .pn-quote-card__quote__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: 3.2rem;\n    padding: 2.4rem 1.6rem 1.6rem 1.6rem;\n\n    @media screen and (min-width: 768px) {\n      padding: 2.4rem 3.2rem 1.6rem 3.2rem;\n    }\n  }\n\n  .pn-quote-card__quote {\n    font-size: 1.6rem;\n\n    @media screen and (min-width: 992px) {\n      font-size: 2rem;\n    }\n\n    svg {\n      display: block;\n      margin-bottom: 0.8rem;\n      position: relative;\n      top: 0;\n      left: 0;\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    [slot='illustration'] {\n      picture {\n        img {\n          height: 6rem;\n          width: 6rem;\n        }\n      }\n    }\n    @media screen and (min-width: 992px) {\n      [slot='illustration'] {\n        picture {\n          img {\n            height: 9rem;\n            width: 9rem;\n          }\n        }\n      }\n    }\n  }\n\n  .pn-quote-card__reference__name {\n    font-size: 1.6rem;\n    @media screen and (min-width: 992px) {\n      font-size: 2.4rem;\n    }\n  }\n\n  .pn-quote-card__reference__occupation {\n    font-size: 1.2rem;\n    @media screen and (min-width: 992px) {\n      font-size: 1.4rem;\n    }\n  }\n\n  .pn-quote-card__large-photo {\n    display: none;\n  }\n}\n\npn-quote-card[data-card-style='combo'] {\n  .pn-quote-card__section {\n    width: 100%;\n    margin: 0 auto;\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n    @media screen and (min-width: 992px) {\n      padding-bottom: 0;\n    }\n\n    @media screen and (min-width: 1200px) {\n      padding-top: 10rem;\n    }\n  }\n\n  .pn-quote-card__container {\n    min-height: 10rem;\n    padding-bottom: 0;\n\n    @media screen and (min-width: 768px) {\n      max-width: 90%;\n      width: 100%;\n    }\n\n    @media screen and (min-width: 992px) {\n      max-width: 768px;\n      width: 100%;\n    }\n    @media screen and (min-width: 1200px) {\n      max-width: 1140px;\n      width: 100%;\n      padding: 0 5.6rem;\n    }\n    @media screen and (min-width: 1640px) {\n      max-width: 1440px;\n      width: 100%;\n      padding: 0 12rem;\n    }\n  }\n\n  .pn-quote-card__quote__container {\n    padding-bottom: 0;\n    padding-left: 0;\n    padding-right: 0;\n\n    @media screen and (min-width: 768px) {\n      padding-left: 2.4rem;\n      padding-right: 2.4rem;\n    }\n  }\n\n  .pn-quote-card__quote {\n    font-size: 2rem;\n    padding-left: 2.4rem;\n    svg {\n      left: -0.8rem;\n      top: 0.2rem;\n    }\n\n    @media screen and (min-width: 768px) {\n      padding-left: 4rem;\n      svg {\n        left: 0;\n      }\n    }\n\n    @media screen and (min-width: 992px) {\n      font-size: 2.4rem;\n      svg {\n        left: 0;\n        top: 0.4rem;\n        scale: 1.3;\n      }\n    }\n\n    @media screen and (min-width: 1200px) {\n      padding-left: 0;\n      font-size: 3.2rem;\n      svg {\n        left: -4.8rem;\n        top: 1rem;\n        scale: 1.4;\n      }\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 3.8rem;\n      svg {\n        left: -6.4rem;\n        top: 1.6rem;\n        scale: 1.8;\n      }\n    }\n  }\n\n  .pn-quote-card__reference__container {\n    flex-direction: row-reverse;\n  }\n\n  [slot='illustration'] {\n    picture > img {\n      max-width: 6rem;\n      max-height: 6rem;\n    }\n\n    @media screen and (min-width: 768px) {\n      picture > img {\n        max-width: 10rem;\n        max-height: 10rem;\n      }\n    }\n\n    @media screen and (min-width: 1140px) {\n      display: none;\n    }\n  }\n\n  .pn-quote-card__reference {\n    text-align: right;\n  }\n\n  .pn-quote-card__reference__name {\n    display: block;\n    font-size: 1.4rem;\n    @media screen and (min-width: 768px) {\n      font-size: 1.6rem;\n    }\n\n    @media screen and (min-width: 992px) {\n      font-size: 2rem;\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 3.2rem;\n      margin-bottom: 1rem;\n    }\n  }\n\n  .pn-quote-card__reference__occupation {\n    display: block;\n\n    font-size: 1.2rem;\n    @media screen and (min-width: 992px) {\n      font-size: 1.4rem;\n    }\n\n    @media screen and (min-width: 1640px) {\n      font-size: 1.6rem;\n    }\n  }\n\n  .pn-quote-card__large-photo {\n    display: none;\n\n    @media screen and (min-width: 1140px) {\n      display: block;\n\n      & > [slot='illustration-big'] {\n        width: 18rem;\n        height: 18rem;\n        & picture > img {\n          width: 18rem;\n          height: 18rem;\n        }\n      }\n    }\n\n    @media screen and (min-width: 1640px) {\n      display: block;\n      width: 24rem;\n      height: 24rem;\n      & > [slot='illustration-big'] {\n        position: relative;\n        z-index: 1;\n        width: 24rem;\n        height: 24rem;\n\n        & > picture > img {\n          width: 24rem;\n          height: 24rem;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-quote-card',\n  styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() quote: string = null;\n  @Prop() name: string = null;\n  @Prop() occupation: string = null;\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-quote-card__section\">\n          <div class=\"pn-quote-card__container\">\n            <slot name=\"vertical-line\"> </slot>\n            <div class=\"pn-quote-card__quote__container\">\n              <blockquote class=\"pn-quote-card__quote\">\n                <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n                    fill=\"white\"\n                  />\n                </svg>\n\n                {this.quote}\n              </blockquote>\n\n              <slot name=\"horizontal-line\"></slot>\n              <div class=\"pn-quote-card__reference__container\">\n                <slot name=\"illustration\" />\n                <div class=\"pn-quote-card__reference\">\n                  <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n                  <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"pn-quote-card__large-photo\">\n              <slot name=\"illustration-big\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-scroll_2.cjs.entry.js

@@ -25,6 +25,7 @@ const PnScroll = class {
         this.notIntersectFunc = undefined;
         this.compId = null;
     }
+    get hostElement() { return index.getElement(this); }
     generateUniqueId() {
         return v4.v4();
     }
@@ -32,20 +33,20 @@ const PnScroll = class {
         entries.forEach(entry => {
             if (!shouldLoop) {
                 if (!entry.isIntersecting) {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                     return;
                 }
                 entry.target.classList.add('in-view');
-                onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                onIntersecting?.(entry, observer);
                 observer.unobserve(entry.target);
             }
             else {
                 entry.target.classList.toggle('in-view', entry.isIntersecting);
                 if (entry.isIntersecting) {
-                    onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                    onIntersecting?.(entry, observer);
                 }
                 else {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                 }
             }
         });
@@ -62,7 +63,6 @@ const PnScroll = class {
     render() {
         return (index.h(index.Host, { key: '443d7a3794f4b2292d39837ca89726bcdd2a5cee' }, index.h("div", { key: '341524e340709a5db403e024b448fd08087fa9c5', class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } }, index.h("slot", { key: '625bd566d903c15298969428a50030ee47c5568b', name: "scroll-affected" }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnScroll.style = PnScrollStyle0;
 
@@ -103,20 +103,13 @@ const PnVideoOverlay = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.playPauseClicked = index.createEvent(this, "playPauseClicked", 7);
-        this.handlePlayPauseClicked = () => {
-            this.playPauseClicked.emit();
-        };
-        this.renderPlayIcon = () => {
-            return (index.h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), index.h("path", { d: "M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z", fill: "white" }), index.h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" })));
-        };
-        this.renderPauseIcon = () => {
-            return (index.h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), index.h("path", { d: "M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z", fill: "white" }), index.h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z", fill: "white" })));
-        };
         this.language = 'en';
         this.isPaused = false;
         this.showOverlay = false;
         this.i18n = undefined;
     }
+    get hostElement() { return index.getElement(this); }
+    playPauseClicked;
     componentWillLoad() {
         this.setTranslations();
     }
@@ -131,10 +124,18 @@ const PnVideoOverlay = class {
     onLanguageChange() {
         this.setTranslations();
     }
+    handlePlayPauseClicked = () => {
+        this.playPauseClicked.emit();
+    };
+    renderPlayIcon = () => {
+        return (index.h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), index.h("path", { d: "M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z", fill: "white" }), index.h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" })));
+    };
+    renderPauseIcon = () => {
+        return (index.h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), index.h("path", { d: "M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z", fill: "white" }), index.h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z", fill: "white" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z", fill: "white" })));
+    };
     render() {
         return (index.h(index.Host, { key: '469d957d702aaddf614c350488710934ef9f45db', class: `pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}` }, index.h("button", { key: 'd45e7df077ca7a3a3bf8ae1c31499d02791e8044', type: "button", id: "overlayed-button-pause-video", "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "language": ["onLanguageChange"]
     }; }

package/cjs/pn-scroll_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-scroll.pn-video-overlay.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host"],"sources":["src/components/animation/pn-scroll/pn-scroll.scss?tag=pn-scroll","src/components/animation/pn-scroll/pn-scroll.tsx","src/components/animation/pn-play-on-scroll/pn-video-overlay/translations.ts","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.scss?tag=pn-video-overlay","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"sourcesContent":["pn-scroll {\n  .scroll-wrapper {\n    transition: all var(--transition-duration) ease-in-out 250ms;\n\n    &.fade {\n      opacity: 0;\n\n      &.in-view {\n        opacity: 1;\n      }\n    }\n\n    &.slide-up {\n      transform: translateY(50px);\n      &.in-view {\n        transform: translateY(0);\n      }\n    }\n\n    &.slide-in {\n      &.in-view {\n      }\n    }\n\n    &.slide-out {\n      &.in-view {\n      }\n    }\n  }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n  root: null,\n  threshold: 0,\n  rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n  tag: 'pn-scroll',\n  styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n  @Element() hostElement: HTMLElement;\n  @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n  @Prop() behaviourClasses: string = 'fade slide-up';\n  @Prop() transitionDurationSeconds: number = 0.5;\n  @Prop() shouldLoop?: boolean = false;\n  @Prop() intersectFunc?: Function;\n  @Prop() notIntersectFunc?: Function;\n\n  @State() compId: string = null;\n\n  generateUniqueId() {\n    return uuidv4();\n  }\n\n  handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n    entries.forEach(entry => {\n      if (!shouldLoop) {\n        if (!entry.isIntersecting) {\n          onNotIntersecting?.(entry, observer);\n          return;\n        }\n        entry.target.classList.add('in-view');\n        onIntersecting?.(entry, observer);\n        observer.unobserve(entry.target);\n      } else {\n        entry.target.classList.toggle('in-view', entry.isIntersecting);\n        if (entry.isIntersecting) {\n          onIntersecting?.(entry, observer);\n        } else {\n          onNotIntersecting?.(entry, observer);\n        }\n      }\n    });\n  }\n\n  //on load, generate unique id for this wrapper\n  componentWillLoad() {\n    this.compId = this.generateUniqueId();\n  }\n\n  componentDidLoad() {\n    const observer = new IntersectionObserver(\n      (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n      this.observerOptions,\n    );\n    const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n    observer.observe(objectToObserve);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n          <slot name=\"scroll-affected\" />\n        </div>\n      </Host>\n    );\n  }\n}\n","export const translations = {\n  sv: {\n    ariaLabel: 'Spela eller pausa video',\n  },\n  en: {\n    ariaLabel: 'Play or pause video',\n  },\n  da: {\n    ariaLabel: 'Afspil eller sæt video på pause',\n  },\n  no: {\n    ariaLabel: 'Spill av eller sett video på pause',\n  },\n  fi: {\n    ariaLabel: 'Toista tai keskeytä video',\n  },\n  de: {\n    ariaLabel: 'Video abspielen oder anhalten',\n  },\n  zh: {\n    sharelabel: 'Play or pause video',\n  },\n  it: {\n    sharelabel: 'Play or pause video',\n  },\n  nl: {\n    sharelabel: 'Play or pause video',\n  },\n};\n","@import '../../../../globals/main';\n\npn-video-overlay {\n  &.pn-video-overlay--show-overlay {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n  }\n\n  button {\n    position: absolute;\n    bottom: 8px;\n    left: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    padding: 0;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    background-color: transparent;\n\n    @media screen and (min-width: 768px) {\n      bottom: 16px;\n      left: 16px;\n    }\n\n    &:hover {\n      svg rect {\n        fill: darken(#005d92, 10%);\n      }\n    }\n\n    &:active {\n      svg rect {\n        fill: darken(#005d92, 20%);\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline: 2px solid $white;\n    }\n\n    svg {\n      scale: 0.7;\n      @media screen and (min-width: 768px) {\n        scale: 1;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n  tag: 'pn-video-overlay',\n  styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n  @Element() hostElement: HTMLElement;\n  @Prop() language: string = 'en';\n  @Prop() isPaused: boolean = false;\n  @Prop() showOverlay: boolean = false;\n  @State() i18n: any;\n\n  @Event() playPauseClicked: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language === 'nb') {\n      this.language = 'no';\n    }\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  @Watch('language')\n  onLanguageChange() {\n    this.setTranslations();\n  }\n\n  handlePlayPauseClicked = () => {\n    this.playPauseClicked.emit();\n  };\n\n  renderPlayIcon = () => {\n    return (\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n        <path\n          d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n          fill=\"white\"\n        />\n      </svg>\n    );\n  };\n\n  renderPauseIcon = () => {\n    return (\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n        <path\n          d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n          fill=\"white\"\n        />\n      </svg>\n    );\n  };\n\n  render() {\n    return (\n      <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n        <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n          {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-scroll.pn-video-overlay.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,mTAAmT,CAAC;AACxU,uBAAe,WAAW;;ACG1B,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,oBAAoB;CACjC,CAAC;AAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;MAM7B,QAAQ;;;+BAEiC,sBAAsB;gCACvC,eAAe;yCACN,GAAG;0BAChB,KAAK;;;sBAIV,IAAI;;;IAE9B,gBAAgB;QACd,OAAOA,KAAM,EAAE,CAAC;KACjB;IAED,kBAAkB,CAAC,OAAoC,EAAE,QAA+B,EAAE,cAAyB,EAAE,iBAA4B,EAAE,UAAoB;QACrK,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,CAAC,UAAU,EAAE;gBACf,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;oBACzB,iBAAiB,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;oBACrC,OAAO;iBACR;gBACD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACtC,cAAc,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAClC;iBAAM;gBACL,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC/D,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,cAAc,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;iBACnC;qBAAM;oBACL,iBAAiB,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;SACF,CAAC,CAAC;KACJ;;IAGD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACvC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,EAC7H,IAAI,CAAC,eAAe,CACrB,CAAC;QACF,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACnC;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC,yBAAyB,GAAG,EAAE,IAC/JA,mEAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;KACH;;;;AC1EI,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,SAAS,EAAE,yBAAyB;KACrC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,qBAAqB;KACjC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,iCAAiC;KAC7C;IACD,EAAE,EAAE;QACF,SAAS,EAAE,oCAAoC;KAChD;IACD,EAAE,EAAE;QACF,SAAS,EAAE,2BAA2B;KACvC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,+BAA+B;KAC3C;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;CACF;;AC5BD,MAAM,iBAAiB,GAAG,k2BAAk2B,CAAC;AAC73B,6BAAe,iBAAiB;;MCOnB,cAAc;;;;wBAEE,IAAI;wBACH,KAAK;2BACF,KAAK;;;;IAG3B,gBAAgB,CAAqB;IAE9C,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,sBAAsB,GAAG;QACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;KAC9B,CAAC;IAEF,cAAc,GAAG;QACf,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,kBAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG,EACtDA,kBACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ,EACFA,+BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0YAA0Y,EAC5Y,IAAI,EAAC,OAAO,GACZ,EACFA,kBACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,CACE,EACN;KACH,CAAC;IAEF,eAAe,GAAG;QAChB,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,kBAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG,EACtDA,kBACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ,EACFA,kBACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,EACFA,+BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ,EACFA,+BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ,CACE,EACN;KACH,CAAC;IAEF,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,GAAG,gCAAgC,GAAG,EAAE,EAAE,IACzFD,qEAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,8BAA8B,gBAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAC/H,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CACxD,CACJ,EACP;KACH;;;;;;;;;;","names":["uuidv4","h","Host"],"sources":["src/components/animation/pn-scroll/pn-scroll.scss?tag=pn-scroll","src/components/animation/pn-scroll/pn-scroll.tsx","src/components/animation/pn-play-on-scroll/pn-video-overlay/translations.ts","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.scss?tag=pn-video-overlay","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"sourcesContent":["pn-scroll {\n  .scroll-wrapper {\n    transition: all var(--transition-duration) ease-in-out 250ms;\n\n    &.fade {\n      opacity: 0;\n\n      &.in-view {\n        opacity: 1;\n      }\n    }\n\n    &.slide-up {\n      transform: translateY(50px);\n      &.in-view {\n        transform: translateY(0);\n      }\n    }\n\n    &.slide-in {\n      &.in-view {\n      }\n    }\n\n    &.slide-out {\n      &.in-view {\n      }\n    }\n  }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n  root: null,\n  threshold: 0,\n  rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n  tag: 'pn-scroll',\n  styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n  @Element() hostElement: HTMLElement;\n  @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n  @Prop() behaviourClasses: string = 'fade slide-up';\n  @Prop() transitionDurationSeconds: number = 0.5;\n  @Prop() shouldLoop?: boolean = false;\n  @Prop() intersectFunc?: Function;\n  @Prop() notIntersectFunc?: Function;\n\n  @State() compId: string = null;\n\n  generateUniqueId() {\n    return uuidv4();\n  }\n\n  handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n    entries.forEach(entry => {\n      if (!shouldLoop) {\n        if (!entry.isIntersecting) {\n          onNotIntersecting?.(entry, observer);\n          return;\n        }\n        entry.target.classList.add('in-view');\n        onIntersecting?.(entry, observer);\n        observer.unobserve(entry.target);\n      } else {\n        entry.target.classList.toggle('in-view', entry.isIntersecting);\n        if (entry.isIntersecting) {\n          onIntersecting?.(entry, observer);\n        } else {\n          onNotIntersecting?.(entry, observer);\n        }\n      }\n    });\n  }\n\n  //on load, generate unique id for this wrapper\n  componentWillLoad() {\n    this.compId = this.generateUniqueId();\n  }\n\n  componentDidLoad() {\n    const observer = new IntersectionObserver(\n      (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n      this.observerOptions,\n    );\n    const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n    observer.observe(objectToObserve);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n          <slot name=\"scroll-affected\" />\n        </div>\n      </Host>\n    );\n  }\n}\n","export const translations = {\n  sv: {\n    ariaLabel: 'Spela eller pausa video',\n  },\n  en: {\n    ariaLabel: 'Play or pause video',\n  },\n  da: {\n    ariaLabel: 'Afspil eller sæt video på pause',\n  },\n  no: {\n    ariaLabel: 'Spill av eller sett video på pause',\n  },\n  fi: {\n    ariaLabel: 'Toista tai keskeytä video',\n  },\n  de: {\n    ariaLabel: 'Video abspielen oder anhalten',\n  },\n  zh: {\n    sharelabel: 'Play or pause video',\n  },\n  it: {\n    sharelabel: 'Play or pause video',\n  },\n  nl: {\n    sharelabel: 'Play or pause video',\n  },\n};\n","@import '../../../../globals/main';\n\npn-video-overlay {\n  &.pn-video-overlay--show-overlay {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n  }\n\n  button {\n    position: absolute;\n    bottom: 8px;\n    left: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    padding: 0;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    background-color: transparent;\n\n    @media screen and (min-width: 768px) {\n      bottom: 16px;\n      left: 16px;\n    }\n\n    &:hover {\n      svg rect {\n        fill: darken(#005d92, 10%);\n      }\n    }\n\n    &:active {\n      svg rect {\n        fill: darken(#005d92, 20%);\n      }\n    }\n\n    &:focus,\n    &:focus-visible {\n      outline: 2px solid $white;\n    }\n\n    svg {\n      scale: 0.7;\n      @media screen and (min-width: 768px) {\n        scale: 1;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n  tag: 'pn-video-overlay',\n  styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n  @Element() hostElement: HTMLElement;\n  @Prop() language: string = 'en';\n  @Prop() isPaused: boolean = false;\n  @Prop() showOverlay: boolean = false;\n  @State() i18n: any;\n\n  @Event() playPauseClicked: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language === 'nb') {\n      this.language = 'no';\n    }\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  @Watch('language')\n  onLanguageChange() {\n    this.setTranslations();\n  }\n\n  handlePlayPauseClicked = () => {\n    this.playPauseClicked.emit();\n  };\n\n  renderPlayIcon = () => {\n    return (\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n        <path\n          d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n          fill=\"white\"\n        />\n      </svg>\n    );\n  };\n\n  renderPauseIcon = () => {\n    return (\n      <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n        <path\n          d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n          fill=\"white\"\n        />\n      </svg>\n    );\n  };\n\n  render() {\n    return (\n      <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n        <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n          {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-share-item.cjs.entry.js

@@ -13,10 +13,10 @@ const PnShareItem = class {
         this.link = null;
         this.text = null;
     }
+    get hostElement() { return index.getElement(this); }
     render() {
         return (index.h(index.Host, { key: '91e29d95c93de36f6874abf2122f38d931d539f1' }, index.h("div", { key: 'ee1a46c97cdda226d697983e9a05c03d205c0997', class: "pn-share-item__container" }, index.h("a", { key: 'dd417980b984ec45a783f73fd0f3353010e9efe4', href: `${this.link}` }, index.h("slot", { key: 'c84b5b9f86a2a707eaa65f80dd5f02ca65c3b512', name: "icon" }), " ", this.text))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnShareItem.style = PnShareItemStyle0;
 

package/cjs/pn-share-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-share-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhB,WAAW;;;oBAEC,IAAI;oBACJ,IAAI;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,gEAAG,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IACrBA,mEAAM,IAAI,EAAC,MAAM,GAAG,OAAE,IAAI,CAAC,IAAI,CAC7B,CACA,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-share/pn-share-item.scss?tag=pn-share-item","src/components/cta/pn-share/pn-share-item.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-share-item {\n  .pn-share-item__container {\n    padding: 0.3rem 0.6rem;\n    border: 1px solid $gray200;\n    border-radius: 0.8rem;\n\n    background-color: $white;\n    transition: background-color ease-in-out 0.3s;\n    width: fit-content;\n  }\n\n  a {\n    text-decoration: none;\n    color: $blue700;\n    transition: color 0.3s;\n    display: flex;\n    align-items: center;\n    gap: 0.8rem;\n    font-size: 1.6rem;\n    font-weight: 400;\n  }\n\n  [slot='icon'] {\n    svg {\n      height: 1.6rem;\n      width: 1.6rem;\n      path {\n        fill: $blue700;\n        transition: fill 0.3s;\n      }\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    .pn-share-item__container {\n      background-color: $blue900;\n    }\n\n    a {\n      color: $white;\n      text-decoration: none;\n    }\n\n    [slot='icon'] {\n      svg {\n        fill: $blue900;\n        path {\n          fill: $white;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-share-item',\n  styleUrl: 'pn-share-item.scss',\n})\nexport class PnShareItem {\n  @Element() hostElement: HTMLElement;\n  @Prop() link: string = null;\n  @Prop() text: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-share-item__container\">\n          <a href={`${this.link}`}>\n            <slot name=\"icon\" /> {this.text}\n          </a>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-share-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhB,WAAW;;;oBAEC,IAAI;oBACJ,IAAI;;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,gEAAG,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IACrBA,mEAAM,IAAI,EAAC,MAAM,GAAG,OAAE,IAAI,CAAC,IAAI,CAC7B,CACA,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-share/pn-share-item.scss?tag=pn-share-item","src/components/cta/pn-share/pn-share-item.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-share-item {\n  .pn-share-item__container {\n    padding: 0.3rem 0.6rem;\n    border: 1px solid $gray200;\n    border-radius: 0.8rem;\n\n    background-color: $white;\n    transition: background-color ease-in-out 0.3s;\n    width: fit-content;\n  }\n\n  a {\n    text-decoration: none;\n    color: $blue700;\n    transition: color 0.3s;\n    display: flex;\n    align-items: center;\n    gap: 0.8rem;\n    font-size: 1.6rem;\n    font-weight: 400;\n  }\n\n  [slot='icon'] {\n    svg {\n      height: 1.6rem;\n      width: 1.6rem;\n      path {\n        fill: $blue700;\n        transition: fill 0.3s;\n      }\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    .pn-share-item__container {\n      background-color: $blue900;\n    }\n\n    a {\n      color: $white;\n      text-decoration: none;\n    }\n\n    [slot='icon'] {\n      svg {\n        fill: $blue900;\n        path {\n          fill: $white;\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-share-item',\n  styleUrl: 'pn-share-item.scss',\n})\nexport class PnShareItem {\n  @Element() hostElement: HTMLElement;\n  @Prop() link: string = null;\n  @Prop() text: string = null;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-share-item__container\">\n          <a href={`${this.link}`}>\n            <slot name=\"icon\" /> {this.text}\n          </a>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-share.cjs.entry.js

@@ -46,6 +46,7 @@ const PnShare = class {
         this.language = 'sv';
         this.i18n = undefined;
     }
+    get hostElement() { return index.getElement(this); }
     componentWillLoad() {
         this.setTranslations();
     }
@@ -65,7 +66,6 @@ const PnShare = class {
             return (index.h("pn-share-item", { link: `${platform.url}${this.link}`, text: platform.text }, index.h("pn-icon", { slot: "icon", icon: platform.platform })));
         })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "language": ["onLanguageChange"]
     }; }

package/cjs/pn-share.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-share.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,SAAS;KACtB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,OAAO;KACpB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;CACF;;ACzBD,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,sBAAe,UAAU;;ACGzB,MAAM,UAAU,GAAG;IACjB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,sDAAsD,EAAE,IAAI,EAAE,UAAU,EAAE;IACvG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE;IACtF,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,+CAA+C,EAAE,IAAI,EAAE,UAAU,EAAE;CACjG,CAAC;MAMW,OAAO;;;oBAEK,IAAI;wBACgC,IAAI;;;IAG/D,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,iEAAI,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAC,UAAU,MAAO,EAC1DA,kEAAK,KAAK,EAAC,iBAAiB,IACzB,UAAU,CAAC,GAAG,CAAC,QAAQ;YACtB,QACEA,2BAAe,IAAI,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,IACrEA,qBAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,GAAY,CAC1C,EAChB;SACH,CAAC,CACE,CACF,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-share/translations.ts","src/components/cta/pn-share/pn-share.scss?tag=pn-share","src/components/cta/pn-share/pn-share.tsx"],"sourcesContent":["export const translations = {\n  sv: {\n    sharelabel: 'Dela med',\n  },\n  en: {\n    sharelabel: 'Share to',\n  },\n  da: {\n    sharelabel: 'Del med',\n  },\n  no: {\n    sharelabel: 'Dele med',\n  },\n  fi: {\n    sharelabel: 'Jakaa',\n  },\n  zh: {\n    sharelabel: 'Share to',\n  },\n  it: {\n    sharelabel: 'Share to',\n  },\n  nl: {\n    sharelabel: 'Share to',\n  },\n};\n","@import '../../../globals/main.scss';\npn-share {\n  .pn-share__container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.8rem;\n  }\n\n  .pn-share__heading {\n    font-size: 1.6rem;\n    font-weight: 500;\n    &:after {\n      content: '';\n      display: block;\n      height: 0.2rem;\n      background-color: $gray50;\n      margin-top: 0.4rem;\n      margin-bottom: 0.8rem;\n    }\n  }\n\n  .pn-share__items {\n    display: flex;\n    flex-direction: row;\n    gap: 0.8rem;\n    align-items: center;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\nconst SHARE_URLS = [\n  { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },\n  { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },\n  { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },\n];\n\n@Component({\n  tag: 'pn-share',\n  styleUrl: 'pn-share.scss',\n})\nexport class PnShare {\n  @Element() hostElement: HTMLElement;\n  @Prop() link: string = null;\n  @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n  @State() i18n: any;\n\n  componentWillLoad() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language === 'nb') {\n      this.language = 'no';\n    }\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  @Watch('language')\n  onLanguageChange() {\n    this.setTranslations();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-share__container\">\n          <h3 class=\"pn-share__heading\">{this.i18n.sharelabel}:</h3>\n          <div class=\"pn-share__items\">\n            {SHARE_URLS.map(platform => {\n              return (\n                <pn-share-item link={`${platform.url}${this.link}`} text={platform.text}>\n                  <pn-icon slot=\"icon\" icon={platform.platform}></pn-icon>\n                </pn-share-item>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-share.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,SAAS;KACtB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,OAAO;KACpB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;IACD,EAAE,EAAE;QACF,UAAU,EAAE,UAAU;KACvB;CACF;;ACzBD,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,sBAAe,UAAU;;ACGzB,MAAM,UAAU,GAAG;IACjB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,sDAAsD,EAAE,IAAI,EAAE,UAAU,EAAE;IACvG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE;IACtF,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,+CAA+C,EAAE,IAAI,EAAE,UAAU,EAAE;CACjG,CAAC;MAMW,OAAO;;;oBAEK,IAAI;wBACgC,IAAI;;;;IAG/D,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,iEAAI,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAC,UAAU,MAAO,EAC1DA,kEAAK,KAAK,EAAC,iBAAiB,IACzB,UAAU,CAAC,GAAG,CAAC,QAAQ;YACtB,QACEA,2BAAe,IAAI,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,IACrEA,qBAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,GAAY,CAC1C,EAChB;SACH,CAAC,CACE,CACF,CACD,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-share/translations.ts","src/components/cta/pn-share/pn-share.scss?tag=pn-share","src/components/cta/pn-share/pn-share.tsx"],"sourcesContent":["export const translations = {\n  sv: {\n    sharelabel: 'Dela med',\n  },\n  en: {\n    sharelabel: 'Share to',\n  },\n  da: {\n    sharelabel: 'Del med',\n  },\n  no: {\n    sharelabel: 'Dele med',\n  },\n  fi: {\n    sharelabel: 'Jakaa',\n  },\n  zh: {\n    sharelabel: 'Share to',\n  },\n  it: {\n    sharelabel: 'Share to',\n  },\n  nl: {\n    sharelabel: 'Share to',\n  },\n};\n","@import '../../../globals/main.scss';\npn-share {\n  .pn-share__container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.8rem;\n  }\n\n  .pn-share__heading {\n    font-size: 1.6rem;\n    font-weight: 500;\n    &:after {\n      content: '';\n      display: block;\n      height: 0.2rem;\n      background-color: $gray50;\n      margin-top: 0.4rem;\n      margin-bottom: 0.8rem;\n    }\n  }\n\n  .pn-share__items {\n    display: flex;\n    flex-direction: row;\n    gap: 0.8rem;\n    align-items: center;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\nconst SHARE_URLS = [\n  { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },\n  { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },\n  { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },\n];\n\n@Component({\n  tag: 'pn-share',\n  styleUrl: 'pn-share.scss',\n})\nexport class PnShare {\n  @Element() hostElement: HTMLElement;\n  @Prop() link: string = null;\n  @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n  @State() i18n: any;\n\n  componentWillLoad() {\n    this.setTranslations();\n  }\n\n  setTranslations() {\n    if (this.language === 'nb') {\n      this.language = 'no';\n    }\n    if (this.language && translations[this.language]) {\n      this.i18n = translations[this.language];\n    }\n  }\n\n  @Watch('language')\n  onLanguageChange() {\n    this.setTranslations();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-share__container\">\n          <h3 class=\"pn-share__heading\">{this.i18n.sharelabel}:</h3>\n          <div class=\"pn-share__items\">\n            {SHARE_URLS.map(platform => {\n              return (\n                <pn-share-item link={`${platform.url}${this.link}`} text={platform.text}>\n                  <pn-icon slot=\"icon\" icon={platform.platform}></pn-icon>\n                </pn-share-item>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-sidenav-level.cjs.entry.js

@@ -20,6 +20,7 @@ const PnSidenavLevel = class {
         this.parentLinkId = '';
         this.alignment = 'right';
     }
+    get hostElement() { return index.getElement(this); }
     async componentWillLoad() {
         const parent = this.hostElement.parentElement;
         if (parent.tagName.toLowerCase() !== 'nav') {
@@ -45,15 +46,13 @@ const PnSidenavLevel = class {
         this.isOpen = pnSidenavStore.state.openLevel === this.levelId;
     }
     render() {
-        var _a;
         const attributes = {
             'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,
             'data-level': this.level + '',
-            'id': (_a = this.levelId) !== null && _a !== void 0 ? _a : '',
+            'id': this.levelId ?? '',
         };
-        return (index.h(index.Host, Object.assign({ key: '560c5756c5decd508f3dd0f0cafb608df89490cf' }, attributes, { "data-asdfasdf": this.isOpen }), index.h("slot", { key: 'd8afcc50d5f96bbd6323bb05dd33b1116d7f1941' })));
+        return (index.h(index.Host, { key: '560c5756c5decd508f3dd0f0cafb608df89490cf', ...attributes, "data-asdfasdf": this.isOpen }, index.h("slot", { key: 'd8afcc50d5f96bbd6323bb05dd33b1116d7f1941' })));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "isOpen": ["onOpen"]
     }; }

package/cjs/pn-sidenav-level.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-sidenav-level.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,wTAAwT,CAAC;AACnV,6BAAe,iBAAiB;;MCOnB,cAAc;;;qBAEA,CAAC;uBACC,EAAE;sBACF,KAAK;0BACF,EAAE;0BACF,EAAE;4BACA,EAAE;yBACL,OAAO;;IAEpC,MAAM,iBAAiB;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;YAC1C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE;YACtD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,GAAG,cAAc,IAAI,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC;YAE5D,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE;gBAClDA,oBAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF;QACDC,uBAAQ,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,CAAC,CAAC;KACJ;IAGD,MAAM,MAAK;IACX,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAGD,oBAAK,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC;KAChD;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG;YACjB,aAAa,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI;YACxD,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;YAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,EAAE;SACzB,CAAC;QACF,QACEE,QAACC,UAAI,qEAAK,UAAU,qBAAiB,IAAI,CAAC,MAAM,KAC9CD,oEAAQ,CACH,EACP;KACH;;;;;;;;;;","names":["state","onChange","h","Host"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-level.scss?tag=pn-sidenav-level","src/components/navigation/pn-sidenav/pn-sidenav-level.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-level {\n  display: block;\n  flex-basis: 100%;\n  &[data-level='2'] {\n    padding-left: 2.5em;\n    overflow: hidden;\n    transition: max-height ease 0.2s;\n    max-height: 40em;\n    &[aria-hidden='true'] {\n      max-height: 0;\n    }\n  }\n}\n","import { Component, State, h, Host, Element, Watch } from '@stencil/core';\nimport { state, onChange } from './pn-sidenav-store';\n\n@Component({\n  tag: 'pn-sidenav-level',\n  styleUrl: 'pn-sidenav-level.scss',\n  shadow: false,\n})\nexport class PnSidenavLevel {\n  @Element() hostElement: HTMLElement;\n  @State() level: number = 1;\n  @State() levelId: string = '';\n  @State() isOpen: boolean = false;\n  @State() parentName: string = '';\n  @State() parentHref: string = '';\n  @State() parentLinkId: string = '';\n  @State() alignment: string = 'right';\n\n  async componentWillLoad() {\n    const parent = this.hostElement.parentElement;\n    if (parent.tagName.toLowerCase() !== 'nav') {\n      this.level = 2;\n    }\n    if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {\n      this.parentName = parent.getAttribute('name') + '';\n      this.parentHref = parent.getAttribute('href') + '';\n      this.parentLinkId = parent.getAttribute('linkid') + '';\n      const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;\n\n      if (parent.getAttribute('current') + '' === 'true') {\n        state.openLevel = this.levelId;\n        this.onChangeOpenLevel();\n      }\n    }\n    onChange('openLevel', () => {\n      this.onChangeOpenLevel();\n    });\n  }\n\n  @Watch('isOpen')\n  onOpen() {}\n  onChangeOpenLevel() {\n    this.isOpen = state.openLevel === this.levelId;\n  }\n\n  render() {\n    const attributes = {\n      'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,\n      'data-level': this.level + '',\n      'id': this.levelId ?? '',\n    };\n    return (\n      <Host {...attributes} data-asdfasdf={this.isOpen}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-sidenav-level.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,wTAAwT,CAAC;AACnV,6BAAe,iBAAiB;;MCOnB,cAAc;;;qBAEA,CAAC;uBACC,EAAE;sBACF,KAAK;0BACF,EAAE;0BACF,EAAE;4BACA,EAAE;yBACL,OAAO;;;IAEpC,MAAM,iBAAiB;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;YAC1C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE;YACtD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,GAAG,cAAc,IAAI,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC;YAE5D,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE;gBAClDA,oBAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF;QACDC,uBAAQ,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,CAAC,CAAC;KACJ;IAGD,MAAM,MAAK;IACX,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAGD,oBAAK,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC;KAChD;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,aAAa,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI;YACxD,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;YAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE;SACzB,CAAC;QACF,QACEE,QAACC,UAAI,wDAAK,UAAU,mBAAiB,IAAI,CAAC,MAAM,IAC9CD,oEAAQ,CACH,EACP;KACH;;;;;;;;;","names":["state","onChange","h","Host"],"sources":["src/components/navigation/pn-sidenav/pn-sidenav-level.scss?tag=pn-sidenav-level","src/components/navigation/pn-sidenav/pn-sidenav-level.tsx"],"sourcesContent":["@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-level {\n  display: block;\n  flex-basis: 100%;\n  &[data-level='2'] {\n    padding-left: 2.5em;\n    overflow: hidden;\n    transition: max-height ease 0.2s;\n    max-height: 40em;\n    &[aria-hidden='true'] {\n      max-height: 0;\n    }\n  }\n}\n","import { Component, State, h, Host, Element, Watch } from '@stencil/core';\nimport { state, onChange } from './pn-sidenav-store';\n\n@Component({\n  tag: 'pn-sidenav-level',\n  styleUrl: 'pn-sidenav-level.scss',\n  shadow: false,\n})\nexport class PnSidenavLevel {\n  @Element() hostElement: HTMLElement;\n  @State() level: number = 1;\n  @State() levelId: string = '';\n  @State() isOpen: boolean = false;\n  @State() parentName: string = '';\n  @State() parentHref: string = '';\n  @State() parentLinkId: string = '';\n  @State() alignment: string = 'right';\n\n  async componentWillLoad() {\n    const parent = this.hostElement.parentElement;\n    if (parent.tagName.toLowerCase() !== 'nav') {\n      this.level = 2;\n    }\n    if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {\n      this.parentName = parent.getAttribute('name') + '';\n      this.parentHref = parent.getAttribute('href') + '';\n      this.parentLinkId = parent.getAttribute('linkid') + '';\n      const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;\n\n      if (parent.getAttribute('current') + '' === 'true') {\n        state.openLevel = this.levelId;\n        this.onChangeOpenLevel();\n      }\n    }\n    onChange('openLevel', () => {\n      this.onChangeOpenLevel();\n    });\n  }\n\n  @Watch('isOpen')\n  onOpen() {}\n  onChangeOpenLevel() {\n    this.isOpen = state.openLevel === this.levelId;\n  }\n\n  render() {\n    const attributes = {\n      'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,\n      'data-level': this.level + '',\n      'id': this.levelId ?? '',\n    };\n    return (\n      <Host {...attributes} data-asdfasdf={this.isOpen}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-sidenav-link.cjs.entry.js

@@ -26,6 +26,7 @@ const PnSidenavLink = class {
         this.open = false;
         this.hasChildren = false;
     }
+    get hostElement() { return index.getElement(this); }
     componentWillLoad() {
         this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;
         const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
@@ -58,9 +59,8 @@ const PnSidenavLink = class {
             'aria-expanded': (pnSidenavStore.state.openLevel + '' === this.levelId + '') + '',
             'onClick': this.onExpandClick.bind(this),
         };
-        return (index.h(index.Host, { key: 'b38ecd5a94031ff495a8caca5e9399ad8e4ff6b1', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, index.h(TagName, Object.assign({ key: '0eaf2ff18447ae926f19802965a5a5edc094bf8e' }, linkAttributes, (TagName === 'button' && Object.assign({}, buttonAttributes))), this.icon ? index.h("pn-icon", { icon: this.icon, color: "blue700" }) : null, index.h("span", { key: 'feb94f640777bc62a9f8691f7745295a4a7c1bd5' }, this.name), this.hasChildren && TagName === 'button' ? (index.h("div", { class: "pn-sidenav-link-expand" }, this.open ? (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (index.h("button", Object.assign({}, buttonAttributes, { class: "pn-sidenav-link-expand" }), this.open ? index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" }))) : null, index.h("slot", { key: '550139f5d692f94f3bdd850115fb3e6765d90095' })));
+        return (index.h(index.Host, { key: 'b38ecd5a94031ff495a8caca5e9399ad8e4ff6b1', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, index.h(TagName, { key: '0eaf2ff18447ae926f19802965a5a5edc094bf8e', ...linkAttributes, ...(TagName === 'button' && { ...buttonAttributes }) }, this.icon ? index.h("pn-icon", { icon: this.icon, color: "blue700" }) : null, index.h("span", { key: 'feb94f640777bc62a9f8691f7745295a4a7c1bd5' }, this.name), this.hasChildren && TagName === 'button' ? (index.h("div", { class: "pn-sidenav-link-expand" }, this.open ? (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (index.h("button", { ...buttonAttributes, class: "pn-sidenav-link-expand" }, this.open ? index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" }))) : null, index.h("slot", { key: '550139f5d692f94f3bdd850115fb3e6765d90095' })));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnSidenavLink.style = PnSidenavLinkStyle0;
 

package/cjs/pn-sidenav-link.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-sidenav-link.entry.cjs.js","mappings":"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","names":["state","h","Host","angle_small_down"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_up.js","src/components/navigation/pn-sidenav/pn-sidenav-link.scss?tag=pn-sidenav-link","src/components/navigation/pn-sidenav/pn-sidenav-link.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=\"M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_up = icon;\nexport const angleSmallUp = icon;\n","@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-link {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.pn-sidenav-link {\n  font-weight: normal;\n  position: relative;\n  border: 0 none;\n  display: flex;\n  align-items: center;\n  background-color: transparent;\n  color: $blue700;\n  font-size: 1em;\n  padding: 1.1rem 1.5rem 1.1rem;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  flex-grow: 1;\n\n  &::before {\n    content: '';\n    display: block;\n    width: 0.4rem;\n    border-top-right-radius: 0.3rem;\n    border-bottom-right-radius: 0.3rem;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    transform: translateX(-0.4rem);\n    background: $blue700;\n    transition: transform linear 0.35s;\n  }\n  &:hover,\n  &:focus,\n  [current='true'] > & {\n    background-color: $blue50;\n    color: $blue700;\n    outline: 0;\n    box-shadow: none;\n    &::before {\n      transform: none;\n    }\n  }\n  &:active {\n    background-color: $gray50;\n    color: $blue400;\n    box-shadow: none;\n  }\n\n  > pn-icon {\n    padding-right: 1em;\n  }\n}\n\n.pn-sidenav-link-expand {\n  margin-left: auto;\n  border: 0;\n  font-size: 1em;\n  background: transparent;\n  outline: 0;\n  padding: 0 1em 0 0.5em;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  [current='true'] > & {\n    background-color: $blue50;\n    color: $blue700;\n    outline: 0;\n    box-shadow: none;\n    &::before {\n      transform: none;\n    }\n  }\n\n  button > & {\n    padding-right: 0;\n  }\n  pn-icon {\n    width: 14px;\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-sidenav-store';\nimport { angle_small_down, angle_small_up } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-sidenav-link',\n  styleUrl: 'pn-sidenav-link.scss',\n  shadow: false,\n})\nexport class PnSidenavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = null;\n  /** Link id */\n  @Prop() linkid: string = null;\n  /** Icon */\n  @Prop() icon: string = '';\n  /** Currently selected */\n  @Prop() current: boolean = false;\n\n  /** Level ID that we control toggle on */\n  @State() levelId: string = '';\n  /** Menu item is open */\n  @State() open: boolean = false;\n  @State() hasChildren: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;\n    const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n    if (this.hasChildren && this.name) {\n      this.levelId = `sidenav-lvl${2}-${safeLevelName}`;\n    }\n    if (!this.linkid && this.name) {\n      this.linkid = `sidenav-link-${safeLevelName}`;\n    }\n  }\n  // onClick={this.setOpenMenuLevel.bind(this)}\n  onExpandClick() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  getTagName() {\n    return this.href ? 'a' : 'button';\n  }\n\n  render() {\n    const TagName = this.getTagName();\n    const linkAttributes = {\n      href: this.href,\n      target: this.target,\n      id: this.linkid,\n      class: 'pn-sidenav-link',\n    };\n\n    let buttonAttributes = {\n      'aria-controls': this.levelId,\n      'aria-pressed': '',\n      'aria-label': (this.open ? state.i18n.close : state.i18n.open) + ' ' + this.name,\n      'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',\n      'onClick': this.onExpandClick.bind(this),\n    };\n\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid} current={this.current + ''}>\n        <TagName {...linkAttributes} {...(TagName === 'button' && { ...buttonAttributes })}>\n          {this.icon ? <pn-icon icon={this.icon} color=\"blue700\"></pn-icon> : null}\n\n          <span>{this.name}</span>\n\n          {this.hasChildren && TagName === 'button' ? (\n            <div class=\"pn-sidenav-link-expand\">\n              {this.open ? (\n                <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" />\n              ) : (\n                <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n              )}\n            </div>\n          ) : null}\n        </TagName>\n        {this.hasChildren && TagName === 'a' ? (\n          <button {...buttonAttributes} class=\"pn-sidenav-link-expand\">\n            {this.open ? <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" /> : <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />}\n          </button>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-sidenav-link.entry.cjs.js","mappings":"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","names":["state","h","Host","angle_small_down"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_up.js","src/components/navigation/pn-sidenav/pn-sidenav-link.scss?tag=pn-sidenav-link","src/components/navigation/pn-sidenav/pn-sidenav-link.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=\"M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_up = icon;\nexport const angleSmallUp = icon;\n","@import './pn-sidenav-common.scss';\n@import '../../../globals/main.scss';\n\npn-sidenav-link {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.pn-sidenav-link {\n  font-weight: normal;\n  position: relative;\n  border: 0 none;\n  display: flex;\n  align-items: center;\n  background-color: transparent;\n  color: $blue700;\n  font-size: 1em;\n  padding: 1.1rem 1.5rem 1.1rem;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  flex-grow: 1;\n\n  &::before {\n    content: '';\n    display: block;\n    width: 0.4rem;\n    border-top-right-radius: 0.3rem;\n    border-bottom-right-radius: 0.3rem;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    transform: translateX(-0.4rem);\n    background: $blue700;\n    transition: transform linear 0.35s;\n  }\n  &:hover,\n  &:focus,\n  [current='true'] > & {\n    background-color: $blue50;\n    color: $blue700;\n    outline: 0;\n    box-shadow: none;\n    &::before {\n      transform: none;\n    }\n  }\n  &:active {\n    background-color: $gray50;\n    color: $blue400;\n    box-shadow: none;\n  }\n\n  > pn-icon {\n    padding-right: 1em;\n  }\n}\n\n.pn-sidenav-link-expand {\n  margin-left: auto;\n  border: 0;\n  font-size: 1em;\n  background: transparent;\n  outline: 0;\n  padding: 0 1em 0 0.5em;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  [current='true'] > & {\n    background-color: $blue50;\n    color: $blue700;\n    outline: 0;\n    box-shadow: none;\n    &::before {\n      transform: none;\n    }\n  }\n\n  button > & {\n    padding-right: 0;\n  }\n  pn-icon {\n    width: 14px;\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-sidenav-store';\nimport { angle_small_down, angle_small_up } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-sidenav-link',\n  styleUrl: 'pn-sidenav-link.scss',\n  shadow: false,\n})\nexport class PnSidenavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = null;\n  /** Link id */\n  @Prop() linkid: string = null;\n  /** Icon */\n  @Prop() icon: string = '';\n  /** Currently selected */\n  @Prop() current: boolean = false;\n\n  /** Level ID that we control toggle on */\n  @State() levelId: string = '';\n  /** Menu item is open */\n  @State() open: boolean = false;\n  @State() hasChildren: boolean = false;\n\n  componentWillLoad() {\n    this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;\n    const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n    if (this.hasChildren && this.name) {\n      this.levelId = `sidenav-lvl${2}-${safeLevelName}`;\n    }\n    if (!this.linkid && this.name) {\n      this.linkid = `sidenav-link-${safeLevelName}`;\n    }\n  }\n  // onClick={this.setOpenMenuLevel.bind(this)}\n  onExpandClick() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  getTagName() {\n    return this.href ? 'a' : 'button';\n  }\n\n  render() {\n    const TagName = this.getTagName();\n    const linkAttributes = {\n      href: this.href,\n      target: this.target,\n      id: this.linkid,\n      class: 'pn-sidenav-link',\n    };\n\n    let buttonAttributes = {\n      'aria-controls': this.levelId,\n      'aria-pressed': '',\n      'aria-label': (this.open ? state.i18n.close : state.i18n.open) + ' ' + this.name,\n      'aria-expanded': (state.openLevel + '' === this.levelId + '') + '',\n      'onClick': this.onExpandClick.bind(this),\n    };\n\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid} current={this.current + ''}>\n        <TagName {...linkAttributes} {...(TagName === 'button' && { ...buttonAttributes })}>\n          {this.icon ? <pn-icon icon={this.icon} color=\"blue700\"></pn-icon> : null}\n\n          <span>{this.name}</span>\n\n          {this.hasChildren && TagName === 'button' ? (\n            <div class=\"pn-sidenav-link-expand\">\n              {this.open ? (\n                <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" />\n              ) : (\n                <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n              )}\n            </div>\n          ) : null}\n        </TagName>\n        {this.hasChildren && TagName === 'a' ? (\n          <button {...buttonAttributes} class=\"pn-sidenav-link-expand\">\n            {this.open ? <pn-icon class=\"first-level_icon\" icon={angle_small_up} color=\"blue700\" /> : <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />}\n          </button>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-sidenav-togglebutton.cjs.entry.js

@@ -17,6 +17,7 @@ const PnSidenavTogglebutton = class {
         this.label = '';
         this.i18n = { open: '', close: '', navLabel: '' };
     }
+    get hostElement() { return index.getElement(this); }
     onClick() {
         pnSidenavStore.state.openMenu = !pnSidenavStore.state.openMenu;
         const body = document.querySelector('body');
@@ -25,7 +26,6 @@ const PnSidenavTogglebutton = class {
     render() {
         return (index.h(index.Host, { key: '2d1b3984218cb7b654d552ebecf569904b227ec6' }, index.h("pn-button", { key: '3b3875c13ec1de9a7f07acdc22060e2230fad0de', appearance: "light", icon: pnSidenavStore.state.openMenu ? close_small.close_small : bars.bars, "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label }, index.h("slot", { key: '06a56aa25f5021b271ed8091020fe6cb8b33e905' }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 PnSidenavTogglebutton.style = PnSidenavTogglebuttonStyle0;