npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.2 → 4.0.0

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

Files changed (1186) hide show

package/components/pn-swan2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-swan2.js","mappings":"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","names":[],"sources":["src/components/minor/pn-swan/translations.ts","src/components/minor/pn-swan/pn-swan.scss?tag=pn-swan","src/components/minor/pn-swan/pn-swan.tsx"],"sourcesContent":["export const translations = {\n sv: {\n preamble: 'E-handelstransport',\n text: 'Vi erbjuder Svanenmärkta leveranser av e-handelspaket',\n },\n en: {\n preamble: 'E-commerce transport',\n text: 'We offer Nordic Ecolabelled deliveries of e-commerce packages',\n },\n da: {\n preamble: 'E-handel transport',\n text: 'Vi tilbyder svanemærkede leveringer af e-handelspakker',\n },\n no: {\n preamble: 'E-handelstransport',\n text: 'Vi tilbyr svanemerkede leveranser av e-handelspakker',\n },\n fi: {\n preamble: 'Sähköisen kaupankäynnin kuljetus',\n text: 'Tarjoamme pohjoismaisia Joutsenmerkittyjä verkkokaupan pakettien toimituksia',\n },\n};\n","@import '../../../globals/main.scss';\npn-swan {\n a {\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n span,\n .pn-swan-text {\n text-decoration: underline;\n }\n }\n }\n\n .pn-swan__wrapper {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n gap: 0.8rem;\n\n color: $gray900;\n\n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n gap: 2.4rem;\n }\n }\n\n .pn-swan-icon__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .pn-swan-icon {\n svg {\n width: 6rem;\n }\n }\n\n .pn-swan-icon__preamble {\n text-align: center;\n font-size: 1rem;\n font-weight: 500;\n\n span {\n display: block;\n font-weight: 400;\n }\n }\n\n .pn-swan-text {\n font-size: 1.2rem;\n max-width: 20rem;\n text-align: center;\n color: $blue700;\n\n @media screen and (min-width: $min-width-md) {\n text-align: left;\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-swan',\n styleUrl: 'pn-swan.scss',\n})\nexport class PnSwan {\n @Element() hostElement: HTMLElement;\n @Prop() licenseNumber: string;\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @Prop() linkTo: string;\n\n @State() i18n: any;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n render() {\n return (\n <Host>\n <a href={this.linkTo}>\n <div class=\"pn-swan__wrapper\">\n <div class=\"pn-swan-icon__wrapper\">\n <div class=\"pn-swan-icon\">\n <svg viewBox=\"0 0 57 57\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_17509_174280)\">\n <path\n d=\"M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z\"\n fill=\"white\"\n />\n <path\n d=\"M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.468C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.356 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.7179 36.564 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.06C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.06ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z\"\n fill=\"#005D92\"\n />\n <path\n d=\"M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z\"\n fill=\"black\"\n />\n <path d=\"M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z\" fill=\"black\" />\n <path\n d=\"M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z\"\n fill=\"black\"\n />\n <path\n d=\"M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z\"\n fill=\"black\"\n />\n <path\n d=\"M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z\"\n fill=\"black\"\n />\n <path\n d=\"M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z\"\n fill=\"black\"\n />\n <path\n d=\"M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z\"\n fill=\"black\"\n />\n <path\n d=\"M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z\"\n fill=\"black\"\n />\n <path\n d=\"M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z\"\n fill=\"black\"\n />\n <path\n d=\"M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z\"\n fill=\"black\"\n />\n <path\n d=\"M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z\"\n fill=\"black\"\n />\n <path\n d=\"M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z\"\n fill=\"white\"\n />\n <path\n d=\"M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.4679C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.3559 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.71789 36.5639 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.0599C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.0599ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z\"\n fill=\"#00A65D\"\n />\n <path\n d=\"M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z\"\n fill=\"black\"\n />\n <path d=\"M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z\" fill=\"black\" />\n <path\n d=\"M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z\"\n fill=\"black\"\n />\n <path\n d=\"M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z\"\n fill=\"black\"\n />\n <path\n d=\"M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z\"\n fill=\"black\"\n />\n <path\n d=\"M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z\"\n fill=\"black\"\n />\n <path\n d=\"M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z\"\n fill=\"black\"\n />\n <path\n d=\"M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z\"\n fill=\"black\"\n />\n <path\n d=\"M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z\"\n fill=\"black\"\n />\n <path\n d=\"M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z\"\n fill=\"black\"\n />\n <path\n d=\"M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_17509_174280\">\n <rect width=\"56\" height=\"56\" fill=\"white\" transform=\"translate(0.5 0.5)\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"pn-swan-icon__preamble\">\n {this.i18n.preamble} <span>{this.licenseNumber}</span>\n </div>\n </div>\n <div class=\"pn-swan-text\">{this.i18n.text}</div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-swan2.js","mappings":";;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,uDAAuD;KAC9D;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,sBAAsB;QAChC,IAAI,EAAE,+DAA+D;KACtE;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,wDAAwD;KAC/D;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,sDAAsD;KAC7D;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,kCAAkC;QAC5C,IAAI,EAAE,gFAAgF;KACvF;CACF;;ACrBD,MAAM,SAAS,GAAG,ksCAAksC,CAAC;AACrtC,qBAAe,SAAS;;MCOX,MAAM;;;;;wBAG0C,IAAI;;;;;IAK/D,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0DAAG,IAAI,EAAE,IAAI,CAAC,MAAM,IAClB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACrE,uEAAa,0BAA0B,IACrC,6DACE,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,+IAA+I,EACjJ,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,u2DAAu2D,EACz2D,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,2rBAA2rB,EAC7rB,IAAI,EAAC,OAAO,GACZ,EACF,6DAAM,CAAC,EAAC,+HAA+H,EAAC,IAAI,EAAC,OAAO,GAAG,EACvJ,6DACE,CAAC,EAAC,oNAAoN,EACtN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,0MAA0M,EAC5M,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,iJAAiJ,EACnJ,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,8WAA8W,EAChX,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,6iBAA6iB,EAC/iB,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,+IAA+I,EACjJ,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,+IAA+I,EACjJ,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,+2DAA+2D,EACj3D,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,2rBAA2rB,EAC7rB,IAAI,EAAC,OAAO,GACZ,EACF,6DAAM,CAAC,EAAC,+HAA+H,EAAC,IAAI,EAAC,OAAO,GAAG,EACvJ,6DACE,CAAC,EAAC,oNAAoN,EACtN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,0MAA0M,EAC5M,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,iJAAiJ,EACnJ,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,8WAA8W,EAChX,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,6iBAA6iB,EAC/iB,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,CAAC,EAAC,+IAA+I,EACjJ,IAAI,EAAC,OAAO,GACZ,CACA,EACJ,+DACE,iEAAU,EAAE,EAAC,oBAAoB,IAC/B,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,oBAAoB,GAAG,CAClE,CACN,CACH,CACF,EACN,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,OAAE,+DAAO,IAAI,CAAC,aAAa,CAAQ,CAClD,CACF,EACN,4DAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAO,CAC5C,CACJ,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-swan/translations.ts","src/components/minor/pn-swan/pn-swan.scss?tag=pn-swan","src/components/minor/pn-swan/pn-swan.tsx"],"sourcesContent":["export const translations = {\n sv: {\n preamble: 'E-handelstransport',\n text: 'Vi erbjuder Svanenmärkta leveranser av e-handelspaket',\n },\n en: {\n preamble: 'E-commerce transport',\n text: 'We offer Nordic Ecolabelled deliveries of e-commerce packages',\n },\n da: {\n preamble: 'E-handel transport',\n text: 'Vi tilbyder svanemærkede leveringer af e-handelspakker',\n },\n no: {\n preamble: 'E-handelstransport',\n text: 'Vi tilbyr svanemerkede leveranser av e-handelspakker',\n },\n fi: {\n preamble: 'Sähköisen kaupankäynnin kuljetus',\n text: 'Tarjoamme pohjoismaisia Joutsenmerkittyjä verkkokaupan pakettien toimituksia',\n },\n};\n","@import '../../../globals/main.scss';\npn-swan {\n a {\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n span,\n .pn-swan-text {\n text-decoration: underline;\n }\n }\n }\n\n .pn-swan__wrapper {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n gap: 0.8rem;\n\n color: $gray900;\n\n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n gap: 2.4rem;\n }\n }\n\n .pn-swan-icon__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .pn-swan-icon {\n svg {\n width: 6rem;\n }\n }\n\n .pn-swan-icon__preamble {\n text-align: center;\n font-size: 1rem;\n font-weight: 500;\n\n span {\n display: block;\n font-weight: 400;\n }\n }\n\n .pn-swan-text {\n font-size: 1.2rem;\n max-width: 20rem;\n text-align: center;\n color: $blue700;\n\n @media screen and (min-width: $min-width-md) {\n text-align: left;\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-swan',\n styleUrl: 'pn-swan.scss',\n})\nexport class PnSwan {\n @Element() hostElement: HTMLElement;\n @Prop() licenseNumber: string;\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @Prop() linkTo: string;\n\n @State() i18n: any;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n render() {\n return (\n <Host>\n <a href={this.linkTo}>\n <div class=\"pn-swan__wrapper\">\n <div class=\"pn-swan-icon__wrapper\">\n <div class=\"pn-swan-icon\">\n <svg viewBox=\"0 0 57 57\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_17509_174280)\">\n <path\n d=\"M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z\"\n fill=\"white\"\n />\n <path\n d=\"M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.468C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.356 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.7179 36.564 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.06C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.06ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z\"\n fill=\"#005D92\"\n />\n <path\n d=\"M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z\"\n fill=\"black\"\n />\n <path d=\"M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z\" fill=\"black\" />\n <path\n d=\"M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z\"\n fill=\"black\"\n />\n <path\n d=\"M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z\"\n fill=\"black\"\n />\n <path\n d=\"M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z\"\n fill=\"black\"\n />\n <path\n d=\"M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z\"\n fill=\"black\"\n />\n <path\n d=\"M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z\"\n fill=\"black\"\n />\n <path\n d=\"M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z\"\n fill=\"black\"\n />\n <path\n d=\"M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z\"\n fill=\"black\"\n />\n <path\n d=\"M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z\"\n fill=\"black\"\n />\n <path\n d=\"M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z\"\n fill=\"black\"\n />\n <path\n d=\"M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z\"\n fill=\"white\"\n />\n <path\n d=\"M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.4679C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.3559 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.71789 36.5639 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.0599C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.0599ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z\"\n fill=\"#00A65D\"\n />\n <path\n d=\"M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z\"\n fill=\"black\"\n />\n <path d=\"M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z\" fill=\"black\" />\n <path\n d=\"M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z\"\n fill=\"black\"\n />\n <path\n d=\"M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z\"\n fill=\"black\"\n />\n <path\n d=\"M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z\"\n fill=\"black\"\n />\n <path\n d=\"M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z\"\n fill=\"black\"\n />\n <path\n d=\"M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z\"\n fill=\"black\"\n />\n <path\n d=\"M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z\"\n fill=\"black\"\n />\n <path\n d=\"M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z\"\n fill=\"black\"\n />\n <path\n d=\"M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z\"\n fill=\"black\"\n />\n <path\n d=\"M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_17509_174280\">\n <rect width=\"56\" height=\"56\" fill=\"white\" transform=\"translate(0.5 0.5)\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"pn-swan-icon__preamble\">\n {this.i18n.preamble} <span>{this.licenseNumber}</span>\n </div>\n </div>\n <div class=\"pn-swan-text\">{this.i18n.text}</div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-teaser-card.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeadingTag } from './HeadingTag.js';
-const pnTeaserCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";
+const pnTeaserCardCss = "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}}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";
 const PnTeaserCardStyle0 = pnTeaserCardCss;
 const PnTeaserCard$1 = /*@__PURE__*/ proxyCustomElement(class PnTeaserCard extends HTMLElement {
@@ -10,7 +11,7 @@ const PnTeaserCard$1 = /*@__PURE__*/ proxyCustomElement(class PnTeaserCard exten
         this.text = null;
         this.heading = null;
         this.label = null;
-        this.headingLevel = undefined;
+        this.headingLevel = 'h3';
         this.dataCardColor = 'coral';
         this.dataCardAlignment = 'left';
         this.hasCtaSlotContent = false;
@@ -20,22 +21,17 @@ const PnTeaserCard$1 = /*@__PURE__*/ proxyCustomElement(class PnTeaserCard exten
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
-        if (!this.headingLevel || isNaN(this.headingLevel)) {
-            this.headingLevel = 3;
-        }
     }
-    //render
     render() {
         const labelToCapitals = this.label?.toUpperCase();
-        const HeadingTag = `h${this.headingLevel ?? 3}`;
-        return (h(Host, { key: '25cfc8729df548f28a7577a2d0fdc3065d30e5e5' }, h("slot", { key: '834e0525865f88c787934c10e01ec6383cb91ce5', name: "clickable-block-wrapper" }), h("div", { key: 'ba3820116797f86be9db43183a64db20a91887df', class: "pn-teaser-card__container" }, h("div", { key: 'cdd17367c264860077cdf2aff76fe381b1be1e5e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '38a98a3440f3b29a1028abcaa31803d0de4dd917', name: "illustration" })), h("div", { key: '528a7a7425b031486521270ac184de4c1a34a9a0', class: "pn-teaser-card__container__content" }, h("div", { key: '7e848e8fe005a8aa9867861abc355b610150d44b', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: 'c741d9222acf8cb73f8c0060c799911d21fe26d8', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: 'c74daeb97ac60690c146832417ac394825fadef0', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '0da77ddcf36cadaad9df5bfbefcb2609bc7161c8', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '1af0c6c39adfa993abacc832c1bc8326e4f3996b', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '6bc3e69ed72ad8dc978d40f2ebb1b28bc6f2be51', name: "cta" })))))));
+        return (h(Host, { key: 'b5ee6a71383c676dff65be68bd2c583af8d4b73e' }, h("slot", { key: '26f672cccdf0b4a647608dec90d9da91d5326f2e', name: "clickable-block-wrapper" }), h("div", { key: '664a86e96d02078ad7d3b9feec848620b08a64e7', class: "pn-teaser-card__container" }, h("div", { key: 'b2690687573bc1421b4087b25574aac4e1bf210e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '92c205f97f90b35df8f34f6905ebb5f858ba3115', name: "illustration" })), h("div", { key: 'f9b96157ea921c801f993133b0b4e7d785224a3b', class: "pn-teaser-card__container__content" }, h("div", { key: '150b6993e403a65c3d75794554b39a2c4c073099', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '20973e8c988b6f3c5bed312ad6f5e339f22565f4', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: '64cdb89e6106839ef6bd7d6a6912c69bad4e1d85', level: this.headingLevel, cssClass: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '7366108ac28438903a71cb89e6a4d70d3e5ef96a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: 'dcee0ddb4c36f90e321db3c8817b444794851b93', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '1aedb8f19e547e163676b76b502a155603c0b3ce', name: "cta" })))))));
     }
     static get style() { return PnTeaserCardStyle0; }
 }, [4, "pn-teaser-card", {
         "text": [1],
         "heading": [1],
         "label": [1],
-        "headingLevel": [2, "heading-level"],
+        "headingLevel": [1, "heading-level"],
         "dataCardColor": [513, "data-card-color"],
         "dataCardAlignment": [513, "data-card-alignment"],
         "hasCtaSlotContent": [32],

package/components/pn-teaser-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-teaser-card.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8iTAA8iT,CAAC;AACvkT,2BAAe,eAAe;;MCKjBA,cAAY;;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;;6BAEoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAErF,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,YAAmB,CAAC,EAAE;YACzD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;SACvB;KACF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,CAAC;QAEhD,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAc,EAC7H,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTeaserCard"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $min-width-md) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth:not(.familywrapperblock) {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $min-width-xl) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $min-width-xxl) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-md) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $min-width-md) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop() headingLevel?: number;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n\n if (!this.headingLevel \|\| isNaN(this.headingLevel as any)) {\n this.headingLevel = 3;\n }\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n const HeadingTag = `h${this.headingLevel ?? 3}`;\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n {this.heading && <HeadingTag class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</HeadingTag>}\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-teaser-card.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,u3TAAu3T,CAAC;AACh5T,2BAAe,eAAe;;MCMjBA,cAAY;;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;4BACG,IAAI;6BACa,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,8DAA8D,IACzH,IAAI,CAAC,OAAO,CACF,EACf,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTeaserCard"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $min-width-md) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth:not(.familywrapperblock) {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $min-width-xl) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $min-width-xxl) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth:not(.familywrapperblock) {\n & pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-md) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $min-width-md) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $min-width-xl) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\nimport { HeadingTag } from '@/globals/HeadingTag';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n \n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop() headingLevel?: string = 'h3';\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n {this.heading && <HeadingTag level={this.headingLevel} cssClass=\"pn-teaser-card__container__content__text__container__heading\">\n {this.heading}\n </HeadingTag>}\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-titletag2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnTitletagCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-titletag{display:inline-flex;border-radius:0.4rem;min-height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem;gap:0.6em}pn-titletag[color=green700],pn-titletag[color=green]{color:#005e41;background:#dcf6e7}pn-titletag[color=blue700],pn-titletag[color=blue]{background:#e0f8ff;color:#005d92}pn-titletag[color=coral700],pn-titletag[color=coral]{background:#fdefee;color:#9b1c2e}pn-titletag[color=gray900],pn-titletag[color=gray],pn-titletag[color=grey]{background:#d3cecb;color:#2d2013}pn-titletag[color=gray50],pn-titletag[color=lightgray],pn-titletag[color=lightgrey]{background:#f3f2f2;color:#2d2013}";
+const pnTitletagCss = "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-titletag{display:inline-flex;border-radius:0.4rem;min-height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem;gap:0.6em}pn-titletag[color=green700],pn-titletag[color=green]{color:#005e41;background:#dcf6e7}pn-titletag[color=blue700],pn-titletag[color=blue]{background:#e0f8ff;color:#005d92}pn-titletag[color=coral700],pn-titletag[color=coral]{background:#fdefee;color:#9b1c2e}pn-titletag[color=gray900],pn-titletag[color=gray],pn-titletag[color=grey]{background:#d3cecb;color:#2d2013}pn-titletag[color=gray50],pn-titletag[color=lightgray],pn-titletag[color=lightgrey]{background:#f3f2f2;color:#2d2013}";
 const PnTitletagStyle0 = pnTitletagCss;
 const PnTiletag = /*@__PURE__*/ proxyCustomElement(class PnTiletag extends HTMLElement {
@@ -12,7 +12,7 @@ const PnTiletag = /*@__PURE__*/ proxyCustomElement(class PnTiletag extends HTMLE
     }
     get hostElement() { return this; }
     render() {
-        return (h(Host, { key: '01ea9f33d75dac321884aae478532c4df23c2390' }, h("slot", { key: '5d9e6425f8f1b1efd3661f99f4d7735af71f667e' }), this.icon ? h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
+        return (h(Host, { key: '989e8d33c93954b1a77bfb87d92634d2b09b906f' }, h("slot", { key: 'fcb48d9ce70886036834c994ba3949863241aa7c' }), this.icon ? h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
     }
     static get style() { return PnTitletagStyle0; }
 }, [4, "pn-titletag", {

package/components/pn-titletag2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-titletag2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~6tBAA6tB~~,CAAC;~~AACpvB~~,yBAAe,aAAa;;MCKf,SAAS;;;;oBAEG,IAAI;qBAG6B,UAAU;;;IAIlE,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,EACP,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-titletag/pn-titletag.scss?tag=pn-titletag","src/components/minor/pn-titletag/pn-titletag.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-titletag {\n display: inline-flex;\n border-radius: 0.4rem;\n min-height: 2.5em;\n font-weight: normal;\n font-size: 0.75em;\n text-align: center;\n vertical-align: bottom;\n padding: 0.6rem;\n gap: 0.6em;\n\n pn-icon {\n }\n\n &[color='green700'],\n &[color='green'] {\n color: $green700;\n background: $green50;\n }\n\n &[color='blue700'],\n &[color='blue'] {\n background: $blue50;\n color: $blue700;\n }\n\n &[color='coral700'],\n &[color='coral'] {\n background: $coral50;\n color: $coral700;\n }\n\n &[color='gray900'],\n &[color='gray'],\n &[color='grey'] {\n background: $gray200;\n color: $gray900;\n }\n\n &[color='gray50'],\n &[color='lightgray'],\n &[color='lightgrey'] {\n background: $gray50;\n color: $gray900;\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-titletag',\n styleUrl: 'pn-titletag.scss',\n})\nexport class PnTiletag {\n /** Icon of the tag /\n @Prop() icon: string = null;\n\n /* Icon of the tag */\n @Prop({ mutable: true, reflect: true }) color: string = 'green700';\n\n @Element() hostElement: HTMLElement;\n\n render() {\n return (\n <Host>\n <slot />\n {this.icon ? <pn-icon icon={this.icon} small=\"false\" color={this.color}></pn-icon> : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-titletag2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,siCAAsiC,CAAC;AAC7jC,yBAAe,aAAa;;MCKf,SAAS;;;;oBAEG,IAAI;qBAG6B,UAAU;;;IAIlE,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,EACP,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-titletag/pn-titletag.scss?tag=pn-titletag","src/components/minor/pn-titletag/pn-titletag.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-titletag {\n display: inline-flex;\n border-radius: 0.4rem;\n min-height: 2.5em;\n font-weight: normal;\n font-size: 0.75em;\n text-align: center;\n vertical-align: bottom;\n padding: 0.6rem;\n gap: 0.6em;\n\n pn-icon {\n }\n\n &[color='green700'],\n &[color='green'] {\n color: $green700;\n background: $green50;\n }\n\n &[color='blue700'],\n &[color='blue'] {\n background: $blue50;\n color: $blue700;\n }\n\n &[color='coral700'],\n &[color='coral'] {\n background: $coral50;\n color: $coral700;\n }\n\n &[color='gray900'],\n &[color='gray'],\n &[color='grey'] {\n background: $gray200;\n color: $gray900;\n }\n\n &[color='gray50'],\n &[color='lightgray'],\n &[color='lightgrey'] {\n background: $gray50;\n color: $gray900;\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-titletag',\n styleUrl: 'pn-titletag.scss',\n})\nexport class PnTiletag {\n /** Icon of the tag /\n @Prop() icon: string = null;\n\n /* Icon of the tag */\n @Prop({ mutable: true, reflect: true }) color: string = 'green700';\n\n @Element() hostElement: HTMLElement;\n\n render() {\n return (\n <Host>\n <slot />\n {this.icon ? <pn-icon icon={this.icon} small=\"false\" color={this.color}></pn-icon> : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-usp-promoter.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnUspPromoterCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:flex;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:flex;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{align-items:center;text-align:left;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:flex;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:flex;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #a6a6a6;border-radius:0.8rem;color:#fff;display:inline-block;line-height:0;text-decoration:none;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0d234b}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0d234b;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0d234b}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=app-store]>a img{height:4rem}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:flex;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:flex;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:flex;flex-direction:column;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:flex;flex-direction:row;justify-content:center}}";
+const pnUspPromoterCss = "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-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:flex;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:flex;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{align-items:center;text-align:left;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:flex;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:flex;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #a6a6a6;border-radius:0.8rem;color:#fff;display:inline-block;line-height:0;text-decoration:none;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0d234b}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0d234b;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0d234b}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=app-store]>a img{height:4rem}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:flex;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:flex;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:flex;flex-direction:column;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:flex;flex-direction:row;justify-content:center}}";
 const PnUspPromoterStyle0 = pnUspPromoterCss;
 const PnUspPromoter$1 = /*@__PURE__*/ proxyCustomElement(class PnUspPromoter extends HTMLElement {
@@ -31,7 +31,7 @@ const PnUspPromoter$1 = /*@__PURE__*/ proxyCustomElement(class PnUspPromoter ext
             rightAlign ? "usp-promoter--right-align" : "",
         ].join(' ');
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-        return (h(Host, { key: '264c4f6da6ddee9569089074fc08ccf9e5c371ba' }, h("div", { key: 'c832ef39dcfece93643964f6994c91c79f7f8ea0', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '41f8995ae12546fd008a8eec5b5de0a9482d3312', class: "usp-promoter__content" }, h("slot", { key: '3a967323a69ec83ed03d619ba6a2fa9115fa2a90', name: "illustration" }), h("div", { key: 'ed9bcfb59255d8369b41386b834b773b8aad3a71', class: "usp-promoter__content-wrapper" }, h("h2", { key: '58eb3a2d9650920070c25a65e699d21cfba8b118', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '08fc4b8dcc49746a699033c7ad1009ade8d46e71' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '9452a7544e7255842331591f1d9178018c594524', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: 'd1eee8f90dd6280de590e288ac7f11beb1aa5dd1', name: "app-store" }), h("slot", { key: 'cf45783c7d093218e4aeb5707da2b742225a4594', name: "usp-buttons" }))))));
+        return (h(Host, { key: '65ca041fe5a9d764d892bf5f39c877418835ba73' }, h("div", { key: '45bb6090cc1d44f490e11fc3688ac2175788798d', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '76fe7cf83ef175d1a6e145f9a826bb4eb34cb248', class: "usp-promoter__content" }, h("slot", { key: '3a62a913271bc7e5bc89f1f2e0750cfb36262c95', name: "illustration" }), h("div", { key: '2cd14cf9668526e19509ffdd242acf4492487ac0', class: "usp-promoter__content-wrapper" }, h("h2", { key: '2a48031bbb06a0474d1581bceea450a805f37f13', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '9cccb5af337bfe8ac6353a44bf4ae037d92c6dc6' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '8c4c602653cbc0d0d385ded6bed0d390ee8f91ef', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: '1ce50455c4ac1b55888d2a8f5cc1cad59bc97cdd', name: "app-store" }), h("slot", { key: '8e1e6cccec6b638df6a13bcd839862d9eba0ff80', name: "usp-buttons" }))))));
     }
     static get style() { return PnUspPromoterStyle0; }
 }, [4, "pn-usp-promoter", {

package/components/pn-usp-promoter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-usp-promoter.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,~~u+JAAu+J~~,CAAC;~~AACjgK~~,4BAAe,gBAAgB;;MCKlBA,eAAa;;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5G,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,4DAAK,KAAK,EAAC,+BAA+B,IACxC,2DAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/D,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAG,gBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACL,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzD,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnUspPromoter"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n width: 80%;\n\n .usp-promoter {\n display: flex;\n justify-content: center;\n padding: 3rem 0.8rem;\n }\n\n .usp-promoter--full-width {\n overflow: hidden;\n margin: 0 calc(-50vw + 50%);\n\n @media screen and (min-width: $min-width-md) {\n padding: 8rem 4rem;\n }\n }\n\n .usp-promoter__content {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 114rem;\n\n @media screen and (min-width: $min-width-md) {\n align-items: center;\n text-align: left;\n justify-content: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 75rem;\n\n @media screen and (min-width: $min-width-md) {\n align-items: flex-start;\n padding-left: 4rem;\n }\n }\n\n .usp-promoter__content-heading {\n margin-bottom: 0.8rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4.2rem;\n }\n\n @media screen and (min-width:$max-width-xl) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width:$max-width-xxl) {\n font-size: 5.6rem;\n }\n }\n\n .usp-promoter__no-margin-bottom {\n margin-bottom: 0 !important;\n }\n\n .usp-promoter__content-text {\n font-size: 1.6rem;\n max-width: 47rem;\n margin-bottom: 2.6rem;\n\n @media screen and (min-width: $min-width-md) {\n text-wrap: balance;\n }\n\n @media screen and (min-width:$max-width-xl) {\n font-size: 1.8rem;\n max-width: 60rem;\n }\n\n @media screen and (min-width:$max-width-xxl) {\n font-size: 2rem;\n max-width: 70rem;\n }\n }\n\n [slot='app-store'] {\n display: flex;\n align-items: flex-start;\n margin-bottom: 2.6rem;\n gap: 1rem;\n\n &>a {\n background-color: black;\n border: 0.1rem solid #a6a6a6;\n border-radius: 0.8rem;\n color: #fff;\n display: inline-block;\n line-height: 0;\n text-decoration: none;\n transition: background-color 0.2s ease-in-out;\n\n &::after {\n margin-left: 0 !important;\n margin-right: 0.5rem;\n top: 0.2rem;\n position: relative;\n }\n\n &:hover {\n background-color: $blue900;\n }\n\n &:focus {\n background-color: $blue900;\n box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n img {\n height: 4rem;\n }\n }\n }\n\n [slot='usp-buttons'] {\n pn-button {\n margin-bottom: 1.6rem;\n }\n\n &>a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue700;\n }\n }\n }\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n flex-direction: column;\n\n @media screen and (min-width: $min-width-md) {\n display: flex;\n flex-direction: row;\n gap: 1.6rem;\n }\n }\n\n [slot='illustration'] {\n max-width: 25%;\n position: relative;\n left: -1.6rem;\n\n pn-scroll {\n position: sticky;\n top: 0;\n }\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n }\n\n & picture img {\n max-width: 100%;\n\n @media screen and (min-width: $max-width-xl) {\n width: 32rem;\n }\n\n @media screen and (min-width: $max-width-xxl) {\n width: 33.6rem;\n }\n }\n }\n\n .usp-promoter__heading-extension {\n display: flex;\n flex-direction: column;\n }\n\n .usp-promoter--right-align {\n .usp-promoter__content {\n flex-direction: row-reverse;\n text-align: right;\n\n @media screen and (min-width: $min-width-md) {\n align-items: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-left: 0;\n\n @media screen and (min-width: $min-width-md) {\n padding-right: 4rem;\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n align-items: flex-end;\n }\n\n [slot='illustration'] {\n left: 1.6rem;\n }\n }\n\n .usp-promoter--hide-image-small-screen {\n @media screen and (max-width: $min-width-md) {\n [slot='illustration'] picture img {\n display: none;\n }\n\n .usp-promoter__content {\n text-align: center;\n }\n\n .usp-promoter__content-wrapper {\n align-items: center;\n padding-right: 0;\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n }\n }\n}","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-usp-promoter',\n styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() headingExtension: string = null;\n @Prop() bodyText: string = null;\n @Prop() backgroundGradient: string = null;\n @Prop() fullWidth: boolean = false;\n @Prop() rightAlign: boolean = false;\n @Prop() hideMobileImage: boolean = false;\n\n private centerMobileContent() {\n const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n if (this.hideMobileImage \|\| slot == null) {\n return 'usp-promoter--hide-image-small-screen';\n }\n return \"\";\n }\n\n render() {\n const { fullWidth, rightAlign } = this;\n const classes = [\n 'usp-promoter',\n fullWidth ? \"usp-promoter--full-width\" : \"\",\n rightAlign ? \"usp-promoter--right-align\" : \"\",\n ].join(' ');\n const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n return (\n <Host>\n <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n <div class=\"usp-promoter__content\">\n <slot name=\"illustration\"></slot>\n <div class=\"usp-promoter__content-wrapper\">\n <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n <span>{this.heading}</span>\n {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n </h2>\n <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n <slot name=\"app-store\"></slot>\n <slot name=\"usp-buttons\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-usp-promoter.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,gzKAAgzK,CAAC;AAC10K,4BAAe,gBAAgB;;MCKlBA,eAAa;;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5G,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,4DAAK,KAAK,EAAC,+BAA+B,IACxC,2DAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/D,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAG,gBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACL,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzD,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnUspPromoter"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n width: 80%;\n\n .usp-promoter {\n display: flex;\n justify-content: center;\n padding: 3rem 0.8rem;\n }\n\n .usp-promoter--full-width {\n overflow: hidden;\n margin: 0 calc(-50vw + 50%);\n\n @media screen and (min-width: $min-width-md) {\n padding: 8rem 4rem;\n }\n }\n\n .usp-promoter__content {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 114rem;\n\n @media screen and (min-width: $min-width-md) {\n align-items: center;\n text-align: left;\n justify-content: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 75rem;\n\n @media screen and (min-width: $min-width-md) {\n align-items: flex-start;\n padding-left: 4rem;\n }\n }\n\n .usp-promoter__content-heading {\n margin-bottom: 0.8rem;\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4.2rem;\n }\n\n @media screen and (min-width:$max-width-xl) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width:$max-width-xxl) {\n font-size: 5.6rem;\n }\n }\n\n .usp-promoter__no-margin-bottom {\n margin-bottom: 0 !important;\n }\n\n .usp-promoter__content-text {\n font-size: 1.6rem;\n max-width: 47rem;\n margin-bottom: 2.6rem;\n\n @media screen and (min-width: $min-width-md) {\n text-wrap: balance;\n }\n\n @media screen and (min-width:$max-width-xl) {\n font-size: 1.8rem;\n max-width: 60rem;\n }\n\n @media screen and (min-width:$max-width-xxl) {\n font-size: 2rem;\n max-width: 70rem;\n }\n }\n\n [slot='app-store'] {\n display: flex;\n align-items: flex-start;\n margin-bottom: 2.6rem;\n gap: 1rem;\n\n &>a {\n background-color: black;\n border: 0.1rem solid #a6a6a6;\n border-radius: 0.8rem;\n color: #fff;\n display: inline-block;\n line-height: 0;\n text-decoration: none;\n transition: background-color 0.2s ease-in-out;\n\n &::after {\n margin-left: 0 !important;\n margin-right: 0.5rem;\n top: 0.2rem;\n position: relative;\n }\n\n &:hover {\n background-color: $blue900;\n }\n\n &:focus {\n background-color: $blue900;\n box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n img {\n height: 4rem;\n }\n }\n }\n\n [slot='usp-buttons'] {\n pn-button {\n margin-bottom: 1.6rem;\n }\n\n &>a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue700;\n }\n }\n }\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n flex-direction: column;\n\n @media screen and (min-width: $min-width-md) {\n display: flex;\n flex-direction: row;\n gap: 1.6rem;\n }\n }\n\n [slot='illustration'] {\n max-width: 25%;\n position: relative;\n left: -1.6rem;\n\n pn-scroll {\n position: sticky;\n top: 0;\n }\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n }\n\n & picture img {\n max-width: 100%;\n\n @media screen and (min-width: $max-width-xl) {\n width: 32rem;\n }\n\n @media screen and (min-width: $max-width-xxl) {\n width: 33.6rem;\n }\n }\n }\n\n .usp-promoter__heading-extension {\n display: flex;\n flex-direction: column;\n }\n\n .usp-promoter--right-align {\n .usp-promoter__content {\n flex-direction: row-reverse;\n text-align: right;\n\n @media screen and (min-width: $min-width-md) {\n align-items: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-left: 0;\n\n @media screen and (min-width: $min-width-md) {\n padding-right: 4rem;\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n align-items: flex-end;\n }\n\n [slot='illustration'] {\n left: 1.6rem;\n }\n }\n\n .usp-promoter--hide-image-small-screen {\n @media screen and (max-width: $min-width-md) {\n [slot='illustration'] picture img {\n display: none;\n }\n\n .usp-promoter__content {\n text-align: center;\n }\n\n .usp-promoter__content-wrapper {\n align-items: center;\n padding-right: 0;\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n }\n }\n}","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-usp-promoter',\n styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() headingExtension: string = null;\n @Prop() bodyText: string = null;\n @Prop() backgroundGradient: string = null;\n @Prop() fullWidth: boolean = false;\n @Prop() rightAlign: boolean = false;\n @Prop() hideMobileImage: boolean = false;\n\n private centerMobileContent() {\n const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n if (this.hideMobileImage \|\| slot == null) {\n return 'usp-promoter--hide-image-small-screen';\n }\n return \"\";\n }\n\n render() {\n const { fullWidth, rightAlign } = this;\n const classes = [\n 'usp-promoter',\n fullWidth ? \"usp-promoter--full-width\" : \"\",\n rightAlign ? \"usp-promoter--right-align\" : \"\",\n ].join(' ');\n const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n return (\n <Host>\n <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n <div class=\"usp-promoter__content\">\n <slot name=\"illustration\"></slot>\n <div class=\"usp-promoter__content-wrapper\">\n <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n <span>{this.heading}</span>\n {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n </h2>\n <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n <slot name=\"app-store\"></slot>\n <slot name=\"usp-buttons\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-usp-simple.d.ts ADDED Viewed

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

package/components/pn-usp-simple.js ADDED Viewed

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeadingTag } from './HeadingTag.js';
+const pnUspSimpleCss = "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}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}.pn-usp-simple{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}.pn-usp-simple .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}.pn-usp-simple .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}.pn-usp-simple .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem);padding:0 6rem}.pn-usp-simple .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.pn-usp-simple .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}.pn-usp-simple .image-container .image{border-radius:50%}@media (min-width: 768px){.pn-usp-simple{flex-direction:row;align-items:center}.pn-usp-simple .content{max-width:60%}.pn-usp-simple .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}.pn-usp-simple .image-container{flex:clamp(15rem, 3vw, 20rem);margin-bottom:0}.pn-usp-simple .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){.pn-usp-simple{max-width:1140px;margin:0 auto}.pn-usp-simple .content{max-width:50%}.pn-usp-simple .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){.pn-usp-simple{max-width:1400px}.pn-usp-simple .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";
+const PnUspSimpleStyle0 = pnUspSimpleCss;
+const PnUspSimple$1 = /*@__PURE__*/ proxyCustomElement(class PnUspSimple extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.heading = undefined;
+        this.headingLevel = 'h2';
+        this.preamble = undefined;
+        this.ctaButtonsLabel = undefined;
+        this.primaryButtonText = undefined;
+        this.primaryButtonUrl = undefined;
+        this.primaryButtonIconSvg = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.pnIllustrationSvg = undefined;
+        this.imageUrl = undefined;
+        this.imageAltText = undefined;
+    }
+    get hasPrimaryButton() {
+        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
+    }
+    get hasSecondaryButton() {
+        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
+    }
+    renderButton(props, isPrimary) {
+        const buttonType = isPrimary ? 'primary' : 'secondary';
+        return (h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
+    }
+    render() {
+        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
+        const headingId = 'usp-heading';
+        return (h(Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (h(HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
+            this.renderButton({
+                text: this.primaryButtonText,
+                url: this.primaryButtonUrl,
+                iconSvg: this.primaryButtonIconSvg,
+            }, true), this.hasSecondaryButton &&
+            this.renderButton({
+                text: this.secondaryButtonText,
+                url: this.secondaryButtonUrl,
+            }, false)))), h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
+    }
+    static get style() { return PnUspSimpleStyle0; }
+}, [0, "pn-usp-simple", {
+        "heading": [1],
+        "headingLevel": [8, "heading-level"],
+        "preamble": [1],
+        "ctaButtonsLabel": [1, "cta-buttons-label"],
+        "primaryButtonText": [1, "primary-button-text"],
+        "primaryButtonUrl": [1, "primary-button-url"],
+        "primaryButtonIconSvg": [1, "primary-button-icon-svg"],
+        "secondaryButtonText": [1, "secondary-button-text"],
+        "secondaryButtonUrl": [1, "secondary-button-url"],
+        "pnIllustrationSvg": [1, "pn-illustration-svg"],
+        "imageUrl": [1, "image-url"],
+        "imageAltText": [1, "image-alt-text"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-usp-simple"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-usp-simple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnUspSimple$1);
+            }
+            break;
+    } });
+}
+const PnUspSimple = PnUspSimple$1;
+const defineCustomElement = defineCustomElement$1;
+export { PnUspSimple, defineCustomElement };
+//# sourceMappingURL=pn-usp-simple.js.map

package/components/pn-usp-simple.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pn-usp-simple.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,25DAA25D,CAAC;AACn7D,0BAAe,cAAc;;MCahBA,aAAW;;;;;4BAEe,IAAI;;;;;;;;;;;;IAYzC,IAAY,gBAAgB;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACjE;IAED,IAAY,kBAAkB;QAC5B,OAAO,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACrE;IAEO,YAAY,CAAC,KAAkB,EAAE,SAAkB;QACzD,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;QACvD,QACE,iBACE,IAAI,EAAE,KAAK,CAAC,OAAO,eACR,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,EAAC,KAAK,sBACO,UAAU,EAC5B,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,IAE1C,KAAK,CAAC,IAAI,CACD,EACZ;KACH;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC;QAEhC,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,qBAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,IAC5F,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,KACX,EAAC,UAAU,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,SAAS,IACpE,IAAI,CAAC,OAAO,CACF,CACd,EAEA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,UAAU,KACT,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe,IAC3D,IAAI,CAAC,gBAAgB;YACpB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,iBAAkB;gBAC7B,GAAG,EAAE,IAAI,CAAC,gBAAiB;gBAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB;aACnC,EACD,IAAI,CACL,EACF,IAAI,CAAC,kBAAkB;YACtB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,mBAAoB;gBAC/B,GAAG,EAAE,IAAI,CAAC,kBAAmB;aAC9B,EACD,KAAK,CACN,CACC,CACP,CACG,EACN,4DAAK,KAAK,EAAC,iBAAiB,iBAAc,CAAC,IAAI,CAAC,YAAY,IACzD,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,EAChH,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,IAAI,wEAAiB,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACpJ,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnUspSimple"],"sources":["src/components/widgets/pn-usp-simple/pn-usp-simple.scss?tag=pn-usp-simple","src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:root {\n --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\n.pn-usp-simple {\n background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n color: $gray900;\n display: flex;\n flex-direction: column-reverse;\n max-width: 100%;\n padding: clamp(2rem, 5vw, 5rem);\n\n .heading {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n margin-bottom: 1rem;\n }\n\n .preamble {\n font-size: clamp(1rem, 4vw, 1.6rem);\n margin-top: var(--usp-preamble-margin);\n margin-bottom: var(--usp-preamble-margin);\n }\n\n .cta {\n display: flex;\n font-size: clamp(1rem, 4vw, 1.6rem);\n flex-direction: column;\n gap: clamp(1rem, 4vw, 1.2rem);\n padding: 0 6rem;\n }\n\n .image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem;\n\n .graphics {\n --pn-width: #{$graphicsWidth} !important;\n --pn-height: #{$graphicsWidth} !important;\n }\n\n .image {\n border-radius: 50%;\n }\n }\n}\n\n@media (min-width: 768px) {\n .pn-usp-simple {\n flex-direction: row;\n align-items: center;\n\n .content {\n max-width: 60%;\n }\n\n .cta {\n flex-direction: row;\n gap: clamp(2rem, 3vw, 3rem);\n padding: 0;\n }\n\n .image-container {\n flex: clamp(15rem, 3vw, 20rem);\n margin-bottom: 0;\n\n .graphics {\n --pn-width: #{$graphicsWidthMd};\n --pn-height: #{$graphicsWidthMd};\n }\n }\n }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n .pn-usp-simple {\n max-width: 1140px;\n margin: 0 auto;\n\n .content {\n max-width: 50%;\n }\n\n .image-container {\n .graphics {\n --pn-width: #{$graphicsWidthXl};\n --pn-height: #{$graphicsWidthXl};\n }\n }\n }\n}\n\n@media (min-width: 1640px) {\n .pn-usp-simple {\n max-width: 1400px;\n\n .image-container {\n .graphics {\n --pn-width: #{$graphicsWidthXxl};\n --pn-height: #{$graphicsWidthXxl};\n }\n }\n }\n}\n","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n text: string;\n url: string;\n iconSvg?: string;\n}\n\n@Component({\n tag: 'pn-usp-simple',\n styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n @Prop() heading?: string;\n @Prop() headingLevel: HeadingLevel = 'h2';\n @Prop() preamble?: string;\n @Prop() ctaButtonsLabel?: string;\n @Prop() primaryButtonText?: string;\n @Prop() primaryButtonUrl?: string;\n @Prop() primaryButtonIconSvg?: string;\n @Prop() secondaryButtonText?: string;\n @Prop() secondaryButtonUrl?: string;\n @Prop() pnIllustrationSvg?: string;\n @Prop() imageUrl?: string;\n @Prop() imageAltText?: string;\n\n private get hasPrimaryButton(): boolean {\n return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n }\n\n private get hasSecondaryButton(): boolean {\n return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n }\n\n private renderButton(props: ButtonProps, isPrimary: boolean) {\n const buttonType = isPrimary ? 'primary' : 'secondary';\n return (\n <pn-button\n icon={props.iconSvg}\n left-icon={Boolean(props.iconSvg)}\n href={props.url}\n class=\"btn\"\n data-button-type={buttonType}\n appearance={isPrimary ? 'default' : 'light'}\n >\n {props.text}\n </pn-button>\n );\n }\n\n render() {\n const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n const headingId = 'usp-heading';\n\n return (\n <Host>\n <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n <div class=\"content\">\n {this.heading && (\n <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n {this.heading}\n </HeadingTag>\n )}\n\n {this.preamble && (\n <div class=\"preamble\">\n {this.preamble}\n </div>\n )}\n\n {hasButtons && (\n <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n {this.hasPrimaryButton &&\n this.renderButton(\n {\n text: this.primaryButtonText!,\n url: this.primaryButtonUrl!,\n iconSvg: this.primaryButtonIconSvg,\n },\n true,\n )}\n {this.hasSecondaryButton &&\n this.renderButton(\n {\n text: this.secondaryButtonText!,\n url: this.secondaryButtonUrl!,\n },\n false,\n )}\n </div>\n )}\n </div>\n <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-video-overlay2.js CHANGED Viewed

@@ -30,7 +30,7 @@ const translations = {
     },
 };
-const pnVideoOverlayCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-video-overlay.pn-video-overlay--show-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-video-overlay button{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;border:none;outline:none;cursor:pointer;background-color:transparent}@media screen and (min-width: 768px){pn-video-overlay button{bottom:16px;left:16px}}pn-video-overlay button:hover svg rect{fill:#003d5f}pn-video-overlay button:active svg rect{fill:#001c2c}pn-video-overlay button:focus,pn-video-overlay button:focus-visible{outline:2px solid #ffffff}pn-video-overlay button svg{scale:0.7}@media screen and (min-width: 768px){pn-video-overlay button svg{scale:1}}";
+const pnVideoOverlayCss = "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-video-overlay.pn-video-overlay--show-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-video-overlay button{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;border:none;outline:none;cursor:pointer;background-color:transparent}@media screen and (min-width: 768px){pn-video-overlay button{bottom:16px;left:16px}}pn-video-overlay button:hover svg rect{fill:#003d5f}pn-video-overlay button:active svg rect{fill:#001c2c}pn-video-overlay button:focus,pn-video-overlay button:focus-visible{outline:2px solid #ffffff}pn-video-overlay button svg{scale:0.7}@media screen and (min-width: 768px){pn-video-overlay button svg{scale:1}}";
 const PnVideoOverlayStyle0 = pnVideoOverlayCss;
 const PnVideoOverlay = /*@__PURE__*/ proxyCustomElement(class PnVideoOverlay extends HTMLElement {

package/components/pn-video-overlay2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-video-overlay2.js","mappings":";;AAAO,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,SAAS,EAAE,yBAAyB;KACrC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,qBAAqB;KACjC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,iCAAiC;KAC7C;IACD,EAAE,EAAE;QACF,SAAS,EAAE,oCAAoC;KAChD;IACD,EAAE,EAAE;QACF,SAAS,EAAE,2BAA2B;KACvC;IACD,EAAE,EAAE;QACF,SAAS,EAAE,+BAA+B;KAC3C;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;IACD,EAAE,EAAE;QACF,UAAU,EAAE,qBAAqB;KAClC;CACF;;AC5BD,MAAM,iBAAiB,GAAG,~~k2BAAk2B~~,CAAC;~~AAC73B~~,6BAAe,iBAAiB;;MCOnB,cAAc;;;;;wBAEE,IAAI;wBACH,KAAK;2BACF,KAAK;;;;IAG3B,gBAAgB,CAAqB;IAE9C,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,sBAAsB,GAAG;QACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;KAC9B,CAAC;IAEF,cAAc,GAAG;QACf,QACE,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG,EACtD,YACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ,EACF,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0YAA0Y,EAC5Y,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,CACE,EACN;KACH,CAAC;IAEF,eAAe,GAAG;QAChB,QACE,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG,EACtD,YACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,EACF,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ,EACF,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ,CACE,EACN;KACH,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,GAAG,gCAAgC,GAAG,EAAE,EAAE,IACzF,+DAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,8BAA8B,gBAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAC/H,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CACxD,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/animation/pn-play-on-scroll/pn-video-overlay/translations.ts","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.scss?tag=pn-video-overlay","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"sourcesContent":["export const translations = {\n sv: {\n ariaLabel: 'Spela eller pausa video',\n },\n en: {\n ariaLabel: 'Play or pause video',\n },\n da: {\n ariaLabel: 'Afspil eller sæt video på pause',\n },\n no: {\n ariaLabel: 'Spill av eller sett video på pause',\n },\n fi: {\n ariaLabel: 'Toista tai keskeytä video',\n },\n de: {\n ariaLabel: 'Video abspielen oder anhalten',\n },\n zh: {\n sharelabel: 'Play or pause video',\n },\n it: {\n sharelabel: 'Play or pause video',\n },\n nl: {\n sharelabel: 'Play or pause video',\n },\n};\n","@import '../../../../globals/main';\n\npn-video-overlay {\n &.pn-video-overlay--show-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n }\n\n button {\n position: absolute;\n bottom: 8px;\n left: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 0;\n border: none;\n outline: none;\n cursor: pointer;\n background-color: transparent;\n\n @media screen and (min-width: $min-width-md) {\n bottom: 16px;\n left: 16px;\n }\n\n &:hover {\n svg rect {\n fill: darken(#005d92, 10%);\n }\n }\n\n &:active {\n svg rect {\n fill: darken(#005d92, 20%);\n }\n }\n\n &:focus,\n &:focus-visible {\n outline: 2px solid $white;\n }\n\n svg {\n scale: 0.7;\n @media screen and (min-width: $min-width-md) {\n scale: 1;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-video-overlay',\n styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n @Element() hostElement: HTMLElement;\n @Prop() language: string = 'en';\n @Prop() isPaused: boolean = false;\n @Prop() showOverlay: boolean = false;\n @State() i18n: any;\n\n @Event() playPauseClicked: EventEmitter<void>;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n handlePlayPauseClicked = () => {\n this.playPauseClicked.emit();\n };\n\n renderPlayIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n renderPauseIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n render() {\n return (\n <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-video-overlay2.js","mappings":"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","names":[],"sources":["src/components/animation/pn-play-on-scroll/pn-video-overlay/translations.ts","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.scss?tag=pn-video-overlay","src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"sourcesContent":["export const translations = {\n sv: {\n ariaLabel: 'Spela eller pausa video',\n },\n en: {\n ariaLabel: 'Play or pause video',\n },\n da: {\n ariaLabel: 'Afspil eller sæt video på pause',\n },\n no: {\n ariaLabel: 'Spill av eller sett video på pause',\n },\n fi: {\n ariaLabel: 'Toista tai keskeytä video',\n },\n de: {\n ariaLabel: 'Video abspielen oder anhalten',\n },\n zh: {\n sharelabel: 'Play or pause video',\n },\n it: {\n sharelabel: 'Play or pause video',\n },\n nl: {\n sharelabel: 'Play or pause video',\n },\n};\n","@import '../../../../globals/main';\n\npn-video-overlay {\n &.pn-video-overlay--show-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n }\n\n button {\n position: absolute;\n bottom: 8px;\n left: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 0;\n border: none;\n outline: none;\n cursor: pointer;\n background-color: transparent;\n\n @media screen and (min-width: $min-width-md) {\n bottom: 16px;\n left: 16px;\n }\n\n &:hover {\n svg rect {\n fill: darken(#005d92, 10%);\n }\n }\n\n &:active {\n svg rect {\n fill: darken(#005d92, 20%);\n }\n }\n\n &:focus,\n &:focus-visible {\n outline: 2px solid $white;\n }\n\n svg {\n scale: 0.7;\n @media screen and (min-width: $min-width-md) {\n scale: 1;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-video-overlay',\n styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n @Element() hostElement: HTMLElement;\n @Prop() language: string = 'en';\n @Prop() isPaused: boolean = false;\n @Prop() showOverlay: boolean = false;\n @State() i18n: any;\n\n @Event() playPauseClicked: EventEmitter<void>;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n handlePlayPauseClicked = () => {\n this.playPauseClicked.emit();\n };\n\n renderPlayIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n renderPauseIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n render() {\n return (\n <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}