@postnord/pn-marketweb-components 2.8.2 → 2.8.5

package/collection/components/media/pn-media-block/pn-media-block.js

@@ -0,0 +1,481 @@
+import { h } from "@stencil/core";
+function userPrefersReducedMotion() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export class PnmediaBlock {
+  constructor() {
+    this.handleScroll = () => {
+      if (!this.parallaxScroll)
+        return;
+      const mediaBlockElement = this.block.firstElementChild;
+      const scrollTrigger = this.block.querySelector('#scroll-trigger');
+      const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video');
+      const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;
+      const mediaBlockElementHeight = mediaBlockElement.offsetHeight;
+      const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;
+      const parallaxSpeedContent = 0.3;
+      const parallaxSpeedMedia = 0.2;
+      const mediaContainer = this.block.querySelector('.media-block__media-container');
+      const content = this.block.querySelector('.media-block__content-container');
+      if (mediaContainer != null) {
+        // Move the image or video at a slower speed
+        mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;
+        if (videoPauseButton != null) {
+          // Move the pause button up
+          videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;
+        }
+      }
+      if (content) {
+        // Move the content at a faster speed
+        content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;
+        // Change the opacity based on the scroll position
+        const opacity = Math.max(0, 1 - scrollPosition / 600);
+        content.style.opacity = `${opacity}`;
+      }
+    };
+    this.blockHeight = null;
+    this.imageSrc = null;
+    this.imageSrcSmallScreenFormat = undefined;
+    this.imageAltText = "";
+    this.videoSrc = null;
+    this.parallaxScroll = false;
+    this.showOverlayLayer = false;
+    this.customOverlayBackground = null;
+    this.animateOverlayBackground = false;
+    this.scrollSnapBlock = false;
+    this.fixedBackground = false;
+    this.blockHeading = null;
+    this.blockHeadingLevel = 2;
+    this.blockPreamble = null;
+    this.blockLinkText = null;
+    this.blockLinkUrl = null;
+    this.pnPlayOnScrollObserverOptions = {
+      root: document,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    this.calculatedBlockHeight = undefined;
+    this.hasButtonSlot = true;
+  }
+  get blockHeadingLevelChecked() {
+    if (this.blockLinkText && this.blockLinkUrl === null) {
+      console.warn('blockHeadingLevel is required when blockHeading is set');
+      return undefined;
+    }
+    return this.blockHeadingLevel;
+  }
+  get hasBlockCta() {
+    if (this.blockLinkText && this.blockLinkUrl) {
+      return true;
+    }
+    return false;
+  }
+  get hasVideo() {
+    if (this.videoSrc !== null && this.videoSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  get hasImage() {
+    if (this.imageSrc !== null && this.imageSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  componentWillLoad() {
+    this.hasButtonSlot = !!this.block.querySelector('[slot="cta-button"]');
+  }
+  async componentDidLoad() {
+    if (userPrefersReducedMotion()) {
+      // Handle the case where the user prefers reduced motion.
+      // For example, you might disable parallax scrolling:
+      this.parallaxScroll = false;
+    }
+    const scrollTrigger = document.getElementById('scroll-trigger');
+    this.calculatedBlockHeight = this.block.offsetHeight;
+    const overlayElement = this.block.querySelector('#mediaBlockOverlay');
+    if (this.customOverlayBackground != null || this.customOverlayBackground != "undefined") {
+      overlayElement.style.background = `${this.customOverlayBackground}`;
+    }
+    if (this.parallaxScroll) {
+      this.observerScroll = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            window.addEventListener('scroll', this.handleScroll);
+          }
+          else {
+            window.removeEventListener('scroll', this.handleScroll);
+          }
+        });
+      }, { rootMargin: `0px 0px` });
+      this.observerScroll.observe(scrollTrigger);
+    }
+    ;
+    if (this.scrollSnapBlock) {
+      this.observerSnap = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // The block is within 100px of the viewport, scroll it into view
+            if (this.block instanceof HTMLElement) {
+              setTimeout(() => {
+                this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }, 1000); // Adjust the delay as needed
+            }
+            else {
+              console.error('this.block is not a valid HTMLElement');
+            }
+          }
+        });
+      }, {
+        root: document,
+        rootMargin: "100px 0px 100px 0px",
+        threshold: 0
+      });
+      this.observerSnap.observe(scrollTrigger);
+    }
+    ;
+  }
+  disconnectedCallback() {
+    // Clean up the observer and event listener when the component is removed
+    if (this.observerScroll) {
+      this.observerScroll.disconnect();
+    }
+    if (this.observerSnap) {
+      this.observerSnap.disconnect();
+    }
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  render() {
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasBlockCta, hasVideo, hasImage, animateOverlayBackground } = this;
+    const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
+    const showCta = hasBlockCta;
+    const isVideo = hasVideo;
+    const isImage = hasImage;
+    const classes = [
+      'media-block',
+      blockHeight ? `media-block--height-${blockHeight}` : '',
+      showOverlayLayer ? 'media-block--with-overlay' : '',
+      animateOverlayBackground ? `media-block--animate-overlay-background` : '',
+      isVideo ? 'media-block--video' : '',
+      scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
+      fixedBackground ? 'media-block--fixed-background' : ''
+    ].join(' ');
+    const pnPlayOnScrollObserverOptions = {
+      root: this.blockHeight === "100svh" ? document : null,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    return (h("div", { class: classes }, h("div", { class: "media-block__block-container" }, h("div", { class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== "undefined" ? this.imageAltText : "", role: this.imageAltText !== "undefined" ? "img" : "presentation", "aria-hidden": this.imageAltText !== "undefined" ? "false" : "true" }))) : null), !isVideo && (h("div", { class: "media-block__overlay-filter", id: "mediaBlockOverlay" })), (this.blockHeading || this.blockPreamble) && (h("div", { class: "media-block__content-container" }, this.blockHeading && h(HeadingTag, { class: "media-block__block-heading" }, this.blockHeading), this.blockPreamble && h("p", { class: "media-block__preamble" }, this.blockPreamble), showCta && h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
+  }
+  static get is() { return "pn-media-block"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-media-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-media-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "blockHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-height",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-src",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imageSrcSmallScreenFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-src-small-screen-format",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "imageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-alt-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "videoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "video-src",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "parallaxScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "parallax-scroll",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showOverlayLayer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-overlay-layer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customOverlayBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-overlay-background",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "animateOverlayBackground": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animate-overlay-background",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "scrollSnapBlock": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "scroll-snap-block",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fixedBackground": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fixed-background",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "blockHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "blockHeadingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-heading-level",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "blockPreamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-preamble",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "blockLinkText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-link-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "blockLinkUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-link-url",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "pnPlayOnScrollObserverOptions": {},
+      "calculatedBlockHeight": {},
+      "hasButtonSlot": {}
+    };
+  }
+  static get elementRef() { return "block"; }
+}

package/collection/components/navigation/pn-language-selector/translations.js

@@ -41,4 +41,7 @@ export const translations = {
   pt: {
     heading: 'Linguagem',
   },
+  "pt-BR": {
+    heading: 'Linguagem',
+  },
 };

package/collection/components/navigation/pn-mainnav/translations.js

@@ -57,10 +57,10 @@ export const translations = {
   },
   tr: {
     menuHomeButton: 'Anasayfa',
-    menuGoBackButton: 'Go back',
-    mainMenuButton: 'Menu',
-    menuStartButton: 'Start',
-    navLabel: 'Main navigation',
+    menuGoBackButton: 'Geri git',
+    mainMenuButton: 'Menü',
+    menuStartButton: 'Başlat',
+    navLabel: 'Ana gezinme',
   },
   pt: {
     menuHomeButton: 'Página inicial',
@@ -70,10 +70,17 @@ export const translations = {
     navLabel: 'Main navigation',
   },
   pl: {
-    menuHomeButton: 'Główna',
-    menuGoBackButton: 'Go back',
+    menuHomeButton: 'Strona główna',
+    menuGoBackButton: 'Powrót',
     mainMenuButton: 'Menu',
-    menuStartButton: 'Start',
-    navLabel: 'Main navigation',
-  }
+    menuStartButton: 'Początek',
+    navLabel: 'Menu główne systemu',
+  },
+  "pt-BR": {
+    menuHomeButton: 'Página inicial',
+    menuGoBackButton: 'Voltar',
+    mainMenuButton: 'Menu',
+    menuStartButton: 'Iniciar',
+    navLabel: 'Navegação principal',
+  },
 };

package/components/index.d.ts

@@ -40,6 +40,7 @@ export { PnMarketwebSiteheaderLoginMypageButton as PnMarketwebSiteheaderLoginMyp
 export { PnMarketwebSiteheaderLoginProfileselection as PnMarketwebSiteheaderLoginProfileselection } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection';
 export { PnMarketwebSiteheaderSearch as PnMarketwebSiteheaderSearch } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search';
 export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login';
+export { PnmediaBlock as PnMediaBlock } from '../types/components/media/pn-media-block/pn-media-block';
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/input/pn-multi-formfield/pn-multi-formfield';
 export { PnMultiRowConnectedDropdown as PnMultiRowConnectedDropdown } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown';
 export { PnMultiRowConnectedDropdownRow as PnMultiRowConnectedDropdownRow } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row';

package/components/index.js

@@ -40,6 +40,7 @@ export { PnMarketwebSiteheaderLoginMypageButton, defineCustomElement as defineCu
 export { PnMarketwebSiteheaderLoginProfileselection, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginProfileselection } from './pn-marketweb-siteheader-login-profileselection.js';
 export { PnMarketwebSiteheaderSearch, defineCustomElement as defineCustomElementPnMarketwebSiteheaderSearch } from './pn-marketweb-siteheader-search.js';
 export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomElementPnMarketwebSiteheaderUnifiedLogin } from './pn-marketweb-siteheader-unified-login.js';
+export { PnMediaBlock, defineCustomElement as defineCustomElementPnMediaBlock } from './pn-media-block.js';
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
 export { PnMultiRowConnectedDropdown, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdown } from './pn-multi-row-connected-dropdown.js';
 export { PnMultiRowConnectedDropdownRow, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdownRow } from './pn-multi-row-connected-dropdown-row.js';

package/components/pn-cta-block.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{margin-right:auto;margin-left:auto;width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{max-width:75%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;padding:3.2rem 2.4rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{-ms-flex-direction:row;flex-direction:row;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-button]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;row-gap:1.6rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-button]{gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-button]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg path{fill:#005D92}";
+const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{margin-right:auto;margin-left:auto;width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{max-width:75%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;padding:3.2rem 2.4rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{-ms-flex-direction:row;flex-direction:row;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-button]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;row-gap:1.6rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-button]{gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-button]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg path{fill:#005D92}";
 
 const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/components/pn-language-selector2.js

@@ -43,6 +43,9 @@ const translations = {
   pt: {
     heading: 'Linguagem',
   },
+  "pt-BR": {
+    heading: 'Linguagem',
+  },
 };
 
 const pnLanguageSelectorCss = "pn-language-selector{max-height:5.2rem}pn-language-selector pn-nav-dropdown:not([data-open]) .nav-dropdown-content-container,pn-language-selector pn-nav-dropdown[data-open=false] .nav-dropdown-content-container{display:none}pn-language-selector pn-nav-dropdown{display:block}.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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";

package/components/pn-mainnav2.js

@@ -60,10 +60,10 @@ const translations = {
   },
   tr: {
     menuHomeButton: 'Anasayfa',
-    menuGoBackButton: 'Go back',
-    mainMenuButton: 'Menu',
-    menuStartButton: 'Start',
-    navLabel: 'Main navigation',
+    menuGoBackButton: 'Geri git',
+    mainMenuButton: 'Menü',
+    menuStartButton: 'Başlat',
+    navLabel: 'Ana gezinme',
   },
   pt: {
     menuHomeButton: 'Página inicial',
@@ -73,12 +73,19 @@ const translations = {
     navLabel: 'Main navigation',
   },
   pl: {
-    menuHomeButton: 'Główna',
-    menuGoBackButton: 'Go back',
+    menuHomeButton: 'Strona główna',
+    menuGoBackButton: 'Powrót',
     mainMenuButton: 'Menu',
-    menuStartButton: 'Start',
-    navLabel: 'Main navigation',
-  }
+    menuStartButton: 'Początek',
+    navLabel: 'Menu główne systemu',
+  },
+  "pt-BR": {
+    menuHomeButton: 'Página inicial',
+    menuGoBackButton: 'Voltar',
+    mainMenuButton: 'Menu',
+    menuStartButton: 'Iniciar',
+    navLabel: 'Navegação principal',
+  },
 };
 
 const pnMainnavCss = "pn-mainnav{display:-ms-flexbox;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{-ms-flex-flow:row;flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{-ms-flex-flow:column;flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#FFFFFF;z-index:2;-webkit-transform:translateX(100vw);transform:translateX(100vw);-webkit-transition:-webkit-transform 0.2s 0s;transition:-webkit-transform 0.2s 0s;transition:transform 0.2s 0s;transition:transform 0.2s 0s, -webkit-transform 0.2s 0s;-webkit-transition-property:visibility, -webkit-transform;transition-property:visibility, -webkit-transform;transition-property:transform, visibility;transition-property:transform, visibility, -webkit-transform;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{-ms-flex-flow:row-reverse;flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;-ms-flex-pack:justify;justify-content:space-between;visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:#005D92;color:#FFFFFF;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";