npm - @postnord/pn-marketweb-components - Versions diffs - 4.3.1 → 4.3.3 - Mend

@postnord/pn-marketweb-components 4.3.1 → 4.3.3

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

package/cjs/pn-versa-card.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9a9efa1c.js');
 const HeadingTag = require('./HeadingTag-190a9892.js');
-const pnVersaCardCss = "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-versa-card{display:flex;width:100%;height:100%;--versa-card-bg:transparent;--versa-card-heading-color:inherit;--versa-card-text-color:inherit;--versa-card-blockquote-border-color:inherit;--versa-link-color:#005d92;--versa-card-padding:1.6rem;--versa-card-heading-size:2.4rem;--versa-card-preamble-size:1.8rem;--versa-card-label-size:1.2rem;--rte-text-color:var(--versa-card-text-color);--rte-heading-color:var(--versa-card-heading-color);--rte-blockquote-border-color:var(--versa-card-blockquote-border-color);--rte-image-radius:1.6rem}pn-versa-card .pn-versa-card-label{display:block;font-size:var(--versa-card-label-size);text-transform:uppercase;margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card-heading{font-size:var(--versa-card-heading-size);margin:0 0 0.4rem 0;color:var(--versa-card-heading-color)}pn-versa-card .pn-versa-card-preamble{font-size:var(--versa-card-preamble-size);margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card{display:flex;flex-direction:column;width:100%;height:100%;gap:0.8rem;position:relative}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image],pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture,pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{display:block;width:100%;height:100%}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{border-radius:1.6rem;object-fit:cover}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture{max-width:70rem;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;max-width:100%;gap:1.6rem;padding-bottom:1.6rem;--pn-link-current-color:var(--versa-link-color);--rte-link-color:var(--pn-link-current-color)}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent,pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{max-width:70rem;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent{display:flex;flex-direction:column;color:var(--versa-card-text-color);width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{display:flex;align-items:center;min-height:4.8rem;width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:1.6rem;width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a{margin-bottom:0}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] pn-button[appearance=light]{color:unset}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button){color:var(--pn-link-current-color);text-decoration:none;font-weight:400}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button):hover{text-decoration:underline}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path{fill:var(--pn-link-current-color)}pn-versa-card .pn-versa-card-hasBg{position:relative;padding:var(--versa-card-padding);border-radius:1.6rem;background-color:transparent}pn-versa-card .pn-versa-card-hasBg::before{content:\"\";position:absolute;inset:0;background-color:var(--versa-card-bg);border-radius:inherit;z-index:0;pointer-events:none;opacity:1}pn-versa-card .pn-versa-card-hasBg>*{position:relative;z-index:1}pn-versa-card .pn-versa-card-hasBg .pn-versa-card-content{padding-bottom:0}pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground::before{opacity:0.9;transition:opacity 500ms ease-in-out}pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground:hover::before{opacity:0.98}pn-versa-card .pn-versa-card-hasImageCover{padding:0}pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper{height:100%;margin-bottom:0}pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper [slot=image] picture img{width:100%;height:100%;object-fit:cover}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText{--pn-versa-hover-overlay-alpha:var(--pn-versa-opacity, 0.85)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper{position:relative;height:100%}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before,pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after{content:\"\";position:absolute;inset:0;border-radius:1.6rem;pointer-events:none}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before{background:radial-gradient(circle, rgba(13, 35, 75, 0.8) 7%, rgba(13, 35, 75, 0) 100%);z-index:1}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after{background-color:rgba(13, 35, 75, var(--pn-versa-hover-overlay-alpha));opacity:0;transition:opacity 1s;z-index:2}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture img{position:relative;z-index:0}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.4rem;max-width:unset;color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);--pn-link-current-color:#ffffff;--rte-text-color:#ffffff;--rte-heading-color:#ffffff;--rte-blockquote-text-color:#ffffff;--rte-blockquote-border-color:rgba(255, 255, 255, 0.8);--rte-quote-author-color:#ffffff;--rte-quote-author-bg:rgba(255, 255, 255, 0.16)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content a{color:var(--pn-link-current-color);text-shadow:none}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content pn-button[appearance=light] a{color:#005d92}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path{fill:var(--pn-link-current-color)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText:hover .pn-versa-card-imageWrapper::after{opacity:1}pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper{width:auto;height:auto}pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img{aspect-ratio:1/1;width:100%;height:100%;max-width:12rem;border-radius:50%}pn-versa-card .pn-versa-card-horizontal{flex-direction:column}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper [slot=image] picture img{height:100%}pn-versa-card .pn-versa-card-center .pn-versa-card-imageWrapper{align-self:center}pn-versa-card .pn-versa-card-center .pn-versa-card-content{align-items:center;text-align:center}pn-versa-card .pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{justify-content:center}pn-versa-card .pn-versa-card-alignMiddle{justify-content:center}pn-versa-card .pn-versa-card-alignMiddle .pn-versa-card-content{height:auto}pn-versa-card[data-card-color=white]{--versa-card-bg:#ffffff}pn-versa-card[data-card-color=blue25]{--versa-card-bg:#effbff;--versa-card-blockquote-border-color:#00a0d6}pn-versa-card[data-card-color=blue50]{--versa-card-bg:#e0f8ff;--versa-card-blockquote-border-color:#00a0d6}pn-versa-card[data-card-color=blue400]{--versa-card-bg:#00a0d6;--rte-heading-color:#ffffff}pn-versa-card[data-card-color=blue900]{--versa-card-bg:#0d234b;--versa-card-heading-color:#8eddf9;--versa-card-text-color:#ffffff;--versa-card-blockquote-border-color:#ffffff;--versa-link-color:#ffffff;--rte-heading-color:#ffffff}pn-versa-card[data-card-color=coral25]{--versa-card-bg:#fef7f6;--versa-card-blockquote-border-color:#f06365}pn-versa-card[data-card-color=coral50]{--versa-card-bg:#fdefee;--versa-card-blockquote-border-color:#f06365}pn-versa-card[data-card-color=green25]{--versa-card-bg:#edfbf3;--versa-card-blockquote-border-color:#5ec584}pn-versa-card[data-card-color=green50]{--versa-card-bg:#dcf6e7;--versa-card-blockquote-border-color:#5ec584}@media (min-width: 600px){pn-versa-card .pn-versa-card-horizontal{flex-direction:row;gap:3.2rem}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper,pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content{flex:1}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper{height:auto}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper [slot=image] picture img{height:auto;position:sticky;top:1.6rem}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content{width:50%;box-sizing:border-box;justify-content:flex-start}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg{padding:2.4rem}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-horizontal--imgRight{flex-direction:row-reverse}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper{height:100%}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-imageWrapper{align-self:auto}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content{align-items:stretch;text-align:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-textContent,pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper{align-self:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{justify-content:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content{justify-content:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper{width:50%}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img{max-width:unset}}@media (min-width: 1440px){pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg{padding:3.2rem}}pn-versa-card .versa-card-cta-link-animated pn-icon{position:relative;left:-0.3rem;transition:0.3s ease-in-out}pn-versa-card .versa-card-cta-link-animated:hover pn-icon{left:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte]{color:var(--rte-text-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte]>*:last-child,pn-versa-card .pn-versa-card-RTEtext [slot=rte]>*:last-child *:last-child{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] a{text-decoration:underline}pn-versa-card .pn-versa-card-RTEtext [slot=rte] a:not(.pn-button){color:var(--rte-link-color, currentColor)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h1{font-size:var(--rte-h1-size, 2.4rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h2{font-size:var(--rte-h2-size, 2.4rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h3{font-size:var(--rte-h3-size, 2rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h4{font-size:var(--rte-h4-size, 1.8rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h5{font-weight:var(--rte-h5-weight, 500);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h6{font-weight:var(--rte-h6-weight, 500);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] strong{font-weight:var(--rte-strong-weight, 500)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] ul{padding-left:var(--rte-list-padding-left, 2.4rem);margin-bottom:var(--rte-list-margin-bottom, 3.2rem)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] ol{padding-left:var(--rte-list-padding-left, 2.4rem);margin-bottom:var(--rte-list-margin-bottom, 3.2rem)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .flex-bullet-list{padding-left:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] table{display:block;width:100%;max-width:100%;overflow-x:auto;margin-bottom:var(--rte-table-margin-bottom, 2.4rem);padding:var(--rte-table-padding, 0.8rem);border:none;border-radius:var(--rte-table-radius, 0.8rem);background:var(--rte-table-bg, #fff)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] table.table-tiny-mce th{background:transparent}pn-versa-card .pn-versa-card-RTEtext [slot=rte] th{padding:var(--rte-th-padding, 0.8rem);min-width:var(--rte-th-min-width, 20rem);text-align:left;font-weight:var(--rte-th-font-weight, 500);background:var(--rte-th-bg, #effbff);border:var(--rte-th-border-width, 3px) solid var(--rte-th-border-color, #e0f8ff);color:var(--rte-th-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] td{padding:var(--rte-td-padding, 0.8rem);min-width:var(--rte-td-min-width, 20rem);text-align:left;border:var(--rte-td-border-width, 1px) solid var(--rte-td-border-color, #e2e2e2);background:var(--rte-td-bg, #fff);color:var(--rte-td-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote{padding-left:var(--rte-blockquote-padding-left, 1.6rem);margin:var(--rte-blockquote-margin, 1.6rem 0);border-left:var(--rte-blockquote-border-width, 0.4rem) solid var(--rte-blockquote-border-color, currentColor);border-radius:var(--rte-blockquote-radius, 0);color:var(--rte-blockquote-text-color, inherit);background:var(--rte-blockquote-bg, transparent)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote p{margin:var(--rte-blockquote-paragraph-margin, 0)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote em{display:inline-block;font-style:normal;margin-top:var(--rte-quote-author-margin-top, 0.8rem);font-size:var(--rte-quote-author-font-size, 1.4rem);padding:var(--rte-quote-author-padding, 0.4rem);border-radius:var(--rte-quote-author-radius, 0.4rem);background:var(--rte-quote-author-bg, rgba(255, 255, 255, 0.1));color:var(--rte-quote-author-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .accordionblock-title{font-size:var(--rte-accordion-title-size, 1.8rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] img{border-radius:var(--rte-image-radius, 0)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__Element{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .FormSubmitButton .btn{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__MainBody section>div{margin-bottom:var(--rte-forms-spacing, 1.6rem) !important}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .pn-quote-card__section{max-width:none !important;background-color:transparent}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .quoteblock-section .pn-quote-card__section .pn-quote-card__quote{border:none !important;padding-left:0 !important}.onethirdwidth pn-versa-card{--rte-forms-spacing:1.2rem}@media (min-width: 992px){.onequarterwidth pn-versa-card{--versa-card-padding:0.8rem;--versa-card-heading-size:2rem;--versa-card-preamble-size:1.7rem;--versa-card-label-size:1.1rem;--rte-h2-size:2rem;--rte-h3-size:1.8rem;--rte-h4-size:1.6rem}.halfwidth pn-versa-card,.fullwidth pn-versa-card{--rte-blockquote-margin:2.4rem 0}}@media (min-width: 1640px){.onequarterwidth pn-versa-card{--versa-card-padding:1.6rem}}pn-versa-card:not(:where(.versacardblock *)){height:auto}";
+const pnVersaCardCss = "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-versa-card{display:flex;width:100%;height:100%;--versa-card-bg:transparent;--versa-card-heading-color:inherit;--versa-card-text-color:inherit;--versa-card-blockquote-border-color:inherit;--versa-link-color:#005d92;--versa-card-padding:1.6rem;--versa-card-heading-size:2.4rem;--versa-card-preamble-size:1.8rem;--versa-card-label-size:1.2rem;--rte-text-color:var(--versa-card-text-color);--rte-heading-color:var(--versa-card-heading-color);--rte-blockquote-border-color:var(--versa-card-blockquote-border-color);--rte-image-radius:1.6rem}pn-versa-card .pn-versa-card-label{display:block;font-size:var(--versa-card-label-size);text-transform:uppercase;margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card-heading{font-size:var(--versa-card-heading-size);margin:0 0 0.4rem 0;color:var(--versa-card-heading-color)}pn-versa-card .pn-versa-card-preamble{font-size:var(--versa-card-preamble-size);margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card{display:flex;flex-direction:column;width:100%;height:100%;gap:0.8rem;position:relative}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image],pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture,pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{display:block;width:100%;height:100%}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{border-radius:1.6rem;object-fit:cover}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture{max-width:70rem;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;max-width:100%;gap:1.6rem;padding-bottom:1.6rem;--pn-link-current-color:var(--versa-link-color);--rte-link-color:var(--pn-link-current-color)}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent,pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{max-width:70rem;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent{display:flex;flex-direction:column;color:var(--versa-card-text-color);width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{display:flex;align-items:center;min-height:4.8rem;width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:1.6rem;width:100%}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a{margin-bottom:0}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] pn-button[appearance=light]{color:unset}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button){color:var(--pn-link-current-color);text-decoration:none;font-weight:400}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button):hover{text-decoration:underline}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path{fill:var(--pn-link-current-color)}pn-versa-card .pn-versa-card-hasBg{position:relative;padding:var(--versa-card-padding);border-radius:1.6rem;background-color:transparent}pn-versa-card .pn-versa-card-hasBg::before{content:\"\";position:absolute;inset:0;background-color:var(--versa-card-bg);border-radius:inherit;z-index:0;pointer-events:none;opacity:1}pn-versa-card .pn-versa-card-hasBg>*{position:relative;z-index:1}pn-versa-card .pn-versa-card-hasBg .pn-versa-card-content{padding-bottom:0}pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground::before{opacity:0.9;transition:opacity 500ms ease-in-out}pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground:hover::before{opacity:0.98}pn-versa-card .pn-versa-card-hasImageCover{padding:0}pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper{height:100%;margin-bottom:0}pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper [slot=image] picture img{width:100%;height:100%;object-fit:cover}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText{display:grid;grid-template-areas:\"cover\";--pn-versa-hover-overlay-alpha:var(--pn-versa-opacity, 0.85)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper{grid-area:cover;position:relative;height:auto;min-height:100%}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before,pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after{content:\"\";position:absolute;inset:0;border-radius:1.6rem;pointer-events:none}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before{background:radial-gradient(circle, rgba(13, 35, 75, 0.8) 7%, rgba(13, 35, 75, 0) 100%);z-index:1}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after{background-color:rgba(13, 35, 75, var(--pn-versa-hover-overlay-alpha));opacity:0;transition:opacity 1s;z-index:2}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture img{position:relative;z-index:0}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture{max-width:unset}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content{grid-area:cover;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.4rem;box-sizing:border-box;height:auto;min-height:100%;max-width:unset;color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);--pn-link-current-color:#ffffff;--rte-text-color:#ffffff;--rte-heading-color:#ffffff;--rte-blockquote-text-color:#ffffff;--rte-blockquote-border-color:rgba(255, 255, 255, 0.8);--rte-quote-author-color:#ffffff;--rte-quote-author-bg:rgba(255, 255, 255, 0.16)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content a{color:var(--pn-link-current-color);text-shadow:none}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content pn-button[appearance=light] a{color:#005d92}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path{fill:var(--pn-link-current-color)}pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText:hover .pn-versa-card-imageWrapper::after{opacity:1}pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper{width:auto;height:auto}pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img{aspect-ratio:1/1;width:100%;height:100%;max-width:12rem;border-radius:50%}pn-versa-card .pn-versa-card-horizontal{flex-direction:column}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper [slot=image] picture img{height:100%}pn-versa-card .pn-versa-card-center.pn-versa-card-hasImageCover .pn-versa-card-imageWrapper{align-self:auto}pn-versa-card .pn-versa-card-center:not(.pn-versa-card-hasImageCover) .pn-versa-card-imageWrapper{align-self:center}pn-versa-card .pn-versa-card-center .pn-versa-card-content{align-items:center;text-align:center}pn-versa-card .pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{justify-content:center}pn-versa-card .pn-versa-card-alignMiddle{justify-content:center}pn-versa-card .pn-versa-card-alignMiddle .pn-versa-card-content{height:auto}pn-versa-card[data-card-color=white]{--versa-card-bg:#ffffff}pn-versa-card[data-card-color=blue25]{--versa-card-bg:#effbff;--versa-card-blockquote-border-color:#00a0d6}pn-versa-card[data-card-color=blue50]{--versa-card-bg:#e0f8ff;--versa-card-blockquote-border-color:#00a0d6}pn-versa-card[data-card-color=blue400]{--versa-card-bg:#00a0d6;--rte-heading-color:#ffffff}pn-versa-card[data-card-color=blue900]{--versa-card-bg:#0d234b;--versa-card-heading-color:#8eddf9;--versa-card-text-color:#ffffff;--versa-card-blockquote-border-color:#ffffff;--versa-link-color:#ffffff;--rte-heading-color:#ffffff}pn-versa-card[data-card-color=coral25]{--versa-card-bg:#fef7f6;--versa-card-blockquote-border-color:#f06365}pn-versa-card[data-card-color=coral50]{--versa-card-bg:#fdefee;--versa-card-blockquote-border-color:#f06365}pn-versa-card[data-card-color=green25]{--versa-card-bg:#edfbf3;--versa-card-blockquote-border-color:#5ec584}pn-versa-card[data-card-color=green50]{--versa-card-bg:#dcf6e7;--versa-card-blockquote-border-color:#5ec584}@media (min-width: 600px){pn-versa-card .pn-versa-card-horizontal{flex-direction:row;gap:3.2rem}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper,pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content{flex:1}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper{height:auto}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper [slot=image] picture img{height:auto;position:sticky;top:1.6rem}pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content{width:50%;box-sizing:border-box;justify-content:flex-start}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg{padding:2.4rem}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-horizontal--imgRight{flex-direction:row-reverse}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper{height:100%}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-imageWrapper{align-self:auto}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content{align-items:stretch;text-align:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-textContent,pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper{align-self:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta]{justify-content:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content{justify-content:center}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper{width:50%}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img{max-width:unset}}@media (min-width: 1440px){pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg{padding:3.2rem}}pn-versa-card .versa-card-cta-link-animated pn-icon{position:relative;left:-0.3rem;transition:0.3s ease-in-out}pn-versa-card .versa-card-cta-link-animated:hover pn-icon{left:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte]{color:var(--rte-text-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte]>*:last-child,pn-versa-card .pn-versa-card-RTEtext [slot=rte]>*:last-child *:last-child{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] a{text-decoration:underline}pn-versa-card .pn-versa-card-RTEtext [slot=rte] a:not(.pn-button){color:var(--rte-link-color, currentColor)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h1{font-size:var(--rte-h1-size, 2.4rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h2{font-size:var(--rte-h2-size, 2.4rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h3{font-size:var(--rte-h3-size, 2rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h4{font-size:var(--rte-h4-size, 1.8rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h5{font-weight:var(--rte-h5-weight, 500);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] h6{font-weight:var(--rte-h6-weight, 500);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] strong{font-weight:var(--rte-strong-weight, 500)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] ul{padding-left:var(--rte-list-padding-left, 2.4rem);margin-bottom:var(--rte-list-margin-bottom, 3.2rem)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] ol{padding-left:var(--rte-list-padding-left, 2.4rem);margin-bottom:var(--rte-list-margin-bottom, 3.2rem)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .flex-bullet-list{padding-left:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] table{display:block;width:100%;max-width:100%;overflow-x:auto;margin-bottom:var(--rte-table-margin-bottom, 2.4rem);padding:var(--rte-table-padding, 0.8rem);border:none;border-radius:var(--rte-table-radius, 0.8rem);background:var(--rte-table-bg, #fff)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] table.table-tiny-mce th{background:transparent}pn-versa-card .pn-versa-card-RTEtext [slot=rte] th{padding:var(--rte-th-padding, 0.8rem);min-width:var(--rte-th-min-width, 20rem);text-align:left;font-weight:var(--rte-th-font-weight, 500);background:var(--rte-th-bg, #effbff);border:var(--rte-th-border-width, 3px) solid var(--rte-th-border-color, #e0f8ff);color:var(--rte-th-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] td{padding:var(--rte-td-padding, 0.8rem);min-width:var(--rte-td-min-width, 20rem);text-align:left;border:var(--rte-td-border-width, 1px) solid var(--rte-td-border-color, #e2e2e2);background:var(--rte-td-bg, #fff);color:var(--rte-td-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote{padding-left:var(--rte-blockquote-padding-left, 1.6rem);margin:var(--rte-blockquote-margin, 1.6rem 0);border-left:var(--rte-blockquote-border-width, 0.4rem) solid var(--rte-blockquote-border-color, currentColor);border-radius:var(--rte-blockquote-radius, 0);color:var(--rte-blockquote-text-color, inherit);background:var(--rte-blockquote-bg, transparent)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote p{margin:var(--rte-blockquote-paragraph-margin, 0)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote em{display:inline-block;font-style:normal;margin-top:var(--rte-quote-author-margin-top, 0.8rem);font-size:var(--rte-quote-author-font-size, 1.4rem);padding:var(--rte-quote-author-padding, 0.4rem);border-radius:var(--rte-quote-author-radius, 0.4rem);background:var(--rte-quote-author-bg, rgba(255, 255, 255, 0.1));color:var(--rte-quote-author-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .accordionblock-title{font-size:var(--rte-accordion-title-size, 1.8rem);color:var(--rte-heading-color, inherit)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] img{border-radius:var(--rte-image-radius, 0)}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__Element{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .FormSubmitButton .btn{margin-bottom:0}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__MainBody section>div{margin-bottom:var(--rte-forms-spacing, 1.6rem) !important}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .pn-quote-card__section{max-width:none !important;background-color:transparent}pn-versa-card .pn-versa-card-RTEtext [slot=rte] .quoteblock-section .pn-quote-card__section .pn-quote-card__quote{border:none !important;padding-left:0 !important}.onethirdwidth pn-versa-card{--rte-forms-spacing:1.2rem}@media (min-width: 992px){.onequarterwidth pn-versa-card{--versa-card-padding:0.8rem;--versa-card-heading-size:2rem;--versa-card-preamble-size:1.7rem;--versa-card-label-size:1.1rem;--rte-h2-size:2rem;--rte-h3-size:1.8rem;--rte-h4-size:1.6rem}.halfwidth pn-versa-card,.fullwidth pn-versa-card{--rte-blockquote-margin:2.4rem 0}}@media (min-width: 1640px){.onequarterwidth pn-versa-card{--versa-card-padding:1.6rem}}pn-versa-card:not(:where(.versacardblock *)){height:auto}";
 const PnVersaCardStyle0 = pnVersaCardCss;
 const PnVersaCard = class {

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

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

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

@@ -182,11 +182,15 @@ pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper [slot=ima
   object-fit: cover;
 }
 pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText {
+  display: grid;
+  grid-template-areas: "cover";
   --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);
 }
 pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper {
+  grid-area: cover;
   position: relative;
-  height: 100%;
+  height: auto;
+  min-height: 100%;
 }
 pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before, pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after {
   content: "";
@@ -209,15 +213,21 @@ pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-v
   position: relative;
   z-index: 0;
 }
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture {
+  max-width: unset;
+}
 pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content {
-  position: absolute;
-  inset: 0;
+  grid-area: cover;
+  position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 2.4rem;
+  box-sizing: border-box;
+  height: auto;
+  min-height: 100%;
   max-width: unset;
   color: #ffffff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -260,7 +270,10 @@ pn-versa-card .pn-versa-card-horizontal {
 pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper [slot=image] picture img {
   height: 100%;
 }
-pn-versa-card .pn-versa-card-center .pn-versa-card-imageWrapper {
+pn-versa-card .pn-versa-card-center.pn-versa-card-hasImageCover .pn-versa-card-imageWrapper {
+  align-self: auto;
+}
+pn-versa-card .pn-versa-card-center:not(.pn-versa-card-hasImageCover) .pn-versa-card-imageWrapper {
   align-self: center;
 }
 pn-versa-card .pn-versa-card-center .pn-versa-card-content {

package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js CHANGED Viewed

@@ -255,10 +255,11 @@ export const ThreeCardsCenteredQuarter = {
         {
             ...args,
             hasImageCover: true,
-            preamble: '',
-            heading: '',
-            label: '',
-            rteHtml: '',
+            center: true,
+            cardColor: 'blue25',
+            label: 'This is a card with image cover and image cover text',
+            preamble: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.',
+            heading: 'I am a card with image cover and image cover text',
             ctaHtml: '',
         },
     ], 'onethirdwidth', 3),

package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-versa-card.stories.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { arrow_right } from 'pn-design-assets/pn-assets/icons';\n\nimport {\n createComponent,\n createDocumentation,\n} from '@/globals/documentation/story';\nimport type {\n Meta,\n StoryObj,\n} from '@storybook/web-components';\n\nimport docs from './pn-versa-card-docs.json';\n\ntype VersaSize = 'default' \| 'halfwidth' \| 'onethirdwidth' \| 'onequarterwidth';\ntype CardColor = 'white' \| 'blue25' \| 'business' \| 'blue50' \| 'blue400' \| 'blue900' \| 'coral25' \| 'coral50' \| 'green25' \| 'green50' \| 'none';\n\ntype VersaCardStoryArgs = Omit<Partial<HTMLPnVersaCardElement>, 'theme'> & {\n /*\n Wrapper-only sizing (because SCSS targets `.halfwidth .pn-versa-card-hasBg { ... }`)\n /\n size?: VersaSize;\n\n /* RTE slot content (simulates CMS output) /\n rteHtml?: string;\n\n /* CTA slot content (simulates CMS output) /\n ctaHtml?: string;\n\n /* Story-only attribute mapped to data-card-color /\n cardColor?: CardColor;\n\n imageSrc?: string;\n imageAlt?: string;\n};\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<VersaCardStoryArgs> = {\n title: 'Components/Cards/Versa card',\n parameters: {\n docs: { description: { story: textContent } },\n },\n args: {\n // Wrapper sizing\n size: 'onequarterwidth',\n\n // Content props\n label: 'Example label',\n heading: 'Example heading',\n headingLevel: 'h3',\n preamble: 'Example preamble',\n imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',\n imageAlt: 'Versa card image',\n\n // Slot content (optional)\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit.</p>',\n ctaHtml: `<pn-button class=\"pn-button\" appearance=\"light\" target=\"_blank\" href=\"google.com\"> Read More </pn-button> <a class=\"versa-card-cta-link-animated\"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,\n\n // Modifier props (Stencil @Prop) \n hasImageCover: false,\n imageGrow: false,\n horizontal: false,\n imgAlignment: 'left',\n roundImage: false,\n center: false,\n alignMiddle: false,\n cardColor: 'white',\n opacity: 85,\n },\n argTypes: {\n ...argTypes,\n\n // Slots\n rteHtml: { control: 'text', description: 'Injected into slot=\"rte\".' },\n ctaHtml: { control: 'text', description: 'Injected into slot=\"cta\".' },\n imageSrc: { control: 'text', description: 'Image URL for the image slot.' },\n imageAlt: { control: 'text', description: 'Alt text for the image slot.' },\n\n // Wrapper sizing\n size: {\n control: 'radio',\n options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],\n description:\n 'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',\n },\n\n // Story-only data attribute\n cardColor: {\n control: { type: 'select' },\n options: [\n 'none',\n 'white',\n 'blue25',\n 'blue50',\n 'blue400',\n 'blue900',\n 'coral25',\n 'coral50',\n 'green25',\n 'green50',\n ],\n description: 'Sets the data-card-color attribute on pn-versa-card.',\n },\n\n opacity: {\n control: { type: 'range', min: 0, max: 100, step: 5 },\n },\n imgAlignment: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Sets the image to the right side of the card.',\n },\n roundImage: {\n control: 'boolean',\n description: 'Adds rounded image styling to the card.',\n },\n\n headingLevel: {\n control: 'select',\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'Sets the heading level for the card heading.',\n },\n transparentBackground: {\n control: 'boolean',\n description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<VersaCardStoryArgs>;\n\nfunction buildCard(args: VersaCardStoryArgs) {\n const {\n rteHtml,\n ctaHtml,\n size: _size,\n cardColor,\n ...componentArgs\n } = args;\n\n const { imageSrc,\n imageAlt, } = args;\n\n const el = createComponent('pn-versa-card', componentArgs) as HTMLElement;\n\n if (cardColor) {\n if (cardColor === 'none') {\n el.setAttribute('data-card-color', '');\n } else {\n el.setAttribute('data-card-color', cardColor);\n }\n }\n\n if (rteHtml?.trim()) {\n const rte = document.createElement('div');\n rte.slot = 'rte';\n rte.innerHTML = rteHtml;\n el.appendChild(rte);\n }\n\n if (ctaHtml?.trim()) {\n const cta = document.createElement('div');\n cta.slot = 'cta';\n cta.innerHTML = ctaHtml;\n el.appendChild(cta);\n }\n\n if (imageSrc) {\n const media = document.createElement('div');\n media.slot = 'image';\n\n const picture = document.createElement('picture');\n const img = document.createElement('img');\n img.src = imageSrc;\n\n if (imageAlt) {\n img.alt = imageAlt;\n }\n\n picture.appendChild(img);\n media.appendChild(picture);\n el.appendChild(media);\n }\n\n return el;\n}\n\n/\n One card, constrained by wrapper class, and centered on the page.\n /\nfunction renderCenteredQuarter(args: VersaCardStoryArgs) {\n const wrapper = document.createElement('div');\n\n if (args.size && args.size !== 'default') {\n wrapper.className = args.size;\n }\n\n wrapper.style.marginInline = 'auto';\n wrapper.style.display = 'block';\n wrapper.style.maxWidth = '420px';\n\n wrapper.appendChild(buildCard(args));\n return wrapper;\n}\n\nfunction renderCenteredRow(\n items: VersaCardStoryArgs[],\n size: VersaSize,\n columns: number,\n) {\n const wrapper = document.createElement('div');\n\n if (size !== 'default') {\n wrapper.className = size;\n }\n\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n wrapper.style.width = '100%';\n wrapper.style.height = '100%';\n\n const row = document.createElement('div');\n row.style.display = 'flex';\n row.style.gap = '24px';\n row.style.alignItems = 'stretch';\n row.style.height = '100%';\n\n items.forEach((item) => {\n const col = document.createElement('div');\n col.style.flex = `0 1 ${100 / columns}%`;\n col.style.display = 'flex';\n\n const card = buildCard(item);\n card.style.flex = '1';\n\n col.appendChild(card);\n row.appendChild(col);\n });\n\n wrapper.appendChild(row);\n return wrapper;\n}\n\n/ -----------------------------\n Stories\n--------------------------------*/\n\nexport const OneCardCenteredQuarterPlayGround: Story = {\n name: 'Playground (all controls enabled, for testing purposes)',\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',\n },\n ],\n 'onethirdwidth',\n 1,\n ),\n parameters: {\n controls: {\n exclude: [],\n },\n },\n};\n\nexport const OneCardCenteredQuarterDefault: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button>`,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],\n },\n },\n};\n\nexport const OneCardRoundedImage: Story = {\n name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n roundImage: true,\n center: false,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n parameters: {\n controls: {\n include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],\n },\n },\n};\n\n\nexport const OneCardCenteredQuarterImageCoverText: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n hasImageCover: true,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],\n },\n },\n};\n\nexport const ThreeCardsCenteredQuarter: Story = {\n name: 'Three cards, centered, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['imageSrc'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n\n cardColor: 'blue25',\n label: 'Card 1',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n {\n ...args,\n label: 'Card 2',\n heading: 'I am a card with no modifier',\n\n },\n {\n ...args,\n hasImageCover: true,\n preamble: '',\n heading: '',\n label: '',\n rteHtml: '',\n ctaHtml: '',\n },\n ],\n 'onethirdwidth',\n 3,\n ),\n};\n\nexport const TwoCardsHorizontalAlignMiddle: Story = {\n name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n cardColor: 'blue25',\n horizontal: true,\n alignMiddle: true,\n rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',\n\n },\n {\n ...args,\n preamble: '',\n center: true,\n roundImage: true,\n horizontal: false,\n alignMiddle: true,\n rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\nexport const OneCardCenteredQuarterDefaultHorizontal: Story = {\n name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-primary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class=\"\"> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\n\nexport const OneCardCenteredQuarterTransparentBackground: Story = {\n name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: [\n 'hasBg',\n 'transparentBackground',\n 'label',\n 'heading',\n 'preamble',\n 'imageSrc',\n 'imageAlt',\n 'imgAlignment',\n 'roundImage',\n 'cardColor',\n ],\n },\n },\n render: (args) => {\n const wrapper = document.createElement('div');\n\n wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';\n wrapper.style.padding = '64px 0';\n\n const row = renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml: `\n <p>This card demonstrates a <strong>10% transparent background</strong>.\n The gradient behind the card should be visible through the background.</p>\n `,\n ctaHtml: `\n <pn-button class=\"btn btn-primary\">Click me</pn-button>\n <a target=\"_blank\" href=\"https://google.com\">\n Read More <pn-icon icon='${arrow_right}'></pn-icon>\n </a>\n `,\n },\n ],\n 'halfwidth',\n 1,\n );\n\n wrapper.appendChild(row);\n\n return wrapper;\n },\n\n args: {\n transparentBackground: true,\n label: 'Story demo',\n heading: 'Transparent background card',\n preamble: 'The card background is slightly transparent while content remains opaque.',\n imgAlignment: 'left',\n roundImage: false,\n cardColor: 'white',\n },\n};"]}
1	+ {"version":3,"file":"pn-versa-card.stories.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { arrow_right } from 'pn-design-assets/pn-assets/icons';\n\nimport {\n createComponent,\n createDocumentation,\n} from '@/globals/documentation/story';\nimport type {\n Meta,\n StoryObj,\n} from '@storybook/web-components';\n\nimport docs from './pn-versa-card-docs.json';\n\ntype VersaSize = 'default' \| 'halfwidth' \| 'onethirdwidth' \| 'onequarterwidth';\ntype CardColor = 'white' \| 'blue25' \| 'business' \| 'blue50' \| 'blue400' \| 'blue900' \| 'coral25' \| 'coral50' \| 'green25' \| 'green50' \| 'none';\n\ntype VersaCardStoryArgs = Omit<Partial<HTMLPnVersaCardElement>, 'theme'> & {\n /*\n Wrapper-only sizing (because SCSS targets `.halfwidth .pn-versa-card-hasBg { ... }`)\n /\n size?: VersaSize;\n\n /* RTE slot content (simulates CMS output) /\n rteHtml?: string;\n\n /* CTA slot content (simulates CMS output) /\n ctaHtml?: string;\n\n /* Story-only attribute mapped to data-card-color /\n cardColor?: CardColor;\n\n imageSrc?: string;\n imageAlt?: string;\n};\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<VersaCardStoryArgs> = {\n title: 'Components/Cards/Versa card',\n parameters: {\n docs: { description: { story: textContent } },\n },\n args: {\n // Wrapper sizing\n size: 'onequarterwidth',\n\n // Content props\n label: 'Example label',\n heading: 'Example heading',\n headingLevel: 'h3',\n preamble: 'Example preamble',\n imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',\n imageAlt: 'Versa card image',\n\n // Slot content (optional)\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit.</p>',\n ctaHtml: `<pn-button class=\"pn-button\" appearance=\"light\" target=\"_blank\" href=\"google.com\"> Read More </pn-button> <a class=\"versa-card-cta-link-animated\"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,\n\n // Modifier props (Stencil @Prop) \n hasImageCover: false,\n imageGrow: false,\n horizontal: false,\n imgAlignment: 'left',\n roundImage: false,\n center: false,\n alignMiddle: false,\n cardColor: 'white',\n opacity: 85,\n },\n argTypes: {\n ...argTypes,\n\n // Slots\n rteHtml: { control: 'text', description: 'Injected into slot=\"rte\".' },\n ctaHtml: { control: 'text', description: 'Injected into slot=\"cta\".' },\n imageSrc: { control: 'text', description: 'Image URL for the image slot.' },\n imageAlt: { control: 'text', description: 'Alt text for the image slot.' },\n\n // Wrapper sizing\n size: {\n control: 'radio',\n options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],\n description:\n 'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',\n },\n\n // Story-only data attribute\n cardColor: {\n control: { type: 'select' },\n options: [\n 'none',\n 'white',\n 'blue25',\n 'blue50',\n 'blue400',\n 'blue900',\n 'coral25',\n 'coral50',\n 'green25',\n 'green50',\n ],\n description: 'Sets the data-card-color attribute on pn-versa-card.',\n },\n\n opacity: {\n control: { type: 'range', min: 0, max: 100, step: 5 },\n },\n imgAlignment: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Sets the image to the right side of the card.',\n },\n roundImage: {\n control: 'boolean',\n description: 'Adds rounded image styling to the card.',\n },\n\n headingLevel: {\n control: 'select',\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'Sets the heading level for the card heading.',\n },\n transparentBackground: {\n control: 'boolean',\n description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<VersaCardStoryArgs>;\n\nfunction buildCard(args: VersaCardStoryArgs) {\n const {\n rteHtml,\n ctaHtml,\n size: _size,\n cardColor,\n ...componentArgs\n } = args;\n\n const { imageSrc,\n imageAlt, } = args;\n\n const el = createComponent('pn-versa-card', componentArgs) as HTMLElement;\n\n if (cardColor) {\n if (cardColor === 'none') {\n el.setAttribute('data-card-color', '');\n } else {\n el.setAttribute('data-card-color', cardColor);\n }\n }\n\n if (rteHtml?.trim()) {\n const rte = document.createElement('div');\n rte.slot = 'rte';\n rte.innerHTML = rteHtml;\n el.appendChild(rte);\n }\n\n if (ctaHtml?.trim()) {\n const cta = document.createElement('div');\n cta.slot = 'cta';\n cta.innerHTML = ctaHtml;\n el.appendChild(cta);\n }\n\n if (imageSrc) {\n const media = document.createElement('div');\n media.slot = 'image';\n\n const picture = document.createElement('picture');\n const img = document.createElement('img');\n img.src = imageSrc;\n\n if (imageAlt) {\n img.alt = imageAlt;\n }\n\n picture.appendChild(img);\n media.appendChild(picture);\n el.appendChild(media);\n }\n\n return el;\n}\n\n/\n One card, constrained by wrapper class, and centered on the page.\n /\nfunction renderCenteredQuarter(args: VersaCardStoryArgs) {\n const wrapper = document.createElement('div');\n\n if (args.size && args.size !== 'default') {\n wrapper.className = args.size;\n }\n\n wrapper.style.marginInline = 'auto';\n wrapper.style.display = 'block';\n wrapper.style.maxWidth = '420px';\n\n wrapper.appendChild(buildCard(args));\n return wrapper;\n}\n\nfunction renderCenteredRow(\n items: VersaCardStoryArgs[],\n size: VersaSize,\n columns: number,\n) {\n const wrapper = document.createElement('div');\n\n if (size !== 'default') {\n wrapper.className = size;\n }\n\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n wrapper.style.width = '100%';\n wrapper.style.height = '100%';\n\n const row = document.createElement('div');\n row.style.display = 'flex';\n row.style.gap = '24px';\n row.style.alignItems = 'stretch';\n row.style.height = '100%';\n\n items.forEach((item) => {\n const col = document.createElement('div');\n col.style.flex = `0 1 ${100 / columns}%`;\n col.style.display = 'flex';\n\n const card = buildCard(item);\n card.style.flex = '1';\n\n col.appendChild(card);\n row.appendChild(col);\n });\n\n wrapper.appendChild(row);\n return wrapper;\n}\n\n/ -----------------------------\n Stories\n--------------------------------*/\n\nexport const OneCardCenteredQuarterPlayGround: Story = {\n name: 'Playground (all controls enabled, for testing purposes)',\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',\n },\n ],\n 'onethirdwidth',\n 1,\n ),\n parameters: {\n controls: {\n exclude: [],\n },\n },\n};\n\nexport const OneCardCenteredQuarterDefault: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button>`,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],\n },\n },\n};\n\nexport const OneCardRoundedImage: Story = {\n name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n roundImage: true,\n center: false,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n parameters: {\n controls: {\n include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],\n },\n },\n};\n\n\nexport const OneCardCenteredQuarterImageCoverText: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n hasImageCover: true,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],\n },\n },\n};\n\nexport const ThreeCardsCenteredQuarter: Story = {\n name: 'Three cards, centered, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['imageSrc'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n\n cardColor: 'blue25',\n label: 'Card 1',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n {\n ...args,\n label: 'Card 2',\n heading: 'I am a card with no modifier',\n\n },\n {\n ...args,\n hasImageCover: true,\n center: true,\n cardColor: 'blue25',\n label: 'This is a card with image cover and image cover text',\n preamble: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.',\n heading: 'I am a card with image cover and image cover text',\n ctaHtml: '',\n },\n ],\n 'onethirdwidth',\n 3,\n ),\n};\n\nexport const TwoCardsHorizontalAlignMiddle: Story = {\n name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n cardColor: 'blue25',\n horizontal: true,\n alignMiddle: true,\n rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',\n\n },\n {\n ...args,\n preamble: '',\n center: true,\n roundImage: true,\n horizontal: false,\n alignMiddle: true,\n rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\nexport const OneCardCenteredQuarterDefaultHorizontal: Story = {\n name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-primary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class=\"\"> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\n\nexport const OneCardCenteredQuarterTransparentBackground: Story = {\n name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: [\n 'hasBg',\n 'transparentBackground',\n 'label',\n 'heading',\n 'preamble',\n 'imageSrc',\n 'imageAlt',\n 'imgAlignment',\n 'roundImage',\n 'cardColor',\n ],\n },\n },\n render: (args) => {\n const wrapper = document.createElement('div');\n\n wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';\n wrapper.style.padding = '64px 0';\n\n const row = renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml: `\n <p>This card demonstrates a <strong>10% transparent background</strong>.\n The gradient behind the card should be visible through the background.</p>\n `,\n ctaHtml: `\n <pn-button class=\"btn btn-primary\">Click me</pn-button>\n <a target=\"_blank\" href=\"https://google.com\">\n Read More <pn-icon icon='${arrow_right}'></pn-icon>\n </a>\n `,\n },\n ],\n 'halfwidth',\n 1,\n );\n\n wrapper.appendChild(row);\n\n return wrapper;\n },\n\n args: {\n transparentBackground: true,\n label: 'Story demo',\n heading: 'Transparent background card',\n preamble: 'The card background is slightly transparent while content remains opaque.',\n imgAlignment: 'left',\n roundImage: false,\n cardColor: 'white',\n },\n};"]}

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

@@ -88,6 +88,21 @@ pn-marketweb-header-main-row .siteheader-mainnav-menu {
   flex: 0 0 auto;
   order: 2;
 }
+pn-marketweb-header-main-row .siteheader-mainnav-menu > [slot=mobile-toprightend] {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  padding: 1rem 0;
+  margin-right: 1.2rem;
+  color: var(--siteheader-cart-link-color, var(--siteheader-top-link-color, inherit));
+  text-decoration: none;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-menu > [slot=mobile-toprightend] > :not(pn-icon):not([data-cart-countindicator]) {
+  display: none;
+}
+pn-marketweb-header-main-row .siteheader-mainnav-menu > [slot=mobile-toprightend] pn-icon svg > path {
+  fill: var(--siteheader-cart-icon-color, var(--siteheader-top-icon-fill, currentColor));
+}
 pn-marketweb-header-main-row .siteheader-menu {
   max-width: 100%;
   overflow: visible;
@@ -155,6 +170,9 @@ body[data-siteheader-menuopen=true] pn-marketweb-header-main-row .siteheader-mob
   pn-marketweb-header-main-row .siteheader-mainnav-menu {
     justify-content: flex-start;
   }
+  pn-marketweb-header-main-row .siteheader-mainnav-menu > [slot=mobile-toprightend] {
+    display: none;
+  }
   pn-marketweb-header-main-row .siteheader-menu-footer {
     display: none;
   }

package/collection/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.js CHANGED Viewed

@@ -78,19 +78,19 @@ export class PnMarketwebHeaderMainRow {
     render() {
         // main row's subcomponent have light appearance even if business theme, since white bg
         const appearance = 'light';
-        return (h("div", { key: 'b19e8188f8776a417d92b422e97af169073992d7', class: "siteheader-row siteheader-row-main" }, h("div", { key: 'ee3206293821a283e0db7231fb88f8c7c4ccaf9f', class: "siteheader-mobile-left" }, h("div", { key: 'f02ae43733ecbb7d9a58f2f2faa0422e67ab398f', class: "siteheader-mobile-logo" }, renderHeaderLogo({
+        return (h("div", { key: '6569068aa71f831c64d80ae49841c52c422aafee', class: "siteheader-row siteheader-row-main" }, h("div", { key: 'd80d94ad7d42ad0e6dd4f17793470e3b99e1259b', class: "siteheader-mobile-left" }, h("div", { key: '8f15ec3f0912eff80b9b2b1b5110f9d8d5be340b', class: "siteheader-mobile-logo" }, renderHeaderLogo({
             homePageLink: this.logoUrl, //this.vm.homePageLink,
             homeLabel: this.i18n.home,
-        })), this.vm.hasMenuSwitching && (h("div", { key: '7559d93cf6e65dd98d943cc0bd047597486c7562', class: "siteheader-mobile-menu-toggle" }, renderHeaderMenuSwitcher({
+        })), this.vm.hasMenuSwitching && (h("div", { key: 'cd7e5b59db027518655aa6b64ca7d41c50439df8', class: "siteheader-mobile-menu-toggle" }, renderHeaderMenuSwitcher({
             vm: this.vm,
             activeMenuMode: this.activeMenuMode,
             navigateOnMenuToggle: this.navigateOnMenuToggle,
             onMenuToggleChange: this.menuToggleChangeHandler,
-        })))), h("div", { key: '25864e4241677776b8fffe41ba24cce1c3b5bc8f', class: "siteheader-mainnav-middle" }, h("pn-marketweb-siteheader-search", { key: '1ff81b6b404c473ed028a01115780f1837f78ec2', language: this.language, siteid: this.siteid, primary: true, search: this.vm.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }), h("slot", { key: 'd650ca23a0fa02d7e4dacccea5020743a509c782', name: "header-bottom-button" })), h("div", { key: 'b72af48b90c18d82a80469297327518af35c142c', class: "siteheader-mainnav-menu" }, h("div", { key: 'fbcd12fab8d69e0181fcc81185dca22fd502df7d', class: "siteheader-menu" }, h("pn-mainnav", { key: '3980090469bd133fabc2576ac41a12ab98f3cbc5', ref: el => {
+        })))), h("div", { key: '1e1602ae9fa7a24e67c4210c349fa11c647cbc61', class: "siteheader-mainnav-middle" }, h("pn-marketweb-siteheader-search", { key: '56b70f0de0d1eb0818f9be8b29f6aab4a33436ce', language: this.language, siteid: this.siteid, primary: true, search: this.vm.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }), h("slot", { key: '3a2a912c7578588245a306e0a69b19ba4fe6f07b', name: "header-bottom-button" })), h("div", { key: '950031e00ce843cb258fe41a019d2d291484355e', class: "siteheader-mainnav-menu" }, h("slot", { key: '5d162a549fa86c35ae1df1a70d8fa891676115c9', name: "mobile-toprightend" }), h("div", { key: '590c867a2b6c21b32677583050455464ec3d7256', class: "siteheader-menu" }, h("pn-mainnav", { key: '22e04f8724b186aa428ec79f1779b79c9c4fdaa0', ref: el => {
                 this.mainNavRefHandler(el);
             }, market: this.market, language: this.language, onMenuOpenChange: e => {
                 document.body.setAttribute('data-siteheader-menuopen', String(e.detail));
-            } }, h("pn-mainnav-level", { key: '2c608f41f227e445808121d53abab276459cedc8' }, this.showMenuDivider ? (this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)) : (h("pn-mainnav-list", null, this.renderMenuLinks(this.primaryItems))), this.renderMenuFooter(appearance), h("div", { key: 'f41ca4efbce5a71be65381199efb81f491c0ee0d', slot: "top", class: "siteheader-menu-top" }, h("pn-marketweb-siteheader-search", { key: 'bf04f67936996b8151a6ba14c64a5a7212d90ee4', language: this.language, siteid: this.siteid, search: this.vm.search, "hide-search": this.hideSearch, i18n: this.i18n }))))))));
+            } }, h("pn-mainnav-level", { key: '67a41d3f1fda939b23f8115fa8a0358f75f44422' }, this.showMenuDivider ? (this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)) : (h("pn-mainnav-list", null, this.renderMenuLinks(this.primaryItems))), this.renderMenuFooter(appearance), h("div", { key: 'f4c378b80d938530e5fe28bbedb48c080f4edb35', slot: "top", class: "siteheader-menu-top" }, h("pn-marketweb-siteheader-search", { key: '7dd680e6a0e3286e988b86d27e2d916e29171e98', language: this.language, siteid: this.siteid, search: this.vm.search, "hide-search": this.hideSearch, i18n: this.i18n }))))))));
     }
     static get is() { return "pn-marketweb-header-main-row"; }
     static get originalStyleUrls() {

package/collection/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-marketweb-header-main-row.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n} from '@stencil/core';\n\nimport type {\n MenuItem,\n PromotedMenuItem,\n SiteHeaderI18N,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport type {\n HeaderMenuMode,\n HeaderViewModel,\n} from '../types/pn-marketweb-header.types';\nimport { promotedItemId } from '../utils/header-menu';\nimport {\n HeaderAppearance,\n HeaderTheme,\n} from '../utils/header-theme';\nimport {\n renderHeaderLanguageSelector,\n renderHeaderLogin,\n renderHeaderLogo,\n renderHeaderMenuSwitcher,\n renderHeaderSiteSelector,\n} from './shared/pn-marketweb-header-shared';\n\n@Component({\n tag: 'pn-marketweb-header-main-row',\n styleUrl: 'pn-marketweb-header-main-row.scss',\n})\nexport class PnMarketwebHeaderMainRow {\n @Prop() vm!: HeaderViewModel;\n @Prop() i18n!: SiteHeaderI18N;\n\n @Prop() market?: string;\n @Prop() language?: string;\n @Prop() siteid?: string;\n\n @Prop() hideSearch!: boolean;\n @Prop() hideLogin!: boolean;\n @Prop() hideLanguageSelector!: boolean;\n @Prop() hideSiteSelector!: boolean;\n\n @Prop() minimizeSearch!: boolean;\n\n @Prop() activeMenuMode!: HeaderMenuMode;\n @Prop() navigateOnMenuToggle!: boolean;\n\n @Prop() primaryItems!: MenuItem[];\n @Prop() sharedItems!: MenuItem[];\n @Prop() showMenuDivider!: boolean;\n\n @Prop() userToken!: string;\n @Prop() userFullname!: string;\n @Prop() userLoggedin!: boolean;\n @Prop() endpoint?: string;\n @Prop() environment?: string;\n @Prop() showProfileSelection!: boolean;\n @Prop() showUnifiedLogin!: boolean;\n @Prop() checkUserLoggedInStateInterval!: number;\n @Prop() useMarketwebLogin!: boolean;\n @Prop() spaMode!: boolean;\n\n @Prop() theme: HeaderTheme;\n @Prop() logoUrl:string;\n\n @Prop() menuToggleChangeHandler!: (e: CustomEvent<HeaderMenuMode>) => void;\n @Prop() mainNavRefHandler!: (el: HTMLElement \| undefined) => void;\n @Prop() adjustSiteSelectorUrl!: (href: string) => string;\n\n private renderMenuLink(item: MenuItem) {\n return (\n <pn-mainnav-link\n name={item.name}\n href={item.href}\n itemid={item.id}\n target={item.linkTarget ?? '_self'}\n linkid={item.trackingId}\n >\n {((item.promotedMenuItems && item.promotedMenuItems.length > 0) \|\| (item.children && item.children.length > 0)) && (\n <pn-mainnav-level label={item.name}>\n {!!item.children?.length && (\n <pn-mainnav-list heading={item.navigationHeading ?? ''}>\n {item.children.map(childitem => (\n <pn-mainnav-link\n name={childitem.name}\n href={childitem.href}\n target={childitem.linkTarget ?? '_self'}\n linkid={childitem.trackingId}\n ></pn-mainnav-link>\n ))}\n </pn-mainnav-list>\n )}\n\n {!!item.promotedMenuItems?.length && (\n <pn-mainnav-list heading={item.promotedMenuItemsHeader}>\n {item.promotedMenuItems.map((childitem: PromotedMenuItem) => (\n <pn-mainnav-link\n href={childitem.href}\n name={childitem.linkText}\n target={childitem.openInNewWindow ? '_blank' : '_self'}\n linkid={promotedItemId(childitem) + item.id}\n ></pn-mainnav-link>\n ))}\n </pn-mainnav-list>\n )}\n </pn-mainnav-level>\n )}\n </pn-mainnav-link>\n );\n }\n\n private renderMenuLinks(items: MenuItem[]) {\n return items.map(item => this.renderMenuLink(item));\n }\n\n private renderGroupedMenuLists(primaryItems: MenuItem[], sharedItems: MenuItem[]) {\n const hasPrimaryItems = primaryItems.length > 0;\n const hasSharedItems = sharedItems.length > 0;\n const hasDivider = hasPrimaryItems && hasSharedItems;\n\n return <div class=\"siteheader-mainnav-groups\">\n {hasPrimaryItems ? (\n <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-primary\">\n {this.renderMenuLinks(primaryItems)}\n </pn-mainnav-list>\n ) : null}\n\n {hasDivider ? (\n <div class=\"siteheader-mainnav-divider\" aria-hidden=\"true\"></div>\n ) : null}\n\n {hasSharedItems ? (\n <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-shared\">\n {this.renderMenuLinks(sharedItems)}\n </pn-mainnav-list>\n ) : null}\n </div>\n }\n\n private renderMenuFooter(appearance: HeaderAppearance) {\n return (\n <div slot=\"footer\" class=\"siteheader-menu-footer\">\n <slot name=\"menu-footer-cta\"></slot>\n\n {renderHeaderLogin({\n vm: this.vm,\n hideLogin: this.hideLogin,\n userToken: this.userToken,\n userFullname: this.userFullname,\n userLoggedin: this.userLoggedin,\n endpoint: this.endpoint,\n environment: this.environment,\n i18n: this.i18n,\n showProfileSelection: this.showProfileSelection,\n showUnifiedLogin: this.showUnifiedLogin,\n checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,\n useMarketwebLogin: this.useMarketwebLogin,\n appearance\n })}\n\n {renderHeaderLanguageSelector({\n vm: this.vm,\n hideLanguageSelector: this.hideLanguageSelector,\n language: this.language,\n spaMode: this.spaMode,\n appearance\n })}\n\n {renderHeaderSiteSelector({\n vm: this.vm,\n hideSiteSelector: this.hideSiteSelector,\n language: this.language,\n appearance,\n adjustSiteSelectorUrl: this.adjustSiteSelectorUrl,\n })}\n </div>\n );\n }\n\n render() {\n // main row's subcomponent have light appearance even if business theme, since white bg\n const appearance: HeaderAppearance = 'light'; \n return (\n <div class=\"siteheader-row siteheader-row-main\">\n <div class=\"siteheader-mobile-left\">\n <div class=\"siteheader-mobile-logo\">\n {renderHeaderLogo({\n homePageLink: this.logoUrl, //this.vm.homePageLink,\n homeLabel: this.i18n.home,\n })}\n </div>\n\n {this.vm.hasMenuSwitching && (\n <div class=\"siteheader-mobile-menu-toggle\">\n {renderHeaderMenuSwitcher({\n vm: this.vm,\n activeMenuMode: this.activeMenuMode,\n navigateOnMenuToggle: this.navigateOnMenuToggle,\n onMenuToggleChange: this.menuToggleChangeHandler,\n })}\n </div>\n )}\n </div>\n\n <div class=\"siteheader-mainnav-middle\">\n <pn-marketweb-siteheader-search\n language={this.language}\n siteid={this.siteid}\n primary={true}\n search={this.vm.search}\n hide-search={this.hideSearch}\n show-only-link={this.minimizeSearch}\n i18n={this.i18n}\n ></pn-marketweb-siteheader-search>\n\n <slot name=\"header-bottom-button\"></slot>\n </div>\n\n <div class=\"siteheader-mainnav-menu\">\n <div class=\"siteheader-menu\">\n <pn-mainnav\n ref={el => {\n this.mainNavRefHandler(el as HTMLElement \| undefined);\n }}\n market={this.market}\n language={this.language}\n onMenuOpenChange={e => {\n document.body.setAttribute('data-siteheader-menuopen', String(e.detail));\n }}\n >\n <pn-mainnav-level>\n {this.showMenuDivider ? (\n this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)\n ) : (\n <pn-mainnav-list>{this.renderMenuLinks(this.primaryItems)}</pn-mainnav-list>\n )}\n\n {this.renderMenuFooter(appearance)}\n\n <div slot=\"top\" class=\"siteheader-menu-top\">\n <pn-marketweb-siteheader-search\n language={this.language}\n siteid={this.siteid}\n search={this.vm.search}\n hide-search={this.hideSearch}\n i18n={this.i18n}\n ></pn-marketweb-siteheader-search>\n </div>\n </pn-mainnav-level>\n </pn-mainnav>\n </div>\n </div>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"pn-marketweb-header-main-row.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n} from '@stencil/core';\n\nimport type {\n MenuItem,\n PromotedMenuItem,\n SiteHeaderI18N,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport type {\n HeaderMenuMode,\n HeaderViewModel,\n} from '../types/pn-marketweb-header.types';\nimport { promotedItemId } from '../utils/header-menu';\nimport {\n HeaderAppearance,\n HeaderTheme,\n} from '../utils/header-theme';\nimport {\n renderHeaderLanguageSelector,\n renderHeaderLogin,\n renderHeaderLogo,\n renderHeaderMenuSwitcher,\n renderHeaderSiteSelector,\n} from './shared/pn-marketweb-header-shared';\n\n@Component({\n tag: 'pn-marketweb-header-main-row',\n styleUrl: 'pn-marketweb-header-main-row.scss',\n})\nexport class PnMarketwebHeaderMainRow {\n @Prop() vm!: HeaderViewModel;\n @Prop() i18n!: SiteHeaderI18N;\n\n @Prop() market?: string;\n @Prop() language?: string;\n @Prop() siteid?: string;\n\n @Prop() hideSearch!: boolean;\n @Prop() hideLogin!: boolean;\n @Prop() hideLanguageSelector!: boolean;\n @Prop() hideSiteSelector!: boolean;\n\n @Prop() minimizeSearch!: boolean;\n\n @Prop() activeMenuMode!: HeaderMenuMode;\n @Prop() navigateOnMenuToggle!: boolean;\n\n @Prop() primaryItems!: MenuItem[];\n @Prop() sharedItems!: MenuItem[];\n @Prop() showMenuDivider!: boolean;\n\n @Prop() userToken!: string;\n @Prop() userFullname!: string;\n @Prop() userLoggedin!: boolean;\n @Prop() endpoint?: string;\n @Prop() environment?: string;\n @Prop() showProfileSelection!: boolean;\n @Prop() showUnifiedLogin!: boolean;\n @Prop() checkUserLoggedInStateInterval!: number;\n @Prop() useMarketwebLogin!: boolean;\n @Prop() spaMode!: boolean;\n\n @Prop() theme: HeaderTheme;\n @Prop() logoUrl:string;\n\n @Prop() menuToggleChangeHandler!: (e: CustomEvent<HeaderMenuMode>) => void;\n @Prop() mainNavRefHandler!: (el: HTMLElement \| undefined) => void;\n @Prop() adjustSiteSelectorUrl!: (href: string) => string;\n\n private renderMenuLink(item: MenuItem) {\n return (\n <pn-mainnav-link\n name={item.name}\n href={item.href}\n itemid={item.id}\n target={item.linkTarget ?? '_self'}\n linkid={item.trackingId}\n >\n {((item.promotedMenuItems && item.promotedMenuItems.length > 0) \|\| (item.children && item.children.length > 0)) && (\n <pn-mainnav-level label={item.name}>\n {!!item.children?.length && (\n <pn-mainnav-list heading={item.navigationHeading ?? ''}>\n {item.children.map(childitem => (\n <pn-mainnav-link\n name={childitem.name}\n href={childitem.href}\n target={childitem.linkTarget ?? '_self'}\n linkid={childitem.trackingId}\n ></pn-mainnav-link>\n ))}\n </pn-mainnav-list>\n )}\n\n {!!item.promotedMenuItems?.length && (\n <pn-mainnav-list heading={item.promotedMenuItemsHeader}>\n {item.promotedMenuItems.map((childitem: PromotedMenuItem) => (\n <pn-mainnav-link\n href={childitem.href}\n name={childitem.linkText}\n target={childitem.openInNewWindow ? '_blank' : '_self'}\n linkid={promotedItemId(childitem) + item.id}\n ></pn-mainnav-link>\n ))}\n </pn-mainnav-list>\n )}\n </pn-mainnav-level>\n )}\n </pn-mainnav-link>\n );\n }\n\n private renderMenuLinks(items: MenuItem[]) {\n return items.map(item => this.renderMenuLink(item));\n }\n\n private renderGroupedMenuLists(primaryItems: MenuItem[], sharedItems: MenuItem[]) {\n const hasPrimaryItems = primaryItems.length > 0;\n const hasSharedItems = sharedItems.length > 0;\n const hasDivider = hasPrimaryItems && hasSharedItems;\n\n return <div class=\"siteheader-mainnav-groups\">\n {hasPrimaryItems ? (\n <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-primary\">\n {this.renderMenuLinks(primaryItems)}\n </pn-mainnav-list>\n ) : null}\n\n {hasDivider ? (\n <div class=\"siteheader-mainnav-divider\" aria-hidden=\"true\"></div>\n ) : null}\n\n {hasSharedItems ? (\n <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-shared\">\n {this.renderMenuLinks(sharedItems)}\n </pn-mainnav-list>\n ) : null}\n </div>\n }\n\n private renderMenuFooter(appearance: HeaderAppearance) {\n return (\n <div slot=\"footer\" class=\"siteheader-menu-footer\">\n <slot name=\"menu-footer-cta\"></slot>\n\n {renderHeaderLogin({\n vm: this.vm,\n hideLogin: this.hideLogin,\n userToken: this.userToken,\n userFullname: this.userFullname,\n userLoggedin: this.userLoggedin,\n endpoint: this.endpoint,\n environment: this.environment,\n i18n: this.i18n,\n showProfileSelection: this.showProfileSelection,\n showUnifiedLogin: this.showUnifiedLogin,\n checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,\n useMarketwebLogin: this.useMarketwebLogin,\n appearance\n })}\n\n {renderHeaderLanguageSelector({\n vm: this.vm,\n hideLanguageSelector: this.hideLanguageSelector,\n language: this.language,\n spaMode: this.spaMode,\n appearance\n })}\n\n {renderHeaderSiteSelector({\n vm: this.vm,\n hideSiteSelector: this.hideSiteSelector,\n language: this.language,\n appearance,\n adjustSiteSelectorUrl: this.adjustSiteSelectorUrl,\n })}\n </div>\n );\n }\n\n render() {\n // main row's subcomponent have light appearance even if business theme, since white bg\n const appearance: HeaderAppearance = 'light'; \n return (\n <div class=\"siteheader-row siteheader-row-main\">\n <div class=\"siteheader-mobile-left\">\n <div class=\"siteheader-mobile-logo\">\n {renderHeaderLogo({\n homePageLink: this.logoUrl, //this.vm.homePageLink,\n homeLabel: this.i18n.home,\n })}\n </div>\n\n {this.vm.hasMenuSwitching && (\n <div class=\"siteheader-mobile-menu-toggle\">\n {renderHeaderMenuSwitcher({\n vm: this.vm,\n activeMenuMode: this.activeMenuMode,\n navigateOnMenuToggle: this.navigateOnMenuToggle,\n onMenuToggleChange: this.menuToggleChangeHandler,\n })}\n </div>\n )}\n </div>\n\n <div class=\"siteheader-mainnav-middle\">\n <pn-marketweb-siteheader-search\n language={this.language}\n siteid={this.siteid}\n primary={true}\n search={this.vm.search}\n hide-search={this.hideSearch}\n show-only-link={this.minimizeSearch}\n i18n={this.i18n}\n ></pn-marketweb-siteheader-search>\n\n <slot name=\"header-bottom-button\"></slot>\n </div>\n\n <div class=\"siteheader-mainnav-menu\">\n <slot name=\"mobile-toprightend\"></slot>\n\n <div class=\"siteheader-menu\">\n <pn-mainnav\n ref={el => {\n this.mainNavRefHandler(el as HTMLElement \| undefined);\n }}\n market={this.market}\n language={this.language}\n onMenuOpenChange={e => {\n document.body.setAttribute('data-siteheader-menuopen', String(e.detail));\n }}\n >\n <pn-mainnav-level>\n {this.showMenuDivider ? (\n this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)\n ) : (\n <pn-mainnav-list>{this.renderMenuLinks(this.primaryItems)}</pn-mainnav-list>\n )}\n\n {this.renderMenuFooter(appearance)}\n\n <div slot=\"top\" class=\"siteheader-menu-top\">\n <pn-marketweb-siteheader-search\n language={this.language}\n siteid={this.siteid}\n search={this.vm.search}\n hide-search={this.hideSearch}\n i18n={this.i18n}\n ></pn-marketweb-siteheader-search>\n </div>\n </pn-mainnav-level>\n </pn-mainnav>\n </div>\n </div>\n </div>\n );\n }\n}"]}

package/collection/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h, Host, } from "@stencil/core";
 export class PnMarketwebHeaderSkeletonLoader {
     render() {
         console.log('Rendering PnMarketwebHeaderSkeletonLoader...');
-        return (h(Host, { key: 'df31cc237329e033c4ace683027a6458a3790ef1' }, h("header", { key: '51d25dc2af64660068fcabfa5f95cc0872d29cce', class: "header-skeleton", "aria-hidden": "true" }, h("div", { key: '1469d90c9ca66cc371257818dbf1aacbdc2c0b8c', class: "mobile-layout" }, h("div", { key: '591d0124da5d93e45809cf35f514b590c60d666f', class: "mobile-row" }, h("div", { key: '1e8ec053ab87561b5f3a6a5c6e45c4fbcbe66212', class: "skel skel-logo" }), h("div", { key: '83c7c0f633155348cb92e3370f16daf3c5d0e6c2', class: "skel skel-icon-button" }))), h("div", { key: '847b9bbe3de7c3a0aa5954e82167e99a5813fcd2', class: "tablet-desktop-layout" }, h("div", { key: '5b4f7867da490285dd1032fdf9b7387b705a51f2', class: "top-row" }, h("div", { key: '208485c9f664ef1008bf57eb5a98e6687ba70949', class: "top-row-left" }, h("div", { key: 'b2fdca97d9b576d20d16ca833e84a80191653e3f', class: "skel skel-chip" }), h("div", { key: 'ca6b630a8c38cd87c4e65ffd483e0e65e4774326', class: "skel skel-icon-button" })), h("div", { key: '0923c1a855f32159dd42dc49eb9e84b47a70a549', class: "top-row-center" }, h("div", { key: 'dda22514ffd4a1ceae80252dafe49597a63ec364', class: "skel skel-logo" })), h("div", { key: 'a6ec95a525889c8cc13b35ccc03a90c509a2c35c', class: "top-row-right" }, h("div", { key: '41d4a9998a8478423a2b1ce566568fe845c8767a', class: "skel skel-icon-button" }), h("div", { key: '0fb5f413dad85ffab8e8038c7720f3828fb24b72', class: "skel skel-icon-button" }), h("div", { key: 'b53f8b517499a89c30ee3c46179ffed6cc7e12b4', class: "skel skel-pill" }))), h("div", { key: 'e7c90c573556c1599f25bf99761d437e7ed3e7c8', class: "bottom-row" }, h("div", { key: '0c9d2b72369a256efa2daf8eafd8f938369601a0', class: "bottom-row-left" }, h("div", { key: '9835aa30019d52084f98c362e0e8a255fc747d46', class: "skel skel-menu-button" })), h("div", { key: '4cc96d47f41114dbe08ce67b62106664b2f8deee', class: "bottom-row-right" }, h("div", { key: '5bcab9e4e0f36f838b7467e3dcf130d4b95faa85', class: "skel skel-search" })))))));
+        return (h(Host, { key: '5c4c13c622367a8feaa0e033874a72ae32d08544' }, h("header", { key: 'ae00c78d2e9fe06a48f95bf8031afdbc2a789b07', class: "header-skeleton", "aria-hidden": "true" }, h("div", { key: '37ce3f8e8032610e1c7c961d585f6646af1e278f', class: "mobile-layout" }, h("div", { key: '155ca8796a56d85a5e8f50670927230d2efe75d9', class: "mobile-row" }, h("div", { key: '36ce4fc8111957ab530c06bcad478468f9a10aa6', class: "skel skel-logo" }), h("div", { key: '74fb1c6b13d6fcbe5f0e5e7fce0662b93260763d', class: "skel skel-icon-button" }))), h("div", { key: '631f88856f05eaf98b8012833647a65fbd1bd504', class: "tablet-desktop-layout" }, h("div", { key: 'e15650439b2ce20ac981003bc0f348ba1bc8ab79', class: "top-row" }, h("div", { key: '41867b971e7a114fc05fae6e7d0cd08d147580eb', class: "top-row-left" }, h("div", { key: '2dbabfef4fb9b7eecf402c41c1ef504b8bec4811', class: "skel skel-chip" }), h("div", { key: '69bf07438a8374517117db88a4df0ef788a495ed', class: "skel skel-icon-button" })), h("div", { key: '56910a40f903999ed98213b59938a0c598d998e8', class: "top-row-center" }, h("div", { key: '6c8f2aac70e20b586bc8b270cbceec0aa6b769ca', class: "skel skel-logo" })), h("div", { key: 'abeb394fda5834e169c9fd6ba596297d58340d7e', class: "top-row-right" }, h("div", { key: 'fd9f236694831537f5895410b0e60e6d05ff9bee', class: "skel skel-icon-button" }), h("div", { key: 'e04ee10525a54e6134ebe1caf7c9de28e487a89a', class: "skel skel-icon-button" }), h("div", { key: '5d0c1f732ee30ab266f5f9c22a45dcfe9cf402be', class: "skel skel-pill" }))), h("div", { key: 'bcd942e081c9dc503e5d99b948d0e8ffe7b314a5', class: "bottom-row" }, h("div", { key: 'fb23008de03b74125c60747ce51a48ca5ac9bf16', class: "bottom-row-left" }, h("div", { key: '5e7d0f027d9ba32a9c6f8acfab42444e4f3b56dc', class: "skel skel-menu-button" })), h("div", { key: '183351a3e21b17c01401bd88ef5fe5fc3a96470b', class: "bottom-row-right" }, h("div", { key: '4b6cfa35eb8d67ace2ae277a39d34be8f4c1c1a1', class: "skel skel-search" })))))));
     }
     static get is() { return "pn-marketweb-header-skeleton-loader"; }
     static get encapsulation() { return "shadow"; }