@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/cjs/pn-versa-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-versa-card.entry.cjs.js","mappings":"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","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-versa-card/pn-versa-card.scss?tag=pn-versa-card","src/components/cards/pn-versa-card/pn-versa-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$versa-card-radius: rem16(16px);\n$versa-card-gap: rem16(8px);\n$versa-card-content-gap: rem16(16px);\n$versa-card-content-padding-bottom: rem16(16px);\n$versa-card-text-max-width: rem16(700px);\n$versa-card-cover-padding: rem16(24px);\n$versa-card-horizontal-gap: rem16(32px);\n$versa-card-horizontal-padding: rem16(24px);\n$versa-card-horizontal-padding-lg: rem16(32px);\n$versa-card-sticky-top: rem16(16px);\n\n$versa-card-meta-margin-bottom: rem16(4px);\n$versa-card-cta-gap: rem16(16px);\n$versa-card-cta-min-height: rem16(48px);\n$versa-card-rounded-image-max-width: rem16(120px);\n\n$versa-card-cover-overlay-rgb: rgb(13, 35, 75);\n$versa-card-cover-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),\n    0 4px 12px rgba(0, 0, 0, 0.5);\n\n$versa-card-cta-icon-offset: -0.3rem;\n$versa-card-cta-transition: 0.3s ease-in-out;\n\n// -----------------------------------------------------------------------------\n// Root / design tokens\n// CSS variables are kept for styling + contextual overrides\n// -----------------------------------------------------------------------------\npn-versa-card {\n    display: flex;\n    width: 100%;\n    height: 100%;\n\n    --versa-card-bg: transparent;\n    --versa-card-heading-color: inherit;\n    --versa-card-text-color: inherit;\n    --versa-card-blockquote-border-color: inherit;\n    --versa-link-color: #{$blue700};\n\n    --versa-card-padding: #{rem16(16px)};\n    --versa-card-heading-size: #{rem16(24px)};\n    --versa-card-preamble-size: #{rem16(18px)};\n    --versa-card-label-size: #{rem16(12px)};\n\n    --rte-text-color: var(--versa-card-text-color);\n    --rte-heading-color: var(--versa-card-heading-color);\n    --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);\n    --rte-image-radius: #{$versa-card-radius};\n\n    .pn-versa-card-label {\n        display: block;\n        font-size: var(--versa-card-label-size);\n        text-transform: uppercase;\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n    }\n\n    .pn-versa-card-heading {\n        font-size: var(--versa-card-heading-size);\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n        color: var(--versa-card-heading-color);\n    }\n\n    .pn-versa-card-preamble {\n        font-size: var(--versa-card-preamble-size);\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Base structure\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        gap: $versa-card-gap;\n        position: relative;\n\n        .pn-versa-card-imageWrapper {\n\n            [slot='image'],\n            [slot='image'] picture,\n            [slot='image'] picture img {\n                display: block;\n                width: 100%;\n                height: 100%;\n            }\n\n            [slot='image'] picture img {\n                border-radius: $versa-card-radius;\n                object-fit: cover;\n            }\n        }\n\n        .pn-versa-card-content {            \n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            height: 100%;\n            width:100%;\n            max-width: 100%;\n            gap: $versa-card-content-gap;\n            padding-bottom: $versa-card-content-padding-bottom;\n\n            --pn-link-current-color: var(--versa-link-color);\n            --rte-link-color: var(--pn-link-current-color);\n\n            .pn-versa-card-textContent {\n                display: flex;\n                flex-direction: column;\n                color: var(--versa-card-text-color);\n                max-width: $versa-card-text-max-width;\n                width:100%;\n                margin:0 auto;\n            }\n\n            .pn-versa-card-linkwrapper {\n                display: flex;\n                align-items: center;\n                min-height: $versa-card-cta-min-height;\n                width: 100%;\n\n                [slot='cta'] {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: wrap;\n                    align-items: center;\n                    gap: $versa-card-cta-gap;\n                    width: 100%;\n\n                    a {\n                        margin-bottom: 0;\n                    }\n\n                    pn-button[appearance='light'] {\n                        color: unset;\n                    }\n\n                    a:not(.pn-button) {\n                        color: var(--pn-link-current-color);\n                        text-decoration: none;\n                        font-weight: 400;\n\n                        &:hover {\n                            text-decoration: underline;\n                        }\n                    }\n\n                    a.versa-card-cta-link-animated pn-icon svg path {\n                        fill: var(--pn-link-current-color);\n                    }\n                }\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-hasBg {\n        position: relative;\n        padding: var(--versa-card-padding);\n        border-radius: $versa-card-radius;\n        background-color: transparent;\n\n        &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            background-color: var(--versa-card-bg);\n            border-radius: inherit;\n            z-index: 0;\n            pointer-events: none;\n            opacity: 1;\n        }\n\n        >* {\n            position: relative;\n            z-index: 1;\n        }\n\n        .pn-versa-card-content {\n            padding-bottom: 0;\n        }\n\n        &.pn-versa-card-transparentBackground::before {\n            opacity: 0.9;\n        }\n    }\n\n    .pn-versa-card-hasImageCover {\n        padding: 0;\n\n        .pn-versa-card-imageWrapper {\n            height: 100%;\n            margin-bottom: 0;\n\n            [slot='image'] picture img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n            }\n        }\n\n        &.pn-versa-card-hasImageCoverText {\n            --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n            .pn-versa-card-imageWrapper {\n                position: relative;\n                height: 100%;\n\n                &::before,\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: 0;\n                    border-radius: $versa-card-radius;\n                    pointer-events: none;\n                }\n\n                &::before {\n                    background: radial-gradient(circle,\n                            rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n                            rgba($versa-card-cover-overlay-rgb, 0) 100%);\n                    z-index: 1;\n                }\n\n                &::after {\n                    background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n                    opacity: 0;\n                    transition: opacity 1s;\n                    z-index: 2;\n                }\n\n                [slot='image'] picture img {\n                    position: relative;\n                    z-index: 0;\n                }\n            }\n\n            .pn-versa-card-content {\n                position: absolute;\n                inset: 0;\n                z-index: 3;\n\n                display: flex;\n                flex-direction: column;\n                justify-content: center;\n                align-items: center;\n\n                padding: $versa-card-cover-padding;\n                max-width: unset;\n\n                color: #{$white};\n                text-shadow: $versa-card-cover-text-shadow;\n\n                --pn-link-current-color: #{$white};\n                --rte-text-color: #{$white};\n                --rte-heading-color: #{$white};\n                --rte-blockquote-text-color: #{$white};\n                --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n                --rte-quote-author-color: #{$white};\n                --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n                a {\n                    color: var(--pn-link-current-color);\n                    text-shadow: none;\n                }\n\n                pn-button[appearance='light'] a {\n                    color: $blue700;\n                }\n\n                .pn-versa-card-linkwrapper {\n                    [slot='cta'] {\n                        a.versa-card-cta-link-animated pn-icon svg path {\n                            fill: var(--pn-link-current-color);\n                        }\n                    }\n                }\n            }\n\n            &:hover .pn-versa-card-imageWrapper::after {\n                opacity: 1;\n            }\n        }\n    }\n\n    .pn-versa-card-hasRoundedImage {\n        .pn-versa-card-imageWrapper {\n            width: auto;\n            height: auto;\n\n            [slot='image'] picture img {\n                aspect-ratio: 1 / 1;\n                width: 100%;\n                height: 100%;\n                max-width: $versa-card-rounded-image-max-width;\n                border-radius: 50%;\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-horizontal {\n        flex-direction: column;\n\n        &.pn-versa-card-imageGrow {\n            .pn-versa-card-imageWrapper {\n                [slot='image'] picture img {\n                    height: 100%;\n                }\n            }\n        }\n    }\n\n    .pn-versa-card-center {\n        .pn-versa-card-imageWrapper {\n            align-self: center;\n        }\n\n        .pn-versa-card-content {\n            align-items: center;\n            text-align: center;\n\n            .pn-versa-card-linkwrapper {\n                [slot='cta'] {\n                    justify-content: center;\n                }\n            }\n        }\n    }\n    \n    .pn-versa-card-alignMiddle { \n        \n        justify-content: center;\n\n        \n        .pn-versa-card-content {           \n            height: auto;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n    &[data-card-color='white'] {\n        --versa-card-bg: #{$white};\n    }\n\n    &[data-card-color='blue25'] {\n        --versa-card-bg: #{$blue25};\n        --versa-card-blockquote-border-color: #{$blue400};\n    }\n\n    &[data-card-color='blue50'] {\n        --versa-card-bg: #{$blue50};\n        --versa-card-blockquote-border-color: #{$blue400};\n    }\n\n    &[data-card-color='blue400'] {\n        --versa-card-bg: #{$blue400};\n    }\n\n    &[data-card-color='blue900'] {\n        --versa-card-bg: #{$blue900};\n        --versa-card-heading-color: #{$blue200};\n        --versa-card-text-color: #{$white};\n        --versa-card-blockquote-border-color: #{$white};\n        --versa-link-color: #{$white};\n    }\n\n    &[data-card-color='coral25'] {\n        --versa-card-bg: #{$coral25};\n        --versa-card-blockquote-border-color: #{$coral400};\n    }\n\n    &[data-card-color='coral50'] {\n        --versa-card-bg: #{$coral50};\n        --versa-card-blockquote-border-color: #{$coral400};\n    }\n\n    &[data-card-color='green25'] {\n        --versa-card-bg: #{$green25};\n        --versa-card-blockquote-border-color: #{$green400};\n    }\n\n    &[data-card-color='green50'] {\n        --versa-card-bg: #{$green50};\n        --versa-card-blockquote-border-color: #{$green400};\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n    pn-versa-card {\n        .pn-versa-card-horizontal {\n            flex-direction: row;\n            gap: $versa-card-horizontal-gap;\n\n            .pn-versa-card-imageWrapper,\n            .pn-versa-card-content {\n                flex: 1;\n            }\n\n            .pn-versa-card-imageWrapper {\n                height: auto;\n\n                [slot='image'] picture img {\n                    height: auto;\n                    position: sticky;\n                    top: $versa-card-sticky-top;\n                }\n            }\n\n            .pn-versa-card-content {\n                width: 50%;\n                box-sizing: border-box;\n                justify-content: flex-start;\n            }\n\n            &.pn-versa-card-hasBg {\n                padding: $versa-card-horizontal-padding;\n            }\n\n            &.pn-versa-card-horizontal--imgRight {\n                flex-direction: row-reverse;\n            }\n\n            &.pn-versa-card-imageGrow {\n                .pn-versa-card-imageWrapper {\n                    height: 100%;\n                }\n            }\n\n            &.pn-versa-card-center {\n                .pn-versa-card-imageWrapper {\n                    align-self: auto;\n                }\n\n                .pn-versa-card-content {\n                    align-items: stretch;\n                    text-align: center;\n\n                    .pn-versa-card-textContent,\n                    .pn-versa-card-linkwrapper {\n                        align-self: center;\n                    }\n\n                    .pn-versa-card-linkwrapper {\n                        [slot='cta'] {\n                            justify-content: center;\n                        }\n                    }\n                }\n            }\n\n            &.pn-versa-card-alignMiddle {\n                .pn-versa-card-content {                    \n                    justify-content: center; //overrides mobile alignMiddle which sets justify-content to space-between\n                }\n            }\n\n            &.pn-versa-card-hasRoundedImage {\n                .pn-versa-card-imageWrapper {\n                    width: 50%;\n\n                    [slot='image'] picture img {\n                        max-width: unset;\n                    }\n                }\n            }\n        }\n    }\n}\n\n@media (min-width: 1440px) {\n    pn-versa-card {\n        .pn-versa-card-horizontal.pn-versa-card-hasBg {\n            padding: $versa-card-horizontal-padding-lg;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .versa-card-cta-link-animated {\n        pn-icon {\n            position: relative;\n            left: $versa-card-cta-icon-offset;\n            transition: $versa-card-cta-transition;\n        }\n\n        &:hover pn-icon {\n            left: 0;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-RTEtext {\n        [slot='rte'] {\n            @include shared-rte;\n\n            .pn-quote-card__section {\n                max-width: none !important;\n                background-color: transparent;\n            }\n\n            .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n                border: none !important;\n                padding-left: 0 !important;\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n    pn-versa-card {\n        --rte-forms-spacing: #{rem16(12px)};\n    }\n}\n\n@media (min-width: 992px) {\n    .onequarterwidth {\n        pn-versa-card {\n            --versa-card-padding: #{rem16(8px)};\n            --versa-card-heading-size: #{rem16(20px)};\n            --versa-card-preamble-size: #{rem16(17px)};\n            --versa-card-label-size: #{rem16(11px)};\n\n            --rte-h2-size: #{rem16(20px)};\n            --rte-h3-size: #{rem16(18px)};\n            --rte-h4-size: #{rem16(16px)};\n        }\n    }\n\n    .halfwidth,\n    .fullwidth {\n        pn-versa-card {\n            --rte-blockquote-margin: #{rem16(24px)} 0;\n        }\n    }\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n  tag: 'pn-versa-card',\n  styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n  @Element() hostElement: HTMLElement;\n\n  @Prop() label?: string;\n  @Prop() heading?: string;\n  @Prop() preamble?: string;\n  @Prop() imageGrow = false;\n\n  // Layout / modifiers\n  @Prop() horizontal = false;\n  @Prop() imgAlignment?: 'left' | 'right' = 'left';\n  @Prop() hasImageCover = false;\n  @Prop() alignMiddle = false;\n  @Prop() center = false;\n\n  @Prop() roundImage = false;\n  @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  @Prop() opacity: number = 90;\n  @Prop() transparentBackground = false;\n\n  private cx(parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(' ');\n  }\n\n  private get hasImageCoverText(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n  }\n\n  private get normalizedOpacity(): number {\n    return Math.min(100, Math.max(0, this.opacity ?? 90));\n  }\n\n  // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n  private get cardColor() {\n    const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n    return value || null;\n  }\n\n  private get hasBg(): boolean {\n    return !!this.cardColor;\n  }\n\n  private get cardClass() {\n\n    return this.cx([\n      'pn-versa-card',\n\n      // modifiers      \n      this.horizontal && 'pn-versa-card-horizontal',\n      this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n      this.hasBg && 'pn-versa-card-hasBg',\n      this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n      this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n      this.roundImage && 'pn-versa-card-hasRoundedImage',\n      this.center && 'pn-versa-card-center',\n      this.alignMiddle && 'pn-versa-card-alignMiddle',\n      this.imageGrow && 'pn-versa-card-imageGrow',\n      this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n    ]);\n  }\n\n  private get showContent(): boolean {\n    return this.showTextContent || this.showCta;\n  }\n\n  private get showTextContent(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte);\n  }\n\n  @State() showImage: boolean = false;\n  @State() showRte: boolean = false;\n  @State() showCta: boolean = false;\n\n  componentWillLoad() {\n    this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n    this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n    this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n          {this.showImage && (\n            <div class=\"pn-versa-card-imageWrapper\">\n              <slot name=\"image\" />\n            </div>)}\n          {this.showContent && (\n            <div class=\"pn-versa-card-content\">\n              {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n                {this.label && (\n                  <span class=\"pn-versa-card-label\">{this.label}</span>\n                )}\n\n                {this.heading && (\n                  <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n                )}\n\n                {this.preamble && (\n                  <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n                )}\n\n                {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n                  <slot name=\"rte\" />\n                </div>\n                }\n              </div>}\n\n              {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n                <slot name=\"cta\" />\n              </div>}\n\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"pn-versa-card.entry.cjs.js","mappings":"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","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-versa-card/pn-versa-card.scss?tag=pn-versa-card","src/components/cards/pn-versa-card/pn-versa-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$versa-card-radius: rem16(16px);\n$versa-card-gap: rem16(8px);\n$versa-card-content-gap: rem16(16px);\n$versa-card-content-padding-bottom: rem16(16px);\n$versa-card-text-max-width: rem16(700px);\n$versa-card-cover-padding: rem16(24px);\n$versa-card-horizontal-gap: rem16(32px);\n$versa-card-horizontal-padding: rem16(24px);\n$versa-card-horizontal-padding-lg: rem16(32px);\n$versa-card-sticky-top: rem16(16px);\n\n$versa-card-meta-margin-bottom: rem16(4px);\n$versa-card-cta-gap: rem16(16px);\n$versa-card-cta-min-height: rem16(48px);\n$versa-card-rounded-image-max-width: rem16(120px);\n\n$versa-card-cover-overlay-rgb: rgb(13, 35, 75);\n$versa-card-cover-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),\n    0 4px 12px rgba(0, 0, 0, 0.5);\n\n$versa-card-cta-icon-offset: -0.3rem;\n$versa-card-cta-transition: 0.3s ease-in-out;\n\n// -----------------------------------------------------------------------------\n// Root / design tokens\n// CSS variables are kept for styling + contextual overrides\n// -----------------------------------------------------------------------------\npn-versa-card {\n    display: flex;\n    width: 100%;\n    height: 100%;\n\n    --versa-card-bg: transparent;\n    --versa-card-heading-color: inherit;\n    --versa-card-text-color: inherit;\n    --versa-card-blockquote-border-color: inherit;\n    --versa-link-color: #{$blue700};\n\n    --versa-card-padding: #{rem16(16px)};\n    --versa-card-heading-size: #{rem16(24px)};\n    --versa-card-preamble-size: #{rem16(18px)};\n    --versa-card-label-size: #{rem16(12px)};\n\n    --rte-text-color: var(--versa-card-text-color);\n    --rte-heading-color: var(--versa-card-heading-color);\n    --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);\n    --rte-image-radius: #{$versa-card-radius};\n\n    .pn-versa-card-label {\n        display: block;\n        font-size: var(--versa-card-label-size);\n        text-transform: uppercase;\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n    }\n\n    .pn-versa-card-heading {\n        font-size: var(--versa-card-heading-size);\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n        color: var(--versa-card-heading-color);\n    }\n\n    .pn-versa-card-preamble {\n        font-size: var(--versa-card-preamble-size);\n        margin: 0 0 $versa-card-meta-margin-bottom 0;\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Base structure\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        gap: $versa-card-gap;\n        position: relative;\n\n        .pn-versa-card-imageWrapper {\n\n            [slot='image'],\n            [slot='image'] picture,\n            [slot='image'] picture img {\n                display: block;\n                width: 100%;\n                height: 100%;\n            }\n\n            [slot='image'] picture img {\n                border-radius: $versa-card-radius;\n                object-fit: cover;\n            }\n\n            [slot='image'] picture {\n                max-width: $versa-card-text-max-width;\n                margin: 0 auto;\n            }\n        }\n\n        .pn-versa-card-content {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            height: 100%;\n            width: 100%;\n            max-width: 100%;\n            gap: $versa-card-content-gap;\n            padding-bottom: $versa-card-content-padding-bottom;\n\n            --pn-link-current-color: var(--versa-link-color);\n            --rte-link-color: var(--pn-link-current-color);\n\n            .pn-versa-card-textContent,\n            .pn-versa-card-linkwrapper {\n                max-width: $versa-card-text-max-width;                \n                margin: 0 auto;\n            }\n\n            .pn-versa-card-textContent {\n                display: flex;\n                flex-direction: column;\n                color: var(--versa-card-text-color);                \n                width: 100%;\n                \n            }\n\n            .pn-versa-card-linkwrapper {\n                display: flex;\n                align-items: center;\n                min-height: $versa-card-cta-min-height;\n                width: 100%;\n\n                [slot='cta'] {\n                    display: flex;\n                    flex-direction: row;\n                    flex-wrap: wrap;\n                    align-items: center;\n                    gap: $versa-card-cta-gap;\n                    width: 100%;\n\n                    a {\n                        margin-bottom: 0;\n                    }\n\n                    pn-button[appearance='light'] {\n                        color: unset;\n                    }\n\n                    a:not(.pn-button) {\n                        color: var(--pn-link-current-color);\n                        text-decoration: none;\n                        font-weight: 400;\n\n                        &:hover {\n                            text-decoration: underline;\n                        }\n                    }\n\n                    a.versa-card-cta-link-animated pn-icon svg path {\n                        fill: var(--pn-link-current-color);\n                    }\n                }\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-hasBg {\n        position: relative;\n        padding: var(--versa-card-padding);\n        border-radius: $versa-card-radius;\n        background-color: transparent;\n\n        &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            background-color: var(--versa-card-bg);\n            border-radius: inherit;\n            z-index: 0;\n            pointer-events: none;\n            opacity: 1;\n        }\n\n        >* {\n            position: relative;\n            z-index: 1;\n        }\n\n        .pn-versa-card-content {\n            padding-bottom: 0;\n        }\n\n        &.pn-versa-card-transparentBackground {\n            &::before {\n                opacity: 0.9;\n                transition: opacity 500ms ease-in-out;\n            }\n\n            &:hover::before {\n                opacity: 0.98;\n            }\n        }\n    }\n\n    .pn-versa-card-hasImageCover {\n        padding: 0;\n\n        .pn-versa-card-imageWrapper {\n            height: 100%;\n            margin-bottom: 0;\n\n            [slot='image'] picture img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n            }\n        }\n\n        &.pn-versa-card-hasImageCoverText {\n            --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n            .pn-versa-card-imageWrapper {\n                position: relative;\n                height: 100%;\n\n                &::before,\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: 0;\n                    border-radius: $versa-card-radius;\n                    pointer-events: none;\n                }\n\n                &::before {\n                    background: radial-gradient(circle,\n                            rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n                            rgba($versa-card-cover-overlay-rgb, 0) 100%);\n                    z-index: 1;\n                }\n\n                &::after {\n                    background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n                    opacity: 0;\n                    transition: opacity 1s;\n                    z-index: 2;\n                }\n\n                [slot='image'] picture img {\n                    position: relative;\n                    z-index: 0;\n                }\n            }\n\n            .pn-versa-card-content {\n                position: absolute;\n                inset: 0;\n                z-index: 3;\n\n                display: flex;\n                flex-direction: column;\n                justify-content: center;\n                align-items: center;\n\n                padding: $versa-card-cover-padding;\n                max-width: unset;\n\n                color: #{$white};\n                text-shadow: $versa-card-cover-text-shadow;\n\n                --pn-link-current-color: #{$white};\n                --rte-text-color: #{$white};\n                --rte-heading-color: #{$white};\n                --rte-blockquote-text-color: #{$white};\n                --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n                --rte-quote-author-color: #{$white};\n                --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n                a {\n                    color: var(--pn-link-current-color);\n                    text-shadow: none;\n                }\n\n                pn-button[appearance='light'] a {\n                    color: $blue700;\n                }\n\n                .pn-versa-card-linkwrapper {\n                    [slot='cta'] {\n                        a.versa-card-cta-link-animated pn-icon svg path {\n                            fill: var(--pn-link-current-color);\n                        }\n                    }\n                }\n            }\n\n            &:hover .pn-versa-card-imageWrapper::after {\n                opacity: 1;\n            }\n        }\n    }\n\n    .pn-versa-card-hasRoundedImage {\n        .pn-versa-card-imageWrapper {\n            width: auto;\n            height: auto;\n\n            [slot='image'] picture img {\n                aspect-ratio: 1 / 1;\n                width: 100%;\n                height: 100%;\n                max-width: $versa-card-rounded-image-max-width;\n                border-radius: 50%;\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-horizontal {\n        flex-direction: column;\n\n        &.pn-versa-card-imageGrow {\n            .pn-versa-card-imageWrapper {\n                [slot='image'] picture img {\n                    height: 100%;\n                }\n            }\n        }\n    }\n\n    .pn-versa-card-center {\n        .pn-versa-card-imageWrapper {\n            align-self: center;\n        }\n\n        .pn-versa-card-content {\n            align-items: center;\n            text-align: center;\n\n            .pn-versa-card-linkwrapper {\n                [slot='cta'] {\n                    justify-content: center;\n                }\n            }\n        }\n    }\n\n    .pn-versa-card-alignMiddle {\n\n        justify-content: center;\n\n\n        .pn-versa-card-content {\n            height: auto;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n    &[data-card-color='white'] {\n        --versa-card-bg: #{$white};\n    }\n\n    &[data-card-color='blue25'] {\n        --versa-card-bg: #{$blue25};\n        --versa-card-blockquote-border-color: #{$blue400};\n    }\n\n    &[data-card-color='blue50'] {\n        --versa-card-bg: #{$blue50};\n        --versa-card-blockquote-border-color: #{$blue400};\n    }\n\n    &[data-card-color='blue400'] {\n        --versa-card-bg: #{$blue400};\n        --rte-heading-color:#{$white};\n    }\n\n    &[data-card-color='blue900'] {\n        --versa-card-bg: #{$blue900};\n        --versa-card-heading-color: #{$blue200};\n        --versa-card-text-color: #{$white};\n        --versa-card-blockquote-border-color: #{$white};\n        --versa-link-color: #{$white};\n        --rte-heading-color:#{$white};\n    }\n\n    &[data-card-color='coral25'] {\n        --versa-card-bg: #{$coral25};\n        --versa-card-blockquote-border-color: #{$coral400};\n    }\n\n    &[data-card-color='coral50'] {\n        --versa-card-bg: #{$coral50};\n        --versa-card-blockquote-border-color: #{$coral400};\n    }\n\n    &[data-card-color='green25'] {\n        --versa-card-bg: #{$green25};\n        --versa-card-blockquote-border-color: #{$green400};\n    }\n\n    &[data-card-color='green50'] {\n        --versa-card-bg: #{$green50};\n        --versa-card-blockquote-border-color: #{$green400};\n    }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n    pn-versa-card {\n        .pn-versa-card-horizontal {\n            flex-direction: row;\n            gap: $versa-card-horizontal-gap;\n\n            .pn-versa-card-imageWrapper,\n            .pn-versa-card-content {\n                flex: 1;\n            }\n\n            .pn-versa-card-imageWrapper {\n                height: auto;\n\n                [slot='image'] picture img {\n                    height: auto;\n                    position: sticky;\n                    top: $versa-card-sticky-top;\n                }\n            }\n\n            .pn-versa-card-content {\n                width: 50%;\n                box-sizing: border-box;\n                justify-content: flex-start;\n            }\n\n            &.pn-versa-card-hasBg {\n                padding: $versa-card-horizontal-padding;\n            }\n\n            &.pn-versa-card-horizontal--imgRight {\n                flex-direction: row-reverse;\n            }\n\n            &.pn-versa-card-imageGrow {\n                .pn-versa-card-imageWrapper {\n                    height: 100%;\n                }\n            }\n\n            &.pn-versa-card-center {\n                .pn-versa-card-imageWrapper {\n                    align-self: auto;\n                }\n\n                .pn-versa-card-content {\n                    align-items: stretch;\n                    text-align: center;\n\n                    .pn-versa-card-textContent,\n                    .pn-versa-card-linkwrapper {\n                        align-self: center;\n                    }\n\n                    .pn-versa-card-linkwrapper {\n                        [slot='cta'] {\n                            justify-content: center;\n                        }\n                    }\n                }\n            }\n\n            &.pn-versa-card-alignMiddle {\n                .pn-versa-card-content {\n                    justify-content: center; //overrides mobile alignMiddle which sets justify-content to space-between\n                }\n            }\n\n            &.pn-versa-card-hasRoundedImage {\n                .pn-versa-card-imageWrapper {\n                    width: 50%;\n\n                    [slot='image'] picture img {\n                        max-width: unset;\n                    }\n                }\n            }\n        }\n    }\n}\n\n@media (min-width: 1440px) {\n    pn-versa-card {\n        .pn-versa-card-horizontal.pn-versa-card-hasBg {\n            padding: $versa-card-horizontal-padding-lg;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .versa-card-cta-link-animated {\n        pn-icon {\n            position: relative;\n            left: $versa-card-cta-icon-offset;\n            transition: $versa-card-cta-transition;\n        }\n\n        &:hover pn-icon {\n            left: 0;\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n    .pn-versa-card-RTEtext {\n        [slot='rte'] {\n            @include shared-rte;\n\n            .pn-quote-card__section {\n                max-width: none !important;\n                background-color: transparent;\n            }\n\n            .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n                border: none !important;\n                padding-left: 0 !important;\n            }\n        }\n    }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n    pn-versa-card {\n        --rte-forms-spacing: #{rem16(12px)};\n    }\n}\n\n@media (min-width: 992px) {\n    .onequarterwidth {\n        pn-versa-card {\n            --versa-card-padding: #{rem16(8px)};\n            --versa-card-heading-size: #{rem16(20px)};\n            --versa-card-preamble-size: #{rem16(17px)};\n            --versa-card-label-size: #{rem16(11px)};\n\n            --rte-h2-size: #{rem16(20px)};\n            --rte-h3-size: #{rem16(18px)};\n            --rte-h4-size: #{rem16(16px)};\n        }\n    }\n\n    .halfwidth,\n    .fullwidth {\n        pn-versa-card {\n            --rte-blockquote-margin: #{rem16(24px)} 0;\n        }\n    }\n}\n\n@media (min-width: 1640px) {\n    .onequarterwidth {\n        pn-versa-card {\n            --versa-card-padding: #{rem16(16px)};\n        }\n    }\n}\n\n//when not wrapped by versacardblock class\npn-versa-card:not(:where(.versacardblock *)) {\n    height: auto;\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n  tag: 'pn-versa-card',\n  styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n  @Element() hostElement: HTMLElement;\n\n  @Prop() label?: string;\n  @Prop() heading?: string;\n  @Prop() preamble?: string;\n  @Prop() imageGrow = false;\n\n  // Layout / modifiers\n  @Prop() horizontal = false;\n  @Prop() imgAlignment?: 'left' | 'right' = 'left';\n  @Prop() hasImageCover = false;\n  @Prop() alignMiddle = false;\n  @Prop() center = false;\n\n  @Prop() roundImage = false;\n  @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  @Prop() opacity: number = 90;\n  @Prop() transparentBackground = false;\n\n  private cx(parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(' ');\n  }\n\n  private get hasImageCoverText(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n  }\n\n  private get normalizedOpacity(): number {\n    return Math.min(100, Math.max(0, this.opacity ?? 90));\n  }\n\n  // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n  private get cardColor() {\n    const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n    return value || null;\n  }\n\n  private get hasBg(): boolean {\n    return !!this.cardColor;\n  }\n\n  private get cardClass() {\n\n    return this.cx([\n      'pn-versa-card',\n\n      // modifiers      \n      this.horizontal && 'pn-versa-card-horizontal',\n      this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n      this.hasBg && 'pn-versa-card-hasBg',\n      this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n      this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n      this.roundImage && 'pn-versa-card-hasRoundedImage',\n      this.center && 'pn-versa-card-center',\n      this.alignMiddle && 'pn-versa-card-alignMiddle',\n      this.imageGrow && 'pn-versa-card-imageGrow',\n      this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n    ]);\n  }\n\n  private get showContent(): boolean {\n    return this.showTextContent || this.showCta;\n  }\n\n  private get showTextContent(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte);\n  }\n\n  @State() showImage: boolean = false;\n  @State() showRte: boolean = false;\n  @State() showCta: boolean = false;\n\n  componentWillLoad() {\n    this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n    this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n    this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n          {this.showImage && (\n            <div class=\"pn-versa-card-imageWrapper\">\n              <slot name=\"image\" />\n            </div>)}\n          {this.showContent && (\n            <div class=\"pn-versa-card-content\">\n              {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n                {this.label && (\n                  <span class=\"pn-versa-card-label\">{this.label}</span>\n                )}\n\n                {this.heading && (\n                  <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n                )}\n\n                {this.preamble && (\n                  <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n                )}\n\n                {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n                  <slot name=\"rte\" />\n                </div>\n                }\n              </div>}\n\n              {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n                <slot name=\"cta\" />\n              </div>}\n\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/cjs/translations-9510f11c.js

@@ -0,0 +1,198 @@
+'use strict';
+
+const translations = {
+    'sv': {
+        searchlabel: 'Sök',
+        searchplaceholder: 'Vad letar du efter?',
+        searchbuttontext: 'Sök',
+        menuHomeButton: 'Hem',
+        menuGoBackButton: 'Gå tillbaka',
+        mainMenuButton: 'Meny',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Inloggad som',
+        unifiedLoginButton: 'Logga in',
+        unifiedMyPagesButton: 'Mina sidor',
+        home: 'Hem',
+    },
+    'en': {
+        searchlabel: 'Search',
+        searchplaceholder: 'Search',
+        searchbuttontext: 'Search',
+        menuHomeButton: 'Home',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+        home: 'Home',
+    },
+    'da': {
+        searchlabel: 'Søg',
+        searchplaceholder: 'Søg',
+        searchbuttontext: 'Søg',
+        menuHomeButton: 'Hjem',
+        menuGoBackButton: 'Gå tilbage',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logget ind som',
+        unifiedLoginButton: 'Log ind',
+        unifiedMyPagesButton: 'Mine sider',
+        home: 'Hjem',
+    },
+    'no': {
+        searchlabel: 'Søk',
+        searchplaceholder: 'Søk',
+        searchbuttontext: 'Søk',
+        menuHomeButton: 'Hjem',
+        menuGoBackButton: 'Gå tilbake',
+        mainMenuButton: 'Meny',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logget på som',
+        unifiedLoginButton: 'Logg inn',
+        unifiedMyPagesButton: 'Sidene mine',
+        home: 'Hjem',
+    },
+    'fi': {
+        searchlabel: 'Hae',
+        searchplaceholder: 'Hae',
+        searchbuttontext: 'Hae',
+        menuHomeButton: 'Koti',
+        menuGoBackButton: 'Mene takaisin',
+        mainMenuButton: 'Valikko',
+        menuStartButton: 'Alkaa',
+        profileSelectionFlyoutHeading: 'Kirjautunut sisään nimellä',
+        unifiedLoginButton: 'Kirjaudu sisään',
+        unifiedMyPagesButton: 'Minun sivujani',
+        home: 'Koti',
+    },
+    'de': {
+        searchlabel: 'Suche',
+        searchplaceholder: 'Wonach suchen Sie?',
+        searchbuttontext: 'Suche',
+        menuHomeButton: 'Start',
+        menuGoBackButton: 'Geh zurück',
+        mainMenuButton: 'Menü',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Eingeloggt als',
+        unifiedLoginButton: 'Anmeldung',
+        unifiedMyPagesButton: 'Meine Seiten',
+        home: 'Start',
+    },
+    'zh': {
+        searchlabel: '搜索',
+        searchplaceholder: '搜索',
+        searchbuttontext: '搜索',
+        menuHomeButton: '主页',
+        menuGoBackButton: '回去',
+        mainMenuButton: '选择菜单',
+        menuStartButton: '开始',
+        home: '主页',
+    },
+    'it': {
+        searchlabel: 'Cerca',
+        searchplaceholder: 'Cerca',
+        searchbuttontext: 'Cerca',
+        menuHomeButton: 'Home',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+        home: 'Home',
+    },
+    'nl': {
+        searchlabel: 'Zoeken',
+        searchplaceholder: 'Zoeken',
+        searchbuttontext: 'Zoeken',
+        menuHomeButton: 'Home',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+        home: 'Home',
+    },
+    'es': {
+        searchplaceholder: 'Buscar',
+        searchlabel: 'Buscar',
+        searchbuttontext: 'Buscar',
+        menuHomeButton: 'Inicio',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+        home: 'Inicio',
+    },
+    'fr': {
+        searchplaceholder: 'Recherche',
+        searchlabel: 'Recherche',
+        searchbuttontext: 'Recherche',
+        menuHomeButton: 'Accueil',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+        home: 'Accueil',
+    },
+    'tr': {
+        searchlabel: 'Ara',
+        searchplaceholder: 'Ara',
+        searchbuttontext: 'Ara',
+        menuHomeButton: 'Anasayfa',
+        menuGoBackButton: 'Geri git',
+        mainMenuButton: 'Menü',
+        menuStartButton: 'Başlat',
+        profileSelectionFlyoutHeading: 'Oturum açma adı',
+        unifiedLoginButton: 'Oturum aç',
+        unifiedMyPagesButton: 'Sayfalarım',
+        home: 'Anasayfa',
+    },
+    'pt': {
+        searchlabel: 'Search',
+        searchplaceholder: 'Search',
+        searchbuttontext: 'Search',
+        menuHomeButton: 'Página inicial',
+        menuGoBackButton: 'Go back',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Start',
+        profileSelectionFlyoutHeading: 'Logged in as',
+        unifiedLoginButton: 'Log in',
+        unifiedMyPagesButton: 'My pages',
+    },
+    'pl': {
+        searchlabel: 'Szukaj',
+        searchplaceholder: 'Szukaj',
+        searchbuttontext: 'Szukaj',
+        menuHomeButton: 'Strona główna',
+        menuGoBackButton: 'Powrót',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Początek',
+        profileSelectionFlyoutHeading: 'Zalogowany(-a) jako',
+        unifiedLoginButton: 'Logowanie',
+        unifiedMyPagesButton: 'Moje strony',
+        home: 'Strona główna',
+    },
+    'pt-BR': {
+        searchlabel: 'Buscar',
+        searchplaceholder: 'Buscar',
+        searchbuttontext: 'Buscar',
+        menuHomeButton: 'Página inicial',
+        menuGoBackButton: 'Voltar',
+        mainMenuButton: 'Menu',
+        menuStartButton: 'Iniciar',
+        profileSelectionFlyoutHeading: 'Login efetuado como',
+        unifiedLoginButton: 'Fazer login',
+        unifiedMyPagesButton: 'Minhas páginas',
+    },
+};
+
+exports.translations = translations;
+
+//# sourceMappingURL=translations-9510f11c.js.map

package/cjs/translations-9510f11c.js.map

@@ -0,0 +1 @@
+{"file":"translations-9510f11c.js","mappings":"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","names":[],"sources":["src/components/layout-components/pn-marketweb-siteheader/translations.ts"],"sourcesContent":["export const translations = {\n  'sv': {\n    searchlabel: 'Sök',\n    searchplaceholder: 'Vad letar du efter?',\n    searchbuttontext: 'Sök',\n    menuHomeButton: 'Hem',\n    menuGoBackButton: 'Gå tillbaka',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Inloggad som',\n    unifiedLoginButton: 'Logga in',\n    unifiedMyPagesButton: 'Mina sidor',\n    home: 'Hem',\n  },\n  'en': {\n    searchlabel: 'Search',\n    searchplaceholder: 'Search',\n    searchbuttontext: 'Search',\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n    home: 'Home',\n  },\n  'da': {\n    searchlabel: 'Søg',\n    searchplaceholder: 'Søg',\n    searchbuttontext: 'Søg',\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbage',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logget ind som',\n    unifiedLoginButton: 'Log ind',\n    unifiedMyPagesButton: 'Mine sider',\n    home: 'Hjem',\n  },\n  'no': {\n    searchlabel: 'Søk',\n    searchplaceholder: 'Søk',\n    searchbuttontext: 'Søk',\n    menuHomeButton: 'Hjem',\n    menuGoBackButton: 'Gå tilbake',\n    mainMenuButton: 'Meny',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logget på som',\n    unifiedLoginButton: 'Logg inn',\n    unifiedMyPagesButton: 'Sidene mine',\n    home: 'Hjem',\n  },\n  'fi': {\n    searchlabel: 'Hae',\n    searchplaceholder: 'Hae',\n    searchbuttontext: 'Hae',\n    menuHomeButton: 'Koti',\n    menuGoBackButton: 'Mene takaisin',\n    mainMenuButton: 'Valikko',\n    menuStartButton: 'Alkaa',\n    profileSelectionFlyoutHeading: 'Kirjautunut sisään nimellä',\n    unifiedLoginButton: 'Kirjaudu sisään',\n    unifiedMyPagesButton: 'Minun sivujani',\n    home: 'Koti',\n  },\n  'de': {\n    searchlabel: 'Suche',\n    searchplaceholder: 'Wonach suchen Sie?',\n    searchbuttontext: 'Suche',\n    menuHomeButton: 'Start',\n    menuGoBackButton: 'Geh zurück',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Eingeloggt als',\n    unifiedLoginButton: 'Anmeldung',\n    unifiedMyPagesButton: 'Meine Seiten',\n    home: 'Start',\n  },\n  'zh': {\n    searchlabel: '搜索',\n    searchplaceholder: '搜索',\n    searchbuttontext: '搜索',\n    menuHomeButton: '主页',\n    menuGoBackButton: '回去',\n    mainMenuButton: '选择菜单',\n    menuStartButton: '开始',\n    home: '主页',\n  },\n  'it': {\n    searchlabel: 'Cerca',\n    searchplaceholder: 'Cerca',\n    searchbuttontext: 'Cerca',\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n    home: 'Home',\n\n  },\n  'nl': {\n    searchlabel: 'Zoeken',\n    searchplaceholder: 'Zoeken',\n    searchbuttontext: 'Zoeken',\n    menuHomeButton: 'Home',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n    home: 'Home',\n  },\n  'es': {\n    searchplaceholder: 'Buscar',\n    searchlabel: 'Buscar',\n    searchbuttontext: 'Buscar',\n    menuHomeButton: 'Inicio',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n    home: 'Inicio',\n  },\n  'fr': {\n    searchplaceholder: 'Recherche',\n    searchlabel: 'Recherche',\n    searchbuttontext: 'Recherche',\n    menuHomeButton: 'Accueil',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n    home: 'Accueil',\n  },\n  'tr': {\n    searchlabel: 'Ara',\n    searchplaceholder: 'Ara',\n    searchbuttontext: 'Ara',\n    menuHomeButton: 'Anasayfa',\n    menuGoBackButton: 'Geri git',\n    mainMenuButton: 'Menü',\n    menuStartButton: 'Başlat',\n    profileSelectionFlyoutHeading: 'Oturum açma adı',\n    unifiedLoginButton: 'Oturum aç',\n    unifiedMyPagesButton: 'Sayfalarım',\n    home: 'Anasayfa',\n  },\n  'pt': {\n    searchlabel: 'Search',\n    searchplaceholder: 'Search',\n    searchbuttontext: 'Search',\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Go back',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Start',\n    profileSelectionFlyoutHeading: 'Logged in as',\n    unifiedLoginButton: 'Log in',\n    unifiedMyPagesButton: 'My pages',\n  },\n  'pl': {\n    searchlabel: 'Szukaj',\n    searchplaceholder: 'Szukaj',\n    searchbuttontext: 'Szukaj',\n    menuHomeButton: 'Strona główna',\n    menuGoBackButton: 'Powrót',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Początek',\n    profileSelectionFlyoutHeading: 'Zalogowany(-a) jako',\n    unifiedLoginButton: 'Logowanie',\n    unifiedMyPagesButton: 'Moje strony',\n    home: 'Strona główna',\n  },\n  'pt-BR': {\n    searchlabel: 'Buscar',\n    searchplaceholder: 'Buscar',\n    searchbuttontext: 'Buscar',\n    menuHomeButton: 'Página inicial',\n    menuGoBackButton: 'Voltar',\n    mainMenuButton: 'Menu',\n    menuStartButton: 'Iniciar',\n    profileSelectionFlyoutHeading: 'Login efetuado como',\n    unifiedLoginButton: 'Fazer login',\n    unifiedMyPagesButton: 'Minhas páginas',\n  },\n};\n"],"version":3}

package/collection/collection-manifest.json

@@ -32,6 +32,10 @@
     "components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js",
     "components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.js",
     "components/input/pn-multiple-input/pn-multiple-input.js",
+    "components/layout-components/pn-marketweb-header/pn-marketweb-header.js",
+    "components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.js",
+    "components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.js",
+    "components/layout-components/pn-marketweb-header/components/pn-marketweb-header-top-row.js",
     "components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.js",
     "components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js",
@@ -53,6 +57,7 @@
     "components/navigation/pn-mainnav/pn-mainnav-link.js",
     "components/navigation/pn-mainnav/pn-mainnav-list.js",
     "components/navigation/pn-mainnav/pn-mainnav.js",
+    "components/navigation/pn-marketweb-header-toggle/pn-marketweb-header-toggle.js",
     "components/navigation/pn-sidenav/pn-sidenav-level.js",
     "components/navigation/pn-sidenav/pn-sidenav-link.js",
     "components/navigation/pn-sidenav/pn-sidenav-togglebutton.js",

package/collection/components/cards/pn-versa-card/pn-versa-card.css

@@ -80,6 +80,10 @@ pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture im
   border-radius: 1.6rem;
   object-fit: cover;
 }
+pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture {
+  max-width: 70rem;
+  margin: 0 auto;
+}
 pn-versa-card .pn-versa-card .pn-versa-card-content {
   display: flex;
   flex-direction: column;
@@ -92,13 +96,16 @@ pn-versa-card .pn-versa-card .pn-versa-card-content {
   --pn-link-current-color: var(--versa-link-color);
   --rte-link-color: var(--pn-link-current-color);
 }
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent,
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper {
+  max-width: 70rem;
+  margin: 0 auto;
+}
 pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent {
   display: flex;
   flex-direction: column;
   color: var(--versa-card-text-color);
-  max-width: 70rem;
   width: 100%;
-  margin: 0 auto;
 }
 pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper {
   display: flex;
@@ -157,6 +164,10 @@ pn-versa-card .pn-versa-card-hasBg .pn-versa-card-content {
 }
 pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground::before {
   opacity: 0.9;
+  transition: opacity 500ms ease-in-out;
+}
+pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground:hover::before {
+  opacity: 0.98;
 }
 pn-versa-card .pn-versa-card-hasImageCover {
   padding: 0;
@@ -279,6 +290,7 @@ pn-versa-card[data-card-color=blue50] {
 }
 pn-versa-card[data-card-color=blue400] {
   --versa-card-bg: #00a0d6;
+  --rte-heading-color:#ffffff;
 }
 pn-versa-card[data-card-color=blue900] {
   --versa-card-bg: #0d234b;
@@ -286,6 +298,7 @@ pn-versa-card[data-card-color=blue900] {
   --versa-card-text-color: #ffffff;
   --versa-card-blockquote-border-color: #ffffff;
   --versa-link-color: #ffffff;
+  --rte-heading-color:#ffffff;
 }
 pn-versa-card[data-card-color=coral25] {
   --versa-card-bg: #fef7f6;
@@ -376,6 +389,10 @@ pn-versa-card .versa-card-cta-link-animated:hover pn-icon {
 pn-versa-card .pn-versa-card-RTEtext [slot=rte] {
   color: var(--rte-text-color, inherit);
 }
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] > *:last-child,
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] > *:last-child *:last-child {
+  margin-bottom: 0;
+}
 pn-versa-card .pn-versa-card-RTEtext [slot=rte] a {
   text-decoration: underline;
 }
@@ -515,4 +532,12 @@ pn-versa-card .pn-versa-card-RTEtext [slot=rte] .quoteblock-section .pn-quote-ca
   .fullwidth pn-versa-card {
     --rte-blockquote-margin: 2.4rem 0;
   }
+}
+@media (min-width: 1640px) {
+  .onequarterwidth pn-versa-card {
+    --versa-card-padding: 1.6rem;
+  }
+}
+pn-versa-card:not(:where(.versacardblock *)) {
+  height: auto;
 }

package/collection/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.css

@@ -0,0 +1,204 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+pn-marketweb-header-main-row {
+  display: contents;
+}
+pn-marketweb-header-main-row .siteheader-row-main {
+  background-color: var(--siteheader-main-row-bg-mobile, transparent);
+}
+pn-marketweb-header-main-row .siteheader-mobile-left {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  order: 1;
+}
+pn-marketweb-header-main-row .siteheader-mobile-logo {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  order: 1;
+}
+pn-marketweb-header-main-row .siteheader-mobile-logo .siteheader-logocontainer {
+  min-height: 5.6rem;
+  background: transparent;
+  position: static;
+  left: auto;
+  transform: none;
+}
+pn-marketweb-header-main-row .siteheader-mobile-logo .siteheader-logolink {
+  max-height: 5.6rem;
+}
+pn-marketweb-header-main-row .siteheader-mobile-logo .siteheader-logo {
+  display: block;
+  width: auto;
+  max-width: 12.7rem;
+  height: 2.4rem;
+}
+pn-marketweb-header-main-row .siteheader-mobile-menu-toggle {
+  display: none;
+  align-items: center;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-middle {
+  display: none;
+  align-items: center;
+  justify-content: flex-end;
+  order: 3;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-middle > pn-marketweb-siteheader-search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-middle > [slot=header-bottom-button] {
+  display: contents;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  order: 2;
+}
+pn-marketweb-header-main-row .siteheader-menu {
+  max-width: 100%;
+  overflow: visible;
+}
+pn-marketweb-header-main-row .siteheader-menu pn-mainnav-link a[target]::after {
+  content: none;
+}
+pn-marketweb-header-main-row .siteheader-menu pn-marketweb-siteheader-search {
+  width: 100%;
+  padding: 0.3rem 1.6rem;
+}
+pn-marketweb-header-main-row .siteheader-menu [slot=top] pn-search-field {
+  width: 100%;
+}
+pn-marketweb-header-main-row .siteheader-menu nav.mainnav[data-menu-open=true] > pn-mainnav-level[data-level="1"] {
+  display: block;
+  margin-top: 0;
+  height: calc(100dvh - 0);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-groups {
+  display: flex;
+  flex-direction: column;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-list {
+  overflow: visible;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-divider {
+  display: none;
+}
+pn-marketweb-header-main-row .siteheader-menu-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+pn-marketweb-header-main-row .siteheader-menu-footer > * {
+  margin: 1.6rem;
+}
+
+body[data-siteheader-menuopen=false] pn-marketweb-header-main-row .siteheader-mobile-logo, body:not([data-siteheader-menuopen]) pn-marketweb-header-main-row .siteheader-mobile-logo {
+  display: flex;
+}
+body[data-siteheader-menuopen=false] pn-marketweb-header-main-row .siteheader-mobile-menu-toggle, body:not([data-siteheader-menuopen]) pn-marketweb-header-main-row .siteheader-mobile-menu-toggle {
+  display: none;
+}
+body[data-siteheader-menuopen=true] pn-marketweb-header-main-row .siteheader-mobile-logo {
+  display: none;
+}
+body[data-siteheader-menuopen=true] pn-marketweb-header-main-row .siteheader-mobile-menu-toggle {
+  display: flex;
+}
+
+@media screen and (min-width: 769px) {
+  pn-marketweb-header-main-row .siteheader-row-main {
+    background-color: var(--siteheader-main-row-bg-tablet, transparent);
+  }
+  pn-marketweb-header-main-row .siteheader-mobile-left {
+    display: none;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-middle {
+    display: flex;
+    margin-left: auto;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-menu {
+    justify-content: flex-start;
+  }
+  pn-marketweb-header-main-row .siteheader-menu-footer {
+    display: none;
+  }
+  body[data-siteheader-menuopen=false] pn-marketweb-header-main-row .siteheader-mobile-logo, body:not([data-siteheader-menuopen]) pn-marketweb-header-main-row .siteheader-mobile-logo, body[data-siteheader-menuopen=true] pn-marketweb-header-main-row .siteheader-mobile-logo {
+    display: flex;
+  }
+  body[data-siteheader-menuopen=false] pn-marketweb-header-main-row .siteheader-mobile-menu-toggle, body:not([data-siteheader-menuopen]) pn-marketweb-header-main-row .siteheader-mobile-menu-toggle, body[data-siteheader-menuopen=true] pn-marketweb-header-main-row .siteheader-mobile-menu-toggle {
+    display: none;
+  }
+}
+@media screen and (min-width: 1024px) {
+  pn-marketweb-header-main-row .siteheader-mainnav-groups {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: stretch;
+    vertical-align: top;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-middle {
+    order: 3;
+    margin-left: 1.6rem;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-menu {
+    order: 2;
+  }
+  pn-marketweb-header-main-row .siteheader-menu {
+    margin-top: auto;
+    overflow: visible;
+  }
+  pn-marketweb-header-main-row .siteheader-menu nav.mainnav[data-menu-open=true] > pn-mainnav-level[data-level="1"] {
+    margin-top: 0;
+    height: auto;
+    overflow-y: visible;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-list {
+    display: inline-flex;
+    align-items: stretch;
+    vertical-align: top;
+  }
+  pn-marketweb-header-main-row .siteheader-mainnav-divider {
+    display: inline-flex;
+    align-self: center;
+    width: 1px;
+    min-height: 4rem;
+    margin: 0 0.8rem;
+    background: var(--siteheader-mainnav-divider-color, #d3cecb);
+  }
+}