@postnord/pn-marketweb-components 4.2.2 → 4.2.3

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a9efa1c.js');
+const HeadingTag = require('./HeadingTag-190a9892.js');
+
+const pnVersaCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-versa-card{display:flex;width:100%;height:100%;--versa-card-bg:transparent;--versa-card-heading-color:inherit;--versa-card-text-color:inherit;--versa-card-blockquote-border-color:inherit;--versa-link-color:#005d92;--versa-card-padding:1.6rem;--versa-card-heading-size:2.4rem;--versa-card-preamble-size:1.8rem;--versa-card-label-size:1.2rem;--rte-text-color:var(--versa-card-text-color);--rte-heading-color:var(--versa-card-heading-color);--rte-blockquote-border-color:var(--versa-card-blockquote-border-color);--rte-image-radius:1.6rem}pn-versa-card .pn-versa-card-label{display:block;font-size:var(--versa-card-label-size);text-transform:uppercase;margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card-heading{font-size:var(--versa-card-heading-size);margin:0 0 0.4rem 0;color:var(--versa-card-heading-color)}pn-versa-card .pn-versa-card-preamble{font-size:var(--versa-card-preamble-size);margin:0 0 0.4rem 0}pn-versa-card .pn-versa-card{display:flex;flex-direction:column;width:100%;height:100%;gap:0.8rem;position:relative}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image],pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture,pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{display:block;width:100%;height:100%}pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img{border-radius:1.6rem;object-fit:cover}pn-versa-card .pn-versa-card .pn-versa-card-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}}";
+const PnVersaCardStyle0 = pnVersaCardCss;
+
+const PnVersaCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+        this.heading = undefined;
+        this.preamble = undefined;
+        this.imageGrow = false;
+        this.horizontal = false;
+        this.imgAlignment = 'left';
+        this.hasImageCover = false;
+        this.alignMiddle = false;
+        this.center = false;
+        this.roundImage = false;
+        this.headingLevel = 'h3';
+        this.opacity = 90;
+        this.transparentBackground = false;
+        this.showImage = false;
+        this.showRte = false;
+        this.showCta = false;
+    }
+    get hostElement() { return index.getElement(this); }
+    cx(parts) {
+        return parts.filter(Boolean).join(' ');
+    }
+    get hasImageCoverText() {
+        return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);
+    }
+    get normalizedOpacity() {
+        return Math.min(100, Math.max(0, this.opacity ?? 90));
+    }
+    // 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.
+    get cardColor() {
+        const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();
+        return value || null;
+    }
+    get hasBg() {
+        return !!this.cardColor;
+    }
+    get cardClass() {
+        return this.cx([
+            'pn-versa-card',
+            // modifiers      
+            this.horizontal && 'pn-versa-card-horizontal',
+            this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',
+            this.hasBg && 'pn-versa-card-hasBg',
+            this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top
+            this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set
+            this.roundImage && 'pn-versa-card-hasRoundedImage',
+            this.center && 'pn-versa-card-center',
+            this.alignMiddle && 'pn-versa-card-alignMiddle',
+            this.imageGrow && 'pn-versa-card-imageGrow',
+            this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',
+        ]);
+    }
+    get showContent() {
+        return this.showTextContent || this.showCta;
+    }
+    get showTextContent() {
+        return !!(this.label || this.heading || this.preamble || this.showRte);
+    }
+    componentWillLoad() {
+        this.showImage = !!this.hostElement.querySelector('[slot="image"]');
+        this.showRte = !!this.hostElement.querySelector('[slot="rte"]');
+        this.showCta = !!this.hostElement.querySelector('[slot="cta"]');
+    }
+    render() {
+        return (index.h(index.Host, { key: '68795fe8f1d2c350e5a75587f4f3a4c5c7aa36c9' }, index.h("div", { key: '56ed337bc840a49cb2cabac58296816a863476d0', class: this.cardClass, style: { '--pn-versa-opacity': `${this.normalizedOpacity / 100}` } }, this.showImage && (index.h("div", { key: '819b335ef80afc4a7acdcdc4b8de3aa778f5848b', class: "pn-versa-card-imageWrapper" }, index.h("slot", { key: '29ec92758424d1ab78ec647a88960b30ef831296', name: "image" }))), this.showContent && (index.h("div", { key: '52f708312839f2026574e4c26e4d5cc7dd19d9c7', class: "pn-versa-card-content" }, this.showTextContent && index.h("div", { key: 'f945d3960dab715386493f01d798d81eec49f47d', class: "pn-versa-card-textContent" }, this.label && (index.h("span", { key: 'acf5de375907dbf4699d450cd8f358a68475808d', class: "pn-versa-card-label" }, this.label)), this.heading && (index.h(HeadingTag.HeadingTag, { key: 'e2cdc9c1662c77184010fc6a5179b47959a637e9', cssClass: "pn-versa-card-heading", level: this.headingLevel }, this.heading)), this.preamble && (index.h("p", { key: '82c6e264660a5acc5227f9db0f0a7c5777e37d83', class: "pn-versa-card-preamble" }, this.preamble)), this.showRte && index.h("div", { key: '1025d88c618f24e63d8b75cf3fb62262d98015e0', class: "pn-versa-card-RTEtext" }, index.h("slot", { key: 'ec7cadcd2950cdb5d697f1bdd059d5ece1473168', name: "rte" }))), this.showCta && index.h("div", { key: '7ae363ccac0b3ea35559c97d0a45b8629c8c310e', class: "pn-versa-card-linkwrapper" }, index.h("slot", { key: 'e0d30dd052fab2dd5a3af805f67628b26e71750b', name: "cta" })))))));
+    }
+};
+PnVersaCard.style = PnVersaCardStyle0;
+
+exports.pn_versa_card = PnVersaCard;
+
+//# sourceMappingURL=pn-versa-card.cjs.entry.js.map

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

@@ -0,0 +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}

package/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/cards/pn-quote-card/pn-quote-card.js",
     "components/cards/pn-quote-card/pn-line-shape/pn-line-shape.js",
     "components/cards/pn-teaser-card/pn-teaser-card.js",
+    "components/cards/pn-versa-card/pn-versa-card.js",
     "components/charts/pn-chart/pn-chart.js",
     "components/charts/pn-charts-card/pn-charts-card.js",
     "components/cta/pn-cta-block/pn-cta-block.js",