@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/components/pn-line-shape.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnLineShapeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-line-shape .pn-line-shape__container{display:flex}pn-line-shape .pn-line-shape__line{border-style:solid;border-width:0.4rem;border-radius:1.6rem;border-color:#00a0d6}pn-line-shape .pn-line-shape__dot{width:0.8rem;border-style:solid;border-width:0.4rem;border-radius:1.6rem;height:0.8rem;border-color:#00a0d6}pn-line-shape[slot=horizontal-line] .pn-line-shape__container{flex-direction:row;flex-wrap:nowrap;width:100%;gap:0.8rem;padding:2.4rem 0}pn-line-shape[slot=horizontal-line] .pn-line-shape__line{height:0.8rem;width:100%}pn-line-shape[slot=vertical-line] .pn-line-shape__container{height:100%;flex-direction:column;gap:0.8rem;padding:0.8rem 0.5rem}pn-line-shape[slot=vertical-line] .pn-line-shape__line{height:100%;width:0.8rem}";
+const pnLineShapeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-line-shape .pn-line-shape__container{display:flex}pn-line-shape .pn-line-shape__line{border-style:solid;border-width:0.4rem;border-radius:1.6rem;border-color:#00a0d6}pn-line-shape .pn-line-shape__dot{width:0.8rem;border-style:solid;border-width:0.4rem;border-radius:1.6rem;height:0.8rem;border-color:#00a0d6}pn-line-shape[slot=horizontal-line] .pn-line-shape__container{flex-direction:row;flex-wrap:nowrap;width:100%;gap:0.8rem;padding:2.4rem 0}pn-line-shape[slot=horizontal-line] .pn-line-shape__line{height:0.8rem;width:100%}pn-line-shape[slot=vertical-line] .pn-line-shape__container{height:100%;flex-direction:column;gap:0.8rem;padding:0.8rem 0.5rem}pn-line-shape[slot=vertical-line] .pn-line-shape__line{height:100%;width:0.8rem}";
 const PnLineShapeStyle0 = pnLineShapeCss;
 
 const PnLineShape$1 = /*@__PURE__*/ proxyCustomElement(class PnLineShape extends HTMLElement {

package/components/pn-line-shape.js.map

@@ -1 +1 @@
-{"file":"pn-line-shape.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhBA,aAAW;;;;;;;IAItB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU,EAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["PnLineShape"],"sources":["src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.scss?tag=pn-line-shape","src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"sourcesContent":["@import '../../../../globals/main';\n\npn-line-shape {\n  .pn-line-shape__container {\n    display: flex;\n  }\n\n  .pn-line-shape__line {\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n\n    border-color: $blue400;\n  }\n\n  .pn-line-shape__dot {\n    width: 0.8rem;\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n    height: 0.8rem;\n    border-color: $blue400;\n  }\n}\n\npn-line-shape[slot='horizontal-line'] {\n  .pn-line-shape__container {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 100%;\n    gap: 0.8rem;\n    padding: 2.4rem 0;\n  }\n\n  .pn-line-shape__line {\n    height: 0.8rem;\n    width: 100%;\n  }\n  .pn-line-shape__dot {\n  }\n}\n\npn-line-shape[slot='vertical-line'] {\n  .pn-line-shape__container {\n    height: 100%;\n    flex-direction: column;\n    gap: 0.8rem;\n    padding: 0.8rem 0.5rem;\n  }\n\n  .pn-line-shape__line {\n    height: 100%;\n    width: 0.8rem;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pn-line-shape',\n  styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n  @Element() hostElement: HTMLElement;\n  //props\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-line-shape__container\">\n          <canvas class=\"pn-line-shape__line\"></canvas>\n          <canvas class=\"pn-line-shape__dot\"></canvas>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-line-shape.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2nCAA2nC,CAAC;AACnpC,0BAAe,cAAc;;MCKhBA,aAAW;;;;;;;IAItB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU,EAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["PnLineShape"],"sources":["src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.scss?tag=pn-line-shape","src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"sourcesContent":["@import '../../../../globals/main';\n\npn-line-shape {\n  .pn-line-shape__container {\n    display: flex;\n  }\n\n  .pn-line-shape__line {\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n\n    border-color: $blue400;\n  }\n\n  .pn-line-shape__dot {\n    width: 0.8rem;\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n    height: 0.8rem;\n    border-color: $blue400;\n  }\n}\n\npn-line-shape[slot='horizontal-line'] {\n  .pn-line-shape__container {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 100%;\n    gap: 0.8rem;\n    padding: 2.4rem 0;\n  }\n\n  .pn-line-shape__line {\n    height: 0.8rem;\n    width: 100%;\n  }\n  .pn-line-shape__dot {\n  }\n}\n\npn-line-shape[slot='vertical-line'] {\n  .pn-line-shape__container {\n    height: 100%;\n    flex-direction: column;\n    gap: 0.8rem;\n    padding: 0.8rem 0.5rem;\n  }\n\n  .pn-line-shape__line {\n    height: 100%;\n    width: 0.8rem;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pn-line-shape',\n  styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n  @Element() hostElement: HTMLElement;\n  //props\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-line-shape__container\">\n          <canvas class=\"pn-line-shape__line\"></canvas>\n          <canvas class=\"pn-line-shape__dot\"></canvas>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-link-list.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnLinkListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-link-list .link-list__header{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005d92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);left:0}pn-link-list .link-list__container::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2d2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#ffffff;border:0.1rem solid #d3cecb;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#fff}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005d92}pn-link-list [slot=linklist] li>a:active{background-color:#0d234b}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005d92;outline-offset:2px}pn-link-list .link-list__button{display:flex;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005d92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
+const pnLinkListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-link-list .link-list__header{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005d92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);left:0}pn-link-list .link-list__container::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2d2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#ffffff;border:0.1rem solid #d3cecb;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#fff}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005d92}pn-link-list [slot=linklist] li>a:active{background-color:#0d234b}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005d92;outline-offset:2px}pn-link-list .link-list__button{display:flex;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005d92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
 const PnLinkListStyle0 = pnLinkListCss;
 
 const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class PnLinkList extends HTMLElement {
@@ -51,7 +51,7 @@ const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class PnLinkList extends H
         }
     };
     render() {
-        return (h(Host, { key: '0cfb80f2de46eeae8943f13868ca744c54974a09' }, (this.heading || this.preamble) && (h("div", { key: 'a396fea209035c911b5f545919ae1b1c9ff77e79', class: "link-list__header" }, this.heading && h("h2", { key: 'fbf8d3282fe16b7acc4b1568357e1db099597262', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: '06ee3ced935e335782f258a214b76de728978481', class: "link-list__preamble" }, this.preamble))), h("div", { key: 'c5a5d02539b7c687d4024d8ef97c68a16f9c8227', class: "link-list" }, h("div", { key: '7e77c23f6c72c0fe9ce14d39aef88223c4af00a4', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: 'd0948943177059f1aa66f079574a02a7a23ee79b', class: "link-list__scrollable" }, h("slot", { key: '52c2ed2c68dc45f5ee0c75b986f84183a9bc7dc5', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
+        return (h(Host, { key: '294904b3412b9e53557ec4d9f2743de25c646e21' }, (this.heading || this.preamble) && (h("div", { key: 'e51721d8f30bd637fb872bceaf3e63d63cf60faa', class: "link-list__header" }, this.heading && h("h2", { key: 'e7fab15c721d47c6baea3b7d2ddec452e2448445', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: 'd631a6a3c6e239e9325064f936bb9e3a216659d9', class: "link-list__preamble" }, this.preamble))), h("div", { key: '1337466d68dbccb1183ffb864cd36cdbf1af3017', class: "link-list" }, h("div", { key: '5934a9b4c3c4846f5988c2cbf20e8c268d6970a9', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: 'ae387d9591953a3867d22633c245931d215a1ccb', class: "link-list__scrollable" }, h("slot", { key: '2548751e6d2161de5236694e32fde16d2140fd88', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
     }
     static get style() { return PnLinkListStyle0; }
 }, [4, "pn-link-list", {

package/components/pn-link-list.js.map

@@ -1 +1 @@
-{"file":"pn-link-list.js","mappings":"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","names":["PnLinkList"],"sources":["src/components/widgets/pn-link-list/pn-link-list.scss?tag=pn-link-list","src/components/widgets/pn-link-list/pn-link-list.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-link-list {\n  .link-list__header {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0.8rem;\n  }\n\n  .link-list__heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $max-width-xl) {\n      font-size: 3.2rem;\n    }\n  }\n\n  .link-list__preamble {\n    max-width: 85rem;\n    text-align: center;\n    margin-bottom: 0;\n\n    @media screen and (min-width: $max-width-xl) {\n      text-wrap: balance;\n    }\n  }\n\n  .link-list {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n\n    margin: 0;\n    margin-bottom: 2.4rem;\n    padding: 0;\n  }\n\n  .link-list__container {\n    overflow-x: auto;\n    text-align: center;\n    white-space: nowrap;\n\n    &.link-list__active {\n      a,\n      li,\n      ul {\n        cursor: grab;\n        cursor: -webkit-grab;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      height: 0.4rem;\n      margin-top: 2rem;\n      -webkit-appearance: none;\n\n      @media screen and (min-width: $min-width-md) {\n        height: 0.6rem;\n      }\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background: $blue700;\n      border-radius: 2rem;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #d3cecb;\n      border-radius: 2rem;\n      width: 100%;\n      margin: 0 5rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin: 0 10rem;\n      }\n\n      @media screen and (min-width: $max-width-xl) {\n        margin: 0 15rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        margin: 0 20rem;\n      }\n    }\n\n    &::-webkit-resizer {\n      display: none;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      height: 85%;\n      width: 10%;\n    }\n\n    &::before {\n      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      left: 0;\n    }\n\n    &::after {\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      right: 0;\n    }\n  }\n\n  .link-list__scrollable {\n    display: inline-block;\n    padding: 2rem 0 1rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 0.5rem 2rem 1rem;\n    }\n  }\n\n  [slot='linklist'] {\n    ul {\n      display: flex;\n      list-style: none;\n      margin: 0;\n      padding: 0 1.6rem;\n    }\n\n    li {\n      & > a {\n        display: block;\n        color: $gray900;\n        font-size: 1.4rem;\n        font-weight: 500;\n        line-height: 140%;\n        text-decoration: none;\n        cursor: pointer;\n\n        background-color: $white;\n        border: 0.1rem solid $gray200;\n        border-radius: 0.8rem;\n        margin: 0 0.8rem;\n        padding: 1rem;\n\n        @media screen and (min-width: 1410px) {\n          font-size: 1.6rem;\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n          color: #fff;\n        }\n\n        &:hover,\n        &:focus {\n          background-color: $blue700;\n        }\n\n        &:active {\n          background-color: $blue900;\n        }\n\n        &:focus {\n          outline: 2px solid $blue700;\n          outline-offset: 2px;\n        }\n      }\n    }\n  }\n\n  .link-list__button {\n    display: flex;\n    justify-content: center;\n  }\n\n  @-moz-document url-prefix() {\n    .link-list__container {\n      scrollbar-color: $blue700 #d3cecb;\n    }\n\n    .link-list__scrollable {\n      padding: 0.5rem 2rem 2rem;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'pn-link-list',\n  styleUrl: 'pn-link-list.scss',\n})\nexport class PnLinkList {\n  @Prop() heading: string = null;\n  @Prop() label: string = null;\n  @Prop() preamble: string = null;\n  @Prop() url: string = null;\n  @Prop() showMoreLabel: string = null;\n  @Prop() showMoreUrl: string = null;\n\n  private slider: HTMLElement = null;\n  private isDragging = false;\n  private startX = 0;\n  private scrollLeft = 0;\n\n  componentDidLoad() {\n    this.slider = document.querySelector('.link-list__container') as HTMLElement;\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    const target = e.target as HTMLElement;\n\n    const isContainerClick = target.classList.contains('link-list__container');\n    const isLinkClick = target.tagName === 'A';\n\n    if (isContainerClick || isLinkClick) {\n      this.isDragging = true;\n      this.slider?.classList.add('link-list__active');\n      this.startX = e.pageX - this.slider?.offsetLeft;\n      this.scrollLeft = this.slider?.scrollLeft;\n\n      if (isLinkClick) {\n        e.preventDefault();\n      }\n    }\n  };\n\n  private handleMouseLeave = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (this.isDragging) {\n      const x = e.pageX - this.slider?.offsetLeft;\n      const move = (x - this.startX) * 2;\n      this.slider.scrollLeft = this.scrollLeft - move;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        {(this.heading || this.preamble) && (\n          <div class=\"link-list__header\">\n            {this.heading && <h2 class=\"link-list__heading\">{this.heading}</h2>}\n            {this.preamble && <p class=\"link-list__preamble\">{this.preamble}</p>}\n          </div>\n        )}\n        <div class=\"link-list\">\n          <div\n            class=\"link-list__container\"\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n          >\n            <div class=\"link-list__scrollable\">\n              <slot name=\"linklist\" />\n            </div>\n          </div>\n        </div>\n        {this.showMoreUrl ? (\n          <div class=\"link-list__button\">\n            <pn-button appearance=\"light\" href={this.showMoreUrl}>\n              {this.showMoreLabel}\n            </pn-button>{' '}\n          </div>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-link-list.js","mappings":"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","names":["PnLinkList"],"sources":["src/components/widgets/pn-link-list/pn-link-list.scss?tag=pn-link-list","src/components/widgets/pn-link-list/pn-link-list.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-link-list {\n  .link-list__header {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0.8rem;\n  }\n\n  .link-list__heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $max-width-xl) {\n      font-size: 3.2rem;\n    }\n  }\n\n  .link-list__preamble {\n    max-width: 85rem;\n    text-align: center;\n    margin-bottom: 0;\n\n    @media screen and (min-width: $max-width-xl) {\n      text-wrap: balance;\n    }\n  }\n\n  .link-list {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n\n    margin: 0;\n    margin-bottom: 2.4rem;\n    padding: 0;\n  }\n\n  .link-list__container {\n    overflow-x: auto;\n    text-align: center;\n    white-space: nowrap;\n\n    &.link-list__active {\n      a,\n      li,\n      ul {\n        cursor: grab;\n        cursor: -webkit-grab;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      height: 0.4rem;\n      margin-top: 2rem;\n      -webkit-appearance: none;\n\n      @media screen and (min-width: $min-width-md) {\n        height: 0.6rem;\n      }\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background: $blue700;\n      border-radius: 2rem;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #d3cecb;\n      border-radius: 2rem;\n      width: 100%;\n      margin: 0 5rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin: 0 10rem;\n      }\n\n      @media screen and (min-width: $max-width-xl) {\n        margin: 0 15rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        margin: 0 20rem;\n      }\n    }\n\n    &::-webkit-resizer {\n      display: none;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      height: 85%;\n      width: 10%;\n    }\n\n    &::before {\n      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      left: 0;\n    }\n\n    &::after {\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      right: 0;\n    }\n  }\n\n  .link-list__scrollable {\n    display: inline-block;\n    padding: 2rem 0 1rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 0.5rem 2rem 1rem;\n    }\n  }\n\n  [slot='linklist'] {\n    ul {\n      display: flex;\n      list-style: none;\n      margin: 0;\n      padding: 0 1.6rem;\n    }\n\n    li {\n      & > a {\n        display: block;\n        color: $gray900;\n        font-size: 1.4rem;\n        font-weight: 500;\n        line-height: 140%;\n        text-decoration: none;\n        cursor: pointer;\n\n        background-color: $white;\n        border: 0.1rem solid $gray200;\n        border-radius: 0.8rem;\n        margin: 0 0.8rem;\n        padding: 1rem;\n\n        @media screen and (min-width: 1410px) {\n          font-size: 1.6rem;\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n          color: #fff;\n        }\n\n        &:hover,\n        &:focus {\n          background-color: $blue700;\n        }\n\n        &:active {\n          background-color: $blue900;\n        }\n\n        &:focus {\n          outline: 2px solid $blue700;\n          outline-offset: 2px;\n        }\n      }\n    }\n  }\n\n  .link-list__button {\n    display: flex;\n    justify-content: center;\n  }\n\n  @-moz-document url-prefix() {\n    .link-list__container {\n      scrollbar-color: $blue700 #d3cecb;\n    }\n\n    .link-list__scrollable {\n      padding: 0.5rem 2rem 2rem;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'pn-link-list',\n  styleUrl: 'pn-link-list.scss',\n})\nexport class PnLinkList {\n  @Prop() heading: string = null;\n  @Prop() label: string = null;\n  @Prop() preamble: string = null;\n  @Prop() url: string = null;\n  @Prop() showMoreLabel: string = null;\n  @Prop() showMoreUrl: string = null;\n\n  private slider: HTMLElement = null;\n  private isDragging = false;\n  private startX = 0;\n  private scrollLeft = 0;\n\n  componentDidLoad() {\n    this.slider = document.querySelector('.link-list__container') as HTMLElement;\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    const target = e.target as HTMLElement;\n\n    const isContainerClick = target.classList.contains('link-list__container');\n    const isLinkClick = target.tagName === 'A';\n\n    if (isContainerClick || isLinkClick) {\n      this.isDragging = true;\n      this.slider?.classList.add('link-list__active');\n      this.startX = e.pageX - this.slider?.offsetLeft;\n      this.scrollLeft = this.slider?.scrollLeft;\n\n      if (isLinkClick) {\n        e.preventDefault();\n      }\n    }\n  };\n\n  private handleMouseLeave = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (this.isDragging) {\n      const x = e.pageX - this.slider?.offsetLeft;\n      const move = (x - this.startX) * 2;\n      this.slider.scrollLeft = this.scrollLeft - move;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        {(this.heading || this.preamble) && (\n          <div class=\"link-list__header\">\n            {this.heading && <h2 class=\"link-list__heading\">{this.heading}</h2>}\n            {this.preamble && <p class=\"link-list__preamble\">{this.preamble}</p>}\n          </div>\n        )}\n        <div class=\"link-list\">\n          <div\n            class=\"link-list__container\"\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n          >\n            <div class=\"link-list__scrollable\">\n              <slot name=\"linklist\" />\n            </div>\n          </div>\n        </div>\n        {this.showMoreUrl ? (\n          <div class=\"link-list__button\">\n            <pn-button appearance=\"light\" href={this.showMoreUrl}>\n              {this.showMoreLabel}\n            </pn-button>{' '}\n          </div>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-mainnav-level2.js

@@ -3,7 +3,7 @@ import { o as onChange, s as state } from './pn-mainnav-store.js';
 import { a as arrow_left } from './arrow_left.js';
 import { d as defineCustomElement$1 } from './pn-mainnav-link2.js';
 
-const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#ffffff;z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005d92;text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005d92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
+const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#ffffff;z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005d92;text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005d92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
 const PnMainnavLevelStyle0 = pnMainnavLevelCss;
 
 const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel extends HTMLElement {
@@ -75,10 +75,10 @@ const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel ext
         state.currentLevel = this.level;
     }
     render() {
-        return (h(Host, { key: '958273aebbba919ab0d6ee0433e52458e8f02154', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        return (h(Host, { key: '9180729eeb1dcc992e511bd17d22e10ed4b199c4', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                 state.openLevel = '';
                 state.currentLevel = 1;
-            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '735b57f1186701a77f96afdef6fb764c9a340047', name: "top" }), h("slot", { key: '9c3a1c428914201857e0f18400338c16cd7c6735' }), h("slot", { key: '216b4e06d42804bbfa299d6793ee321435eeb804', name: "additional" }), h("slot", { key: '09bae4c5d31896ede61403fef0488688330c6cd1', name: "footer" })));
+            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '36c7b3d76ed1a3fcbaa70309d0cf08c1fcc3127e', name: "top" }), h("slot", { key: '23bddc8fbbad8faa5543953305685f37b85f64d4' }), h("slot", { key: '7e7072650fe7e5634281fcd4669c776deb99870b', name: "additional" }), h("slot", { key: 'c309dc0f87c9ba0c24d4d1948fdc72ad5097eca1', name: "footer" })));
     }
     static get watchers() { return {
         "label": ["setState"],

package/components/pn-mainnav-level2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav-level2.js","mappings":"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","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-level.scss?tag=pn-mainnav-level","src/components/navigation/pn-mainnav/pn-mainnav-level.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-level {\n  display: block;\n  &:not(.hydrated) {\n    max-height: 5.6rem;\n    overflow: hidden;\n  }\n  &[data-level='1'] {\n    width: 100%;\n    right: 0;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    flex: 1;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      width: auto;\n      overflow: initial;\n\n      // Only works for blink/webkit\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n  &[data-level='2'] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 100vw;\n    padding: 0;\n    background-color: $white;\n    z-index: 1;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    overflow: scroll;\n    visibility: hidden;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      left: 0;\n      top: calc(100% + 1rem);\n      bottom: auto;\n      border-radius: 1.6rem;\n      width: auto;\n      padding: 1.6rem 1.6rem 0 1.6rem;\n      -webkit-box-shadow: $mainmenu-shadow-elevation8;\n      -moz-box-shadow: $mainmenu-shadow-elevation8;\n      box-shadow: $mainmenu-shadow-elevation8;\n      height: auto;\n      z-index: 3;\n      display: none;\n\n      &[data-menuitem-rightaligned='true'] {\n        // right-align next-to-last menu-pop-up on desktop (last is hidden mobile-action-menu)\n        right: 0;\n        left: unset;\n      }\n    }\n\n    @media screen and (max-height: $mobilenav-media-phoneheight) {\n      -ms-overflow-style: none; // IE and Edge\n      scrollbar-width: none; // Firefox\n\n      &::-webkit-scrollbar {\n        // Chrome, Safari and Opera\n        display: none;\n      }\n    }\n\n    &[aria-hidden='false'] {\n      transform: translateX(0);\n      visibility: visible;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        display: block;\n        overflow: visible;\n\n        &:not([data-level-listcount='1']) {\n          display: grid;\n          grid-template-columns: minmax(12em, 20em) 1fr;\n          grid-template-rows: auto auto;\n          gap: 0px 1.6rem;\n          grid-template-areas:\n            'top top'\n            'left right';\n        }\n      }\n    }\n    &[data-level-alignment='left'] {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        right: 0;\n        left: unset;\n      }\n    }\n    &[data-level-alignment='center'] {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        left: 50%;\n        transform: translateX(-50%);\n      }\n    }\n    a {\n      color: $blue700;\n      text-decoration: none;\n    }\n  }\n  [slot='top'] {\n    display: flex;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      display: none;\n    }\n  }\n\n  [slot='footer'] {\n    [data-menu-currentlevel='2'] & {\n      display: none;\n      overscroll-behavior: contain;\n    }\n  }\n}\n\n.mainnav-level-header {\n  grid-area: top;\n  > label {\n    position: absolute;\n    width: 0.1rem;\n    height: 0.1rem;\n    padding: 0;\n    margin: -0.1rem;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    border: 0;\n    white-space: nowrap;\n  }\n  > button {\n    display: block;\n    position: relative;\n    border: none;\n    background-color: transparent;\n    color: $blue700;\n    padding: 2.4rem 0 2.4rem 6.2rem;\n    width: 100%;\n    text-align: left;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n      speak: none;\n    }\n\n    > pn-icon {\n      speak: none;\n      position: absolute;\n      height: 2.4rem;\n      width: 2.4rem;\n      left: 3rem;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  [data-level='2'] & {\n    > pn-mainnav-link > a {\n      font-size: 2.4rem;\n    }\n  }\n}\n","import { Component, State, h, Host, Element, Watch, Prop } from '@stencil/core';\nimport { state, onChange } from './pn-mainnav-store';\nimport { arrow_left } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-level',\n  styleUrl: 'pn-mainnav-level.scss',\n  shadow: false,\n})\nexport class PnMainnavLevel {\n  @Element() hostElement: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) label: string = '';\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() listCount: number = 0;\n  @State() alignment: string = 'right';\n\n  async componentWillLoad() {\n    this.setState();\n    onChange('openLevel', () => {\n      this.onChangeOpenLevel();\n    });\n  }\n\n  @Watch('label')\n  setState() {\n    this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;\n    const parentElm = this.hostElement.parentElement;\n    if (parentElm.tagName.toLowerCase() !== 'nav') {\n      this.level = 2;\n    }\n    if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {\n      this.parentName = parentElm.getAttribute('name') + '';\n      if ((!this.label && this.parentName) || this.label !== this.parentName) {\n        this.label = this.parentName;\n      }\n      this.parentHref = parentElm.getAttribute('href') + '';\n      this.parentLinkId = parentElm.getAttribute('linkid') + '';\n      const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;\n    }\n  }\n\n  @Watch('isOpen')\n  onOpen() {\n    if (this.level === 2) {\n      requestAnimationFrame(() => {\n        const levelClientRect = this.hostElement.getClientRects()[0];\n        if (!levelClientRect) {\n          return;\n        }\n\n        const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;\n        if (navElm && navElm.tagName.toLowerCase() === 'nav') {\n          const navClientRect = navElm.getClientRects()[0];\n          if (!navClientRect) {\n            return;\n          }\n\n          if (levelClientRect.right > window.innerWidth) {\n            const levelParentRect = this.hostElement.parentElement.getClientRects()[0];\n            if (levelParentRect.left - levelClientRect.width < 0) {\n              this.alignment = 'center';\n            } else {\n              this.alignment = 'left';\n            }\n          }\n        }\n      });\n    }\n  }\n  onChangeOpenLevel() {\n    this.isOpen = state.openLevel === this.levelId;\n    state.currentLevel = this.level;\n  }\n\n  render() {\n    return (\n      <Host\n        {...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {})}\n        data-level-listcount={this.listCount + ''}\n        data-level-alignment={this.alignment}\n        data-level={this.level + ''}\n        {...(this.levelId ? { id: this.levelId } : {})}\n      >\n        {this.level > 1 ? (\n          <div class=\"mainnav-level-header\">\n            <label htmlFor={this.levelId}>{state.i18n.menuGoBackButton}</label>\n            <button\n              class=\"secondlevel-backbtn\"\n              onClick={() => {\n                state.openLevel = '';\n                state.currentLevel = 1;\n              }}\n              aria-expanded={(state.openLevel === this.levelId) + ''}\n            >\n              <pn-icon icon={arrow_left} color=\"blue700\" />\n              {state.i18n.menuStartButton}\n            </button>\n            {this.parentHref && this.label ? <pn-mainnav-link href={this.parentHref} name={this.label} linkid={this.parentLinkId}></pn-mainnav-link> : null}\n          </div>\n        ) : null}\n        <slot name=\"top\"></slot>\n        <slot></slot>\n        <slot name=\"additional\"></slot>\n        <slot name=\"footer\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav-level2.js","mappings":"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","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-level.scss?tag=pn-mainnav-level","src/components/navigation/pn-mainnav/pn-mainnav-level.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-level {\n  display: block;\n  &:not(.hydrated) {\n    max-height: 5.6rem;\n    overflow: hidden;\n  }\n  &[data-level='1'] {\n    width: 100%;\n    right: 0;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    flex: 1;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      width: auto;\n      overflow: initial;\n\n      // Only works for blink/webkit\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n  &[data-level='2'] {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 100vw;\n    padding: 0;\n    background-color: $white;\n    z-index: 1;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    overflow: scroll;\n    visibility: hidden;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      left: 0;\n      top: calc(100% + 1rem);\n      bottom: auto;\n      border-radius: 1.6rem;\n      width: auto;\n      padding: 1.6rem 1.6rem 0 1.6rem;\n      -webkit-box-shadow: $mainmenu-shadow-elevation8;\n      -moz-box-shadow: $mainmenu-shadow-elevation8;\n      box-shadow: $mainmenu-shadow-elevation8;\n      height: auto;\n      z-index: 3;\n      display: none;\n\n      &[data-menuitem-rightaligned='true'] {\n        // right-align next-to-last menu-pop-up on desktop (last is hidden mobile-action-menu)\n        right: 0;\n        left: unset;\n      }\n    }\n\n    @media screen and (max-height: $mobilenav-media-phoneheight) {\n      -ms-overflow-style: none; // IE and Edge\n      scrollbar-width: none; // Firefox\n\n      &::-webkit-scrollbar {\n        // Chrome, Safari and Opera\n        display: none;\n      }\n    }\n\n    &[aria-hidden='false'] {\n      transform: translateX(0);\n      visibility: visible;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        display: block;\n        overflow: visible;\n\n        &:not([data-level-listcount='1']) {\n          display: grid;\n          grid-template-columns: minmax(12em, 20em) 1fr;\n          grid-template-rows: auto auto;\n          gap: 0px 1.6rem;\n          grid-template-areas:\n            'top top'\n            'left right';\n        }\n      }\n    }\n    &[data-level-alignment='left'] {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        right: 0;\n        left: unset;\n      }\n    }\n    &[data-level-alignment='center'] {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        left: 50%;\n        transform: translateX(-50%);\n      }\n    }\n    a {\n      color: $blue700;\n      text-decoration: none;\n    }\n  }\n  [slot='top'] {\n    display: flex;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      display: none;\n    }\n  }\n\n  [slot='footer'] {\n    [data-menu-currentlevel='2'] & {\n      display: none;\n      overscroll-behavior: contain;\n    }\n  }\n}\n\n.mainnav-level-header {\n  grid-area: top;\n  > label {\n    position: absolute;\n    width: 0.1rem;\n    height: 0.1rem;\n    padding: 0;\n    margin: -0.1rem;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    border: 0;\n    white-space: nowrap;\n  }\n  > button {\n    display: block;\n    position: relative;\n    border: none;\n    background-color: transparent;\n    color: $blue700;\n    padding: 2.4rem 0 2.4rem 6.2rem;\n    width: 100%;\n    text-align: left;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n      speak: none;\n    }\n\n    > pn-icon {\n      speak: none;\n      position: absolute;\n      height: 2.4rem;\n      width: 2.4rem;\n      left: 3rem;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  [data-level='2'] & {\n    > pn-mainnav-link > a {\n      font-size: 2.4rem;\n    }\n  }\n}\n","import { Component, State, h, Host, Element, Watch, Prop } from '@stencil/core';\nimport { state, onChange } from './pn-mainnav-store';\nimport { arrow_left } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-level',\n  styleUrl: 'pn-mainnav-level.scss',\n  shadow: false,\n})\nexport class PnMainnavLevel {\n  @Element() hostElement: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) label: string = '';\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() listCount: number = 0;\n  @State() alignment: string = 'right';\n\n  async componentWillLoad() {\n    this.setState();\n    onChange('openLevel', () => {\n      this.onChangeOpenLevel();\n    });\n  }\n\n  @Watch('label')\n  setState() {\n    this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;\n    const parentElm = this.hostElement.parentElement;\n    if (parentElm.tagName.toLowerCase() !== 'nav') {\n      this.level = 2;\n    }\n    if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {\n      this.parentName = parentElm.getAttribute('name') + '';\n      if ((!this.label && this.parentName) || this.label !== this.parentName) {\n        this.label = this.parentName;\n      }\n      this.parentHref = parentElm.getAttribute('href') + '';\n      this.parentLinkId = parentElm.getAttribute('linkid') + '';\n      const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;\n    }\n  }\n\n  @Watch('isOpen')\n  onOpen() {\n    if (this.level === 2) {\n      requestAnimationFrame(() => {\n        const levelClientRect = this.hostElement.getClientRects()[0];\n        if (!levelClientRect) {\n          return;\n        }\n\n        const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;\n        if (navElm && navElm.tagName.toLowerCase() === 'nav') {\n          const navClientRect = navElm.getClientRects()[0];\n          if (!navClientRect) {\n            return;\n          }\n\n          if (levelClientRect.right > window.innerWidth) {\n            const levelParentRect = this.hostElement.parentElement.getClientRects()[0];\n            if (levelParentRect.left - levelClientRect.width < 0) {\n              this.alignment = 'center';\n            } else {\n              this.alignment = 'left';\n            }\n          }\n        }\n      });\n    }\n  }\n  onChangeOpenLevel() {\n    this.isOpen = state.openLevel === this.levelId;\n    state.currentLevel = this.level;\n  }\n\n  render() {\n    return (\n      <Host\n        {...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {})}\n        data-level-listcount={this.listCount + ''}\n        data-level-alignment={this.alignment}\n        data-level={this.level + ''}\n        {...(this.levelId ? { id: this.levelId } : {})}\n      >\n        {this.level > 1 ? (\n          <div class=\"mainnav-level-header\">\n            <label htmlFor={this.levelId}>{state.i18n.menuGoBackButton}</label>\n            <button\n              class=\"secondlevel-backbtn\"\n              onClick={() => {\n                state.openLevel = '';\n                state.currentLevel = 1;\n              }}\n              aria-expanded={(state.openLevel === this.levelId) + ''}\n            >\n              <pn-icon icon={arrow_left} color=\"blue700\" />\n              {state.i18n.menuStartButton}\n            </button>\n            {this.parentHref && this.label ? <pn-mainnav-link href={this.parentHref} name={this.label} linkid={this.parentLinkId}></pn-mainnav-link> : null}\n          </div>\n        ) : null}\n        <slot name=\"top\"></slot>\n        <slot></slot>\n        <slot name=\"additional\"></slot>\n        <slot name=\"footer\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-mainnav-link2.js

@@ -4,7 +4,7 @@ import { a as angle_small_down } from './angle_small_down.js';
 import { a as arrow_right } from './arrow_right.js';
 import { o as open_in_new } from './open_in_new.js';
 
-const pnMainnavLinkCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav-link{display:block}pn-mainnav-link button,pn-mainnav-link a{font-weight:normal;position:relative;border:0 none;display:flex;align-items:center;background-color:transparent;color:#005d92}pn-mainnav-link button:hover,pn-mainnav-link button:focus,pn-mainnav-link a:hover,pn-mainnav-link a:focus{background-color:#ffffff;color:#005d92;outline:0;box-shadow:none}pn-mainnav-link button:active,pn-mainnav-link a:active{background-color:#f3f2f2;color:#00a0d6;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link{height:100%;padding-left:0;position:relative;scroll-snap-align:center}}[data-level=\"1\"] pn-mainnav-link:first-child{border-top:0.1rem solid #f3f2f2}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link:first-child{border:0}}[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{font-size:2rem;width:100%;border-bottom:0.1rem solid #f3f2f2;height:auto;padding:1.9rem 0 1.9rem 3rem}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{height:100%;border:0;font-size:1.6rem;font-weight:normal;position:relative;outline:0;overflow:hidden;padding:1.6rem 1.6rem;white-space:nowrap}[data-level=\"1\"] pn-mainnav-link>button::before,[data-level=\"1\"] pn-mainnav-link>a::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(100%);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[data-level=\"1\"] pn-mainnav-link>button:hover::before,[data-level=\"1\"] pn-mainnav-link>button:focus::before,[data-level=\"1\"] pn-mainnav-link>a:hover::before,[data-level=\"1\"] pn-mainnav-link>a:focus::before{transform:translateY(0)}[data-level=\"1\"] pn-mainnav-link>button:active,[data-level=\"1\"] pn-mainnav-link>a:active{outline:0;box-shadow:none;color:#005d92}[data-level=\"1\"] pn-mainnav-link>button:active::before,[data-level=\"1\"] pn-mainnav-link>a:active::before{background-color:#8eddf9;transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover,[data-level=\"1\"] pn-mainnav-link>button:focus,[data-level=\"1\"] pn-mainnav-link>a:hover,[data-level=\"1\"] pn-mainnav-link>a:focus{text-decoration:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button[aria-expanded=true]::before,[data-level=\"1\"] pn-mainnav-link>a[aria-expanded=true]::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(0);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}[data-level=\"1\"] pn-mainnav-link [aria-expanded=true] .first-level_icon{transform:rotateX(180deg)}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{transition:0.25s linear transform;width:1.92rem;height:1.92rem;display:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:block}}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:block;position:absolute;height:2.4rem;width:2.4rem;right:2.4rem;top:50%;transform:translateY(-50%)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:none}}[data-level=\"1\"] pn-mainnav-link pn-icon svg{pointer-events:none;speak:none;width:100%;height:100%}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]:not([data-level-listcount=\"1\"]) pn-mainnav-list:last-child pn-mainnav-link>a{min-width:unset}}[data-level=\"2\"] pn-mainnav-link{position:static;display:inline-block;width:100%;height:auto}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link{padding-left:0;margin-bottom:1.6rem}}[data-level=\"2\"] pn-mainnav-link>a{font-size:1.6rem;border-bottom:0.1rem solid #f3f2f2;padding:2.2rem 0 2.2rem 3rem;white-space:normal}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a{min-width:16em;border:0;border-radius:1rem;padding:1.4rem 1.6rem}}[data-level=\"2\"] pn-mainnav-link>a:hover{background-color:#ffffff;color:#005d92}[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:hover::before,[data-level=\"2\"] pn-mainnav-link>a:focus::before{content:none}[data-level=\"2\"] pn-mainnav-link>a:active{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:active{background-color:#f3f2f2;color:#00a0d6;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:active::before{content:none}[data-level=\"2\"] pn-mainnav-link pn-icon{display:inline-block;margin-left:0.2em;min-width:1.5rem;width:1.5rem;height:1.5rem}";
+const pnMainnavLinkCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-link{display:block}pn-mainnav-link button,pn-mainnav-link a{font-weight:normal;position:relative;border:0 none;display:flex;align-items:center;background-color:transparent;color:#005d92}pn-mainnav-link button:hover,pn-mainnav-link button:focus,pn-mainnav-link a:hover,pn-mainnav-link a:focus{background-color:#ffffff;color:#005d92;outline:0;box-shadow:none}pn-mainnav-link button:active,pn-mainnav-link a:active{background-color:#f3f2f2;color:#00a0d6;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link{height:100%;padding-left:0;position:relative;scroll-snap-align:center}}[data-level=\"1\"] pn-mainnav-link:first-child{border-top:0.1rem solid #f3f2f2}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link:first-child{border:0}}[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{font-size:2rem;width:100%;border-bottom:0.1rem solid #f3f2f2;height:auto;padding:1.9rem 0 1.9rem 3rem}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{height:100%;border:0;font-size:1.6rem;font-weight:normal;position:relative;outline:0;overflow:hidden;padding:1.6rem 1.6rem;white-space:nowrap}[data-level=\"1\"] pn-mainnav-link>button::before,[data-level=\"1\"] pn-mainnav-link>a::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(100%);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[data-level=\"1\"] pn-mainnav-link>button:hover::before,[data-level=\"1\"] pn-mainnav-link>button:focus::before,[data-level=\"1\"] pn-mainnav-link>a:hover::before,[data-level=\"1\"] pn-mainnav-link>a:focus::before{transform:translateY(0)}[data-level=\"1\"] pn-mainnav-link>button:active,[data-level=\"1\"] pn-mainnav-link>a:active{outline:0;box-shadow:none;color:#005d92}[data-level=\"1\"] pn-mainnav-link>button:active::before,[data-level=\"1\"] pn-mainnav-link>a:active::before{background-color:#8eddf9;transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover,[data-level=\"1\"] pn-mainnav-link>button:focus,[data-level=\"1\"] pn-mainnav-link>a:hover,[data-level=\"1\"] pn-mainnav-link>a:focus{text-decoration:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button[aria-expanded=true]::before,[data-level=\"1\"] pn-mainnav-link>a[aria-expanded=true]::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(0);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}[data-level=\"1\"] pn-mainnav-link [aria-expanded=true] .first-level_icon{transform:rotateX(180deg)}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{transition:0.25s linear transform;width:1.92rem;height:1.92rem;display:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:block}}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:block;position:absolute;height:2.4rem;width:2.4rem;right:2.4rem;top:50%;transform:translateY(-50%)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:none}}[data-level=\"1\"] pn-mainnav-link pn-icon svg{pointer-events:none;speak:none;width:100%;height:100%}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]:not([data-level-listcount=\"1\"]) pn-mainnav-list:last-child pn-mainnav-link>a{min-width:unset}}[data-level=\"2\"] pn-mainnav-link{position:static;display:inline-block;width:100%;height:auto}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link{padding-left:0;margin-bottom:1.6rem}}[data-level=\"2\"] pn-mainnav-link>a{font-size:1.6rem;border-bottom:0.1rem solid #f3f2f2;padding:2.2rem 0 2.2rem 3rem;white-space:normal}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a{min-width:16em;border:0;border-radius:1rem;padding:1.4rem 1.6rem}}[data-level=\"2\"] pn-mainnav-link>a:hover{background-color:#ffffff;color:#005d92}[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:hover::before,[data-level=\"2\"] pn-mainnav-link>a:focus::before{content:none}[data-level=\"2\"] pn-mainnav-link>a:active{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:active{background-color:#f3f2f2;color:#00a0d6;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:active::before{content:none}[data-level=\"2\"] pn-mainnav-link pn-icon{display:inline-block;margin-left:0.2em;min-width:1.5rem;width:1.5rem;height:1.5rem}";
 const PnMainnavLinkStyle0 = pnMainnavLinkCss;
 
 const PnMainnavLink = /*@__PURE__*/ proxyCustomElement(class PnMainnavLink extends HTMLElement {
@@ -31,7 +31,7 @@ const PnMainnavLink = /*@__PURE__*/ proxyCustomElement(class PnMainnavLink exten
         state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
     }
     render() {
-        return (h(Host, { key: '83ff3cda7f2697675abf054ee2cf92da5fd14f36', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: 'e03284078612289b6e86919c0fde15a1e5d956e1' })));
+        return (h(Host, { key: 'ced822a2bfbd97158796f232563b2eddd55573c0', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '3ded6dbe1b108680aa28d7a0248b25b2495206c4' })));
     }
     static get style() { return PnMainnavLinkStyle0; }
 }, [4, "pn-mainnav-link", {

package/components/pn-mainnav-link2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,o6JAAo6J,CAAC;AAC97J,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-link {\n  display: block;\n  button,\n  a {\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\n    &:hover,\n    &:focus {\n      background-color: $white;\n      color: $blue700;\n      outline: 0;\n      box-shadow: none;\n    }\n    &:active {\n      background-color: $gray50;\n      color: $blue400;\n      box-shadow: none;\n    }\n  }\n}\n\npn-mainnav-link {\n  [data-level='1'] & {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      padding-left: 0;\n      position: relative;\n      scroll-snap-align: center;\n    }\n    &:first-child {\n      border-top: 0.1rem solid $gray50;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        border: 0;\n      }\n    }\n\n    > button,\n    > a {\n      font-size: 2rem;\n      width: 100%;\n      border-bottom: 0.1rem solid $gray50;\n      height: auto;\n      padding: 1.9rem 0 1.9rem 3rem;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        height: 100%;\n        border: 0;\n        font-size: 1.6rem;\n        font-weight: normal;\n        position: relative;\n        outline: 0;\n        overflow: hidden;\n        padding: 1.6rem 1.6rem;\n        white-space: nowrap;\n\n        &::before {\n          content: '';\n          background-color: $blue400;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          height: 0.5em;\n          border-radius: 0.5em 0.5em 0 0;\n          transform: translateY(100%);\n          transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n        }\n\n        &:hover,\n        &:focus {\n          &::before {\n            transform: translateY(0);\n          }\n        }\n\n        &:active {\n          outline: 0;\n          box-shadow: none;\n          color: $blue700;\n\n          &::before {\n            background-color: $blue200;\n            transform: translateY(0);\n          }\n        }\n      }\n\n      &:hover,\n      &:focus {\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          text-decoration: none;\n        }\n      }\n\n      &[aria-expanded='true'] {\n        &::before {\n          @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n            content: '';\n            background-color: $blue400;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 0.5em;\n            border-radius: 0.5em 0.5em 0 0;\n            transform: translateY(0);\n            transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n          }\n        }\n      }\n    }\n\n    [aria-expanded='true'] {\n      .first-level_icon {\n        transform: rotateX(180deg);\n      }\n    }\n\n    pn-icon {\n      &.first-level_icon {\n        transition: 0.25s linear transform;\n        width: 1.92rem;\n        height: 1.92rem;\n        display: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: block;\n        }\n      }\n\n      &.first-level_arrow {\n        display: block;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: none;\n        }\n\n        position: absolute;\n        height: 2.4rem;\n        width: 2.4rem;\n        right: 2.4rem;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      svg {\n        pointer-events: none;\n        speak: none;\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n}\n\npn-mainnav-link {\n  // Additional links added to a level 2 section should not have the min-width required to make the columns look good\n  pn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child & {\n    > a {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: unset;\n      }\n    }\n  }\n  [data-level='2'] & {\n    position: static;\n    display: inline-block;\n    width: 100%;\n    height: auto;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      padding-left: 0;\n      margin-bottom: 1.6rem;\n    }\n\n    > a {\n      font-size: 1.6rem;\n      border-bottom: 0.1rem solid $gray50;\n      padding: 2.2rem 0 2.2rem 3rem;\n      white-space: normal;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: 16em;\n        border: 0;\n        border-radius: 1rem;\n        padding: 1.4rem 1.6rem;\n      }\n\n      &:hover {\n        background-color: $white;\n        color: $blue700;\n      }\n\n      &:hover,\n      &:focus {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue700;\n          text-decoration: underline;\n          outline: 0;\n        }\n        &::before {\n          content: none;\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue400;\n          outline: 0;\n        }\n\n        &::before {\n          content: none;\n        }\n      }\n    }\n\n    pn-icon {\n      display: inline-block;\n      margin-left: 0.2em;\n      min-width: 1.5rem;\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-link',\n  styleUrl: 'pn-mainnav-link.scss',\n  shadow: false,\n})\nexport class PnMainnavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = '';\n  /** Link id */\n  @Prop() linkid: string = '';\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-mainnav-level').length > 0;\n    if (this.hasChildren && this.name) {\n      const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n    }\n  }\n\n  setOpenMenuLevel() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n        {this.hasChildren ? (\n          <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n            {this.name}\n            <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n            <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n          </button>\n        ) : (\n          <a\n            href={this.href}\n            {...(this.target ? { target: this.target } : {})}\n            {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n            {...(this.linkid ? { id: this.linkid } : {})}\n          >\n            {this.name}\n            {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n          </a>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,6uKAA6uK,CAAC;AACvwK,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-link {\n  display: block;\n  button,\n  a {\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\n    &:hover,\n    &:focus {\n      background-color: $white;\n      color: $blue700;\n      outline: 0;\n      box-shadow: none;\n    }\n    &:active {\n      background-color: $gray50;\n      color: $blue400;\n      box-shadow: none;\n    }\n  }\n}\n\npn-mainnav-link {\n  [data-level='1'] & {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      padding-left: 0;\n      position: relative;\n      scroll-snap-align: center;\n    }\n    &:first-child {\n      border-top: 0.1rem solid $gray50;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        border: 0;\n      }\n    }\n\n    > button,\n    > a {\n      font-size: 2rem;\n      width: 100%;\n      border-bottom: 0.1rem solid $gray50;\n      height: auto;\n      padding: 1.9rem 0 1.9rem 3rem;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        height: 100%;\n        border: 0;\n        font-size: 1.6rem;\n        font-weight: normal;\n        position: relative;\n        outline: 0;\n        overflow: hidden;\n        padding: 1.6rem 1.6rem;\n        white-space: nowrap;\n\n        &::before {\n          content: '';\n          background-color: $blue400;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          height: 0.5em;\n          border-radius: 0.5em 0.5em 0 0;\n          transform: translateY(100%);\n          transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n        }\n\n        &:hover,\n        &:focus {\n          &::before {\n            transform: translateY(0);\n          }\n        }\n\n        &:active {\n          outline: 0;\n          box-shadow: none;\n          color: $blue700;\n\n          &::before {\n            background-color: $blue200;\n            transform: translateY(0);\n          }\n        }\n      }\n\n      &:hover,\n      &:focus {\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          text-decoration: none;\n        }\n      }\n\n      &[aria-expanded='true'] {\n        &::before {\n          @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n            content: '';\n            background-color: $blue400;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 0.5em;\n            border-radius: 0.5em 0.5em 0 0;\n            transform: translateY(0);\n            transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n          }\n        }\n      }\n    }\n\n    [aria-expanded='true'] {\n      .first-level_icon {\n        transform: rotateX(180deg);\n      }\n    }\n\n    pn-icon {\n      &.first-level_icon {\n        transition: 0.25s linear transform;\n        width: 1.92rem;\n        height: 1.92rem;\n        display: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: block;\n        }\n      }\n\n      &.first-level_arrow {\n        display: block;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          display: none;\n        }\n\n        position: absolute;\n        height: 2.4rem;\n        width: 2.4rem;\n        right: 2.4rem;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      svg {\n        pointer-events: none;\n        speak: none;\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n}\n\npn-mainnav-link {\n  // Additional links added to a level 2 section should not have the min-width required to make the columns look good\n  pn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child & {\n    > a {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: unset;\n      }\n    }\n  }\n  [data-level='2'] & {\n    position: static;\n    display: inline-block;\n    width: 100%;\n    height: auto;\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      padding-left: 0;\n      margin-bottom: 1.6rem;\n    }\n\n    > a {\n      font-size: 1.6rem;\n      border-bottom: 0.1rem solid $gray50;\n      padding: 2.2rem 0 2.2rem 3rem;\n      white-space: normal;\n\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        min-width: 16em;\n        border: 0;\n        border-radius: 1rem;\n        padding: 1.4rem 1.6rem;\n      }\n\n      &:hover {\n        background-color: $white;\n        color: $blue700;\n      }\n\n      &:hover,\n      &:focus {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue700;\n          text-decoration: underline;\n          outline: 0;\n        }\n        &::before {\n          content: none;\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n          background-color: $gray50;\n          color: $blue400;\n          outline: 0;\n        }\n\n        &::before {\n          content: none;\n        }\n      }\n    }\n\n    pn-icon {\n      display: inline-block;\n      margin-left: 0.2em;\n      min-width: 1.5rem;\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav-link',\n  styleUrl: 'pn-mainnav-link.scss',\n  shadow: false,\n})\nexport class PnMainnavLink {\n  @Element() hostElement: HTMLElement;\n\n  /** Name */\n  @Prop() name: string = '';\n  /** Href */\n  @Prop() href: string = '';\n  /** Target */\n  @Prop() target: string = '';\n  /** Link id */\n  @Prop() linkid: string = '';\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-mainnav-level').length > 0;\n    if (this.hasChildren && this.name) {\n      const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n      this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n    }\n  }\n\n  setOpenMenuLevel() {\n    state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n        {this.hasChildren ? (\n          <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n            {this.name}\n            <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n            <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n          </button>\n        ) : (\n          <a\n            href={this.href}\n            {...(this.target ? { target: this.target } : {})}\n            {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n            {...(this.linkid ? { id: this.linkid } : {})}\n          >\n            {this.name}\n            {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n          </a>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-mainnav-list2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #d3cecb;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
+const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #d3cecb;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
 const PnMainnavListStyle0 = pnMainnavListCss;
 
 const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList extends HTMLElement {
@@ -15,7 +15,7 @@ const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList exten
         this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;
     }
     render() {
-        return (h(Host, { key: '879e1e8fa18e238e5010c45aa05c8f2649a0418d', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: 'b33603caf23e90392b7a36bf5202d6e2fff5c42b' })));
+        return (h(Host, { key: 'aa63141134ae55bb2515c87a77d8e2dd24a256b7', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: 'db466e8987218b183d39fbd64fb9936545c3015a' })));
     }
     static get style() { return PnMainnavListStyle0; }
 }, [4, "pn-mainnav-list", {

package/components/pn-mainnav-list2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,q8BAAq8B,CAAC;AAC/9B,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-list {\n  display: block;\n  overflow: visible;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  grid-area: right;\n\n  + pn-mainnav-list {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      grid-area: left;\n      border-right: 0.1rem solid $gray200;\n      margin-bottom: 1.6rem;\n      margin-right: -0.7rem;\n      padding-right: 0.7rem;\n    }\n  }\n\n  [data-level='1'] > & {\n    // height: 100%;\n    overflow: scroll;\n    -webkit-overflow-scrolling: touch;\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      display: flex;\n      flex-flow: row;\n      overflow: visible;\n      padding: 0;\n    }\n  }\n\n  &[data-navlist-showcolumns='true'] {\n    [data-level='2'] > & {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        column-count: 2;\n        column-gap: 1.6rem;\n        padding-bottom: 1.6rem;\n      }\n    }\n  }\n}\n\n.mainnav-list-heading {\n  display: none;\n  font-weight: bold;\n  column-span: all;\n  font-size: 1.8rem;\n  padding: 1.4rem 1.4rem 1.4rem 4.8rem;\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: block;\n    padding: 0 1.4rem 1.4rem 1.4rem;\n  }\n}\n","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-mainnav-list',\n  styleUrl: 'pn-mainnav-list.scss',\n  shadow: false,\n})\nexport class PnMainnavList {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = '';\n  @State() linkCount: number = 0;\n\n  componentWillLoad() {\n    this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n  }\n\n  render() {\n    return (\n      <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n        {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,8wCAA8wC,CAAC;AACxyC,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-list {\n  display: block;\n  overflow: visible;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  grid-area: right;\n\n  + pn-mainnav-list {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      grid-area: left;\n      border-right: 0.1rem solid $gray200;\n      margin-bottom: 1.6rem;\n      margin-right: -0.7rem;\n      padding-right: 0.7rem;\n    }\n  }\n\n  [data-level='1'] > & {\n    // height: 100%;\n    overflow: scroll;\n    -webkit-overflow-scrolling: touch;\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      height: 100%;\n      display: flex;\n      flex-flow: row;\n      overflow: visible;\n      padding: 0;\n    }\n  }\n\n  &[data-navlist-showcolumns='true'] {\n    [data-level='2'] > & {\n      @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n        column-count: 2;\n        column-gap: 1.6rem;\n        padding-bottom: 1.6rem;\n      }\n    }\n  }\n}\n\n.mainnav-list-heading {\n  display: none;\n  font-weight: bold;\n  column-span: all;\n  font-size: 1.8rem;\n  padding: 1.4rem 1.4rem 1.4rem 4.8rem;\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: block;\n    padding: 0 1.4rem 1.4rem 1.4rem;\n  }\n}\n","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pn-mainnav-list',\n  styleUrl: 'pn-mainnav-list.scss',\n  shadow: false,\n})\nexport class PnMainnavList {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = '';\n  @State() linkCount: number = 0;\n\n  componentWillLoad() {\n    this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n  }\n\n  render() {\n    return (\n      <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n        {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-mainnav2.js

@@ -1,9 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as state } from './pn-mainnav-store.js';
 import { b as bars } from './bars.js';
-
-const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
-const close = icon;
+import { c as close } from './close.js';
 
 const translations = {
     'sv': {
@@ -92,7 +90,7 @@ const translations = {
     },
 };
 
-const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#ffffff;z-index:2;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;display:flex;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:#005d92;color:#ffffff;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
+const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#ffffff;z-index:2;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;display:flex;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:#005d92;color:#ffffff;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
 const PnMainnavStyle0 = pnMainnavCss;
 
 const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLElement {
@@ -149,7 +147,7 @@ const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLE
         state.openLevel = event.detail;
     }
     render() {
-        return (h(Host, { key: 'd13a34a381811841b527a53ec77262cf82a6ce10' }, h("div", { key: '0569818e4e00f5c61acf668d1cd645dd7ab33502', class: "mainnav-toggle" }, h("button", { key: 'a36870ae996e7e9b628ffb935315c2b19a01e193', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'f6a892f4e8f98ca072ade0b4524589f928b7af07', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'e5abd03d559e380c3fedfb71510c64636d5f9e3e', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'c61c5e8d90097376256093317ace4619b86821ce' }))));
+        return (h(Host, { key: 'ee45da2d53216a4ce04f5937aa08199ec380b773' }, h("div", { key: '85c581ccf03871ec5f23212732355781797ce243', class: "mainnav-toggle" }, h("button", { key: '52bbbab0a0fba35918944a8fe76779e893446a7f', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'c1db0acf25dc7a53a091c6e88afeaaea15988b4f', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: '11be92d4e831c3f72e7a0e2156b15feec27d4d48', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'c4e51df22db53a7789bcf7fb0d986aea3bdb1757' }))));
     }
     static get style() { return PnMainnavStyle0; }
 }, [4, "pn-mainnav", {

package/components/pn-mainnav2.js.map

@@ -1 +1 @@
-{"file":"pn-mainnav2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/close.js","src/components/navigation/pn-mainnav/translations.ts","src/components/navigation/pn-mainnav/pn-mainnav.scss?tag=pn-mainnav","src/components/navigation/pn-mainnav/pn-mainnav.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414\" clip-rule=\"evenodd\"/></svg>';\nexport const close = icon;\n","export const translations = {\n  'sv': {\n    menuHomeButton: 'Hem',\n    menuGoBackButton: 'Gå tillbaka',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Huvudnavigation',\n  },\n  'en': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'da': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbage',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigation',\n  },\n  'no': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbake',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigasjon',\n  },\n  'de': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Geh zurück',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Start',\n    navLabel: 'Hauptnavigation',\n  },\n  'zh': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'it': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'nl': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'tr': {\n    menuHomeButton: 'Anasayfa',\n    menuGoBackButton: 'Geri git',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Başlat',\n    navLabel: 'Ana gezinme',\n  },\n  'pt': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'pl': {\n    menuHomeButton: 'Strona główna',\n    menuGoBackButton: 'Powrót',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Początek',\n    navLabel: 'Menu główne systemu',\n  },\n  'pt-BR': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Voltar',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Iniciar',\n    navLabel: 'Navegação principal',\n  },\n};\n","@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav {\n  display: flex;\n  flex-flow: row-reverse;\n  position: relative;\n  width: 100%;\n  min-height: 5.1rem;\n\n  @media screen and (min-width: $mobilenav-media-tablet) {\n    flex-flow: row;\n  }\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    flex-flow: column;\n  }\n\n  [slot='footer'] {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n    }\n  }\n  > nav {\n    height: auto;\n    width: 100vw;\n    background-color: $white;\n    z-index: 2;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    display: flex;\n    flex-flow: column;\n    visibility: hidden;\n    position: fixed;\n    top: 3em;\n    bottom: 0;\n    left: 0;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      top: 6.5em;\n    }\n\n    &[data-menu-open='true'] {\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      flex-flow: row-reverse;\n      top: 0;\n      position: static;\n      // overflow: visible;\n      height: auto;\n      width: 100%;\n      justify-content: space-between;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    a {\n      text-decoration: none;\n    }\n\n    button {\n      cursor: pointer;\n    }\n  }\n}\n\n.mainnav-toggle {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  // @media screen and (min-width: $mobilenav-media-tablet) {\n  //   align-self: center;\n  // }\n  // @media screen and (min-width: $mobilenav-media-smalldesktop) {\n  //   align-self: center;\n  // }\n\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: none;\n  }\n  > button {\n    display: flex;\n    align-items: center;\n    background-color: $blue700;\n    color: $white;\n    border-radius: 2.4rem;\n    border: none;\n    padding: 0.6rem 1.6rem;\n    cursor: pointer;\n    font-size: 1.6rem;\n\n    &:focus {\n      outline: 0;\n    }\n\n    pn-icon {\n      margin-left: 0.8rem;\n      display: block;\n    }\n\n    svg {\n      display: block;\n      margin: -0.2rem -0.5rem -0.2rem 0;\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Listen, Event, EventEmitter, Element } from '@stencil/core';\nimport { translations } from './translations';\nimport { Menui18n } from './types';\nimport state from './pn-mainnav-store';\nimport { close, bars } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav',\n  styleUrl: 'pn-mainnav.scss',\n  shadow: false,\n})\nexport class PnMainnav {\n  @Element() hostElement: HTMLElement;\n  /** Specifies which market we want to fetch navigation for (se,dk,fi,no,com) */\n  @Prop() market: string = 'se';\n  /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n  @Prop() language: string = 'sv';\n  /** Specifies which endpoint we should read information from */\n  @Prop() navigationId: string = 'mainnav';\n  /** Specifies which endpoint we should read information from */\n  @Prop({ mutable: true }) openMenu: boolean = false;\n  /** Sets the label of the navigation (Required if multiple nav elements are on a page) */\n  @Prop() navLabel: string = '';\n\n  @Event() menuLanguageChange: EventEmitter; // Could not use language change since it's a existing window event\n  @Event() marketChange: EventEmitter;\n  @Event() menuOpenChange: EventEmitter;\n\n  componentWillLoad() {\n    this.init();\n    document.removeEventListener('mousedown', this._onClickOutside.bind(this));\n    document.addEventListener('mousedown', this._onClickOutside.bind(this));\n  }\n\n  async init() {\n    this.setLanguage();\n    this.setMarket();\n  }\n\n  private _onClickOutside(event) {\n    const clickedOutside = !this.hostElement.contains(event.target);\n    if (clickedOutside) {\n      state.openLevel = '';\n    }\n  }\n\n  @Listen('language')\n  setLanguage() {\n    this.menuLanguageChange.emit(this.language);\n  }\n\n  @Listen('market')\n  setMarket() {\n    this.marketChange.emit(this.market);\n  }\n\n  @Listen('menuLanguageChange')\n  onLanguageChange(event) {\n    if (translations[event.detail]) {\n      state.i18n = translations[event.detail] as Menui18n;\n      if (!this.navLabel) {\n        this.navLabel = state.i18n.navLabel;\n      }\n    }\n  }\n\n  @Listen('setmenuopenstate')\n  setMenuOpenState() {\n    state.openMenu = !state.openMenu;\n    this.menuOpenChange.emit(state.openMenu);\n  }\n\n  @Listen('openMenuLevelChange')\n  onOpenMenuLevelChange(event) {\n    state.openLevel = event.detail;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"mainnav-toggle\">\n          <button aria-controls={this.navigationId} aria-expanded={state.openMenu + ''} onClick={this.setMenuOpenState.bind(this)}>\n            {state.i18n.mainMenuButton}\n            <pn-icon icon={state.openMenu ? close : bars} color=\"white\"></pn-icon>\n          </button>\n        </div>\n        <nav class=\"mainnav\" aria-label={this.navLabel} data-menu-open={state.openMenu + ''} data-menu-currentlevel={state.currentLevel} id={this.navigationId}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-mainnav2.js","mappings":";;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,aAAa;QAC/B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,YAAY;QAC9B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,YAAY;QAC9B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,YAAY;QAC9B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,MAAM;QACtB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,UAAU;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,QAAQ;QACzB,QAAQ,EAAE,aAAa;KACxB;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,gBAAgB;QAChC,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,iBAAiB;KAC5B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,eAAe;QAC/B,gBAAgB,EAAE,QAAQ;QAC1B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,UAAU;QAC3B,QAAQ,EAAE,qBAAqB;KAChC;IACD,OAAO,EAAE;QACP,cAAc,EAAE,gBAAgB;QAChC,gBAAgB,EAAE,QAAQ;QAC1B,cAAc,EAAE,MAAM;QACtB,eAAe,EAAE,SAAS;QAC1B,QAAQ,EAAE,qBAAqB;KAChC;CACF;;ACrFD,MAAM,YAAY,GAAG,k2DAAk2D,CAAC;AACx3D,wBAAe,YAAY;;MCUd,SAAS;;;;;;;sBAGK,IAAI;wBAEF,IAAI;4BAEA,SAAS;wBAEK,KAAK;wBAEvB,EAAE;;;IAEpB,kBAAkB,CAAe;IACjC,YAAY,CAAe;IAC3B,cAAc,CAAe;IAEtC,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACzE;IAED,MAAM,IAAI;QACR,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAEO,eAAe,CAAC,KAAK;QAC3B,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,cAAc,EAAE;YAClB,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;SACtB;KACF;IAGD,WAAW;QACT,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7C;IAGD,SAAS;QACP,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;IAGD,gBAAgB,CAAC,KAAK;QACpB,IAAI,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YAC9B,KAAK,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,CAAa,CAAC;YACpD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;aACrC;SACF;KACF;IAGD,gBAAgB;QACd,KAAK,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;IAGD,qBAAqB,CAAC,KAAK;QACzB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACzB,gFAAuB,IAAI,CAAC,YAAY,mBAAiB,KAAK,CAAC,QAAQ,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IACpH,KAAK,CAAC,IAAI,CAAC,cAAc,EAC1B,gEAAS,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,EAAE,KAAK,EAAC,OAAO,GAAW,CAC/D,CACL,EACN,4DAAK,KAAK,EAAC,SAAS,gBAAa,IAAI,CAAC,QAAQ,oBAAkB,KAAK,CAAC,QAAQ,GAAG,EAAE,4BAA0B,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,IAAI,CAAC,YAAY,IACpJ,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/translations.ts","src/components/navigation/pn-mainnav/pn-mainnav.scss?tag=pn-mainnav","src/components/navigation/pn-mainnav/pn-mainnav.tsx"],"sourcesContent":["export const translations = {\n  'sv': {\n    menuHomeButton: 'Hem',\n    menuGoBackButton: 'Gå tillbaka',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Huvudnavigation',\n  },\n  'en': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'da': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbage',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigation',\n  },\n  'no': {\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbake',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    navLabel: 'Hovednavigasjon',\n  },\n  'de': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Geh zurück',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Start',\n    navLabel: 'Hauptnavigation',\n  },\n  'zh': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'it': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'nl': {\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'tr': {\n    menuHomeButton: 'Anasayfa',\n    menuGoBackButton: 'Geri git',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Başlat',\n    navLabel: 'Ana gezinme',\n  },\n  'pt': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    navLabel: 'Main navigation',\n  },\n  'pl': {\n    menuHomeButton: 'Strona główna',\n    menuGoBackButton: 'Powrót',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Początek',\n    navLabel: 'Menu główne systemu',\n  },\n  'pt-BR': {\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Voltar',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Iniciar',\n    navLabel: 'Navegação principal',\n  },\n};\n","@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav {\n  display: flex;\n  flex-flow: row-reverse;\n  position: relative;\n  width: 100%;\n  min-height: 5.1rem;\n\n  @media screen and (min-width: $mobilenav-media-tablet) {\n    flex-flow: row;\n  }\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    flex-flow: column;\n  }\n\n  [slot='footer'] {\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      display: none;\n    }\n  }\n  > nav {\n    height: auto;\n    width: 100vw;\n    background-color: $white;\n    z-index: 2;\n    transform: translateX(100vw);\n    transition: transform 0.2s 0s;\n    transition-property: transform, visibility;\n    display: flex;\n    flex-flow: column;\n    visibility: hidden;\n    position: fixed;\n    top: 3em;\n    bottom: 0;\n    left: 0;\n    @media screen and (min-width: $mobilenav-media-tablet) {\n      top: 6.5em;\n    }\n\n    &[data-menu-open='true'] {\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n      flex-flow: row-reverse;\n      top: 0;\n      position: static;\n      // overflow: visible;\n      height: auto;\n      width: 100%;\n      justify-content: space-between;\n      visibility: visible;\n      transform: translateX(0);\n    }\n\n    a {\n      text-decoration: none;\n    }\n\n    button {\n      cursor: pointer;\n    }\n  }\n}\n\n.mainnav-toggle {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  // @media screen and (min-width: $mobilenav-media-tablet) {\n  //   align-self: center;\n  // }\n  // @media screen and (min-width: $mobilenav-media-smalldesktop) {\n  //   align-self: center;\n  // }\n\n  @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n    display: none;\n  }\n  > button {\n    display: flex;\n    align-items: center;\n    background-color: $blue700;\n    color: $white;\n    border-radius: 2.4rem;\n    border: none;\n    padding: 0.6rem 1.6rem;\n    cursor: pointer;\n    font-size: 1.6rem;\n\n    &:focus {\n      outline: 0;\n    }\n\n    pn-icon {\n      margin-left: 0.8rem;\n      display: block;\n    }\n\n    svg {\n      display: block;\n      margin: -0.2rem -0.5rem -0.2rem 0;\n      height: 1.9rem;\n      width: 1.9rem;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Listen, Event, EventEmitter, Element } from '@stencil/core';\nimport { translations } from './translations';\nimport { Menui18n } from './types';\nimport state from './pn-mainnav-store';\nimport { close, bars } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-mainnav',\n  styleUrl: 'pn-mainnav.scss',\n  shadow: false,\n})\nexport class PnMainnav {\n  @Element() hostElement: HTMLElement;\n  /** Specifies which market we want to fetch navigation for (se,dk,fi,no,com) */\n  @Prop() market: string = 'se';\n  /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n  @Prop() language: string = 'sv';\n  /** Specifies which endpoint we should read information from */\n  @Prop() navigationId: string = 'mainnav';\n  /** Specifies which endpoint we should read information from */\n  @Prop({ mutable: true }) openMenu: boolean = false;\n  /** Sets the label of the navigation (Required if multiple nav elements are on a page) */\n  @Prop() navLabel: string = '';\n\n  @Event() menuLanguageChange: EventEmitter; // Could not use language change since it's a existing window event\n  @Event() marketChange: EventEmitter;\n  @Event() menuOpenChange: EventEmitter;\n\n  componentWillLoad() {\n    this.init();\n    document.removeEventListener('mousedown', this._onClickOutside.bind(this));\n    document.addEventListener('mousedown', this._onClickOutside.bind(this));\n  }\n\n  async init() {\n    this.setLanguage();\n    this.setMarket();\n  }\n\n  private _onClickOutside(event) {\n    const clickedOutside = !this.hostElement.contains(event.target);\n    if (clickedOutside) {\n      state.openLevel = '';\n    }\n  }\n\n  @Listen('language')\n  setLanguage() {\n    this.menuLanguageChange.emit(this.language);\n  }\n\n  @Listen('market')\n  setMarket() {\n    this.marketChange.emit(this.market);\n  }\n\n  @Listen('menuLanguageChange')\n  onLanguageChange(event) {\n    if (translations[event.detail]) {\n      state.i18n = translations[event.detail] as Menui18n;\n      if (!this.navLabel) {\n        this.navLabel = state.i18n.navLabel;\n      }\n    }\n  }\n\n  @Listen('setmenuopenstate')\n  setMenuOpenState() {\n    state.openMenu = !state.openMenu;\n    this.menuOpenChange.emit(state.openMenu);\n  }\n\n  @Listen('openMenuLevelChange')\n  onOpenMenuLevelChange(event) {\n    state.openLevel = event.detail;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"mainnav-toggle\">\n          <button aria-controls={this.navigationId} aria-expanded={state.openMenu + ''} onClick={this.setMenuOpenState.bind(this)}>\n            {state.i18n.mainMenuButton}\n            <pn-icon icon={state.openMenu ? close : bars} color=\"white\"></pn-icon>\n          </button>\n        </div>\n        <nav class=\"mainnav\" aria-label={this.navLabel} data-menu-open={state.openMenu + ''} data-menu-currentlevel={state.currentLevel} id={this.navigationId}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-marketweb-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnMarketwebCarousel extends Components.PnMarketwebCarousel, HTMLElement {}
+export const PnMarketwebCarousel: {
+    prototype: PnMarketwebCarousel;
+    new (): PnMarketwebCarousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-marketweb-carousel.js

@@ -0,0 +1,8 @@
+import { P as PnMarketwebCarousel$1, d as defineCustomElement$1 } from './pn-marketweb-carousel2.js';
+
+const PnMarketwebCarousel = PnMarketwebCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMarketwebCarousel, defineCustomElement };
+
+//# sourceMappingURL=pn-marketweb-carousel.js.map

package/components/pn-marketweb-carousel.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-carousel.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}