@postnord/pn-marketweb-components 2.8.8 → 2.9.0

package/collection/components/widgets/pn-hero-block-international/pn-hero-block-international.css

@@ -0,0 +1,234 @@
+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: #083a67;
+  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);
+}

package/collection/components/widgets/pn-hero-block-international/pn-hero-block-international.js

@@ -0,0 +1,156 @@
+import { h, Host } from '@stencil/core';
+export class PnHeroBlockInternational {
+  constructor() {
+    this.hasCtaButtonSlot = false;
+    this.animateSideloader = false;
+    this.heading = null;
+    this.subHeading = null;
+    this.preamble = null;
+    this.animateLogo = false;
+    this.showSideLoader = true;
+    this.centeredLayout = false;
+  }
+  async componentWillLoad() {
+    this.hasCtaButtonSlot = !!this.hostElement.querySelector('[slot="hero-international-cta"]');
+  }
+  componentDidLoad() {
+    if (this.animateLogo) {
+      const image = this.hostElement.querySelector('.hero-international__content__logo-col__image');
+      const sideLoader = this.hostElement.querySelector('.hero-international__side-loader--animate');
+      this.animateSideloader = true;
+      if (image) {
+        image.classList.add('animate-in');
+      }
+      if (sideLoader) {
+        sideLoader.classList.add('animate-in');
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: `hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}` }, h("div", { class: "hero-international__content" }, h("div", { class: "flex-wrapper" }, h("div", { class: "content-col" }, h("span", { class: "hero-international__content__site-tag" }, "International"), h("h1", { class: "hero-international__content__heading" }, this.heading, " ", h("span", null, this.subHeading)), h("p", { class: "hero-international__content__preamble" }, this.preamble), this.hasCtaButtonSlot && (h("div", { class: "hero-international__content__cta" }, h("slot", { name: "hero-international-cta" })))), !this.centeredLayout && (h("div", { class: "hero-international__content__logo-col" }, h("div", { class: "hero-international__content__logo-col__image" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 919 336" }, h("circle", { class: "cls-1", cx: "168", cy: "168", r: "168" }), h("circle", { class: "cls-1", cx: "519", cy: "168", r: "168" }), h("path", { class: "cls-1", d: "M510 0h409v336H510z" }), h("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" }), h("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" })))))), this.showSideLoader && !this.centeredLayout && (h("div", { class: `hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}` }, h("div", { class: "shape" }))))));
+  }
+  static get is() { return "pn-hero-block-international"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-hero-block-international.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-hero-block-international.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "subHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sub-heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "preamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "preamble",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "animateLogo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animate-logo",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showSideLoader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-side-loader",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "centeredLayout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "centered-layout",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/widgets/pn-link-list/link-list.stories.js

@@ -11,7 +11,7 @@ const Template = ({ ...args }) => {
   return `
   <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
   <div style="max-width: 1410px">
-    <pn-link-list heading="${args.heading}" show-more-label="${args.showMoreLabel}" show-more-url="${args.showMoreUrl}">
+    <pn-link-list heading="${args.heading}" preamble="${args.preamble}" show-more-label="${args.showMoreLabel}" show-more-url="${args.showMoreUrl}">
       <div slot="linklist">
         <ul>
           <li>
@@ -45,6 +45,7 @@ const Template = ({ ...args }) => {
 export const Primary = Template.bind({});
 Primary.args = {
   heading: "Mest eftersökt",
+  preamble: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
   showMoreLabel: "Visa fler frågor",
   showMoreUrl: "www.fler.se",
 };

package/collection/components/widgets/pn-link-list/pn-link-list.css

@@ -1,11 +1,26 @@
-pn-link-list .link-list__heading {
+pn-link-list .link-list__header {
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  align-items: center;
   margin-bottom: 0.8rem;
 }
-@media screen and (min-width: 992px) {
+pn-link-list .link-list__heading {
+  margin-bottom: 0.8rem;
+}
+@media screen and (min-width: 1140px) {
   pn-link-list .link-list__heading {
-    margin-bottom: 1.6rem;
+    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 {
@@ -137,6 +152,6 @@ pn-link-list .link-list__button {
     scrollbar-color: #005D92 #d3cecb;
   }
   pn-link-list .link-list__scrollable {
-    padding: 0 2rem 2rem;
+    padding: 0.5rem 2rem 2rem;
   }
 }

package/collection/components/widgets/pn-link-list/pn-link-list.js

@@ -2,45 +2,54 @@ import { Host, h } from "@stencil/core";
 export class PnLinkList {
   constructor() {
     this.slider = null;
+    this.isDragging = false;
+    this.startX = 0;
+    this.scrollLeft = 0;
+    this.handleMouseDown = (e) => {
+      var _a, _b, _c;
+      const target = e.target;
+      const isContainerClick = target.classList.contains('link-list__container');
+      const isLinkClick = target.tagName === 'A';
+      if (isContainerClick || isLinkClick) {
+        this.isDragging = true;
+        (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.add('link-list__active');
+        this.startX = e.pageX - ((_b = this.slider) === null || _b === void 0 ? void 0 : _b.offsetLeft);
+        this.scrollLeft = (_c = this.slider) === null || _c === void 0 ? void 0 : _c.scrollLeft;
+        if (isLinkClick) {
+          e.preventDefault();
+        }
+      }
+    };
+    this.handleMouseLeave = () => {
+      var _a;
+      this.isDragging = false;
+      (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
+    };
+    this.handleMouseUp = () => {
+      var _a;
+      this.isDragging = false;
+      (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
+    };
+    this.handleMouseMove = (e) => {
+      var _a;
+      if (this.isDragging) {
+        const x = e.pageX - ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.offsetLeft);
+        const move = (x - this.startX) * 2;
+        this.slider.scrollLeft = this.scrollLeft - move;
+      }
+    };
     this.heading = null;
     this.label = null;
+    this.preamble = null;
     this.url = null;
     this.showMoreLabel = null;
     this.showMoreUrl = null;
-    this.isDown = false;
-    this.startX = 0;
-    this.scrollLeft = 0;
   }
   componentDidLoad() {
     this.slider = document.querySelector('.link-list__container');
   }
-  handleMouseDown(e) {
-    var _a, _b, _c;
-    this.isDown = true;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.add('link-list__active');
-    this.startX = e.pageX - ((_b = this.slider) === null || _b === void 0 ? void 0 : _b.offsetLeft);
-    this.scrollLeft = (_c = this.slider) === null || _c === void 0 ? void 0 : _c.scrollLeft;
-  }
-  handleMouseLeave() {
-    var _a;
-    this.isDown = false;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
-  }
-  handleMouseUp() {
-    var _a;
-    this.isDown = false;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
-  }
-  handleMouseMove(e) {
-    var _a;
-    if (!this.isDown)
-      return;
-    const x = e.pageX - ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.offsetLeft);
-    const move = (x - this.startX) * 2;
-    this.slider.scrollLeft = this.scrollLeft - move;
-  }
   render() {
-    return (h(Host, null, h("div", { class: "link-list__heading" }, h("h2", null, this.heading)), h("div", { class: "link-list" }, h("div", { class: "link-list__container" }, h("div", { class: "link-list__scrollable" }, h("slot", { name: "linklist" })))), this.showMoreUrl ? h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), " ") : ""));
+    return (h(Host, null, h("div", { class: "link-list__header" }, h("h2", { class: "link-list__heading" }, this.heading), h("p", { class: "link-list__preamble" }, this.preamble)), h("div", { class: "link-list" }, h("div", { class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { class: "link-list__scrollable" }, h("slot", { name: "linklist" })))), this.showMoreUrl ? h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), " ") : ""));
   }
   static get is() { return "pn-link-list"; }
   static get originalStyleUrls() {
@@ -91,6 +100,24 @@ export class PnLinkList {
         "reflect": false,
         "defaultValue": "null"
       },
+      "preamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "preamble",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "url": {
         "type": "string",
         "mutable": false,
@@ -147,38 +174,4 @@ export class PnLinkList {
       }
     };
   }
-  static get states() {
-    return {
-      "isDown": {},
-      "startX": {},
-      "scrollLeft": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleMouseDown",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseleave",
-        "method": "handleMouseLeave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseup",
-        "method": "handleMouseUp",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mousemove",
-        "method": "handleMouseMove",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

package/collection/index.js

@@ -1 +1,2 @@
-export {};
+import { setAssetPath } from '@stencil/core';
+setAssetPath(document.currentScript.src);

package/components/index.d.ts

@@ -20,6 +20,7 @@ export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-
 export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';
 export { PnfindServiceAndPrice as PnFindServiceAndPrice } from '../types/components/widgets/pn-find-service-and-price/pn-find-service-and-price';
 export { PnfindServiceAndPriceResult as PnFindServiceAndPriceResult } from '../types/components/widgets/pn-find-service-and-price/pn-find-service-and-price-result';
+export { PnHeroBlockInternational as PnHeroBlockInternational } from '../types/components/widgets/pn-hero-block-international/pn-hero-block-international';
 export { PnlanguageSelector as PnLanguageSelector } from '../types/components/navigation/pn-language-selector/pn-language-selector';
 export { PnlanguageSelectorOption as PnLanguageSelectorOption } from '../types/components/navigation/pn-language-selector/pn-language-selector-option';
 export { PnLineShape as PnLineShape } from '../types/components/cards/pn-quote-card/pn-line-shape/pn-line-shape';

package/components/index.js

@@ -1,3 +1,4 @@
+import { setAssetPath } from '@stencil/core/internal/client';
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { PnAddressAutofill, defineCustomElement as defineCustomElementPnAddressAutofill } from './pn-address-autofill.js';
 export { PnAnimatedTile, defineCustomElement as defineCustomElementPnAnimatedTile } from './pn-animated-tile.js';
@@ -20,6 +21,7 @@ export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } fr
 export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';
 export { PnFindServiceAndPrice, defineCustomElement as defineCustomElementPnFindServiceAndPrice } from './pn-find-service-and-price.js';
 export { PnFindServiceAndPriceResult, defineCustomElement as defineCustomElementPnFindServiceAndPriceResult } from './pn-find-service-and-price-result.js';
+export { PnHeroBlockInternational, defineCustomElement as defineCustomElementPnHeroBlockInternational } from './pn-hero-block-international.js';
 export { PnLanguageSelector, defineCustomElement as defineCustomElementPnLanguageSelector } from './pn-language-selector.js';
 export { PnLanguageSelectorOption, defineCustomElement as defineCustomElementPnLanguageSelectorOption } from './pn-language-selector-option.js';
 export { PnLineShape, defineCustomElement as defineCustomElementPnLineShape } from './pn-line-shape.js';
@@ -90,3 +92,5 @@ export { PnTeaserCard, defineCustomElement as defineCustomElementPnTeaserCard }
 export { PnTitletag, defineCustomElement as defineCustomElementPnTitletag } from './pn-titletag.js';
 export { PnUspPromoter, defineCustomElement as defineCustomElementPnUspPromoter } from './pn-usp-promoter.js';
 export { PnVideoOverlay, defineCustomElement as defineCustomElementPnVideoOverlay } from './pn-video-overlay.js';
+
+setAssetPath(document.currentScript.src);

package/components/pn-hero-block-international.d.ts

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