@postnord/pn-marketweb-components 4.2.3 → 4.2.4
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.
- package/cjs/pn-versa-card.cjs.entry.js +1 -1
- package/cjs/pn-versa-card.cjs.entry.js.map +1 -1
- package/collection/components/cards/pn-versa-card/pn-versa-card.css +5 -6
- package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js +27 -0
- package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js.map +1 -1
- package/components/pn-versa-card.js +1 -1
- package/components/pn-versa-card.js.map +1 -1
- package/esm/pn-versa-card.entry.js +1 -1
- package/esm/pn-versa-card.entry.js.map +1 -1
- package/package.json +2 -1
- package/pn-market-web-components/p-3c69298b.entry.js +2 -0
- package/pn-market-web-components/p-3c69298b.entry.js.map +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/components/cards/pn-versa-card/pn-versa-card.stories.d.ts +1 -0
- package/pn-market-web-components/p-24e428e4.entry.js +0 -2
- package/pn-market-web-components/p-24e428e4.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-9a9efa1c.js');
|
|
6
6
|
const HeadingTag = require('./HeadingTag-190a9892.js');
|
|
7
7
|
|
|
8
|
-
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-content{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:1.6rem;max-width:100%;margin:0 auto;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{display:flex;flex-direction:column;color:var(--versa-card-text-color);max-width:70rem}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}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}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}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{align-items:flex-start}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content{align-self: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] 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}}";
|
|
8
|
+
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-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{display:flex;flex-direction:column;color:var(--versa-card-text-color);max-width:70rem;width:100%;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{display:flex;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}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}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}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] 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}}";
|
|
9
9
|
const PnVersaCardStyle0 = pnVersaCardCss;
|
|
10
10
|
|
|
11
11
|
const PnVersaCard = class {
|
|
@@ -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\n .pn-versa-card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n gap: $versa-card-content-gap;\n max-width: 100%;\n margin: 0 auto;\n padding-bottom: $versa-card-content-padding-bottom;\n\n --pn-link-current-color: var(--versa-link-color);\n --rte-link-color: var(--pn-link-current-color);\n\n .pn-versa-card-textContent {\n display: flex;\n flex-direction: column;\n color: var(--versa-card-text-color);\n max-width: $versa-card-text-max-width;\n }\n\n .pn-versa-card-linkwrapper {\n display: flex;\n align-items: center;\n min-height: $versa-card-cta-min-height;\n width: 100%;\n\n [slot='cta'] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: $versa-card-cta-gap;\n width: 100%;\n\n a {\n margin-bottom: 0;\n }\n\n pn-button[appearance='light'] {\n color: unset;\n }\n\n a:not(.pn-button) {\n color: var(--pn-link-current-color);\n text-decoration: none;\n font-weight: 400;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-hasBg {\n position: relative;\n padding: var(--versa-card-padding);\n border-radius: $versa-card-radius;\n background-color: transparent;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--versa-card-bg);\n border-radius: inherit;\n z-index: 0;\n pointer-events: none;\n opacity: 1;\n }\n\n >* {\n position: relative;\n z-index: 1;\n }\n\n .pn-versa-card-content {\n padding-bottom: 0;\n }\n\n &.pn-versa-card-transparentBackground::before {\n opacity: 0.9;\n }\n }\n\n .pn-versa-card-hasImageCover {\n padding: 0;\n\n .pn-versa-card-imageWrapper {\n height: 100%;\n margin-bottom: 0;\n\n [slot='image'] picture img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &.pn-versa-card-hasImageCoverText {\n --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n .pn-versa-card-imageWrapper {\n position: relative;\n height: 100%;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: $versa-card-radius;\n pointer-events: none;\n }\n\n &::before {\n background: radial-gradient(circle,\n rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n rgba($versa-card-cover-overlay-rgb, 0) 100%);\n z-index: 1;\n }\n\n &::after {\n background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n opacity: 0;\n transition: opacity 1s;\n z-index: 2;\n }\n\n [slot='image'] picture img {\n position: relative;\n z-index: 0;\n }\n }\n\n .pn-versa-card-content {\n position: absolute;\n inset: 0;\n z-index: 3;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n padding: $versa-card-cover-padding;\n max-width: unset;\n\n color: #{$white};\n text-shadow: $versa-card-cover-text-shadow;\n\n --pn-link-current-color: #{$white};\n --rte-text-color: #{$white};\n --rte-heading-color: #{$white};\n --rte-blockquote-text-color: #{$white};\n --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n --rte-quote-author-color: #{$white};\n --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n a {\n color: var(--pn-link-current-color);\n text-shadow: none;\n }\n\n pn-button[appearance='light'] a {\n color: $blue700;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n\n &:hover .pn-versa-card-imageWrapper::after {\n opacity: 1;\n }\n }\n }\n\n .pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: auto;\n height: auto;\n\n [slot='image'] picture img {\n aspect-ratio: 1 / 1;\n width: 100%;\n height: 100%;\n max-width: $versa-card-rounded-image-max-width;\n border-radius: 50%;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: column;\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n [slot='image'] picture img {\n height: 100%;\n }\n }\n }\n }\n\n .pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: center;\n }\n\n .pn-versa-card-content {\n align-items: center;\n text-align: center;\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n .pn-versa-card-alignMiddle {\n justify-content: center;\n\n .pn-versa-card-content {\n height: auto;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n &[data-card-color='white'] {\n --versa-card-bg: #{$white};\n }\n\n &[data-card-color='blue25'] {\n --versa-card-bg: #{$blue25};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue50'] {\n --versa-card-bg: #{$blue50};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue400'] {\n --versa-card-bg: #{$blue400};\n }\n\n &[data-card-color='blue900'] {\n --versa-card-bg: #{$blue900};\n --versa-card-heading-color: #{$blue200};\n --versa-card-text-color: #{$white};\n --versa-card-blockquote-border-color: #{$white};\n --versa-link-color: #{$white};\n }\n\n &[data-card-color='coral25'] {\n --versa-card-bg: #{$coral25};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='coral50'] {\n --versa-card-bg: #{$coral50};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='green25'] {\n --versa-card-bg: #{$green25};\n --versa-card-blockquote-border-color: #{$green400};\n }\n\n &[data-card-color='green50'] {\n --versa-card-bg: #{$green50};\n --versa-card-blockquote-border-color: #{$green400};\n }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n pn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: row;\n gap: $versa-card-horizontal-gap;\n\n .pn-versa-card-imageWrapper,\n .pn-versa-card-content {\n flex: 1;\n }\n\n .pn-versa-card-imageWrapper {\n height: auto;\n\n [slot='image'] picture img {\n height: auto;\n position: sticky;\n top: $versa-card-sticky-top;\n }\n }\n\n .pn-versa-card-content {\n width: 50%;\n box-sizing: border-box;\n justify-content: flex-start;\n }\n\n &.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding;\n }\n\n &.pn-versa-card-horizontal--imgRight {\n flex-direction: row-reverse;\n }\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n height: 100%;\n }\n }\n\n &.pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: auto;\n }\n\n .pn-versa-card-content {\n align-items: stretch;\n text-align: center;\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n align-self: center;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n &.pn-versa-card-alignMiddle {\n align-items: flex-start;\n\n .pn-versa-card-content {\n align-self: center;\n }\n }\n\n &.pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: 50%;\n\n [slot='image'] picture img {\n max-width: unset;\n }\n }\n }\n }\n }\n}\n\n@media (min-width: 1440px) {\n pn-versa-card {\n .pn-versa-card-horizontal.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding-lg;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n .versa-card-cta-link-animated {\n pn-icon {\n position: relative;\n left: $versa-card-cta-icon-offset;\n transition: $versa-card-cta-transition;\n }\n\n &:hover pn-icon {\n left: 0;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-RTEtext {\n [slot='rte'] {\n @include shared-rte;\n\n .pn-quote-card__section {\n max-width: none !important;\n background-color: transparent;\n }\n\n .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n border: none !important;\n padding-left: 0 !important;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n pn-versa-card {\n --rte-forms-spacing: #{rem16(12px)};\n }\n}\n\n@media (min-width: 992px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(8px)};\n --versa-card-heading-size: #{rem16(20px)};\n --versa-card-preamble-size: #{rem16(17px)};\n --versa-card-label-size: #{rem16(11px)};\n\n --rte-h2-size: #{rem16(20px)};\n --rte-h3-size: #{rem16(18px)};\n --rte-h4-size: #{rem16(16px)};\n }\n }\n\n .halfwidth,\n .fullwidth {\n pn-versa-card {\n --rte-blockquote-margin: #{rem16(24px)} 0;\n }\n }\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n tag: 'pn-versa-card',\n styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n @Element() hostElement: HTMLElement;\n\n @Prop() label?: string;\n @Prop() heading?: string;\n @Prop() preamble?: string;\n @Prop() imageGrow = false;\n\n // Layout / modifiers\n @Prop() horizontal = false;\n @Prop() imgAlignment?: 'left' | 'right' = 'left';\n @Prop() hasImageCover = false;\n @Prop() alignMiddle = false;\n @Prop() center = false;\n\n @Prop() roundImage = false;\n @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n @Prop() opacity: number = 90;\n @Prop() transparentBackground = false;\n\n private cx(parts: Array<string | false | null | undefined>) {\n return parts.filter(Boolean).join(' ');\n }\n\n private get hasImageCoverText(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n }\n\n private get normalizedOpacity(): number {\n return Math.min(100, Math.max(0, this.opacity ?? 90));\n }\n\n // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n private get cardColor() {\n const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n return value || null;\n }\n\n private get hasBg(): boolean {\n return !!this.cardColor;\n }\n\n private get cardClass() {\n\n return this.cx([\n 'pn-versa-card',\n\n // modifiers \n this.horizontal && 'pn-versa-card-horizontal',\n this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n this.hasBg && 'pn-versa-card-hasBg',\n this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n this.roundImage && 'pn-versa-card-hasRoundedImage',\n this.center && 'pn-versa-card-center',\n this.alignMiddle && 'pn-versa-card-alignMiddle',\n this.imageGrow && 'pn-versa-card-imageGrow',\n this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n ]);\n }\n\n private get showContent(): boolean {\n return this.showTextContent || this.showCta;\n }\n\n private get showTextContent(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte);\n }\n\n @State() showImage: boolean = false;\n @State() showRte: boolean = false;\n @State() showCta: boolean = false;\n\n componentWillLoad() {\n this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n {this.showImage && (\n <div class=\"pn-versa-card-imageWrapper\">\n <slot name=\"image\" />\n </div>)}\n {this.showContent && (\n <div class=\"pn-versa-card-content\">\n {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n {this.label && (\n <span class=\"pn-versa-card-label\">{this.label}</span>\n )}\n\n {this.heading && (\n <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n )}\n\n {this.preamble && (\n <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n )}\n\n {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n <slot name=\"rte\" />\n </div>\n }\n </div>}\n\n {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n <slot name=\"cta\" />\n </div>}\n\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"pn-versa-card.entry.cjs.js","mappings":"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","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-versa-card/pn-versa-card.scss?tag=pn-versa-card","src/components/cards/pn-versa-card/pn-versa-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$versa-card-radius: rem16(16px);\n$versa-card-gap: rem16(8px);\n$versa-card-content-gap: rem16(16px);\n$versa-card-content-padding-bottom: rem16(16px);\n$versa-card-text-max-width: rem16(700px);\n$versa-card-cover-padding: rem16(24px);\n$versa-card-horizontal-gap: rem16(32px);\n$versa-card-horizontal-padding: rem16(24px);\n$versa-card-horizontal-padding-lg: rem16(32px);\n$versa-card-sticky-top: rem16(16px);\n\n$versa-card-meta-margin-bottom: rem16(4px);\n$versa-card-cta-gap: rem16(16px);\n$versa-card-cta-min-height: rem16(48px);\n$versa-card-rounded-image-max-width: rem16(120px);\n\n$versa-card-cover-overlay-rgb: rgb(13, 35, 75);\n$versa-card-cover-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),\n 0 4px 12px rgba(0, 0, 0, 0.5);\n\n$versa-card-cta-icon-offset: -0.3rem;\n$versa-card-cta-transition: 0.3s ease-in-out;\n\n// -----------------------------------------------------------------------------\n// Root / design tokens\n// CSS variables are kept for styling + contextual overrides\n// -----------------------------------------------------------------------------\npn-versa-card {\n display: flex;\n width: 100%;\n height: 100%;\n\n --versa-card-bg: transparent;\n --versa-card-heading-color: inherit;\n --versa-card-text-color: inherit;\n --versa-card-blockquote-border-color: inherit;\n --versa-link-color: #{$blue700};\n\n --versa-card-padding: #{rem16(16px)};\n --versa-card-heading-size: #{rem16(24px)};\n --versa-card-preamble-size: #{rem16(18px)};\n --versa-card-label-size: #{rem16(12px)};\n\n --rte-text-color: var(--versa-card-text-color);\n --rte-heading-color: var(--versa-card-heading-color);\n --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);\n --rte-image-radius: #{$versa-card-radius};\n\n .pn-versa-card-label {\n display: block;\n font-size: var(--versa-card-label-size);\n text-transform: uppercase;\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n\n .pn-versa-card-heading {\n font-size: var(--versa-card-heading-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n color: var(--versa-card-heading-color);\n }\n\n .pn-versa-card-preamble {\n font-size: var(--versa-card-preamble-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Base structure\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: $versa-card-gap;\n position: relative;\n\n .pn-versa-card-imageWrapper {\n\n [slot='image'],\n [slot='image'] picture,\n [slot='image'] picture img {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n [slot='image'] picture img {\n border-radius: $versa-card-radius;\n object-fit: cover;\n }\n }\n\n .pn-versa-card-content { \n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width:100%;\n max-width: 100%;\n gap: $versa-card-content-gap;\n padding-bottom: $versa-card-content-padding-bottom;\n\n --pn-link-current-color: var(--versa-link-color);\n --rte-link-color: var(--pn-link-current-color);\n\n .pn-versa-card-textContent {\n display: flex;\n flex-direction: column;\n color: var(--versa-card-text-color);\n max-width: $versa-card-text-max-width;\n width:100%;\n margin:0 auto;\n }\n\n .pn-versa-card-linkwrapper {\n display: flex;\n align-items: center;\n min-height: $versa-card-cta-min-height;\n width: 100%;\n\n [slot='cta'] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: $versa-card-cta-gap;\n width: 100%;\n\n a {\n margin-bottom: 0;\n }\n\n pn-button[appearance='light'] {\n color: unset;\n }\n\n a:not(.pn-button) {\n color: var(--pn-link-current-color);\n text-decoration: none;\n font-weight: 400;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-hasBg {\n position: relative;\n padding: var(--versa-card-padding);\n border-radius: $versa-card-radius;\n background-color: transparent;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--versa-card-bg);\n border-radius: inherit;\n z-index: 0;\n pointer-events: none;\n opacity: 1;\n }\n\n >* {\n position: relative;\n z-index: 1;\n }\n\n .pn-versa-card-content {\n padding-bottom: 0;\n }\n\n &.pn-versa-card-transparentBackground::before {\n opacity: 0.9;\n }\n }\n\n .pn-versa-card-hasImageCover {\n padding: 0;\n\n .pn-versa-card-imageWrapper {\n height: 100%;\n margin-bottom: 0;\n\n [slot='image'] picture img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &.pn-versa-card-hasImageCoverText {\n --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n .pn-versa-card-imageWrapper {\n position: relative;\n height: 100%;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: $versa-card-radius;\n pointer-events: none;\n }\n\n &::before {\n background: radial-gradient(circle,\n rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n rgba($versa-card-cover-overlay-rgb, 0) 100%);\n z-index: 1;\n }\n\n &::after {\n background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n opacity: 0;\n transition: opacity 1s;\n z-index: 2;\n }\n\n [slot='image'] picture img {\n position: relative;\n z-index: 0;\n }\n }\n\n .pn-versa-card-content {\n position: absolute;\n inset: 0;\n z-index: 3;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n padding: $versa-card-cover-padding;\n max-width: unset;\n\n color: #{$white};\n text-shadow: $versa-card-cover-text-shadow;\n\n --pn-link-current-color: #{$white};\n --rte-text-color: #{$white};\n --rte-heading-color: #{$white};\n --rte-blockquote-text-color: #{$white};\n --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n --rte-quote-author-color: #{$white};\n --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n a {\n color: var(--pn-link-current-color);\n text-shadow: none;\n }\n\n pn-button[appearance='light'] a {\n color: $blue700;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n\n &:hover .pn-versa-card-imageWrapper::after {\n opacity: 1;\n }\n }\n }\n\n .pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: auto;\n height: auto;\n\n [slot='image'] picture img {\n aspect-ratio: 1 / 1;\n width: 100%;\n height: 100%;\n max-width: $versa-card-rounded-image-max-width;\n border-radius: 50%;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: column;\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n [slot='image'] picture img {\n height: 100%;\n }\n }\n }\n }\n\n .pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: center;\n }\n\n .pn-versa-card-content {\n align-items: center;\n text-align: center;\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n \n .pn-versa-card-alignMiddle { \n \n justify-content: center;\n\n \n .pn-versa-card-content { \n height: auto;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n &[data-card-color='white'] {\n --versa-card-bg: #{$white};\n }\n\n &[data-card-color='blue25'] {\n --versa-card-bg: #{$blue25};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue50'] {\n --versa-card-bg: #{$blue50};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue400'] {\n --versa-card-bg: #{$blue400};\n }\n\n &[data-card-color='blue900'] {\n --versa-card-bg: #{$blue900};\n --versa-card-heading-color: #{$blue200};\n --versa-card-text-color: #{$white};\n --versa-card-blockquote-border-color: #{$white};\n --versa-link-color: #{$white};\n }\n\n &[data-card-color='coral25'] {\n --versa-card-bg: #{$coral25};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='coral50'] {\n --versa-card-bg: #{$coral50};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='green25'] {\n --versa-card-bg: #{$green25};\n --versa-card-blockquote-border-color: #{$green400};\n }\n\n &[data-card-color='green50'] {\n --versa-card-bg: #{$green50};\n --versa-card-blockquote-border-color: #{$green400};\n }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n pn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: row;\n gap: $versa-card-horizontal-gap;\n\n .pn-versa-card-imageWrapper,\n .pn-versa-card-content {\n flex: 1;\n }\n\n .pn-versa-card-imageWrapper {\n height: auto;\n\n [slot='image'] picture img {\n height: auto;\n position: sticky;\n top: $versa-card-sticky-top;\n }\n }\n\n .pn-versa-card-content {\n width: 50%;\n box-sizing: border-box;\n justify-content: flex-start;\n }\n\n &.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding;\n }\n\n &.pn-versa-card-horizontal--imgRight {\n flex-direction: row-reverse;\n }\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n height: 100%;\n }\n }\n\n &.pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: auto;\n }\n\n .pn-versa-card-content {\n align-items: stretch;\n text-align: center;\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n align-self: center;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n &.pn-versa-card-alignMiddle {\n .pn-versa-card-content { \n justify-content: center; //overrides mobile alignMiddle which sets justify-content to space-between\n }\n }\n\n &.pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: 50%;\n\n [slot='image'] picture img {\n max-width: unset;\n }\n }\n }\n }\n }\n}\n\n@media (min-width: 1440px) {\n pn-versa-card {\n .pn-versa-card-horizontal.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding-lg;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n .versa-card-cta-link-animated {\n pn-icon {\n position: relative;\n left: $versa-card-cta-icon-offset;\n transition: $versa-card-cta-transition;\n }\n\n &:hover pn-icon {\n left: 0;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-RTEtext {\n [slot='rte'] {\n @include shared-rte;\n\n .pn-quote-card__section {\n max-width: none !important;\n background-color: transparent;\n }\n\n .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n border: none !important;\n padding-left: 0 !important;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n pn-versa-card {\n --rte-forms-spacing: #{rem16(12px)};\n }\n}\n\n@media (min-width: 992px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(8px)};\n --versa-card-heading-size: #{rem16(20px)};\n --versa-card-preamble-size: #{rem16(17px)};\n --versa-card-label-size: #{rem16(11px)};\n\n --rte-h2-size: #{rem16(20px)};\n --rte-h3-size: #{rem16(18px)};\n --rte-h4-size: #{rem16(16px)};\n }\n }\n\n .halfwidth,\n .fullwidth {\n pn-versa-card {\n --rte-blockquote-margin: #{rem16(24px)} 0;\n }\n }\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n tag: 'pn-versa-card',\n styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n @Element() hostElement: HTMLElement;\n\n @Prop() label?: string;\n @Prop() heading?: string;\n @Prop() preamble?: string;\n @Prop() imageGrow = false;\n\n // Layout / modifiers\n @Prop() horizontal = false;\n @Prop() imgAlignment?: 'left' | 'right' = 'left';\n @Prop() hasImageCover = false;\n @Prop() alignMiddle = false;\n @Prop() center = false;\n\n @Prop() roundImage = false;\n @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n @Prop() opacity: number = 90;\n @Prop() transparentBackground = false;\n\n private cx(parts: Array<string | false | null | undefined>) {\n return parts.filter(Boolean).join(' ');\n }\n\n private get hasImageCoverText(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n }\n\n private get normalizedOpacity(): number {\n return Math.min(100, Math.max(0, this.opacity ?? 90));\n }\n\n // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n private get cardColor() {\n const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n return value || null;\n }\n\n private get hasBg(): boolean {\n return !!this.cardColor;\n }\n\n private get cardClass() {\n\n return this.cx([\n 'pn-versa-card',\n\n // modifiers \n this.horizontal && 'pn-versa-card-horizontal',\n this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n this.hasBg && 'pn-versa-card-hasBg',\n this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n this.roundImage && 'pn-versa-card-hasRoundedImage',\n this.center && 'pn-versa-card-center',\n this.alignMiddle && 'pn-versa-card-alignMiddle',\n this.imageGrow && 'pn-versa-card-imageGrow',\n this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n ]);\n }\n\n private get showContent(): boolean {\n return this.showTextContent || this.showCta;\n }\n\n private get showTextContent(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte);\n }\n\n @State() showImage: boolean = false;\n @State() showRte: boolean = false;\n @State() showCta: boolean = false;\n\n componentWillLoad() {\n this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n {this.showImage && (\n <div class=\"pn-versa-card-imageWrapper\">\n <slot name=\"image\" />\n </div>)}\n {this.showContent && (\n <div class=\"pn-versa-card-content\">\n {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n {this.label && (\n <span class=\"pn-versa-card-label\">{this.label}</span>\n )}\n\n {this.heading && (\n <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n )}\n\n {this.preamble && (\n <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n )}\n\n {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n <slot name=\"rte\" />\n </div>\n }\n </div>}\n\n {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n <slot name=\"cta\" />\n </div>}\n\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -85,9 +85,9 @@ pn-versa-card .pn-versa-card .pn-versa-card-content {
|
|
|
85
85
|
flex-direction: column;
|
|
86
86
|
justify-content: space-between;
|
|
87
87
|
height: 100%;
|
|
88
|
-
|
|
88
|
+
width: 100%;
|
|
89
89
|
max-width: 100%;
|
|
90
|
-
|
|
90
|
+
gap: 1.6rem;
|
|
91
91
|
padding-bottom: 1.6rem;
|
|
92
92
|
--pn-link-current-color: var(--versa-link-color);
|
|
93
93
|
--rte-link-color: var(--pn-link-current-color);
|
|
@@ -97,6 +97,8 @@ pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent {
|
|
|
97
97
|
flex-direction: column;
|
|
98
98
|
color: var(--versa-card-text-color);
|
|
99
99
|
max-width: 70rem;
|
|
100
|
+
width: 100%;
|
|
101
|
+
margin: 0 auto;
|
|
100
102
|
}
|
|
101
103
|
pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper {
|
|
102
104
|
display: flex;
|
|
@@ -347,11 +349,8 @@ pn-versa-card[data-card-color=green50] {
|
|
|
347
349
|
pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] {
|
|
348
350
|
justify-content: center;
|
|
349
351
|
}
|
|
350
|
-
pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle {
|
|
351
|
-
align-items: flex-start;
|
|
352
|
-
}
|
|
353
352
|
pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content {
|
|
354
|
-
|
|
353
|
+
justify-content: center;
|
|
355
354
|
}
|
|
356
355
|
pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper {
|
|
357
356
|
width: 50%;
|
|
@@ -263,6 +263,33 @@ export const ThreeCardsCenteredQuarter = {
|
|
|
263
263
|
},
|
|
264
264
|
], 'onethirdwidth', 3),
|
|
265
265
|
};
|
|
266
|
+
export const TwoCardsHorizontalAlignMiddle = {
|
|
267
|
+
name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',
|
|
268
|
+
parameters: {
|
|
269
|
+
controls: {
|
|
270
|
+
include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],
|
|
271
|
+
},
|
|
272
|
+
},
|
|
273
|
+
render: (args) => renderCenteredRow([
|
|
274
|
+
{
|
|
275
|
+
...args,
|
|
276
|
+
cardColor: 'blue25',
|
|
277
|
+
horizontal: true,
|
|
278
|
+
alignMiddle: true,
|
|
279
|
+
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>',
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
...args,
|
|
283
|
+
preamble: '',
|
|
284
|
+
center: true,
|
|
285
|
+
roundImage: true,
|
|
286
|
+
horizontal: false,
|
|
287
|
+
alignMiddle: true,
|
|
288
|
+
rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',
|
|
289
|
+
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 > `,
|
|
290
|
+
},
|
|
291
|
+
], 'halfwidth', 1),
|
|
292
|
+
};
|
|
266
293
|
export const OneCardCenteredQuarterDefaultHorizontal = {
|
|
267
294
|
name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',
|
|
268
295
|
parameters: {
|
|
@@ -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 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":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAE/D,OAAO,EACH,eAAe,EACf,mBAAmB,GACtB,MAAM,+BAA+B,CAAC;AAMvC,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAwB7C,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAA6B;IACnC,KAAK,EAAE,6BAA6B;IACpC,UAAU,EAAE;QACR,IAAI,EAAE,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;KAChD;IACD,IAAI,EAAE;QACF,iBAAiB;QACjB,IAAI,EAAE,iBAAiB;QAEvB,gBAAgB;QAChB,KAAK,EAAE,eAAe;QACtB,OAAO,EAAE,iBAAiB;QAC1B,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,oFAAoF;QAC9F,QAAQ,EAAE,kBAAkB;QAE5B,0BAA0B;QAC1B,OAAO,EAAE,iFAAiF;QAC1F,OAAO,EAAE,iLAAiL,WAAW,iBAAiB;QAEtN,yCAAyC;QACzC,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,KAAK;QAChB,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,KAAK;QAClB,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,EAAE;KACd;IACD,QAAQ,EAAE;QACN,GAAG,QAAQ;QAEX,QAAQ;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACtE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACtE,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+BAA+B,EAAE;QAC3E,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,8BAA8B,EAAE;QAE1E,iBAAiB;QACjB,IAAI,EAAE;YACF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,iBAAiB,CAAC;YACrE,WAAW,EACP,sFAAsF;SAC7F;QAED,4BAA4B;QAC5B,SAAS,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE;gBACL,MAAM;gBACN,OAAO;gBACP,QAAQ;gBACR,QAAQ;gBACR,SAAS;gBACT,SAAS;gBACT,SAAS;gBACT,SAAS;gBACT,SAAS;gBACT,SAAS;aACZ;YACD,WAAW,EAAE,sDAAsD;SACtE;QAED,OAAO,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE;SACxD;QACD,YAAY,EAAE;YACV,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,+CAA+C;SAC/D;QACD,UAAU,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACzD;QAED,YAAY,EAAE;YACV,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC7C,WAAW,EAAE,8CAA8C;SAC9D;QACD,qBAAqB,EAAE;YACnB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2GAA2G;SAC3H;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,SAAS,SAAS,CAAC,IAAwB;IACvC,MAAM,EACF,OAAO,EACP,OAAO,EACP,IAAI,EAAE,KAAK,EACX,SAAS,EACT,GAAG,aAAa,EACnB,GAAG,IAAI,CAAC;IAET,MAAM,EAAE,QAAQ,EACZ,QAAQ,GAAG,GAAG,IAAI,CAAC;IAEvB,MAAM,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,aAAa,CAAgB,CAAC;IAE1E,IAAI,SAAS,EAAE,CAAC;QACZ,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACvB,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC;IACL,CAAC;IAED,IAAI,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;QAClB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC;QACjB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,IAAI,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;QAClB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC;QACjB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;QAErB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC;QAEnB,IAAI,QAAQ,EAAE,CAAC;YACX,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC;QACvB,CAAC;QAED,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACzB,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC3B,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,OAAO,EAAE,CAAC;AACd,CAAC;AAED;;GAEG;AACH,SAAS,qBAAqB,CAAC,IAAwB;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE9C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACvC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;IAEjC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACrC,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,SAAS,iBAAiB,CACtB,KAA2B,EAC3B,IAAe,EACf,OAAe;IAEf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE9C,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACrB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;IACxC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAE9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IACjC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAE1B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,GAAG,GAAG,OAAO,GAAG,CAAC;QACzC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QAEtB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,OAAO,CAAC;AACnB,CAAC;AAED;;kCAEkC;AAElC,MAAM,CAAC,MAAM,gCAAgC,GAAU;IACnD,IAAI,EAAE,yDAAyD;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,iBAAiB,CACb;QACI;YACI,GAAG,IAAI;YACP,OAAO,EAAE,6UAA6U;SACzV;KACJ,EACD,eAAe,EACf,CAAC,CACJ;IACL,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,EAAE;SACd;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAU;IAChD,IAAI,EAAE,wDAAwD;IAC9D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC;IAC7C,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,uCAAuC;QACjD,OAAO,EACH,6LAA6L;QACjM,OAAO,EAAE,2DAA2D;QACpE,SAAS,EAAE,QAAQ;KACtB;IACD,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,CAAC;SAC9F;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACtC,IAAI,EAAE,8DAA8D;IACpE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC;IAC7C,IAAI,EAAE;QACF,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,uCAAuC;QACjD,OAAO,EACH,6LAA6L;KACpM;IACD,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC;SACxG;KACJ;CACJ,CAAC;AAGF,MAAM,CAAC,MAAM,oCAAoC,GAAU;IACvD,IAAI,EAAE,wDAAwD;IAC9D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC;IAC7C,IAAI,EAAE;QACF,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,uCAAuC;QACjD,OAAO,EACH,6LAA6L;QACjM,OAAO,EAAE,mKAAmK,WAAW,sBAAsB;QAC7M,SAAS,EAAE,QAAQ;KACtB;IACD,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC;SACnG;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAU;IAC5C,IAAI,EAAE,uEAAuE;IAC7E,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,UAAU,CAAC;SACxB;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,iBAAiB,CACb;QACI;YACI,GAAG,IAAI;YAEP,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,QAAQ;YACf,OAAO,EACH,6LAA6L;SACpM;QACD;YACI,GAAG,IAAI;YACP,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,8BAA8B;SAE1C;QACD;YACI,GAAG,IAAI;YACP,aAAa,EAAE,IAAI;YACnB,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;SACd;KACJ,EACD,eAAe,EACf,CAAC,CACJ;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAU;IAChD,IAAI,EAAE,uFAAuF;IAC7F,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,CAAC;SAC5G;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,iBAAiB,CACb;QACI;YACI,GAAG,IAAI;YACP,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,IAAI;YAChB,WAAW,EAAE,IAAI;YACjB,OAAO,EAAE,0RAA0R;SAEtS;QACD;YACI,GAAG,IAAI;YACP,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,KAAK;YACjB,WAAW,EAAE,IAAI;YACjB,OAAO,EAAE,yKAAyK;YAClL,OAAO,EAAE,mKAAmK,WAAW,sBAAsB;SAChN;KACJ,EACD,WAAW,EACX,CAAC,CACJ;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,uCAAuC,GAAU;IAC1D,IAAI,EAAE,mEAAmE;IACzE,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,CAAC;SAC5G;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,iBAAiB,CACb;QACI;YACI,GAAG,IAAI;YACP,UAAU,EAAE,IAAI;YAChB,OAAO,EACH,6LAA6L;YACjM,OAAO,EAAE,mIAAmI,WAAW,oBAAoB;SAC9K;KACJ,EACD,WAAW,EACX,CAAC,CACJ;CACR,CAAC;AAGF,MAAM,CAAC,MAAM,2CAA2C,GAAU;IAC9D,IAAI,EAAE,+EAA+E;IACrF,UAAU,EAAE;QACR,QAAQ,EAAE;YACN,OAAO,EAAE;gBACL,OAAO;gBACP,uBAAuB;gBACvB,OAAO;gBACP,SAAS;gBACT,UAAU;gBACV,UAAU;gBACV,UAAU;gBACV,cAAc;gBACd,YAAY;gBACZ,WAAW;aACd;SACJ;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE9C,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,6CAA6C,CAAC;QACzE,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;QAEjC,MAAM,GAAG,GAAG,iBAAiB,CACzB;YACI;gBACI,GAAG,IAAI;gBACP,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE;;;qBAGR;gBACD,OAAO,EAAE;;;uDAG0B,WAAW;;qBAE7C;aACJ;SACJ,EACD,WAAW,EACX,CAAC,CACJ,CAAC;QAEF,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEzB,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,IAAI,EAAE;QACF,qBAAqB,EAAE,IAAI;QAC3B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,6BAA6B;QACtC,QAAQ,EAAE,2EAA2E;QACrF,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,OAAO;KACrB;CACJ,CAAC","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,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { H as HeadingTag } from './HeadingTag.js';
|
|
3
3
|
|
|
4
|
-
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-content{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:1.6rem;max-width:100%;margin:0 auto;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{display:flex;flex-direction:column;color:var(--versa-card-text-color);max-width:70rem}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}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}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}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{align-items:flex-start}pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content{align-self: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] 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}}";
|
|
4
|
+
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-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{display:flex;flex-direction:column;color:var(--versa-card-text-color);max-width:70rem;width:100%;margin:0 auto}pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper{display:flex;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}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}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}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] 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}}";
|
|
5
5
|
const PnVersaCardStyle0 = pnVersaCardCss;
|
|
6
6
|
|
|
7
7
|
const PnVersaCard$1 = /*@__PURE__*/ proxyCustomElement(class PnVersaCard extends HTMLElement {
|