@postnord/pn-marketweb-components 2.8.9 → 2.9.1

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/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;

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

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnHeroBlockInternationalCss = "pn-hero-block-international{width:100%}.hero-international{width:100%;min-height:unset;position:relative;background:#0D234B;display:-ms-flexbox;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;-ms-flex-pack:justify;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{-ms-flex-pack:unset;justify-content:unset;padding:0}}.hero-international .hero-international__content .flex-wrapper .content-col{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;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:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;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;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;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:-ms-flexbox;display:flex}}.hero-international .hero-international__side-loader .shape{background-color:#083a67;height:32rem}.hero-international .hero-international__side-loader--animate{-webkit-transition:-webkit-transform 0.8s ease-out;transition:-webkit-transform 0.8s ease-out;transition:transform 0.8s ease-out;transition:transform 0.8s ease-out, -webkit-transform 0.8s ease-out;-webkit-transform:translateX(100%);transform:translateX(100%)}.hero-international .hero-international__side-loader--animate.animate-in{-webkit-transform:translateX(0);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:-ms-flexbox;display:flex;-ms-flex-align:center;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{-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.5s ease-out;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}.hero-international.hero-international--animate .hero-international__content__logo-col__image.animate-in{-webkit-transform:translateX(0);transform:translateX(0)}";
+
+const PnHeroBlockInternational$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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" }))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnHeroBlockInternationalCss; }
+}, [4, "pn-hero-block-international", {
+    "heading": [1],
+    "subHeading": [1, "sub-heading"],
+    "preamble": [1],
+    "animateLogo": [4, "animate-logo"],
+    "showSideLoader": [4, "show-side-loader"],
+    "centeredLayout": [4, "centered-layout"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-hero-block-international"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-hero-block-international":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnHeroBlockInternational$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnHeroBlockInternational = PnHeroBlockInternational$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnHeroBlockInternational, defineCustomElement };