https://www.vyndamax.com/lib/blocks/card/card-dist.js

1/* eslint-disable */ 
2import{FranklinBlock,decorateButtons}from"../../scripts/lib-franklin.js";const testForMediaMatch=async(t,e,i)=>{if("picture"===t){if(!e.querySelector("img"))throw new Error(`Missing image match: ${e?.parentElement} ${i}`);return!1}if("icon"===t){if(!e.querySelector("span.icon"))throw new Error(`Missing icon match: ${e?.parentElement} ${i}`);return!1}return!0},validateCardType=async(t,e)=>{switch(t){case"text-only":case"link-list":testForMediaMatch("text-only",e,t);break;case"image":case"splitter":case"partnership":await testForMediaMatch("picture",e,t);break;case"icon":await testForMediaMatch("icon",e,t);break;case"eyebrow":case"number":await testForMediaMatch("number",e,t);break;default:console.error("Card case not matched: ",e,t)}},truncateText=(t,e,i=!0)=>t,updateCharacterLength=(t,e)=>{const i=t;if(!i?.body)return;i?.heading&&(i.heading=i.heading.replace(/<(h[2-4])([^>]*)>(.*?)<\/\1>/g,(t,e,i,n)=>{if(!t)return t;return`<${e}${i}>${truncateText(n,0,!1)}</${e}>`}));const n=i.body.replace(/<\/?[^>]+(>|$)/g,"");if(n.length>130){i.body.length,n.length;i.body=truncateText(i.body,0,!0)}"eyebrow"===e&&(i.cardIdentifier=i.cardIdentifier.replace(/<(h[2-4]|p)([^>]*)>(.*?)<\/\1>/g,(t,e,i,n)=>{if(!t)return t;if(n.length>30){return`<${e}${i}>${truncateText(n,0,!1)}</${e}>`}return`<${e}${i}>${n}</${e}>`})),"number"===e&&(i.cardIdentifier=i.cardIdentifier.replace(/<(h[2-4]|p)([^>]*)>(.*?)<\/\1>/g,(t,e,i,n)=>{if(!t)return t;if(n.length>6){return`<${e}${i}>${truncateText(n,0,!1)}</${e}>`}return`<${e}${i}>${n}</${e}>`}))};export default class Card extends FranklinBlock{variants=[{name:"partnership",test:this.block.classList.contains("partnership")},{name:"image",test:this.block.classList.contains("image")&&!this.block.classList.contains("splitter")},{name:"icon",test:this.block.classList.contains("icon")},{name:"eyebrow",test:this.block.classList.contains("eyebrow")},{name:"number",test:this.block.classList.contains("number")},{name:"splitter",test:this.block.classList.contains("splitter")},{name:"text-only",test:!0}];async beforeBlockRender(){const t=this.block?.parentElement;t?.classList.contains("core-collection-carousel-item")&&(this.block.classList.add("collection-carousel-card"),this.inputData.isCarouselCard=!0);if(this.findSectionContent("disclaimer")&&this.inputData?.isCarouselCard&&(this.block?.classList.add("dynamic-with-disclaimer"),this.inputData.dynamicDisclaimerPosition=!0),this.inputData.isSideBySide=this.block.classList.contains("side-by-side"),this.inputData?.cta)if("splitter"===this.variant){const t=document.createElement("div");t.innerHTML=this.inputData.cta,decorateButtons(t),this.inputData.ctas=t.innerHTML}else{const t=document.createElement("div");t.innerHTML=this.inputData.cta,this.inputData.ctaHref=t.querySelector("a").href,this.inputData.ctaLink=t.querySelector("a").innerHTML.trim(),this.inputData.ctaTitle=t.querySelector("a").textContent.trim(),this.inputData.ctaStyle=t.querySelector("a").className,this.block.classList.contains("configurable-buttons")||(this.inputData.ctaStyle=this.inputData.ctaStyle.replace(/primary|text|secondary/g,""),this.inputData.ctaStyle.includes("button")||(this.inputData.ctaStyle=`${this.inputData.ctaStyle??""} button`),this.block.classList.contains("button-primary")?this.inputData.ctaStyle=`${this.inputData.ctaStyle??""} primary`:this.block.classList.contains("button-tertiary")?this.inputData.ctaStyle=`${this.inputData.ctaStyle??""} text`:this.inputData.ctaStyle=`${this.inputData.ctaStyle??""} secondary`);const e=t.querySelector("a > span.icon");this.inputData.ctaLinkWithIcons=e&&e.innerHTML.trim()?e?.parentElement?.innerHTML:null}"text-only"===this.variant&&this.block.classList.add("text-only"),"number"!==this.variant&&"eyebrow"!==this.variant||(this.inputData.cardIdentifier=this.inputData.cardIdentifier.replace(/^(?!<p>)(.*?)(?!<\/p>)$/gm,"<p>$1</p>"));try{const{inputData:t,variant:e,block:i}=this;await validateCardType(e,i);const n=this.block.classList.contains("button-link-icon");if(this.inputData.variantButtonIcon=!!n,this.inputData.variantButtonIcon){let t="secondary";this.block.classList.contains("button-primary")?t="primary":this.block.classList.contains("button-tertiary")&&(t="text"),this.inputData.ctaStyle=`button ${t} button-icon`}updateCharacterLength(t,e)}catch(t){console.error("Error validating card type",this.block),this.inputData=null}}async htmlMarkupUpdates(){try{const{variant:t,block:e}=this;

2e.querySelectorAll(".core-cards-top").forEach(e=>{e?.firstElementChild&&e.firstElementChild.classList.add(`top-${t}`)})}catch(t){console.error("Error adjusting card type",this.block)}}async validateCardMinimalContent(){const{inputData:t,block:e}=this;return!(!t||!(t.heading||t.body||t.cta))||(console.error("Card must have at least one of: heading, body, or CTA",e),e.style.display="none",!1)}async afterBlockRender(){await this.htmlMarkupUpdates(),await this.validateCardMinimalContent();if(this.block.closest(".image-fixed-size")){const t=this.block.closest(".section"),e=["short","medium","tall"],i=t?.dataset.imageSize,n=e.includes(i)?i:"short";t?.classList.add(`image-${n}`)}}}export const schema='{\n  "card": {\n    "name": "card",\n    "type": "Cards",\n    "description": "This block is represented by rounded-edged cards. Each card is designed to present content in a visually appealing format, making information easy to digest.",\n    "coreBlockData": {\n      "blockName": "core-card",\n      "isGlobalBlock": false,\n      "variants": ["default", "image", "button-link-icon", "icon", "number", "eyebrow", "button-primary", "button-secondary", "button-tertiary", "partnership"],\n      "positionInPage": "inline-content",\n      "variantData": {}\n    },\n    "schema": {\n      "classes": [\n        "image",\n        "button-link-icon",\n        "button-primary",\n        "button-secondary",\n        "button-tertiary",\n        "icon",\n        "number",\n        "eyebrow",\n        "text",\n        "splitter",\n        "configurable-heading-levels",\n        "semantic-headings",\n        "configurable-buttons",\n        "side-by-side",\n        "image-right",\n        "partnership",\n        "link-list"\n      ],\n      "cardIdentifier": {\n        "selector": "selectRow:card_identifier",\n        "target": "innerHTML",\n        "description": "Visual identifier element that appears at the top of the card, such as an image, icon, or number. This element serves as a visual anchor for users, enhancing recognition and content categorization while reinforcing information hierarchy. The identifier often uses visual language that complements the brand\'s design system and improves content scannability across multiple cards.",\n        "optional": true\n      },\n      "mobileImage": {\n        "selector": "selectRow:mobile_image",\n        "target": "innerHTML",\n        "description": "An optional mobile-specific image to display in place of the card identifier on small viewports. Used with the side-by-side variant to show different image proportions on mobile.",\n        "optional": true\n      },\n      "imageCaption": {\n        "selector": "selectRow:image_caption",\n        "target": "innerHTML",\n        "description": "An optional label to display below the card identifier.",\n        "optional": true\n      },\n      "heading": {\n        "selector": "selectRow:heading",\n        "target": "innerHTML",\n        "description": "The main title or heading text that identifies the card\'s subject or purpose. Displayed prominently with semantic markup (typically h2-h4), this element establishes content hierarchy and improves accessibility. Effective headings use concise, descriptive language that accurately summarizes content while supporting SEO goals and maintaining consistent voice across card collections.",\n        "optional": true\n      },\n      "body": {\n        "selector": "selectRow:body",\n        "target": "innerHTML",\n        "description": "The main content text that provides detailed information about the card\'s topic. This element contains the primary value proposition or educational content, typically rendered in paragraph form with appropriate semantic markup. Body text should maintain optimal reading length, utilize scannable formatting when appropriate, and balance information density with readability while supporting the overall conversion goals.",\n        "optional": true\n      },\n      "cta": {\n        "selector": "selectRow:cta",\n        "target": "innerHTML",\n        "description": "Call-to-action element that prompts user engagement with the card content. This interactive component uses action-oriented language and distinct styling to create visual emphasis and drive desired user behaviors. CTAs should follow accessibility best practices, maintain consistent interaction patterns, contain clear destination indicators, and support conversion tracking while integrating with the user journey flow.",\n        "optional": true\n      },\n      "disclaimer": {\n        "selector": "selectRow:disclaimer",\n        "target": "innerHTML",\n        "description": "Small text displayed at the bottom of the card providing important regulatory information, legal notices, or contextual qualifiers. This content addresses compliance requirements, sets appropriate expectations, and mitigates legal risks while maintaining transparency. Disclaimer text should be visually distinguished from main content, maintain legibility despite smaller size, and follow regulatory guidelines while preserving overall design aesthetics.",\n        "optional": true\n      }\n    }\n  }\n}\n';export const template=' <div\n  class="core-card-inside block-inside {{#isCarouselCard}}section-carousel-card{{/isCarouselCard}} {{#dynamicDisclaimerPosition}}core-card-dynamic-carousel{{/dynamicDisclaimerPosition}}"\n>\n  <div class="core-card-card core-card-content">\n    {{! the cardIdentifier can be: image | icon | number | eyebrow }}\n    {{#cardIdentifier}}\n    <div class="core-card-top">\n      {{#isSideBySide}}\n      {{{ cardIdentifier }}}\n      {{/isSideBySide}}\n      {{^isSideBySide}}\n      {{ cardIdentifier }}\n      {{/isSideBySide}}\n    </div>\n    {{/cardIdentifier}}\n\n    {{ #imageCaption }}\n    <div class="core-card-image-caption">\n      {{ imageCaption }}\n    </div>\n    {{ /imageCaption }}\n\n    <div class="core-card-bottom standard-block-content-spacing core-card-bottom-stretch">\n      <div>\n        <div class="atoms-subheadline">\n        {{ heading }}\n        </div>\n        <div class="core-card-body">\n        {{{ body }}}\n        </div>\n      </div>\n      {{ #ctaHref }}\n      <p class="button-container" data-button-icon="{{ variantButtonIcon }}">\n        <a href="{{ ctaHref }}"  class="{{ ctaStyle }}">\n          {{#variantButtonIcon}}

2\n          <span class="icon icon-lib-chevron-right-bold"></span>\n          {{/variantButtonIcon}}\n          {{^variantButtonIcon}}\n          {{{ ctaLink }}}             \n        {{/variantButtonIcon}}\n        </a>\n      </p>\n      {{ /ctaHref }}\n      {{ #ctas }}\n      {{ . }}\n      {{ /ctas }}\n      {{#dynamicDisclaimerPositionForLinkList }}\n        {{#disclaimer}}\n        <div class="core-card-disclaimer-field atoms-disclaimer">\n          {{ disclaimer }}\n        </div>\n        {{/disclaimer}}\n      {{/dynamicDisclaimerPositionForLinkList}}\n    </div>\n  </div>\n\n  {{#dynamicDisclaimerPosition}}\n  {{#disclaimer}}\n  <div class="core-card-disclaimer-field atoms-disclaimer">\n    {{ disclaimer }}\n  </div>\n  {{/disclaimer}}\n  {{/dynamicDisclaimerPosition}}\n</div>\n';export const smartCaptureConfig=" {}";