npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.2 → 4.0.4-test - Mend

@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

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 (1163) hide show

package/dist/esm/pn-stats-info.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, d as Host } from './index-c311acd6.js';
+import { r as registerInstance, h, d as Host } from './index-51d67461.js';
-const pnStatsInfoCss = "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-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.4rem 1.6rem;width:100%;background-color:#0d234b;border-radius:2.4rem}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content{padding:4rem 2.4rem 1.6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{padding:5.6rem 2.4rem 3.2rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n)~pn-stats-info-data{width:50%}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}}pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:0;padding:2.4rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;border-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0;border-bottom-left-radius:0;max-width:54rem;background-position:-999px -999px;background-size:0}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem;border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:flex;align-items:center;background-color:#0d234b;padding-left:4rem;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{clip-path:circle(50%);object-fit:cover;object-position:center;aspect-ratio:1;max-width:45rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:2.4rem;border-bottom-left-radius:2.4rem;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:2.4rem;border-bottom-right-radius:2.4rem;border-bottom-left-radius:0;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:5.6rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5.6rem;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:1rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:54rem;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0d234b}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0d234b}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0d234b}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#f06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__map{background-color:#005e41}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container [slot=illustration]{background-color:#005e41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:#005e41}}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__map{background-color:#edfbf3}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container [slot=illustration]{background-color:#edfbf3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:#edfbf3}}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map{background-color:#e9e6e5}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration]{background-color:#e9e6e5}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:#e9e6e5}}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map{background-color:#00a0d6}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration]{background-color:#00a0d6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:#00a0d6}}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__map{background-color:#effbff}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container [slot=illustration]{background-color:#effbff}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:#effbff}}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__map{background-color:#fef7f6}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container [slot=illustration]{background-color:#fef7f6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:#fef7f6}}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__map{background-color:#f9f8f8}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container [slot=illustration]{background-color:#f9f8f8}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:#f9f8f8}}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content__preamble{color:#0d234b}";
+const pnStatsInfoCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.4rem 1.6rem;width:100%;background-color:#0d234b;border-radius:2.4rem}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content{padding:4rem 2.4rem 1.6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{padding:5.6rem 2.4rem 3.2rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n)~pn-stats-info-data{width:50%}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}}pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:0;padding:2.4rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;border-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0;border-bottom-left-radius:0;max-width:54rem;background-position:-999px -999px;background-size:0}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem;border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:flex;align-items:center;background-color:#0d234b;padding-left:4rem;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{clip-path:circle(50%);object-fit:cover;object-position:center;aspect-ratio:1;max-width:45rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:2.4rem;border-bottom-left-radius:2.4rem;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:2.4rem;border-bottom-right-radius:2.4rem;border-bottom-left-radius:0;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:5.6rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5.6rem;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:1rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:54rem;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0d234b}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0d234b}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0d234b}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#f06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__map{background-color:#005e41}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container [slot=illustration]{background-color:#005e41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:#005e41}}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__map{background-color:#edfbf3}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container [slot=illustration]{background-color:#edfbf3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:#edfbf3}}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map{background-color:#e9e6e5}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration]{background-color:#e9e6e5}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:#e9e6e5}}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map{background-color:#00a0d6}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration]{background-color:#00a0d6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:#00a0d6}}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__map{background-color:#effbff}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container [slot=illustration]{background-color:#effbff}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:#effbff}}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__map{background-color:#fef7f6}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container [slot=illustration]{background-color:#fef7f6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:#fef7f6}}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__map{background-color:#f9f8f8}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container [slot=illustration]{background-color:#f9f8f8}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:#f9f8f8}}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content__preamble{color:#0d234b}";
 const PnStatsInfoStyle0 = pnStatsInfoCss;
 const mockStringArray = '[ { "preamble": "Million parcels","formatStyle":"None", "format":"En","startValue":0, "data": 2023, "unit": null, "duration": 0 }, { "preamble": "Million parcels", "format": "En", "startValue":40, "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "startValue":0, "format":"En", "formatStyle":"None", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue":100, "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "startValue": 30, "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue": 20, "data": 226, "unit": null, "duration": 1000 }]';

package/dist/esm/pn-stats-info.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-stats-info.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8uhBAA8uhB,CAAC;AACtwhB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrB,WAAW;;;uBACI,IAAI;yBACF,eAAe;6BACX,IAAI;6BAEa,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAA2B;;IAGrG,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,QAAQ;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3G,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAEN,4DAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAI,2DAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3F,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;gBAClC,QACE,0BACE,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,GACV,EACtB;aACH,CAAC,CACA,CACF,CACF,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2.4rem 2.4rem 1.6rem;\n\n width: 100%;\n background-color: $blue900;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 4rem 2.4rem 1.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 5.6rem 2.4rem 3.2rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n\n width: 100%;\n //one item\n\n pn-stats-info-data:first-child:nth-last-child(2n),\n pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n width: 50%;\n }\n\n @media screen and (min-width: $min-width-md) {\n pn-stats-info-data:first-child:nth-last-child(1) {\n width: 100%;\n }\n\n // two items\n pn-stats-info-data:first-child:nth-last-child(2),\n pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n width: 50%;\n }\n\n //multiples of tree items\n pn-stats-info-data:first-child:nth-last-child(3n),\n pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n width: 33%;\n }\n\n //8 items\n pn-stats-info-data:first-child:nth-last-child(8),\n pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n width: 25%;\n }\n }\n\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 0;\n padding: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-lg) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-xl) {\n min-height: 0;\n }\n }\n }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__data {\n min-height: 0;\n }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n .pn-stats-info__container {\n flex-direction: column;\n padding-top: 0;\n\n @media screen and (min-width: $min-width-lg) {\n flex-direction: row;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: block;\n position: relative;\n\n & [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n & > picture > img {\n width: 100%;\n height: auto;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n align-items: center;\n background-color: $blue900;\n padding-left: 4rem;\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n\n & [slot='illustration'] {\n img {\n clip-path: circle(50%);\n object-fit: cover;\n object-position: center;\n aspect-ratio: 1;\n max-width: 45rem;\n }\n }\n }\n }\n\n .pn-stats-info__container__content {\n width: 100%;\n max-width: 100%;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n }\n\n @media screen and (min-width: $min-width-lg) {\n border-top-right-radius: 2.4rem;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__heading {\n @media screen and (min-width: $min-width-lg) {\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n width: 100%;\n height: auto;\n min-height: 0;\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 5.6rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 5.6rem;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 5rem;\n }\n }\n\n .pn-stats-info-data__container__content__data {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n padding: 0;\n margin-bottom: 3rem;\n\n overflow: hidden;\n\n .container > .mb-5 {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n }\n .statsblock {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n }\n}\n\n//i combo\n.comboquotestatsblock {\n pn-stats-info {\n width: 100%;\n\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n padding-top: 2rem;\n @media screen and (min-width: $min-width-md) {\n padding-top: 6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding-top: 8rem;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem;\n\n //map\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n padding-bottom: 2rem;\n @media screen and (min-width: $min-width-md) {\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n padding-bottom: 4rem;\n padding-right: 4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n padding-bottom: 6rem;\n padding-right: 6rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n min-height: 20rem;\n\n @media screen and (min-width: $min-width-xxl) {\n width: 65rem;\n }\n }\n }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue900;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue900;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue900;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $coral400;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green700;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green700;\n }\n \n @media screen and (min-width: $min-width-lg) {\n background-color: $green700;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $green25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray100;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray100;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray100;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue400;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue400;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue400;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $coral25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $coral25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $coral25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n tag: 'pn-stats-info',\n styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n @Prop() heading: string = null;\n @Prop() dataArray: string = mockStringArray;\n @Prop() backgroundUrl: string = null;\n\n @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n @Watch('dataArray')\n parseMyArrayProp(newValue: string) {\n if (newValue) this.myParsedArray = JSON.parse(newValue);\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info__container\">\n <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n <div class=\"pn-stats-info-image-container\">\n <slot name=\"illustration\" />\n </div>\n\n <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n <div class=\"pn-stats-info__container__content__data\">\n {this.myParsedArray &&\n this.myParsedArray.map((stats, index) => {\n return (\n <pn-stats-info-data\n index={index}\n startValue={stats.startValue}\n data={stats.data}\n unit={stats.unit}\n preamble={stats.preamble}\n duration={stats.duration}\n format={stats.format}\n formatStyle={stats.formatStyle}\n ></pn-stats-info-data>\n );\n })}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-stats-info.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,q6gBAAq6gB,CAAC;AAC77gB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrB,WAAW;;;uBACI,IAAI;yBACF,eAAe;6BACX,IAAI;6BAEa,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAA2B;;IAGrG,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,QAAQ;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3G,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAEN,4DAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAI,2DAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3F,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;gBAClC,QACE,0BACE,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,GACV,EACtB;aACH,CAAC,CACA,CACF,CACF,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2.4rem 2.4rem 1.6rem;\n\n width: 100%;\n background-color: $blue900;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 4rem 2.4rem 1.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 5.6rem 2.4rem 3.2rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n\n width: 100%;\n //one item\n\n pn-stats-info-data:first-child:nth-last-child(2n),\n pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n width: 50%;\n }\n\n @media screen and (min-width: $min-width-md) {\n pn-stats-info-data:first-child:nth-last-child(1) {\n width: 100%;\n }\n\n // two items\n pn-stats-info-data:first-child:nth-last-child(2),\n pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n width: 50%;\n }\n\n //multiples of tree items\n pn-stats-info-data:first-child:nth-last-child(3n),\n pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n width: 33%;\n }\n\n //8 items\n pn-stats-info-data:first-child:nth-last-child(8),\n pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n width: 25%;\n }\n }\n\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 0;\n padding: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-lg) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-xl) {\n min-height: 0;\n }\n }\n }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__data {\n min-height: 0;\n }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n .pn-stats-info__container {\n flex-direction: column;\n padding-top: 0;\n\n @media screen and (min-width: $min-width-lg) {\n flex-direction: row;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: block;\n position: relative;\n\n & [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n & > picture > img {\n width: 100%;\n height: auto;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n align-items: center;\n background-color: $blue900;\n padding-left: 4rem;\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n\n & [slot='illustration'] {\n img {\n clip-path: circle(50%);\n object-fit: cover;\n object-position: center;\n aspect-ratio: 1;\n max-width: 45rem;\n }\n }\n }\n }\n\n .pn-stats-info__container__content {\n width: 100%;\n max-width: 100%;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n }\n\n @media screen and (min-width: $min-width-lg) {\n border-top-right-radius: 2.4rem;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__heading {\n @media screen and (min-width: $min-width-lg) {\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n width: 100%;\n height: auto;\n min-height: 0;\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 5.6rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 5.6rem;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 5rem;\n }\n }\n\n .pn-stats-info-data__container__content__data {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n padding: 0;\n margin-bottom: 3rem;\n\n overflow: hidden;\n\n .container > .mb-5 {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n }\n .statsblock {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n }\n}\n\n//i combo\n.comboquotestatsblock {\n pn-stats-info {\n width: 100%;\n\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n padding-top: 2rem;\n @media screen and (min-width: $min-width-md) {\n padding-top: 6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding-top: 8rem;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem;\n\n //map\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n padding-bottom: 2rem;\n @media screen and (min-width: $min-width-md) {\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n padding-bottom: 4rem;\n padding-right: 4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n padding-bottom: 6rem;\n padding-right: 6rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n min-height: 20rem;\n\n @media screen and (min-width: $min-width-xxl) {\n width: 65rem;\n }\n }\n }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue900;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue900;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue900;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $coral400;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green700;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green700;\n }\n \n @media screen and (min-width: $min-width-lg) {\n background-color: $green700;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $green25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray100;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray100;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray100;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue400;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue400;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue400;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $coral25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $coral25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $coral25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n tag: 'pn-stats-info',\n styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n @Prop() heading: string = null;\n @Prop() dataArray: string = mockStringArray;\n @Prop() backgroundUrl: string = null;\n\n @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n @Watch('dataArray')\n parseMyArrayProp(newValue: string) {\n if (newValue) this.myParsedArray = JSON.parse(newValue);\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info__container\">\n <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n <div class=\"pn-stats-info-image-container\">\n <slot name=\"illustration\" />\n </div>\n\n <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n <div class=\"pn-stats-info__container__content__data\">\n {this.myParsedArray &&\n this.myParsedArray.map((stats, index) => {\n return (\n <pn-stats-info-data\n index={index}\n startValue={stats.startValue}\n data={stats.data}\n unit={stats.unit}\n preamble={stats.preamble}\n duration={stats.duration}\n format={stats.format}\n formatStyle={stats.formatStyle}\n ></pn-stats-info-data>\n );\n })}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/pn-teaser-card.entry.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
-import { H as HeadingTag } from './HeadingTag-e20016ab.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
-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 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 PnTeaserCardStyle0 = pnTeaserCardCss;
 const PnTeaserCard = class {
@@ -10,7 +9,7 @@ const PnTeaserCard = class {
         this.text = null;
         this.heading = null;
         this.label = null;
-        this.headingLevel = 'h3';
+        this.headingLevel = undefined;
         this.dataCardColor = 'coral';
         this.dataCardAlignment = 'left';
         this.hasCtaSlotContent = false;
@@ -20,10 +19,15 @@ const PnTeaserCard = class {
     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();
-        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" })))))));
+        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" })))))));
     }
 };
 PnTeaserCard.style = PnTeaserCardStyle0;

package/dist/esm/pn-teaser-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-teaser-card.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,u3TAAu3T,CAAC;AACh5T,2BAAe,eAAe;;MCMjB,YAAY;;;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":[],"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}
1	+ {"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8iTAA8iT,CAAC;AACvkT,2BAAe,eAAe;;MCKjB,YAAY;;;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":[],"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}

package/dist/esm/pn-titletag.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
-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 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 PnTitletagStyle0 = pnTitletagCss;
 const PnTiletag = class {
@@ -11,7 +11,7 @@ const PnTiletag = class {
     }
     get hostElement() { return getElement(this); }
     render() {
-        return (h(Host, { key: '989e8d33c93954b1a77bfb87d92634d2b09b906f' }, h("slot", { key: 'fcb48d9ce70886036834c994ba3949863241aa7c' }), this.icon ? h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
+        return (h(Host, { key: '01ea9f33d75dac321884aae478532c4df23c2390' }, h("slot", { key: '5d9e6425f8f1b1efd3661f99f4d7735af71f667e' }), this.icon ? h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
     }
 };
 PnTiletag.style = PnTitletagStyle0;

package/dist/esm/pn-titletag.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-titletag.entry.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}
1	+ {"file":"pn-titletag.entry.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}

package/dist/esm/pn-usp-promoter.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
-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 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 PnUspPromoterStyle0 = pnUspPromoterCss;
 const PnUspPromoter = class {
@@ -30,7 +30,7 @@ const PnUspPromoter = class {
             rightAlign ? "usp-promoter--right-align" : "",
         ].join(' ');
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-        return (h(Host, { key: '23494c6ed3177f63b9cf483eaf28ae62c4050797' }, h("div", { key: '84cec740776a5f787933b6f7a8734ba00f898a71', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '77d56ad9982b8e8d2459c881a797cd5fa3c51519', class: "usp-promoter__content" }, h("slot", { key: '3b0ddfeaec6ce47329f5a2d64df978f8779de532', name: "illustration" }), h("div", { key: '072080f41f6531333d154499c1b63d3822e3cdbb', class: "usp-promoter__content-wrapper" }, h("h2", { key: 'd09398e7a54f7a1a6a44ab1ede3aaac7a6e00261', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '48f98ffcce6c0c6b2b6cf8bb754b84d414fedb8c' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '3f0abe6fcd83e31ffa2ab932027b14f9c1e7c439', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: '54fa5a5072c8897dd6ae7c216b2c5d7ad1d6a2b6', name: "app-store" }), h("slot", { key: '0bad1abdc12f5108a62f723136c764214bcc6143', name: "usp-buttons" }))))));
+        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" }))))));
     }
 };
 PnUspPromoter.style = PnUspPromoterStyle0;

package/dist/esm/pn-usp-promoter.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-usp-promoter.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,~~gzKAAgzK~~,CAAC;~~AAC10K~~,4BAAe,gBAAgB;;MCKlB,aAAa;;;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":[],"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.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,u+JAAu+J,CAAC;AACjgK,4BAAe,gBAAgB;;MCKlB,aAAa;;;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":[],"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/dist/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@postnord/pn-marketweb-components",
-  "version": "4.0.2",
+  "version": "4.0.4-test",
   "description": "PostNord Market Websites Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
     "test": "stencil test --spec --e2e",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "stencil": "cross-env STENCIL_ENV=dev stencil build --dev --watch --serve --docs-custom",
-    "storybook": "storybook dev -p 6008",
+    "storybook": "storybook dev -p 6008 ",
     "build-storybook": "storybook build",
     "post:build": "node ./scripts/post_build.js",
     "format": "cd src && npx prettier --write .",
@@ -50,7 +50,7 @@
     "@storybook/web-components": "^8.4.6",
     "@storybook/web-components-vite": "^8.4.6",
     "@types/chart.js": "^2.9.41",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "26.0.24",
     "@webcomponents/custom-elements": "^1.5.0",
     "chart.js": "2.9.4",
     "chartjs-plugin-deferred": "^1.0.2",
@@ -62,7 +62,6 @@
     "fs-extra": "11.2.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
     "pn-design-assets": "^2.2.0",
@@ -81,7 +80,6 @@
     "@types/node": "^18.11.18",
     "debounce": "^2.1.0",
     "marked": "^12.0.0",
-    "qrcode": "^1.5.4",
     "read-excel-file": "5.8.1",
     "rimraf": "^5.0.7",
     "sass": "^1.77.5"

package/dist/pn-market-web-components/index.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{a}from"./p-82546a44.js";a(document.currentScript.src);
+import{a as m}from"./p-bb1c965e.js";m(document.currentScript.src);
 //# sourceMappingURL=index.esm.js.map

package/dist/pn-market-web-components/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["setAssetPath","document","currentScript","src"],"sources":["src/index.ts"],"sourcesContent":["export { Components, JSX } from './components';\nimport { setAssetPath } from '@stencil/core';\n\nsetAssetPath((document.currentScript as HTMLScriptElement).src);\n"],"mappings":"~~+BAGAA~~,EAAcC,SAASC,cAAoCC","ignoreList":[]}
1	+ {"version":3,"names":["setAssetPath","document","currentScript","src"],"sources":["src/index.ts"],"sourcesContent":["export { Components, JSX } from './components';\nimport { setAssetPath } from '@stencil/core';\n\nsetAssetPath((document.currentScript as HTMLScriptElement).src);\n"],"mappings":"oCAGAA,EAAcC,SAASC,cAAoCC","ignoreList":[]}

package/dist/pn-market-web-components/p-066e9db9.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,g as e,h as a,d as i}from"./p-bb1c965e.js";import{c as n}from"./p-12360e4c.js";import{p as o}from"./p-df8bfe03.js";const d="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-animated-tile .pn-animated-tile__container{position:relative;border-radius:2.4rem;height:56rem;cursor:default}pn-animated-tile .pn-animated-tile__content{position:relative;display:flex;height:100%;width:100%;background-color:transparent}pn-animated-tile [slot=side-a],pn-animated-tile [slot=side-b]{position:absolute;align-self:stretch;top:0;left:0;width:100%;height:100%}pn-animated-tile [slot=side-a]{padding:0;opacity:1}pn-animated-tile [slot=side-b]{z-index:-1;padding:2.4rem 2.4rem 7rem 2.4rem;opacity:0;transform:translateY(50px)}pn-animated-tile .pn-animated-tile__toggle{z-index:2;position:absolute;bottom:2.4rem;right:2.4rem;padding:0.8rem;border-radius:50%;border:none;cursor:pointer;background-color:#ffffff;transition:background-color 0.45s ease-in-out}pn-animated-tile .pn-animated-tile__toggle pn-icon{background-color:#ffffff;transition:background-color 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s}pn-animated-tile .pn-animated-tile__toggle:hover{background-color:#e9e6e5}pn-animated-tile .pn-animated-tile__toggle:hover pn-icon{background-color:#e9e6e5}pn-animated-tile .button-tooltip{display:none}.cat-animate [slot=side-a],.cat-animate [slot=side-b]{transition:opacity 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s}.cat-animate.fade [slot=side-a]{opacity:0;z-index:-1}.cat-animate.fade [slot=side-b]{z-index:1;opacity:1;transform:translateY(0);transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-a]{opacity:1;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-b]{opacity:0;transform:translateY(50px)}.cat-animate.toggle.animate pn-icon{transform:rotate(45deg)}[data-cat-theme=white] .pn-animated-tile__container{background-color:#ffffff}[data-cat-theme=white] .pn-animated-tile__toggle{background-color:#00a0d6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon{background-color:#00a0d6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon svg>path{fill:#ffffff}[data-cat-theme=white] .pn-animated-tile__toggle:hover{background-color:#005d92}[data-cat-theme=white] .pn-animated-tile__toggle:hover pn-icon{background-color:#005d92}[data-cat-theme=white] .pn-animated-tile__toggle:focus,[data-cat-theme=white] .pn-animated-tile__toggle:focus-visible{outline-color:#005d92}[data-cat-theme=coral400] .pn-animated-tile__container{background-color:#f06365}[data-cat-theme=coral400] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon svg>path{fill:#f06365}[data-cat-theme=coral400] .pn-animated-tile__toggle:focus,[data-cat-theme=coral400] .pn-animated-tile__toggle:focus-visible{outline-color:#f06365}[data-cat-theme=private] .pn-animated-tile__container{background-color:#00a0d6}[data-cat-theme=private] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon svg>path{fill:#00a0d6}[data-cat-theme=private] .pn-animated-tile__toggle:focus,[data-cat-theme=private] .pn-animated-tile__toggle:focus-visible{outline-color:#00a0d6}[data-cat-theme=business] .pn-animated-tile__container{background-color:#0d234b}[data-cat-theme=business] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon svg>path{fill:#0d234b}[data-cat-theme=business] .pn-animated-tile__toggle:focus,[data-cat-theme=business] .pn-animated-tile__toggle:focus-visible{outline-color:#0d234b}[data-cat-theme=hybrid] .pn-animated-tile__container{background-color:#e9e6e5}[data-cat-theme=hybrid] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon svg>path{fill:#005d92}[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus,[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus-visible{outline-color:#005d92}[data-cat-firstpage-only=true] [slot=side-b],[data-cat-firstpage-only=true] .pn-animated-tile__toggle{display:none}";const l=d;const c=class{constructor(e){t(this,e);this.toggled=false;this.transitionClassName="";this.animateIcon=""}get hostElement(){return e(this)}onClickHandler=()=>{this.toggled=!this.toggled};onToggledHandler(){this.transitionClassName=n({fade:this.toggled,"fade--reversed":!this.toggled});this.animateIcon=n({animate:this.toggled,"":!this.toggled})}render(){return a(i,{key:"ec2fa6234e759656fe4d0d40099248ba9feea212"},a("div",{key:"6457a5c6f9776c7846ea89f6fad9236f21ebd2ec",class:"pn-animated-tile__container"},a("div",{key:"5d4d15ad4016ab78e43ba598d464309d825a171d",class:`pn-animated-tile__content cat-animate ${this.transitionClassName}`},a("slot",{key:"8669f993453f1999ada8eaa342cb6daaca5827e0",name:"side-a"}),a("slot",{key:"96e3b5ea3e2ae3f67f329a8ab7fc06b0961e8689",name:"side-b"})),a("button",{key:"7a45847b51d43175e422b55705f6e9130394e03a",type:"button","aria-label":"Read more",class:`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`,onClick:this.onClickHandler},a("pn-icon",{key:"79c94d44537ca72618b1460becb62bfe39b0021d",icon:o}))))}static get watchers(){return{toggled:["onToggledHandler"]}}};c.style=l;export{c as pn_animated_tile};
2	+ //# sourceMappingURL=p-066e9db9.entry.js.map

package/dist/pn-market-web-components/{p-7b4f9fdf.entry.js.map → p-066e9db9.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["pnAnimatedTileCss","PnAnimatedTileStyle0","PnAnimatedTile","onClickHandler","this","toggled","onToggledHandler","transitionClassName","classNames","fade","animateIcon","animate","render","h","Host","key","class","name","type","onClick","icon","plus"],"sources":["src/components/animation/pn-animated-tile/pn-animated-tile.scss?tag=pn-animated-tile","src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n$gray100: #e9e6e5;\n\npn-animated-tile {\n .pn-animated-tile__container {\n position: relative;\n border-radius: 2.4rem;\n height: 56rem;\n\n cursor: default;\n }\n\n .pn-animated-tile__content {\n position: relative;\n display: flex;\n\n height: 100%;\n width: 100%;\n background-color: transparent;\n }\n\n [slot='side-a'],\n [slot='side-b'] {\n position: absolute;\n align-self: stretch;\n\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n //initial slots' state\n [slot='side-a'] {\n padding: 0;\n opacity: 1;\n }\n\n [slot='side-b'] {\n z-index: -1;\n padding: 2.4rem 2.4rem 7rem 2.4rem;\n opacity: 0;\n transform: translateY(50px);\n }\n\n .pn-animated-tile__toggle {\n z-index: 2;\n position: absolute;\n bottom: 2.4rem;\n right: 2.4rem;\n padding: 0.8rem;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n\n background-color: $white;\n transition: background-color 0.45s ease-in-out;\n pn-icon {\n background-color: $white;\n transition:\n background-color 0.45s ease-in-out,\n transform 0.45s ease-in-out 0.5s;\n }\n\n &:hover {\n background-color: $gray100;\n pn-icon {\n background-color: $gray100;\n }\n }\n }\n\n .button-tooltip {\n display: none;\n }\n}\n\n//animations\n.cat-animate {\n [slot='side-a'],\n [slot='side-b'] {\n transition:\n opacity 0.45s ease-in-out,\n transform 0.45s ease-in-out 0.5s;\n }\n\n &.fade {\n //from a to b\n [slot='side-a'] {\n opacity: 0;\n z-index: -1;\n }\n\n [slot='side-b'] {\n z-index: 1;\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.5s;\n }\n\n //from b to a\n &--reversed {\n [slot='side-a'] {\n opacity: 1;\n\n transition-delay: 0.5s;\n }\n\n [slot='side-b'] {\n opacity: 0;\n transform: translateY(50px);\n }\n }\n }\n\n &.toggle {\n &.animate {\n pn-icon {\n transform: rotate(45deg);\n }\n }\n }\n}\n\n//themes\n[data-cat-theme='white'] {\n .pn-animated-tile__container {\n background-color: $white;\n }\n\n .pn-animated-tile__toggle {\n background-color: $blue400;\n pn-icon {\n background-color: $blue400;\n svg > path {\n fill: $white;\n }\n }\n\n &:hover {\n background-color: $blue700;\n pn-icon {\n background-color: $blue700;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue700;\n }\n }\n}\n\n[data-cat-theme='coral400'] {\n .pn-animated-tile__container {\n background-color: $coral400;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $coral400;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $coral400;\n }\n }\n}\n\n[data-cat-theme='private'] {\n .pn-animated-tile__container {\n background-color: $blue400;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue400;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue400;\n }\n }\n}\n\n[data-cat-theme='business'] {\n .pn-animated-tile__container {\n background-color: $blue900;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue900;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue900;\n }\n }\n}\n\n[data-cat-theme='hybrid'] {\n .pn-animated-tile__container {\n background-color: $gray100;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue700;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue700;\n }\n }\n}\n\n[data-cat-firstpage-only='true'] {\n [slot='side-b'],\n .pn-animated-tile__toggle {\n display: none;\n }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-animated-tile',\n styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n @Element() hostElement: HTMLElement;\n\n @State() toggled: boolean = false;\n @State() transitionClassName: string = '';\n @State() animateIcon: string = '';\n\n onClickHandler = () => {\n this.toggled = !this.toggled;\n };\n\n @Watch('toggled')\n onToggledHandler() {\n this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-animated-tile__container\">\n <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n <slot name=\"side-a\" />\n <slot name=\"side-b\" />\n </div>\n <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n <pn-icon icon={plus}></pn-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB~~,+gJAC1B~~,MAAAC,EAAeD,E,MCQFE,EAAc,M,sCAGG,M,yBACW,G,iBACR,E,kCAE/BC,eAAiB,KACfC,KAAKC,SAAWD,KAAKC,OAAO,EAI9B,gBAAAC,GACEF,KAAKG,oBAAsBC,EAAW,CAAEC,KAAQL,KAAKC,QAAS,kBAAmBD,KAAKC,UACtFD,KAAKM,YAAcF,EAAW,CAAEG,QAAWP,KAAKC,QAAS,IAAKD,KAAKC,S,CAGrE,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,yCAAyCZ,KAAKG,uBACxDM,EAAA,QAAAE,IAAA,2CAAME,KAAK,WACXJ,EAAA,QAAAE,IAAA,2CAAME,KAAK,YAEbJ,EAAA,UAAAE,IAAA,2CAAQG,KAAK,SAAQ,aAAY,YAAYF,MAAO,+CAA+CZ,KAAKM,cAAeS,QAASf,KAAKD,gBACnIU,EAAA,WAAAE,IAAA,2CAASK,KAAMC,M","ignoreList":[]}
1	+ {"version":3,"names":["pnAnimatedTileCss","PnAnimatedTileStyle0","PnAnimatedTile","onClickHandler","this","toggled","onToggledHandler","transitionClassName","classNames","fade","animateIcon","animate","render","h","Host","key","class","name","type","onClick","icon","plus"],"sources":["src/components/animation/pn-animated-tile/pn-animated-tile.scss?tag=pn-animated-tile","src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n$gray100: #e9e6e5;\n\npn-animated-tile {\n .pn-animated-tile__container {\n position: relative;\n border-radius: 2.4rem;\n height: 56rem;\n\n cursor: default;\n }\n\n .pn-animated-tile__content {\n position: relative;\n display: flex;\n\n height: 100%;\n width: 100%;\n background-color: transparent;\n }\n\n [slot='side-a'],\n [slot='side-b'] {\n position: absolute;\n align-self: stretch;\n\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n //initial slots' state\n [slot='side-a'] {\n padding: 0;\n opacity: 1;\n }\n\n [slot='side-b'] {\n z-index: -1;\n padding: 2.4rem 2.4rem 7rem 2.4rem;\n opacity: 0;\n transform: translateY(50px);\n }\n\n .pn-animated-tile__toggle {\n z-index: 2;\n position: absolute;\n bottom: 2.4rem;\n right: 2.4rem;\n padding: 0.8rem;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n\n background-color: $white;\n transition: background-color 0.45s ease-in-out;\n pn-icon {\n background-color: $white;\n transition:\n background-color 0.45s ease-in-out,\n transform 0.45s ease-in-out 0.5s;\n }\n\n &:hover {\n background-color: $gray100;\n pn-icon {\n background-color: $gray100;\n }\n }\n }\n\n .button-tooltip {\n display: none;\n }\n}\n\n//animations\n.cat-animate {\n [slot='side-a'],\n [slot='side-b'] {\n transition:\n opacity 0.45s ease-in-out,\n transform 0.45s ease-in-out 0.5s;\n }\n\n &.fade {\n //from a to b\n [slot='side-a'] {\n opacity: 0;\n z-index: -1;\n }\n\n [slot='side-b'] {\n z-index: 1;\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.5s;\n }\n\n //from b to a\n &--reversed {\n [slot='side-a'] {\n opacity: 1;\n\n transition-delay: 0.5s;\n }\n\n [slot='side-b'] {\n opacity: 0;\n transform: translateY(50px);\n }\n }\n }\n\n &.toggle {\n &.animate {\n pn-icon {\n transform: rotate(45deg);\n }\n }\n }\n}\n\n//themes\n[data-cat-theme='white'] {\n .pn-animated-tile__container {\n background-color: $white;\n }\n\n .pn-animated-tile__toggle {\n background-color: $blue400;\n pn-icon {\n background-color: $blue400;\n svg > path {\n fill: $white;\n }\n }\n\n &:hover {\n background-color: $blue700;\n pn-icon {\n background-color: $blue700;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue700;\n }\n }\n}\n\n[data-cat-theme='coral400'] {\n .pn-animated-tile__container {\n background-color: $coral400;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $coral400;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $coral400;\n }\n }\n}\n\n[data-cat-theme='private'] {\n .pn-animated-tile__container {\n background-color: $blue400;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue400;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue400;\n }\n }\n}\n\n[data-cat-theme='business'] {\n .pn-animated-tile__container {\n background-color: $blue900;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue900;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue900;\n }\n }\n}\n\n[data-cat-theme='hybrid'] {\n .pn-animated-tile__container {\n background-color: $gray100;\n }\n\n .pn-animated-tile__toggle {\n background-color: $white;\n pn-icon {\n background-color: $white;\n svg > path {\n fill: $blue700;\n }\n }\n\n &:focus,\n &:focus-visible {\n outline-color: $blue700;\n }\n }\n}\n\n[data-cat-firstpage-only='true'] {\n [slot='side-b'],\n .pn-animated-tile__toggle {\n display: none;\n }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-animated-tile',\n styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n @Element() hostElement: HTMLElement;\n\n @State() toggled: boolean = false;\n @State() transitionClassName: string = '';\n @State() animateIcon: string = '';\n\n onClickHandler = () => {\n this.toggled = !this.toggled;\n };\n\n @Watch('toggled')\n onToggledHandler() {\n this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-animated-tile__container\">\n <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n <slot name=\"side-a\" />\n <slot name=\"side-b\" />\n </div>\n <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n <pn-icon icon={plus}></pn-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,ssIAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,sCAGG,M,yBACW,G,iBACR,E,kCAE/BC,eAAiB,KACfC,KAAKC,SAAWD,KAAKC,OAAO,EAI9B,gBAAAC,GACEF,KAAKG,oBAAsBC,EAAW,CAAEC,KAAQL,KAAKC,QAAS,kBAAmBD,KAAKC,UACtFD,KAAKM,YAAcF,EAAW,CAAEG,QAAWP,KAAKC,QAAS,IAAKD,KAAKC,S,CAGrE,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,yCAAyCZ,KAAKG,uBACxDM,EAAA,QAAAE,IAAA,2CAAME,KAAK,WACXJ,EAAA,QAAAE,IAAA,2CAAME,KAAK,YAEbJ,EAAA,UAAAE,IAAA,2CAAQG,KAAK,SAAQ,aAAY,YAAYF,MAAO,+CAA+CZ,KAAKM,cAAeS,QAASf,KAAKD,gBACnIU,EAAA,WAAAE,IAAA,2CAASK,KAAMC,M","ignoreList":[]}

package/dist/pn-market-web-components/p-0ec8d040.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i,d as s}from"./p-bb1c965e.js";import{s as l}from"./p-959a37d9.js";import{a as e,b as n,R as a}from"./p-f49e0b32.js";import{a as r,b as o}from"./p-4cb85336.js";import"./p-2509d18d.js";const h='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a8 8 0 0 0-6.857 12.124l.014.022 4.454 6.586a2.884 2.884 0 0 0 4.778 0l4.454-6.586.014-.022A8 8 0 0 0 12 2m-6 8a6 6 0 1 1 11.156 3.07l-4.424 6.541a.883.883 0 0 1-1.464 0L6.844 13.07A5.97 5.97 0 0 1 6 10m6-2.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5" clip-rule="evenodd"/></svg>';const c=h;const d="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-find-price-result .test{margin:3em 0}.resultcontent{display:flex;justify-content:center;flex-grow:1}";const u=d;const p=class{constructor(i){t(this,i);this.item=null;this.shownitems=[];this.Usp1=undefined;this.Usp2=undefined;this.Usp3=undefined;this.description=[];this.showMeasurement=false;this.weightText="";this.linkId="";this.shopLabel="";this.shopUrl="";this.shopId=""}componentWillLoad(){this.composeItems()}composeItems(){if(this.item.additionalusp){var t=this.item.additionalusp.split("/");this.Usp1=t.length>0?t[0]:null;this.Usp2=t.length>1?t[1]:null;this.Usp3=t.length>2?t[2]:null}if(this.item.description){this.description=this.item.description.split("#bullet").filter((t=>t!==""))}this.showMeasurement=this.item.maxmått!==null\|\|this.item.rulle!==null;this.linkId=`${this.item.id}-${this.item.maxweight}-${this.item.sizecategory}-${this.item.name.toLocaleLowerCase().replace(/[^a-zA-Z0-9]/g,"")}`;var i=this.item.ombudpurchase==="Yes";this.shopLabel=i?l.i18n.ombudHeader:l.i18n.stampshopcta;this.shopUrl=i?l.market.servicePoint:e;this.shopId=i?"-servicepoint":"-stampshop"}render(){return i(s,{key:"e784311e1b2d86b938427447c867c3dc5272eb2e"},i("pn-product-card",{key:"355a3a9cf2a4e2e47ab2bd9fe0b50e268be63afb","data-productid":this.item.id},i("pn-illustration",{key:"233b9e1f5697208c2d6c6abbae87e9902aa46617",slot:"illustration",illustration:this.item.illustration}),i("div",{key:"5e355931222c1357694b398c03b25720d7dcd0b4",slot:"title"},this.item.infopagelink?i("h2",null,i("a",{href:this.item.infopagelink,target:"_blank"},this.item.name)):i("h2",null,this.item.name),this.item.highestrankusp==="Snabbast"?i("pn-titletag",{slot:"Snabbast",icon:r,color:"blue700"},this.item.highestrankusp):this.item.highestrankusp==="Billigast"?i("pn-titletag",{slot:"Billigast",icon:o,color:"green700"},this.item.highestrankusp):null),i("div",{key:"be7c931de6fb5a08b7845ddcce4db2501699ae7a",slot:"content"},i("div",{key:"a9f78bf9ff3866d7477aa3ef373b5e1fbd597f54",class:"content"},this.item.description?i("div",{class:"description"},this.description.map((t=>i("li",null,t)))):null,this.item.info?i("div",{class:"description"},this.item.info):null)),this.item.note?i("div",{slot:"note"},i("p",null,this.item.note)):null,this.item.additionalusp?i("div",{slot:"additionalUSP"},this.Usp1?i("span",null,this.Usp1):null,this.Usp2?i("span",null,this.Usp2):null,this.Usp3?i("span",null,this.Usp3):null):null,this.showMeasurement?i("pn-product-card-info",{paket:this.item.maxmått,rulle:this.item.rulle}):null,i("div",{key:"85164d86527ff54e4f1389ff91c7b81ecfee267a",slot:"cardprice"},this.item.pricesenddirect?i("pn-product-card-price",{slot:"sendDirectPrice",label:l.i18n.senddirectcta,amount:this.item.pricesenddirect+"",currency:l.market.currency,url:n,linkid:this.linkId+"-portal"}):null,this.item.pricestamps?this.item.name.toLocaleLowerCase()!=="riktiga vykort"?i("pn-product-card-price",{slot:"stampPrice",label:this.shopLabel,amount:this.item.pricestamps+"",currency:l.market.currency,url:this.shopUrl,linkid:this.linkId+this.shopId}):i("pn-product-card-price",{slot:"riktiga",label:l.i18n.realPostcard,amount:this.item.pricestamps+"",currency:l.market.currency,url:a["WebUrl"],linkid:this.linkId+"-riktiga"}):null),i("div",{key:"078551895b6b59f0a021783c11d8b9611585315e",slot:"servicepoint"},this.item.showservicepointlink?i("a",{href:l.market.servicePoint,target:"_blank"},i("pn-icon",{icon:c,color:"blue700"}),l.i18n.servicePointLink):null),i("div",{key:"114b16c9b600e0364404039ce2f218f0dc244332",slot:"mobiledownload"},this.item.name.toLocaleLowerCase()==="riktiga vykort"?i("div",{id:"riktiga"},i("h4",null,l.i18n.realPostcardMobile),i("div",null,i("a",{href:a["AndroidAppUrl"],target:"_blank"},i("img",{class:"riktigaAndroidImg",src:a["AndroidImg"]})),i("a",{href:a["IosAppUrl"],target:"_blank"},i("img",{class:"riktigaAppleImg",src:a["IosImg"]})))):null)))}static get watchers(){return{item:["composeItems"]}}};p.style=u;export{p as pn_find_price_result};
2	+ //# sourceMappingURL=p-0ec8d040.entry.js.map