npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.3 → 4.0.4-test - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1163) hide show

package/dist/components/pn-hero-block-international.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnHeroBlockInternationalCss = "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-hero-block-international{width:100%}.hero-international{width:100%;min-height:unset;position:relative;background:#0d234b;display:flex}@media screen and (min-width: 1200px){.hero-international{min-height:44rem}}.hero-international .hero-international__content{width:100%;margin-bottom:1.6rem;overflow-x:hidden}@media screen and (min-width: 1640px){.hero-international .hero-international__content{display:grid;grid-template-columns:1fr 1440px 1fr}}.hero-international .hero-international__content .flex-wrapper{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;grid-column:2/3;border-bottom:1px solid rgba(255, 255, 255, 0.2);display:flex;flex-direction:row;height:100%;justify-content:space-between}@media (min-width: 576px){.hero-international .hero-international__content .flex-wrapper{max-width:540px}}@media (min-width: 768px){.hero-international .hero-international__content .flex-wrapper{max-width:720px}}@media (min-width: 992px){.hero-international .hero-international__content .flex-wrapper{max-width:960px}}@media (min-width: 1200px){.hero-international .hero-international__content .flex-wrapper{max-width:1140px}}@media (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper{max-width:1440px}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper{justify-content:unset;padding:0}}.hero-international .hero-international__content .flex-wrapper .content-col{display:flex;flex-direction:column;justify-content:center;padding:4rem 0 4rem 0}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .content-col{min-width:60.2rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .content-col{min-width:100.6rem;padding:5rem 2rem 5rem 0}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:block;color:#00a0d6;font-size:1.6rem}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{font-size:1.8rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:none}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{color:#00a0d6;font-size:3.2rem;font-weight:500;line-height:1.12;font-smooth:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:1rem}.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading span{margin-top:-0.3rem;display:block;color:white;font-weight:700}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{font-size:4rem}}@media screen and (min-width: 992px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{font-size:5.6rem;margin-bottom:1.6rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{color:white;margin-bottom:0;font-weight:500;font-size:1.6rem}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{font-size:1.8rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{font-size:2rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__cta{margin-top:2.4rem}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__cta{margin-top:3.2rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col{max-width:60rem;display:none}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col{max-width:unset;display:flex;width:100%;flex-direction:column;justify-content:center}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image{height:32rem}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg{height:100%}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .cls-1{fill:#083a67;stroke-width:0}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .svg-path-style1{fill:#00a0d6;stroke-width:0}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .svg-path-style2{fill:#fff;stroke-width:0}.hero-international .hero-international__side-loader{grid-column:3/-1;display:none;flex-direction:column;justify-content:center;border-bottom:1px solid transparent;padding-left:8.8rem}@media screen and (min-width: 1640px){.hero-international .hero-international__side-loader{display:flex}}.hero-international .hero-international__side-loader .shape{background-color:rgb(8, 58, 103);height:32rem}.hero-international .hero-international__side-loader--animate{transition:transform 0.8s ease-out;transform:translateX(100%)}.hero-international .hero-international__side-loader--animate.animate-in{transform:translateX(0)}.hero-international.hero-international--centered-layout .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:block}@media screen and (min-width: 1200px){.hero-international.hero-international--centered-layout .hero-international__content .flex-wrapper .content-col{width:100%;display:flex;align-items:center;padding-right:0}}@media screen and (min-width: 1200px){.hero-international.hero-international--centered-layout .hero-international__content__heading{text-align:center}}.hero-international.hero-international--animate .hero-international__content__logo-col__image{transform:translateX(100%);transition:transform 0.5s ease-out}.hero-international.hero-international--animate .hero-international__content__logo-col__image.animate-in{transform:translateX(0)}";
+const pnHeroBlockInternationalCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-hero-block-international{width:100%}.hero-international{width:100%;min-height:unset;position:relative;background:#0d234b;display:flex}@media screen and (min-width: 1200px){.hero-international{min-height:44rem}}.hero-international .hero-international__content{width:100%;margin-bottom:1.6rem;overflow-x:hidden}@media screen and (min-width: 1640px){.hero-international .hero-international__content{display:grid;grid-template-columns:1fr 1440px 1fr}}.hero-international .hero-international__content .flex-wrapper{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;grid-column:2/3;border-bottom:1px solid rgba(255, 255, 255, 0.2);display:flex;flex-direction:row;height:100%;justify-content:space-between}@media (min-width: 576px){.hero-international .hero-international__content .flex-wrapper{max-width:540px}}@media (min-width: 768px){.hero-international .hero-international__content .flex-wrapper{max-width:720px}}@media (min-width: 992px){.hero-international .hero-international__content .flex-wrapper{max-width:960px}}@media (min-width: 1200px){.hero-international .hero-international__content .flex-wrapper{max-width:1140px}}@media (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper{max-width:1440px}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper{justify-content:unset;padding:0}}.hero-international .hero-international__content .flex-wrapper .content-col{display:flex;flex-direction:column;justify-content:center;padding:4rem 0 4rem 0}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .content-col{min-width:60.2rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .content-col{min-width:100.6rem;padding:5rem 2rem 5rem 0}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:block;color:#00a0d6;font-size:1.6rem}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{font-size:1.8rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:none}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{color:#00a0d6;font-size:3.2rem;font-weight:500;line-height:1.12;font-smooth:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:1rem}.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading span{margin-top:-0.3rem;display:block;color:white;font-weight:700}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{font-size:4rem}}@media screen and (min-width: 992px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__heading{font-size:5.6rem;margin-bottom:1.6rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{color:white;margin-bottom:0;font-weight:500;font-size:1.6rem}@media screen and (min-width: 768px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{font-size:1.8rem}}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__preamble{font-size:2rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__cta{margin-top:2.4rem}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__cta{margin-top:3.2rem}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col{max-width:60rem;display:none}@media screen and (min-width: 1640px){.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col{max-width:unset;display:flex;width:100%;flex-direction:column;justify-content:center}}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image{height:32rem}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg{height:100%}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .cls-1{fill:#083a67;stroke-width:0}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .svg-path-style1{fill:#00a0d6;stroke-width:0}.hero-international .hero-international__content .flex-wrapper .hero-international__content__logo-col .hero-international__content__logo-col__image svg .svg-path-style2{fill:#fff;stroke-width:0}.hero-international .hero-international__side-loader{grid-column:3/-1;display:none;flex-direction:column;justify-content:center;border-bottom:1px solid transparent;padding-left:8.8rem}@media screen and (min-width: 1640px){.hero-international .hero-international__side-loader{display:flex}}.hero-international .hero-international__side-loader .shape{background-color:rgb(8, 58, 103);height:32rem}.hero-international .hero-international__side-loader--animate{transition:transform 0.8s ease-out;transform:translateX(100%)}.hero-international .hero-international__side-loader--animate.animate-in{transform:translateX(0)}.hero-international.hero-international--centered-layout .hero-international__content .flex-wrapper .hero-international__content__site-tag{display:block}@media screen and (min-width: 1200px){.hero-international.hero-international--centered-layout .hero-international__content .flex-wrapper .content-col{width:100%;display:flex;align-items:center;padding-right:0}}@media screen and (min-width: 1200px){.hero-international.hero-international--centered-layout .hero-international__content__heading{text-align:center}}.hero-international.hero-international--animate .hero-international__content__logo-col__image{transform:translateX(100%);transition:transform 0.5s ease-out}.hero-international.hero-international--animate .hero-international__content__logo-col__image.animate-in{transform:translateX(0)}";
 const PnHeroBlockInternationalStyle0 = pnHeroBlockInternationalCss;
 const PnHeroBlockInternational$1 = /*@__PURE__*/ proxyCustomElement(class PnHeroBlockInternational extends HTMLElement {
@@ -34,7 +34,7 @@ const PnHeroBlockInternational$1 = /*@__PURE__*/ proxyCustomElement(class PnHero
         }
     }
     render() {
-        return (h(Host, { key: '29a1cbf6af742f1c9a7b5cc3554600c46e8d9385', class: `hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}` }, h("div", { key: '80efe44f05675ceaba7533ff198f8697565c5638', class: "hero-international__content" }, h("div", { key: '8a7523d6354528218e36c98ad9445c13b4637f80', class: "flex-wrapper" }, h("div", { key: '9cf9f7758c031b2ff7f54c07c9467894cc5d8ffe', class: "content-col" }, h("span", { key: 'cdca9a270bb61f15cde5da19bf7dda780e4895bf', class: "hero-international__content__site-tag" }, "International"), h("h1", { key: '4068c56efd71f7692ba3341899e6820b77ca12ab', class: "hero-international__content__heading" }, this.heading, " ", h("span", { key: 'dd74bfe566c7225f8f30d786512e23f3b5bdb209' }, this.subHeading)), h("p", { key: 'aeb3a5b81b381c4306aea57b28c9fc32f4e845ad', class: "hero-international__content__preamble" }, this.preamble), this.hasCtaButtonSlot && (h("div", { key: '3c00c3fbc7fd42a08735f17ba1ef8dc56bc5cb7b', class: "hero-international__content__cta" }, h("slot", { key: '58f9a63a04f29170126425029625c477c31cd73b', name: "hero-international-cta" })))), !this.centeredLayout && (h("div", { key: '0a659dcad26ebd0a6ac1e7d9f86c7968eda41df0', class: "hero-international__content__logo-col" }, h("div", { key: '8261a17c77ee5b18874c56a41361d7d3e4dd772d', class: "hero-international__content__logo-col__image" }, h("svg", { key: 'd404ad512ea0bebc2cc5b5e0df4404c6125dadfa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 919 336" }, h("circle", { key: '28106848da1e8364bc43fe8d591154342f71e75b', class: "cls-1", cx: "168", cy: "168", r: "168" }), h("circle", { key: '565176e62b896455941315643289d97a39baf62b', class: "cls-1", cx: "519", cy: "168", r: "168" }), h("path", { key: '0da027ee8c90501749291a00b37b2df8879e8632', class: "cls-1", d: "M510 0h409v336H510z" }), h("path", { key: 'cb1637d901d59f116557a9b134929bf0988e3192', d: "M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z", class: "svg-path-style2" }), h("path", { key: '258b567b1f39d98caea0e082ae372336ee19ef59', d: "M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z", class: "svg-path-style1" })))))), this.showSideLoader && !this.centeredLayout && (h("div", { key: '63b24b9a3b124781977bd6026511bf5fdb30c105', class: `hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}` }, h("div", { key: '17ba19d5ced4d5cf6a000c01742a31cd91a5c877', class: "shape" }))))));
+        return (h(Host, { key: 'febccdeed45fdfd3e8f6ae91da584339f34ff574', class: `hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}` }, h("div", { key: '5980b48b2c0f1310ef92e1314b1b87cce0bfb560', class: "hero-international__content" }, h("div", { key: '6b7cfa9f6c93ed374288677f0e5fbbd31d94fa57', class: "flex-wrapper" }, h("div", { key: 'e9f8d7c57040ae943a4564c20e0364f7a3bdeea6', class: "content-col" }, h("span", { key: 'a34c11674a6e535dfef5ab3c2f216328979789f9', class: "hero-international__content__site-tag" }, "International"), h("h1", { key: '03b0f086c0dc0d7565a4f9664f330b6e5b1ee786', class: "hero-international__content__heading" }, this.heading, " ", h("span", { key: '5b4d052b5bce78001ac39568c3e7cfdf3ddf6ea8' }, this.subHeading)), h("p", { key: '92bf6edca10040a2fe4dd88eb5dd77da3d375bbc', class: "hero-international__content__preamble" }, this.preamble), this.hasCtaButtonSlot && (h("div", { key: '35f4800ea79d06346e1a27346d53d5e25cb445f1', class: "hero-international__content__cta" }, h("slot", { key: 'd738b6589da73282378e2544d1198368ece704c8', name: "hero-international-cta" })))), !this.centeredLayout && (h("div", { key: '9412149e00325d7dca22ef29829939b6bae008a5', class: "hero-international__content__logo-col" }, h("div", { key: 'b0bd6c4467d582f9be43840919648287cb77f779', class: "hero-international__content__logo-col__image" }, h("svg", { key: '595df22576f8622525c51637fb0a8b823dbec86c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 919 336" }, h("circle", { key: 'aa1a9e3cb6ae874b10d870cd6666bccf71907b59', class: "cls-1", cx: "168", cy: "168", r: "168" }), h("circle", { key: 'f9212008a51d07ad212c0fa01fa4da12b116c9a1', class: "cls-1", cx: "519", cy: "168", r: "168" }), h("path", { key: 'c13f449f9eb865b974e35863be8656cce3345eed', class: "cls-1", d: "M510 0h409v336H510z" }), h("path", { key: '67bb3f1f4c804e8431837d7feb39f4a99c8563d0', d: "M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z", class: "svg-path-style2" }), h("path", { key: '70013f0febe40cc8ca802957d0ee3f91653a2b30', d: "M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z", class: "svg-path-style1" })))))), this.showSideLoader && !this.centeredLayout && (h("div", { key: 'c8ce62511215b868a66f3291743e58b9cddcf56c', class: `hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}` }, h("div", { key: '53d8141497503bf7b50b5fe47e1242f8d32af2ce', class: "shape" }))))));
     }
     static get style() { return PnHeroBlockInternationalStyle0; }
 }, [4, "pn-hero-block-international", {

package/dist/components/pn-hero-block-international.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-hero-block-international.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,0vNAA0vN,CAAC;AAC/xN,uCAAe,2BAA2B;;MCK7BA,0BAAwB;;;;uBAGT,IAAI;0BACD,IAAI;wBACN,IAAI;2BACA,KAAK;8BACF,IAAI;8BACJ,KAAK;;;IAE/B,gBAAgB,GAAY,KAAK,CAAC;IAClC,iBAAiB,GAAY,KAAK,CAAC;IAE3C,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;KAC7F;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+CAA+C,CAAC,CAAC;YAC9F,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,2CAA2C,CAAC,CAAC;YAC/F,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAE9B,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACnC;YACD,IAAI,UAAU,EAAE;gBACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACxC;SACF;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,cAAc,GAAG,qCAAqC,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,6BAA6B,GAAG,EAAE,EAAE,IAC5J,4DAAK,KAAK,EAAC,6BAA6B,IACtC,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,KAAK,EAAC,uCAAuC,oBAAqB,EACxE,2DAAI,KAAK,EAAC,sCAAsC,IAC7C,IAAI,CAAC,OAAO,OAAE,+DAAO,IAAI,CAAC,UAAU,CAAQ,CAC1C,EACL,0DAAG,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,QAAQ,CAAK,EAEnE,IAAI,CAAC,gBAAgB,KACpB,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,wBAAwB,GAAQ,CACvC,CACP,CACG,EAEL,CAAC,IAAI,CAAC,cAAc,KACnB,4DAAK,KAAK,EAAC,uCAAuC,IAChD,4DAAK,KAAK,EAAC,8CAA8C,IACvD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,IAC3D,+DAAQ,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAE,EACjD,+DAAQ,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAE,EACjD,6DAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,qBAAqB,GAAE,EAC7C,6DAAM,CAAC,EAAC,koDAAkoD,EAAC,KAAK,EAAC,iBAAiB,GAAE,EACpqD,6DAAM,CAAC,EAAC,47DAA47D,EAAC,KAAK,EAAC,iBAAiB,GAAE,CAC19D,CACF,CACF,CACP,CACG,EAEL,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,KAC1C,4DAAK,KAAK,EAAE,mCAAmC,IAAI,CAAC,iBAAiB,GAAG,0CAA0C,GAAG,EAAE,EAAE,IACvH,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnHeroBlockInternational"],"sources":["src/components/widgets/pn-hero-block-international/pn-hero-block-international.scss?tag=pn-hero-block-international","src/components/widgets/pn-hero-block-international/pn-hero-block-international.tsx"],"sourcesContent":["@import \"../../../globals/main.scss\";\n\n$animationTransitionTime: .8s;\n$internationalAlternativeBlue: rgba(8, 58, 103, 1);\n\npn-hero-block-international {\n width: 100%;\n}\n\n.hero-international {\n width: 100%;\n min-height: unset;\n position: relative;\n background: $blue900;\n display: flex;\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 44rem;\n }\n\n .hero-international__content {\n width: 100%;\n margin-bottom: 1.6rem;\n overflow-x: hidden;\n\n @media screen and (min-width: $min-width-xxl) {\n display: grid;\n grid-template-columns: 1fr $max-width-xxl 1fr;\n }\n\n .flex-wrapper {\n @include inner-container;\n grid-column: 2 / 3;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n flex-direction: row;\n height: 100%;\n justify-content: space-between;\n\n @media screen and (min-width: $min-width-xxl) {\n justify-content: unset;\n padding: 0;\n }\n\n .content-col {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 4rem 0 4rem 0;\n\n @media screen and (min-width: $min-width-md) {\n min-width: 60.2rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n min-width: 100.6rem;\n padding: 5rem 2rem 5rem 0;\n }\n }\n\n .hero-international__content__site-tag {\n display: block;\n color: $blue400;\n font-size: 1.6rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 1.8rem\n }\n\n @media screen and (min-width: $min-width-xxl) {\n display: none;\n }\n }\n\n .hero-international__content__heading {\n color: $blue400;\n font-size: 3.2rem;\n font-weight: 500;\n line-height: 1.12;\n font-smooth: never;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin-bottom: 1rem;\n\n span {\n margin-top: -0.3rem;\n display: block;\n color: white;\n font-weight: 700;\n }\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4rem;\n }\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n margin-bottom: 1.6rem;\n }\n }\n\n .hero-international__content__preamble {\n color: white;\n margin-bottom: 0;\n font-weight: 500;\n font-size: 1.6rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 1.8rem\n }\n @media screen and (min-width: $min-width-xxl) {\n font-size: 2rem\n }\n }\n\n .hero-international__content__cta {\n margin-top: 2.4rem;\n\n @media screen and (min-width: $min-width-xxl) {\n margin-top: 3.2rem;\n }\n }\n\n .hero-international__content__logo-col {\n max-width: 60rem;\n display: none;\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: unset;\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n }\n\n .hero-international__content__logo-col__image {\n height: 32rem;\n\n svg {\n height: 100%;\n\n .cls-1 {\n fill:#083a67;\n stroke-width:0;\n }\n .svg-path-style1 {\n fill:#00a0d6;\n stroke-width:0;\n }\n .svg-path-style2 {\n fill:#fff;\n stroke-width:0;\n }\n }\n }\n }\n }\n }\n\n .hero-international__side-loader {\n grid-column: 3 / -1;\n display: none;\n flex-direction: column;\n justify-content: center;\n border-bottom: 1px solid transparent;\n padding-left: 8.8rem;\n\n @media screen and (min-width: $min-width-xxl) {\n display: flex;\n }\n\n .shape {\n background-color: $internationalAlternativeBlue;\n height: 32rem;\n }\n }\n\n .hero-international__side-loader--animate {\n transition: transform $animationTransitionTime ease-out;\n transform: translateX(100%);\n\n &.animate-in {\n transform: translateX(0);\n }\n }\n}\n\n.hero-international.hero-international--centered-layout {\n .hero-international__content .flex-wrapper {\n .hero-international__content__site-tag {\n display: block;\n }\n }\n\n .hero-international__content .flex-wrapper .content-col {\n @media screen and (min-width: $min-width-xl) {\n width: 100%;\n display: flex;\n align-items: center;\n padding-right: 0;\n }\n }\n\n .hero-international__content__heading {\n @media screen and (min-width: $min-width-xl) {\n text-align: center;\n }\n }\n}\n\n.hero-international.hero-international--animate {\n .hero-international__content__logo-col__image {\n transform: translateX(100%);\n transition: transform $animationTransitionTime - 0.3 ease-out;\n\n &.animate-in {\n transform: translateX(0);\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-hero-block-international',\n styleUrl: 'pn-hero-block-international.scss',\n})\nexport class PnHeroBlockInternational {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() subHeading: string = null;\n @Prop() preamble: string = null;\n @Prop() animateLogo: boolean = false;\n @Prop() showSideLoader: boolean = true;\n @Prop() centeredLayout: boolean = false;\n\n private hasCtaButtonSlot: boolean = false;\n private animateSideloader: boolean = false;\n\n async componentWillLoad() {\n this.hasCtaButtonSlot = !!this.hostElement.querySelector('[slot=\"hero-international-cta\"]');\n }\n\n componentDidLoad() {\n if (this.animateLogo) {\n const image = this.hostElement.querySelector('.hero-international__content__logo-col__image');\n const sideLoader = this.hostElement.querySelector('.hero-international__side-loader--animate');\n this.animateSideloader = true;\n\n if (image) {\n image.classList.add('animate-in');\n }\n if (sideLoader) {\n sideLoader.classList.add('animate-in');\n }\n }\n }\n\n render() {\n return (\n <Host class={`hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}`}>\n <div class=\"hero-international__content\">\n <div class=\"flex-wrapper\">\n <div class=\"content-col\">\n <span class=\"hero-international__content__site-tag\">International</span>\n <h1 class=\"hero-international__content__heading\">\n {this.heading} <span>{this.subHeading}</span>\n </h1>\n <p class=\"hero-international__content__preamble\">{this.preamble}</p>\n\n {this.hasCtaButtonSlot && (\n <div class=\"hero-international__content__cta\">\n <slot name=\"hero-international-cta\"></slot>\n </div>\n )}\n </div>\n\n {!this.centeredLayout && (\n <div class=\"hero-international__content__logo-col\">\n <div class=\"hero-international__content__logo-col__image\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 919 336\">\n <circle class=\"cls-1\" cx=\"168\" cy=\"168\" r=\"168\"/>\n <circle class=\"cls-1\" cx=\"519\" cy=\"168\" r=\"168\"/>\n <path class=\"cls-1\" d=\"M510 0h409v336H510z\"/>\n <path d=\"M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z\" class=\"svg-path-style2\"/>\n <path d=\"M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z\" class=\"svg-path-style1\"/>\n </svg>\n </div>\n </div>\n )}\n </div>\n\n {this.showSideLoader && !this.centeredLayout && (\n <div class={`hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}`}>\n <div class=\"shape\"></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-hero-block-international.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,i7MAAi7M,CAAC;AACt9M,uCAAe,2BAA2B;;MCK7BA,0BAAwB;;;;uBAGT,IAAI;0BACD,IAAI;wBACN,IAAI;2BACA,KAAK;8BACF,IAAI;8BACJ,KAAK;;;IAE/B,gBAAgB,GAAY,KAAK,CAAC;IAClC,iBAAiB,GAAY,KAAK,CAAC;IAE3C,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;KAC7F;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+CAA+C,CAAC,CAAC;YAC9F,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,2CAA2C,CAAC,CAAC;YAC/F,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAE9B,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACnC;YACD,IAAI,UAAU,EAAE;gBACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aACxC;SACF;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,cAAc,GAAG,qCAAqC,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,6BAA6B,GAAG,EAAE,EAAE,IAC5J,4DAAK,KAAK,EAAC,6BAA6B,IACtC,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,KAAK,EAAC,uCAAuC,oBAAqB,EACxE,2DAAI,KAAK,EAAC,sCAAsC,IAC7C,IAAI,CAAC,OAAO,OAAE,+DAAO,IAAI,CAAC,UAAU,CAAQ,CAC1C,EACL,0DAAG,KAAK,EAAC,uCAAuC,IAAE,IAAI,CAAC,QAAQ,CAAK,EAEnE,IAAI,CAAC,gBAAgB,KACpB,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,wBAAwB,GAAQ,CACvC,CACP,CACG,EAEL,CAAC,IAAI,CAAC,cAAc,KACnB,4DAAK,KAAK,EAAC,uCAAuC,IAChD,4DAAK,KAAK,EAAC,8CAA8C,IACvD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,IAC3D,+DAAQ,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAE,EACjD,+DAAQ,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAE,EACjD,6DAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,qBAAqB,GAAE,EAC7C,6DAAM,CAAC,EAAC,koDAAkoD,EAAC,KAAK,EAAC,iBAAiB,GAAE,EACpqD,6DAAM,CAAC,EAAC,47DAA47D,EAAC,KAAK,EAAC,iBAAiB,GAAE,CAC19D,CACF,CACF,CACP,CACG,EAEL,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,KAC1C,4DAAK,KAAK,EAAE,mCAAmC,IAAI,CAAC,iBAAiB,GAAG,0CAA0C,GAAG,EAAE,EAAE,IACvH,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnHeroBlockInternational"],"sources":["src/components/widgets/pn-hero-block-international/pn-hero-block-international.scss?tag=pn-hero-block-international","src/components/widgets/pn-hero-block-international/pn-hero-block-international.tsx"],"sourcesContent":["@import \"../../../globals/main.scss\";\n\n$animationTransitionTime: .8s;\n$internationalAlternativeBlue: rgba(8, 58, 103, 1);\n\npn-hero-block-international {\n width: 100%;\n}\n\n.hero-international {\n width: 100%;\n min-height: unset;\n position: relative;\n background: $blue900;\n display: flex;\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 44rem;\n }\n\n .hero-international__content {\n width: 100%;\n margin-bottom: 1.6rem;\n overflow-x: hidden;\n\n @media screen and (min-width: $min-width-xxl) {\n display: grid;\n grid-template-columns: 1fr $max-width-xxl 1fr;\n }\n\n .flex-wrapper {\n @include inner-container;\n grid-column: 2 / 3;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n flex-direction: row;\n height: 100%;\n justify-content: space-between;\n\n @media screen and (min-width: $min-width-xxl) {\n justify-content: unset;\n padding: 0;\n }\n\n .content-col {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 4rem 0 4rem 0;\n\n @media screen and (min-width: $min-width-md) {\n min-width: 60.2rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n min-width: 100.6rem;\n padding: 5rem 2rem 5rem 0;\n }\n }\n\n .hero-international__content__site-tag {\n display: block;\n color: $blue400;\n font-size: 1.6rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 1.8rem\n }\n\n @media screen and (min-width: $min-width-xxl) {\n display: none;\n }\n }\n\n .hero-international__content__heading {\n color: $blue400;\n font-size: 3.2rem;\n font-weight: 500;\n line-height: 1.12;\n font-smooth: never;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin-bottom: 1rem;\n\n span {\n margin-top: -0.3rem;\n display: block;\n color: white;\n font-weight: 700;\n }\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4rem;\n }\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n margin-bottom: 1.6rem;\n }\n }\n\n .hero-international__content__preamble {\n color: white;\n margin-bottom: 0;\n font-weight: 500;\n font-size: 1.6rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 1.8rem\n }\n @media screen and (min-width: $min-width-xxl) {\n font-size: 2rem\n }\n }\n\n .hero-international__content__cta {\n margin-top: 2.4rem;\n\n @media screen and (min-width: $min-width-xxl) {\n margin-top: 3.2rem;\n }\n }\n\n .hero-international__content__logo-col {\n max-width: 60rem;\n display: none;\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: unset;\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n }\n\n .hero-international__content__logo-col__image {\n height: 32rem;\n\n svg {\n height: 100%;\n\n .cls-1 {\n fill:#083a67;\n stroke-width:0;\n }\n .svg-path-style1 {\n fill:#00a0d6;\n stroke-width:0;\n }\n .svg-path-style2 {\n fill:#fff;\n stroke-width:0;\n }\n }\n }\n }\n }\n }\n\n .hero-international__side-loader {\n grid-column: 3 / -1;\n display: none;\n flex-direction: column;\n justify-content: center;\n border-bottom: 1px solid transparent;\n padding-left: 8.8rem;\n\n @media screen and (min-width: $min-width-xxl) {\n display: flex;\n }\n\n .shape {\n background-color: $internationalAlternativeBlue;\n height: 32rem;\n }\n }\n\n .hero-international__side-loader--animate {\n transition: transform $animationTransitionTime ease-out;\n transform: translateX(100%);\n\n &.animate-in {\n transform: translateX(0);\n }\n }\n}\n\n.hero-international.hero-international--centered-layout {\n .hero-international__content .flex-wrapper {\n .hero-international__content__site-tag {\n display: block;\n }\n }\n\n .hero-international__content .flex-wrapper .content-col {\n @media screen and (min-width: $min-width-xl) {\n width: 100%;\n display: flex;\n align-items: center;\n padding-right: 0;\n }\n }\n\n .hero-international__content__heading {\n @media screen and (min-width: $min-width-xl) {\n text-align: center;\n }\n }\n}\n\n.hero-international.hero-international--animate {\n .hero-international__content__logo-col__image {\n transform: translateX(100%);\n transition: transform $animationTransitionTime - 0.3 ease-out;\n\n &.animate-in {\n transform: translateX(0);\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-hero-block-international',\n styleUrl: 'pn-hero-block-international.scss',\n})\nexport class PnHeroBlockInternational {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() subHeading: string = null;\n @Prop() preamble: string = null;\n @Prop() animateLogo: boolean = false;\n @Prop() showSideLoader: boolean = true;\n @Prop() centeredLayout: boolean = false;\n\n private hasCtaButtonSlot: boolean = false;\n private animateSideloader: boolean = false;\n\n async componentWillLoad() {\n this.hasCtaButtonSlot = !!this.hostElement.querySelector('[slot=\"hero-international-cta\"]');\n }\n\n componentDidLoad() {\n if (this.animateLogo) {\n const image = this.hostElement.querySelector('.hero-international__content__logo-col__image');\n const sideLoader = this.hostElement.querySelector('.hero-international__side-loader--animate');\n this.animateSideloader = true;\n\n if (image) {\n image.classList.add('animate-in');\n }\n if (sideLoader) {\n sideLoader.classList.add('animate-in');\n }\n }\n }\n\n render() {\n return (\n <Host class={`hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}`}>\n <div class=\"hero-international__content\">\n <div class=\"flex-wrapper\">\n <div class=\"content-col\">\n <span class=\"hero-international__content__site-tag\">International</span>\n <h1 class=\"hero-international__content__heading\">\n {this.heading} <span>{this.subHeading}</span>\n </h1>\n <p class=\"hero-international__content__preamble\">{this.preamble}</p>\n\n {this.hasCtaButtonSlot && (\n <div class=\"hero-international__content__cta\">\n <slot name=\"hero-international-cta\"></slot>\n </div>\n )}\n </div>\n\n {!this.centeredLayout && (\n <div class=\"hero-international__content__logo-col\">\n <div class=\"hero-international__content__logo-col__image\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 919 336\">\n <circle class=\"cls-1\" cx=\"168\" cy=\"168\" r=\"168\"/>\n <circle class=\"cls-1\" cx=\"519\" cy=\"168\" r=\"168\"/>\n <path class=\"cls-1\" d=\"M510 0h409v336H510z\"/>\n <path d=\"M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z\" class=\"svg-path-style2\"/>\n <path d=\"M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z\" class=\"svg-path-style1\"/>\n </svg>\n </div>\n </div>\n )}\n </div>\n\n {this.showSideLoader && !this.centeredLayout && (\n <div class={`hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}`}>\n <div class=\"shape\"></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-language-selector-option2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const pnLanguageSelectorOptionCss = "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-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-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#ffffff;color:#005d92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0d234b;text-decoration:underline;box-shadow:none;background-color:#f3f2f2;color:#005d92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005d92}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
+const pnLanguageSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#ffffff;color:#005d92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0d234b;text-decoration:underline;box-shadow:none;background-color:#f3f2f2;color:#005d92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005d92}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
 const PnLanguageSelectorOptionStyle0 = pnLanguageSelectorOptionCss;
 const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelectorOption extends HTMLElement {
@@ -31,7 +31,7 @@ const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class Pnlangua
         }
     }
     render() {
-        return (h(Host, { key: 'f24941e75c88762e6e8830663ab344efca028dc7', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
+        return (h(Host, { key: 'ae250a767da3c3d1abcc4ff296f3873357431ce1', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
     }
     static get style() { return PnLanguageSelectorOptionStyle0; }
 }, [0, "pn-language-selector-option", {

package/dist/components/pn-language-selector-option2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,~~g4EAAg4E~~,CAAC;~~AACr6E~~,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\npn-language-selector-option {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.languageselector-button,\n.languageselector-link {\n width: 100%;\n padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n border: 0;\n cursor: pointer;\n background-color: $white;\n color: $blue700;\n font-size: 1.6rem;\n font-weight: bold;\n border-radius: 0;\n &:hover,\n &:focus,\n &:active {\n color: $blue900;\n text-decoration: underline;\n box-shadow: none;\n background-color: $gray50;\n color: $blue700;\n outline: none;\n }\n}\n\n.languageselector-itemtext {\n display: inline-block;\n margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n background: #fff;\n border: 0.1em solid $gray200;\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n transition:\n border 0.2s ease-in-out,\n background-color 0.2s ease-in-out,\n box-shadow 0.1s;\n cursor: pointer;\n\n &:focus > &,\n &:active > & {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem $blue700;\n }\n &:hover > & {\n border: 0.1rem solid $blue700;\n background: $blue50;\n }\n [selected='true'] & {\n border: 0.1rem solid $blue700;\n }\n}\n\n.languageselector-radio-inner {\n transform: scale(0);\n height: 1em;\n width: 1em;\n background-color: $blue700;\n border-radius: 50%;\n transform-origin: center center;\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n [selected='true'] & {\n transform: scale(1);\n }\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n tag: 'pn-language-selector-option',\n styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() name: string = '';\n @Prop() code: string = '';\n @Prop() url: string = '';\n @Prop() selected: boolean = false;\n @Prop() currentLanguage: string;\n\n private spanEl!: HTMLElement;\n\n @Event() setCurrentLanguage: EventEmitter;\n onOptionClick() {\n const currentlanguage: LanguageSelectorOption = {\n name: this.name,\n code: this.code,\n url: this.url,\n current: true,\n };\n this.setCurrentLanguage.emit(currentlanguage);\n }\n\n componentDidLoad() {\n if (this.spanEl) {\n this.spanEl.setAttribute(\"xml:lang\", this.code);\n }\n }\n\n render() {\n return (\n <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n {!this.url ? (\n <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </button>\n ) : (\n <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,8uDAA8uD,CAAC;AACnxD,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\npn-language-selector-option {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.languageselector-button,\n.languageselector-link {\n width: 100%;\n padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n border: 0;\n cursor: pointer;\n background-color: $white;\n color: $blue700;\n font-size: 1.6rem;\n font-weight: bold;\n border-radius: 0;\n &:hover,\n &:focus,\n &:active {\n color: $blue900;\n text-decoration: underline;\n box-shadow: none;\n background-color: $gray50;\n color: $blue700;\n outline: none;\n }\n}\n\n.languageselector-itemtext {\n display: inline-block;\n margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n background: #fff;\n border: 0.1em solid $gray200;\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n transition:\n border 0.2s ease-in-out,\n background-color 0.2s ease-in-out,\n box-shadow 0.1s;\n cursor: pointer;\n\n &:focus > &,\n &:active > & {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem $blue700;\n }\n &:hover > & {\n border: 0.1rem solid $blue700;\n background: $blue50;\n }\n [selected='true'] & {\n border: 0.1rem solid $blue700;\n }\n}\n\n.languageselector-radio-inner {\n transform: scale(0);\n height: 1em;\n width: 1em;\n background-color: $blue700;\n border-radius: 50%;\n transform-origin: center center;\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n [selected='true'] & {\n transform: scale(1);\n }\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n tag: 'pn-language-selector-option',\n styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() name: string = '';\n @Prop() code: string = '';\n @Prop() url: string = '';\n @Prop() selected: boolean = false;\n @Prop() currentLanguage: string;\n\n private spanEl!: HTMLElement;\n\n @Event() setCurrentLanguage: EventEmitter;\n onOptionClick() {\n const currentlanguage: LanguageSelectorOption = {\n name: this.name,\n code: this.code,\n url: this.url,\n current: true,\n };\n this.setCurrentLanguage.emit(currentlanguage);\n }\n\n componentDidLoad() {\n if (this.spanEl) {\n this.spanEl.setAttribute(\"xml:lang\", this.code);\n }\n }\n\n render() {\n return (\n <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n {!this.url ? (\n <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </button>\n ) : (\n <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-language-selector2.js CHANGED Viewed

@@ -51,7 +51,7 @@ const translations = {
     },
 };
-const pnLanguageSelectorCss = "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-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-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#ffffff;color:#005d92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0d234b;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:flex;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
+const pnLanguageSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#ffffff;color:#005d92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0d234b;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:flex;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
 const PnLanguageSelectorStyle0 = pnLanguageSelectorCss;
 const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelector extends HTMLElement {
@@ -136,7 +136,7 @@ const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSele
         });
     }
     render() {
-        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: '2dffb2112ec6a67af450c1e3471fbe6f1183b1ad', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '40f9c5ea57162c02d64d12249eabd96184d6d506', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
+        return (h(Host, { key: 'f91e9ba30c8927915229c61c1ba43f598f1dafdb', value: this.value }, h("pn-button-dropdown", { key: '97cbfbd22d92977dd9bddf0927d45ccfd27dff06', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '4563758488a5db6ac9d14fefc1581638385874fa', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: 'f81995ae5607fae035177b9c342de30230d9c3ac', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'ae2d0dc93918a3a2817c5848ae2bb2b90fb72736', class: "languageselector-list", role: "list" }, h("slot", { key: 'da75dde68e3c72cab5161e745555df47d39374fc' }))))));
     }
     static get watchers() { return {
         "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]

package/dist/components/pn-language-selector2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-language-selector2.js","mappings":";;AAAA,MAAM,IAAI,GAAG,00BAA00B,CAAC;AACj1B,MAAM,KAAK,GAAG,IAAI;;ACDlB,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;KACpB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;KACnB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;KACf;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;KACrB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;KACrB;CACF;;AC9CD,MAAM,qBAAqB,GAAG,~~60CAA60C~~,CAAC;~~AAC52C~~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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.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.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n 'sv': {\n heading: 'Språk',\n },\n 'en': {\n heading: 'Language',\n },\n 'da': {\n heading: 'Sprog',\n },\n 'no': {\n heading: 'Språk',\n },\n 'fi': {\n heading: 'Kieli',\n },\n 'de': {\n heading: 'Sprache',\n },\n 'zh': {\n heading: '语言',\n },\n 'fr': {\n heading: 'Langue',\n },\n 'es': {\n heading: 'Idioma',\n },\n 'nl': {\n heading: 'Spraak',\n },\n 'it': {\n heading: 'Idioma',\n },\n 'tr': {\n heading: 'Dil',\n },\n 'pl': {\n heading: 'Język',\n },\n 'pt': {\n heading: 'Linguagem',\n },\n 'pt-BR': {\n heading: 'Linguagem',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\npn-language-selector {\n max-height: 5.2rem;\n}\n.languageselector {\n position: relative;\n}\n\n.languageselector-togglebtn {\n cursor: pointer;\n border: 0;\n padding: 0.64rem 0;\n background-color: $white;\n color: $blue700;\n font-size: 1.6rem;\n &:hover,\n &:focus,\n &:active {\n color: $blue900;\n text-decoration: underline;\n }\n svg {\n width: 1.9rem;\n height: 1.9rem;\n }\n}\n\n.languageselector-nav {\n}\n\n.languageselector-title {\n padding: 0.8rem 1.6rem;\n display: flex;\n align-items: center;\n}\n\n.languageselector-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n","import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\">\n <div class=\"languageselector-nav\" aria-label={this.i18n.heading}>\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-language-selector2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.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.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n 'sv': {\n heading: 'Språk',\n },\n 'en': {\n heading: 'Language',\n },\n 'da': {\n heading: 'Sprog',\n },\n 'no': {\n heading: 'Språk',\n },\n 'fi': {\n heading: 'Kieli',\n },\n 'de': {\n heading: 'Sprache',\n },\n 'zh': {\n heading: '语言',\n },\n 'fr': {\n heading: 'Langue',\n },\n 'es': {\n heading: 'Idioma',\n },\n 'nl': {\n heading: 'Spraak',\n },\n 'it': {\n heading: 'Idioma',\n },\n 'tr': {\n heading: 'Dil',\n },\n 'pl': {\n heading: 'Język',\n },\n 'pt': {\n heading: 'Linguagem',\n },\n 'pt-BR': {\n heading: 'Linguagem',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\npn-language-selector {\n max-height: 5.2rem;\n}\n.languageselector {\n position: relative;\n}\n\n.languageselector-togglebtn {\n cursor: pointer;\n border: 0;\n padding: 0.64rem 0;\n background-color: $white;\n color: $blue700;\n font-size: 1.6rem;\n &:hover,\n &:focus,\n &:active {\n color: $blue900;\n text-decoration: underline;\n }\n svg {\n width: 1.9rem;\n height: 1.9rem;\n }\n}\n\n.languageselector-nav {\n}\n\n.languageselector-title {\n padding: 0.8rem 1.6rem;\n display: flex;\n align-items: center;\n}\n\n.languageselector-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n","import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\">\n <div class=\"languageselector-nav\" aria-label={this.i18n.heading}>\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-line-shape.js CHANGED Viewed

@@ -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}.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 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 PnLineShapeStyle0 = pnLineShapeCss;
 const PnLineShape$1 = /*@__PURE__*/ proxyCustomElement(class PnLineShape extends HTMLElement {

package/dist/components/pn-line-shape.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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}
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}

package/dist/components/pn-link-list.js CHANGED Viewed

@@ -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}.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 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 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: '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), ' ')) : ('')));
+        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), ' ')) : ('')));
     }
     static get style() { return PnLinkListStyle0; }
 }, [4, "pn-link-list", {

package/dist/components/pn-link-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-link-list.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~yqHAAyqH~~,CAAC;~~AAChsH~~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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}
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}

package/dist/components/pn-mainnav-level2.js CHANGED Viewed

@@ -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}.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 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 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: '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: () => {
+        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: () => {
                 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: '36c7b3d76ed1a3fcbaa70309d0cf08c1fcc3127e', name: "top" }), h("slot", { key: '23bddc8fbbad8faa5543953305685f37b85f64d4' }), h("slot", { key: '7e7072650fe7e5634281fcd4669c776deb99870b', name: "additional" }), h("slot", { key: 'c309dc0f87c9ba0c24d4d1948fdc72ad5097eca1', 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: '735b57f1186701a77f96afdef6fb764c9a340047', name: "top" }), h("slot", { key: '9c3a1c428914201857e0f18400338c16cd7c6735' }), h("slot", { key: '216b4e06d42804bbfa299d6793ee321435eeb804', name: "additional" }), h("slot", { key: '09bae4c5d31896ede61403fef0488688330c6cd1', name: "footer" })));
     }
     static get watchers() { return {
         "label": ["setState"],

package/dist/components/pn-mainnav-level2.js.map CHANGED Viewed

	@@ -1 +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}
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}

package/dist/components/pn-mainnav-link2.js CHANGED Viewed

@@ -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}.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 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 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: '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' })));
+        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' })));
     }
     static get style() { return PnMainnavLinkStyle0; }
 }, [4, "pn-mainnav-link", {