From 386f817523abf812d4c94cb1e7e2051cc24a9863 Mon Sep 17 00:00:00 2001
From: Dev Ashish Saradhana <41122199+Deva309@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:52:31 +0530
Subject: [PATCH 1/6] [MWPW-151517] - Remove condition for promobar hidden on
 mobile from gnav (#2538)

* Remove condition for promobar hidden on mobile from gnav

* Fix lint and UT

* Adjust height for feds promobar

* brnach banner not shown in case feds promobar is present

* Add UT for promobar hide/show on mobile

* Lint Fix

* Removed condition for on and off feds promobar on mobile to avoid CLS issue

* Remove UT changes not needed now

* fixed mega menu height if promobar is present

* Fix review comments

* Fix megamenu scroll issue

* reverted condition

* remove flex wrap

* add initial visibility hidden for gnav

---------

Co-authored-by: nishantka <nishantkaushikadobe@gmail.com>
---
 libs/blocks/global-navigation/global-navigation.css |  6 +++++-
 libs/blocks/global-navigation/global-navigation.js  |  2 +-
 libs/blocks/mobile-app-banner/mobile-app-banner.js  |  2 +-
 libs/styles/styles.css                              | 13 ++++++-------
 test/blocks/global-navigation/gnav-promo.test.js    |  9 ---------
 5 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
index e35f3396e9..f4f28f00f0 100644
--- a/libs/blocks/global-navigation/global-navigation.css
+++ b/libs/blocks/global-navigation/global-navigation.css
@@ -84,7 +84,6 @@ header.global-navigation {
 
 /* Promo */
 .global-navigation .aside.promobar {
-  display: none; /* For when someone switches from desktop to mobile */
   z-index: 1;
 }
 
@@ -569,6 +568,11 @@ header.global-navigation {
     padding: 40px 0 0;
     max-height: calc(100vh - 100%);
     overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .global-navigation.has-promo .feds-navItem--megaMenu .feds-popup {
+    max-height: calc(100vh - 100% - var(--global-height-navPromo));
   }
 
   [dir = "rtl"] .feds-navItem--megaMenu .feds-popup {
diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
index 4bdab1954a..203c0ee9a9 100644
--- a/libs/blocks/global-navigation/global-navigation.js
+++ b/libs/blocks/global-navigation/global-navigation.js
@@ -777,7 +777,7 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
-    if (!isDesktop.matches || !promoPath) {
+    if (!promoPath) {
       this.block.classList.remove('has-promo');
       return this.elements.aside;
     }
diff --git a/libs/blocks/mobile-app-banner/mobile-app-banner.js b/libs/blocks/mobile-app-banner/mobile-app-banner.js
index 9d7106dd07..0e2e546b07 100644
--- a/libs/blocks/mobile-app-banner/mobile-app-banner.js
+++ b/libs/blocks/mobile-app-banner/mobile-app-banner.js
@@ -59,7 +59,7 @@ function branchInit(key) {
 /* eslint-enable */
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
-  if (!header) return;
+  if (!header || header.classList.contains('has-promo')) return;
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);
diff --git a/libs/styles/styles.css b/libs/styles/styles.css
index 390675e445..4ef6d8c57f 100644
--- a/libs/styles/styles.css
+++ b/libs/styles/styles.css
@@ -4,7 +4,7 @@
   --global-height-nav: 64px;
   --global-height-breadcrumbs: 33px;
   /* stylelint-disable-next-line custom-property-pattern */
-  --global-height-navPromo: 65px;
+  --global-height-navPromo: 72px;
   --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
 
   /* Colors */
@@ -708,13 +708,12 @@ header.global-navigation {
   visibility: hidden;
 }
 
-@media (min-width: 900px) {
-  header.global-navigation.has-promo {
-    height: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
-    min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
-  }
+header.global-navigation.has-promo {
+  height: auto;
+  min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
+}
 
+@media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);
   }
diff --git a/test/blocks/global-navigation/gnav-promo.test.js b/test/blocks/global-navigation/gnav-promo.test.js
index 6ef0276fb5..972dd297db 100644
--- a/test/blocks/global-navigation/gnav-promo.test.js
+++ b/test/blocks/global-navigation/gnav-promo.test.js
@@ -47,13 +47,4 @@ describe('Promo', () => {
     });
     promoMeta.remove();
   });
-
-  it('doesn\'t exist on mobile', async () => {
-    const promoMeta = toFragment`<meta name="gnav-promo-source" content="http://localhost:2000/fragments/correct-promo-fragment">`;
-    document.head.append(promoMeta);
-    const nav = await createFullGlobalNavigation({ viewport: 'mobile', hasPromo: true });
-    expect(nav.block.classList.contains('has-promo')).to.be.false;
-    const asideElem = nav.block.querySelector('.aside.promobar');
-    expect(asideElem).to.not.exist;
-  });
 });

From 925af3f540de0aa68adb9a9ee5c74821e78ad160 Mon Sep 17 00:00:00 2001
From: Axel Cureno Basurto <axelcureno@gmail.com>
Date: Mon, 29 Jul 2024 01:22:38 -0700
Subject: [PATCH 2/6] Mwpw 147034: Custom border color + badge/border color
 decoupling [merch card] (#2613)

* MWPW-147907: Allow for 24pt font size for price [Merch Card]

* merch-card dependency consumption

* Update merch-card.js

* Update merch-card.js

* Update merch-card.js
---
 libs/deps/merch-card.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
index 145ea49b0b..6256234525 100644
--- a/libs/deps/merch-card.js
+++ b/libs/deps/merch-card.js
@@ -1,4 +1,3 @@
-// branch: main commit: edd23b3bf8505bfd02280d9ae77ece1ce3a25147 Wed, 24 Jul 2024 17:16:07 GMT
 import{html as o,LitElement as re,nothing as ne}from"/libs/deps/lit-all.min.js";import{LitElement as Q,html as M,css as Z}from"/libs/deps/lit-all.min.js";var h=class extends Q{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?M`<a href="${e}">
                   <img src="${this.src}" alt="${this.alt}" loading="lazy" />
               </a>`:M` <img src="${this.src}" alt="${this.alt}" loading="lazy" />`}static styles=Z`
@@ -1492,7 +1491,7 @@ body.merch-modal {
     scrollbar-gutter: stable;
     height: 100vh;
 }
-`;document.head.appendChild(K);var p="MERCH-CARD",f="merch-card",ae=32,_="mini-compare-chart",Y=c=>`--consonant-merch-card-footer-row-${c}-min-height`,l=class extends re{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,n]=e.split(",");return{PUF:t,ABM:r,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,n,a]=t.split(":"),i=Number(n);return[r,{order:isNaN(i)?void 0:i,size:a}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,...j()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.updateComplete.then(async()=>{let t=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'));await Promise.all(t.map(r=>r.onceSettled())),this.adjustTitleWidth(),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows()})}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?o`<label id="stock-checkbox">
+`;document.head.appendChild(K);var p="MERCH-CARD",f="merch-card",ae=32,_="mini-compare-chart",Y=c=>`--consonant-merch-card-footer-row-${c}-min-height`,l=class extends re{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,n]=e.split(",");return{PUF:t,ABM:r,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,n,a]=t.split(":"),i=Number(n);return[r,{order:isNaN(i)?void 0:i,size:a}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,...j()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){e.has("badgeBackgroundColor")&&this.variant!=="twp"&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(async()=>{let t=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'));await Promise.all(t.map(r=>r.onceSettled())),this.adjustTitleWidth(),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows()})}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?o`<label id="stock-checkbox">
                     <input type="checkbox" @change=${this.toggleStockOffer}></input>
                     <span></span>
                     ${this.checkboxLabel}

From 0ff20f7dfa671579f11e75ebe5974909fe8b5b68 Mon Sep 17 00:00:00 2001
From: Ryan Parrish <churchofslidin@gmail.com>
Date: Mon, 29 Jul 2024 02:22:45 -0600
Subject: [PATCH 3/6] MWPW-150557 - Split Marquee CLS issues on consuming sites
 (#2636)

remove height auto to test CLS issue

Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>
---
 libs/blocks/marquee/marquee.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css
index 784135bdff..e6257baa3f 100644
--- a/libs/blocks/marquee/marquee.css
+++ b/libs/blocks/marquee/marquee.css
@@ -301,7 +301,6 @@
 }
 
 .marquee.split .icon-area img {
-  height: auto;
   max-height: var(--icon-size-l);
   max-width: 275px;
   object-fit: contain;

From fc10fa5b9d27d89b7a2ea90364154edaead4be6b Mon Sep 17 00:00:00 2001
From: rohitsahu <sahurohit9@gmail.com>
Date: Mon, 29 Jul 2024 14:54:43 +0530
Subject: [PATCH 4/6] [MWPW-154335] [callout] Spacing issue encountered when
 the call-out section is added (#2628)

* milo libs copied with local changes.
Code updated to create only single callout-text slot

* merch-card copied from mas repo

* replaced merch-card changes

* lean up

* replace merch-card from main

---------

Co-authored-by: Rohit Sahu <rosahu@adobe.com>
---
 libs/blocks/merch-card/merch-card.js      | 13 +++--
 libs/deps/merch-card.js                   | 66 ++++++++++++++---------
 test/blocks/merch-card/merch-card.test.js |  9 ++--
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
index 7202943b72..abc6d0a4f6 100644
--- a/libs/blocks/merch-card/merch-card.js
+++ b/libs/blocks/merch-card/merch-card.js
@@ -175,6 +175,8 @@ const parseContent = async (el, merchCard) => {
   const innerElements = [
     ...el.querySelectorAll(INNER_ELEMENTS_SELECTOR),
   ];
+  const calloutContainer = createTag('div');
+
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
@@ -233,13 +235,10 @@ const parseContent = async (el, merchCard) => {
       calloutContentWrapper.appendChild(calloutContent);
 
       if (imgElement) {
-        calloutContentWrapper.classList.add('callout-content-wrapper-with-icon');
         calloutContentWrapper.appendChild(imgElement);
       }
 
-      const calloutSlot = createTag('div', { slot: 'callout-text' });
-      calloutSlot.appendChild(calloutContentWrapper);
-      merchCard.appendChild(calloutSlot);
+      calloutContainer.appendChild(calloutContentWrapper);
       return;
     }
     if (isParagraphTag(tagName)) {
@@ -249,6 +248,12 @@ const parseContent = async (el, merchCard) => {
     if (mnemonicList) bodySlot.append(mnemonicList);
   });
 
+  if (calloutContainer.children.length > 0) {
+    const calloutSlot = createTag('div', { slot: 'callout-content' });
+    calloutSlot.appendChild(calloutContainer);
+    merchCard.appendChild(calloutSlot);
+  }
+
   if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) {
     merchCard.insertBefore(bodySlot, merchCard.childNodes[1]);
   }
diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
index 6256234525..3dbae5eefb 100644
--- a/libs/deps/merch-card.js
+++ b/libs/deps/merch-card.js
@@ -1,3 +1,4 @@
+// branch: main commit: a76922431766985faa02f86dd5612fecd4236dcd Mon, 29 Jul 2024 09:01:34 GMT
 import{html as o,LitElement as re,nothing as ne}from"/libs/deps/lit-all.min.js";import{LitElement as Q,html as M,css as Z}from"/libs/deps/lit-all.min.js";var h=class extends Q{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?M`<a href="${e}">
                   <img src="${this.src}" alt="${this.alt}" loading="lazy" />
               </a>`:M` <img src="${this.src}" alt="${this.alt}" loading="lazy" />`}static styles=Z`
@@ -23,7 +24,7 @@ import{html as o,LitElement as re,nothing as ne}from"/libs/deps/lit-all.min.js";
             width: var(--img-width);
             height: var(--img-height);
         }
-    `};customElements.define("merch-icon",h);var J=localStorage.getItem("masAccessToken"),O={Authorization:`Bearer ${J}`,pragma:"no-cache","cache-control":"no-cache"};async function X({path:c,query:e}){let t={};c&&(t.path=c),e&&(t.fullText={text:encodeURIComponent(e),queryMode:"EXACT_WORDS"});let r=new URLSearchParams({query:JSON.stringify({filter:t})}).toString();return fetch(`${this.cfSearchUrl}?${r}`,{headers:O}).then(n=>n.json()).then(({items:n})=>n)}async function ee(c){return fetch(`${this.cfFragmentsUrl}?path=${c}`,{headers:O}).then(e=>e.json()).then(({items:[e]})=>e)}var C=class{sites={cf:{fragments:{search:X.bind(this),getCfByPath:ee.bind(this)}}};constructor(e){let r=`${`https://${e}.adobeaemcloud.com`}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`}};var L="merch-offer-select:ready",N="merch-card:ready",H="merch-card:action-menu-toggle";var z="merch-storage:change",T="merch-quantity-selector:change";function P(c){let e=[];function t(r){r.nodeType===Node.TEXT_NODE?e.push(r):r.childNodes.forEach(t)}return t(c),e}function v(c,e={},t){let r=document.createElement(c);r.innerHTML=t;for(let[n,a]of Object.entries(e))r.setAttribute(n,a);return r}var D="aem-bucket",B={catalog:{name:"catalog",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},ah:{name:"ah",title:{tag:"h3",slot:"heading-xxs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},ctas:{size:"s"}},"ccd-action":{name:"ccd-action",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}}};async function te(c,e){let t=c.fields.reduce((a,{name:i,multiple:u,values:x})=>(a[i]=u?x:x[0],a),{}),{type:r="catalog"}=t,n=B[r]||B.catalog;if(e.variant=r,e.setAttribute("variant",r),t.icon?.forEach(a=>{let i=v("merch-icon",{slot:"icons",src:a,alt:"",href:"",size:"l"});e.append(i)}),t.title&&e.append(v(n.title.tag,{slot:n.title.slot},t.title)),t.prices){let a=t.prices,i=v(n.prices.tag,{slot:n.prices.slot},a);e.append(i)}if(e.append(v("p",{slot:"body-xxs",id:"individuals1"},"Desktop")),t.description){let a=v(n.description.tag,{slot:n.description.slot},t.description);e.append(a)}if(t.ctas){let a=t.ctas,i=v("div",{slot:"footer"},a);e.append(i)}}var $=class{#e=new Map;clear(){this.#e.clear()}add(...e){e.forEach(t=>{let{path:r}=t;r&&this.#e.set(r,t)})}has(e){return this.#e.has(e)}get(e){return this.#e.get(e)}remove(e){this.#e.delete(e)}},I=new $,m=class extends HTMLElement{#e;cache=I;path;static get observedAttributes(){return["source","path"]}attributeChangedCallback(e,t,r){this[e]=r}connectedCallback(){let e=this.getAttribute(D)??document.querySelector("mas-studio")?.getAttribute(D);this.#e=new C(e),this.fetchData()}refresh(){this.cache.remove(this.path),this.fetchData()}async fetchData(){let e=I.get(this.path);if(e||(e=await this.#e.sites.cf.fragments.getCfByPath(this.path)),e){te(e,this.parentElement),this.render();return}this.render()}async render(){this.isConnected&&this.parentElement.tagName==="MERCH-CARD"&&await Promise.all([...this.parentElement.querySelectorAll('[is="inline-price"],[is="checkout-link"]')].map(e=>e.onceSettled()))}};customElements.define("merch-datasource",m);import{css as A,unsafeCSS as y}from"/libs/deps/lit-all.min.js";var b="(max-width: 767px)",k="(max-width: 1199px)",d="(min-width: 768px)",s="(min-width: 1200px)",g="(min-width: 1600px)";var q=A`
+    `};customElements.define("merch-icon",h);var J=localStorage.getItem("masAccessToken"),O={Authorization:`Bearer ${J}`,pragma:"no-cache","cache-control":"no-cache"};async function X({path:c,query:e}){let t={};c&&(t.path=c),e&&(t.fullText={text:encodeURIComponent(e),queryMode:"EXACT_WORDS"});let r=new URLSearchParams({query:JSON.stringify({filter:t})}).toString();return fetch(`${this.cfSearchUrl}?${r}`,{headers:O}).then(n=>n.json()).then(({items:n})=>n)}async function ee(c){return fetch(`${this.cfFragmentsUrl}?path=${c}`,{headers:O}).then(e=>e.json()).then(({items:[e]})=>e)}var C=class{sites={cf:{fragments:{search:X.bind(this),getCfByPath:ee.bind(this)}}};constructor(e){let r=`${`https://${e}.adobeaemcloud.com`}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`}};var L="merch-offer-select:ready",N="merch-card:ready",H="merch-card:action-menu-toggle";var z="merch-storage:change",T="merch-quantity-selector:change";function P(c){let e=[];function t(r){r.nodeType===Node.TEXT_NODE?e.push(r):r.childNodes.forEach(t)}return t(c),e}function v(c,e={},t){let r=document.createElement(c);r.innerHTML=t;for(let[n,a]of Object.entries(e))r.setAttribute(n,a);return r}var D="aem-bucket",B={catalog:{name:"catalog",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},ah:{name:"ah",title:{tag:"h3",slot:"heading-xxs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},ctas:{size:"s"}},"ccd-action":{name:"ccd-action",title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}}};async function te(c,e){let t=c.fields.reduce((a,{name:i,multiple:x,values:u})=>(a[i]=x?u:u[0],a),{}),{type:r="catalog"}=t,n=B[r]||B.catalog;if(e.variant=r,e.setAttribute("variant",r),t.icon?.forEach(a=>{let i=v("merch-icon",{slot:"icons",src:a,alt:"",href:"",size:"l"});e.append(i)}),t.title&&e.append(v(n.title.tag,{slot:n.title.slot},t.title)),t.prices){let a=t.prices,i=v(n.prices.tag,{slot:n.prices.slot},a);e.append(i)}if(e.append(v("p",{slot:"body-xxs",id:"individuals1"},"Desktop")),t.description){let a=v(n.description.tag,{slot:n.description.slot},t.description);e.append(a)}if(t.ctas){let a=t.ctas,i=v("div",{slot:"footer"},a);e.append(i)}}var $=class{#e=new Map;clear(){this.#e.clear()}add(...e){e.forEach(t=>{let{path:r}=t;r&&this.#e.set(r,t)})}has(e){return this.#e.has(e)}get(e){return this.#e.get(e)}remove(e){this.#e.delete(e)}},I=new $,m=class extends HTMLElement{#e;cache=I;path;static get observedAttributes(){return["source","path"]}attributeChangedCallback(e,t,r){this[e]=r}connectedCallback(){let e=this.getAttribute(D)??document.querySelector("mas-studio")?.getAttribute(D);this.#e=new C(e),this.fetchData()}refresh(){this.cache.remove(this.path),this.fetchData()}async fetchData(){let e=I.get(this.path);if(e||(e=await this.#e.sites.cf.fragments.getCfByPath(this.path)),e){te(e,this.parentElement),this.render();return}this.render()}async render(){this.isConnected&&this.parentElement.tagName==="MERCH-CARD"&&await Promise.all([...this.parentElement.querySelectorAll('[is="inline-price"],[is="checkout-link"]')].map(e=>e.onceSettled()))}};customElements.define("merch-datasource",m);import{css as A,unsafeCSS as y}from"/libs/deps/lit-all.min.js";var b="(max-width: 767px)",k="(max-width: 1199px)",d="(min-width: 768px)",s="(min-width: 1200px)",g="(min-width: 1600px)";var q=A`
     :host {
         position: relative;
         display: flex;
@@ -387,6 +388,11 @@ import{html as o,LitElement as re,nothing as ne}from"/libs/deps/lit-all.min.js";
     :host([variant='mini-compare-chart']) slot[name='promo-text'] {
         min-height: var(--consonant-merch-card-mini-compare-promo-text-height);
     }
+    :host([variant='mini-compare-chart']) slot[name='callout-content'] {
+        min-height: var(
+            --consonant-merch-card-mini-compare-callout-content-height
+        );
+    }
 
     :host([variant='plans']) ::slotted([slot='heading-xs']),
     :host([variant='segment']) ::slotted([slot='heading-xs']) {
@@ -549,6 +555,7 @@ import{html as o,LitElement as re,nothing as ne}from"/libs/deps/lit-all.min.js";
     --consonant-merch-card-callout-icon-right: 8px;
     --consonant-merch-card-callout-letter-spacing: 0px;
     --consonant-merch-card-callout-icon-padding: 34px;
+    --consonant-merch-card-callout-spacing-xxs: 8px;
 }
 
 merch-card-collection {
@@ -659,24 +666,29 @@ merch-card [slot='heading-xl'] {
     color: var(--merch-color-grey-80);
 }
 
-merch-card [slot='callout-text'] {
-    display: inline-block;
+merch-card [slot='callout-content'] {
+    display: flex;
+    flex-direction: column;
     margin: var(--consonant-merch-spacing-xxxs) 0px;
+    gap: var(--consonant-merch-card-callout-spacing-xxs);
 }
 
-merch-card [slot='callout-text'] > div {
-    position: relative;
-    display: inline-grid;
+merch-card [slot='callout-content'] > div {
+    display: flex;
+    flex-direction: column;
+    margin: var(--consonant-merch-spacing-xxxs) 0px;
+    gap: var(--consonant-merch-card-callout-spacing-xxs);
+    align-items: flex-start;
+}
+
+merch-card [slot='callout-content'] > div > div {
+    display: flex;
     background: rgba(203 203 203 / 50%);
     border-radius: var(--consonant-merch-spacing-xxxs);
     padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs);
 }
 
-merch-card [slot='callout-text'] > div.callout-content-wrapper-with-icon {
-    padding-right: var(--consonant-merch-card-callout-icon-padding);
-}
-
-merch-card [slot='callout-text'] > div > div {
+merch-card [slot='callout-content'] > div > div > div {
     display: inline-block;
     text-align: left;
     font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) Adobe Clean;
@@ -684,16 +696,18 @@ merch-card [slot='callout-text'] > div > div {
     color: var(--consonant-merch-card-callout-font-color);
 }
 
-merch-card [slot='callout-text'] img {
-    position: absolute;
-    top: var(--consonant-merch-card-callout-icon-top);
-    right: var(--consonant-merch-card-callout-icon-right);
+merch-card [slot='callout-content'] img {
     width: var(--consonant-merch-card-callout-icon-size);
     height: var(--consonant-merch-card-callout-icon-size);
+    margin: 2.5px 0px 0px 9px;
+}
+
+merch-card[variant="mini-compare-chart"] [slot='callout-content'] {
+    padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px;
 }
 
-merch-card[variant="mini-compare-chart"] [slot="callout-text"] {
-    padding: 0px var(--consonant-merch-spacing-s);
+merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] {
+    min-height: unset;
 }
 
 merch-card [slot='detail-m'] {
@@ -1491,7 +1505,7 @@ body.merch-modal {
     scrollbar-gutter: stable;
     height: 100vh;
 }
-`;document.head.appendChild(K);var p="MERCH-CARD",f="merch-card",ae=32,_="mini-compare-chart",Y=c=>`--consonant-merch-card-footer-row-${c}-min-height`,l=class extends re{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,n]=e.split(",");return{PUF:t,ABM:r,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,n,a]=t.split(":"),i=Number(n);return[r,{order:isNaN(i)?void 0:i,size:a}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,...j()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){e.has("badgeBackgroundColor")&&this.variant!=="twp"&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(async()=>{let t=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'));await Promise.all(t.map(r=>r.onceSettled())),this.adjustTitleWidth(),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows()})}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?o`<label id="stock-checkbox">
+`;document.head.appendChild(K);var p="MERCH-CARD",f="merch-card",ae=32,_="mini-compare-chart",Y=c=>`--consonant-merch-card-footer-row-${c}-min-height`,l=class extends re{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,n]=e.split(",");return{PUF:t,ABM:r,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,n,a]=t.split(":"),i=Number(n);return[r,{order:isNaN(i)?void 0:i,size:a}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(a=>a!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,...j()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.updateComplete.then(async()=>{let r=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]')).filter(n=>!n.closest('[slot="callout-content"]'));await Promise.all(r.map(n=>n.onceSettled())),this.adjustTitleWidth(),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows()})}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?o`<label id="stock-checkbox">
                     <input type="checkbox" @change=${this.toggleStockOffer}></input>
                     <span></span>
                     ${this.checkboxLabel}
@@ -1514,7 +1528,7 @@ body.merch-modal {
             >
                 ${this.badgeText}
             </div>
-        `}get badgeElement(){return this.shadowRoot.getElementById("badge")}getContainer(){return this.closest('[class*="-merch-cards"]')??this.parentElement}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}get isMobileOrTablet(){return window.matchMedia("(max-width: 1024px)").matches}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let r of t){await r.onceSettled();let n=r.value?.[0]?.planType;if(!n)return;let a=this.stockOfferOsis[n];if(!a)return;let i=r.dataset.wcsOsi.split(",").filter(u=>u!==a);e.checked&&i.push(a),r.dataset.wcsOsi=i.join(",")}}toggleActionMenu(e){let t=e?.type==="mouseleave"?!0:void 0,r=this.shadowRoot.querySelector('slot[name="action-menu-content"]');r&&(t||this.dispatchEvent(new CustomEvent(H,{bubbles:!0,composed:!0,detail:{card:this.name,type:"action-menu"}})),r.classList.toggle("hidden",t))}handleQuantitySelection(e){let t=this.checkoutLinks;for(let r of t)r.dataset.quantity=e.detail.option}get titleElement(){return this.variant==="special-offers"?this.querySelector('[slot="detail-m"]'):this.querySelector('[slot="heading-xs"]')}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(r=>{if(e){t[r].order=Math.min(t[r].order||2,2);return}let n=t[r].order;n===1||isNaN(n)||(t[r].order=Number(n)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}render(){if(!(!this.isConnected||this.style.display==="none"))switch(this.variant){case"special-offers":return this.renderSpecialOffer();case"segment":return this.renderSegment();case"plans":return this.renderPlans();case"catalog":return this.renderCatalog();case"image":return this.renderImage();case"product":return this.renderProduct();case"inline-heading":return this.renderInlineHeading();case _:return this.renderMiniCompareChart();case"ccd-action":return this.renderCcdAction();case"twp":return this.renderTwp();default:return this.renderProduct()}}renderSpecialOffer(){return o`${this.cardImage}
+        `}get badgeElement(){return this.shadowRoot.getElementById("badge")}getContainer(){return this.closest('[class*="-merch-cards"]')??this.parentElement}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}get isMobileOrTablet(){return window.matchMedia("(max-width: 1024px)").matches}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let r of t){await r.onceSettled();let n=r.value?.[0]?.planType;if(!n)return;let a=this.stockOfferOsis[n];if(!a)return;let i=r.dataset.wcsOsi.split(",").filter(x=>x!==a);e.checked&&i.push(a),r.dataset.wcsOsi=i.join(",")}}toggleActionMenu(e){let t=e?.type==="mouseleave"?!0:void 0,r=this.shadowRoot.querySelector('slot[name="action-menu-content"]');r&&(t||this.dispatchEvent(new CustomEvent(H,{bubbles:!0,composed:!0,detail:{card:this.name,type:"action-menu"}})),r.classList.toggle("hidden",t))}handleQuantitySelection(e){let t=this.checkoutLinks;for(let r of t)r.dataset.quantity=e.detail.option}get titleElement(){return this.variant==="special-offers"?this.querySelector('[slot="detail-m"]'):this.querySelector('[slot="heading-xs"]')}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(r=>{if(e){t[r].order=Math.min(t[r].order||2,2);return}let n=t[r].order;n===1||isNaN(n)||(t[r].order=Number(n)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}render(){if(!(!this.isConnected||this.style.display==="none"))switch(this.variant){case"special-offers":return this.renderSpecialOffer();case"segment":return this.renderSegment();case"plans":return this.renderPlans();case"catalog":return this.renderCatalog();case"image":return this.renderImage();case"product":return this.renderProduct();case"inline-heading":return this.renderInlineHeading();case _:return this.renderMiniCompareChart();case"ccd-action":return this.renderCcdAction();case"twp":return this.renderTwp();default:return this.renderProduct()}}renderSpecialOffer(){return o`${this.cardImage}
             <div class="body">
                 <slot name="detail-m"></slot>
                 <slot name="heading-xs"></slot>
@@ -1535,7 +1549,7 @@ body.merch-modal {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>
+                <slot name="callout-content"></slot>
                 <slot name="body-xs"></slot>
             </div>
             <hr />
@@ -1546,7 +1560,7 @@ body.merch-modal {
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>
+                <slot name="callout-content"></slot>
                 <slot name="body-xs"></slot>
                 ${this.stockCheckbox}
             </div>
@@ -1571,10 +1585,10 @@ body.merch-modal {
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
                 ${this.promoBottom?"":o`<slot name="promo-text"></slot
-                          ><slot name="callout-text"></slot>`}
+                          ><slot name="callout-content"></slot>`}
                 <slot name="body-xs"></slot>
                 ${this.promoBottom?o`<slot name="promo-text"></slot
-                          ><slot name="callout-text"></slot>`:""}
+                          ><slot name="callout-content"></slot>`:""}
             </div>
             ${this.secureLabelFooter}`}renderImage(){return o`${this.cardImage}
             <div class="body">
@@ -1608,7 +1622,7 @@ body.merch-modal {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>
+                <slot name="callout-content"></slot>
                 <slot name="body-xs"></slot>
             </div>
             ${this.secureLabelFooter}`}renderMiniCompareChart(){let{badge:e}=this;return o` <div class="top-section${e?" badge":""}">
@@ -1621,7 +1635,7 @@ body.merch-modal {
             <slot name="price-commitment"></slot>
             <slot name="offers"></slot>
             <slot name="promo-text"></slot>
-            <slot name="callout-text"></slot>
+            <slot name="callout-content"></slot>
             ${this.miniCompareFooter}
             <slot name="footer-rows"><slot name="body-s"></slot></slot>`}renderTwp(){return o`${this.badge}
             <div class="top-section">
@@ -1640,5 +1654,5 @@ body.merch-modal {
             <slot name="body-xs"></slot>
             <footer><slot name="footer"></slot></footer>
             ${this.defaultSlot}
-        </div>`}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener(T,this.handleQuantitySelection),this.addEventListener(L,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener(T,this.handleQuantitySelection),this.storageOptions?.removeEventListener(z,this.handleStorageChange)}appendInvisibleSpacesToFooterLinks(){[...this.querySelectorAll('[slot="footer"] a')].forEach(e=>{P(e).forEach(r=>{let i=r.textContent.split(" ").map(u=>u.match(/.{1,7}/g)?.join("\u200B")).join(" ");r.textContent=i})})}keydownHandler(e){let t=document.activeElement?.closest(p);if(!t)return;function r(E,S){let w=document.elementFromPoint(E,S)?.closest(p);w&&(t.selected=!1,e.preventDefault(),e.stopImmediatePropagation(),w.focus(),w.selected=!0,w.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:a,width:i,height:u}=t.getBoundingClientRect(),x=64,{code:R}=e;if(R==="Tab"){let E=Array.from(this.querySelectorAll('a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')),S=E[0],w=E[E.length-1];(!e.shiftKey&&document.activeElement===w||e.shiftKey&&document.activeElement===S)&&(e.preventDefault(),e.stopImmediatePropagation())}else switch(R){case F:r(n-x,a);break;case U:r(n+i+x,a);break;case V:r(n,a-x);break;case W:r(n,a+u+x);break;case G:if(this.variant==="twp")return;this.footerSlot?.querySelector("a")?.click();break}}updateMiniCompareElementMinHeight(e,t){let r=`--consonant-merch-card-mini-compare-${t}-height`,n=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),a=parseInt(this.#e.style.getPropertyValue(r))||0;n>a&&this.#e.style.setProperty(r,`${n}px`)}async adjustTitleWidth(){if(!["segment","plans"].includes(this.variant))return;let e=this.getBoundingClientRect().width,t=this.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}async adjustMiniCompareBodySlots(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","secure-transaction-label"].forEach(r=>this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(`slot[name="${r}"]`),r)),this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector("footer"),"footer");let t=this.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.#e.style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((t,r)=>{let n=Math.max(ae,parseInt(window.getComputedStyle(t).height)||0),a=parseInt(this.#e.style.getPropertyValue(Y(r+1)))||0;n>a&&this.#e.style.setProperty(Y(r+1),`${n}px`)})}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(N,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(z,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let r=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(r)}):t.replaceWith(r)}}};customElements.define(f,l);
+        </div>`}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener(T,this.handleQuantitySelection),this.addEventListener(L,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener(T,this.handleQuantitySelection),this.storageOptions?.removeEventListener(z,this.handleStorageChange)}appendInvisibleSpacesToFooterLinks(){[...this.querySelectorAll('[slot="footer"] a')].forEach(e=>{P(e).forEach(r=>{let i=r.textContent.split(" ").map(x=>x.match(/.{1,7}/g)?.join("\u200B")).join(" ");r.textContent=i})})}keydownHandler(e){let t=document.activeElement?.closest(p);if(!t)return;function r(E,S){let w=document.elementFromPoint(E,S)?.closest(p);w&&(t.selected=!1,e.preventDefault(),e.stopImmediatePropagation(),w.focus(),w.selected=!0,w.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:a,width:i,height:x}=t.getBoundingClientRect(),u=64,{code:R}=e;if(R==="Tab"){let E=Array.from(this.querySelectorAll('a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')),S=E[0],w=E[E.length-1];(!e.shiftKey&&document.activeElement===w||e.shiftKey&&document.activeElement===S)&&(e.preventDefault(),e.stopImmediatePropagation())}else switch(R){case F:r(n-u,a);break;case U:r(n+i+u,a);break;case V:r(n,a-u);break;case W:r(n,a+x+u);break;case G:if(this.variant==="twp")return;this.footerSlot?.querySelector("a")?.click();break}}updateMiniCompareElementMinHeight(e,t){let r=`--consonant-merch-card-mini-compare-${t}-height`,n=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),a=parseInt(this.#e.style.getPropertyValue(r))||0;n>a&&this.#e.style.setProperty(r,`${n}px`)}async adjustTitleWidth(){if(!["segment","plans"].includes(this.variant))return;let e=this.getBoundingClientRect().width,t=this.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}async adjustMiniCompareBodySlots(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","callout-content","secure-transaction-label"].forEach(r=>this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(`slot[name="${r}"]`),r)),this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector("footer"),"footer");let t=this.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.#e.style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.variant!==_||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((t,r)=>{let n=Math.max(ae,parseInt(window.getComputedStyle(t).height)||0),a=parseInt(this.#e.style.getPropertyValue(Y(r+1)))||0;n>a&&this.#e.style.setProperty(Y(r+1),`${n}px`)})}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(N,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(z,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let r=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(r)}):t.replaceWith(r)}}};customElements.define(f,l);
 //# sourceMappingURL=merch-card.js.map
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
index 182a36ae3e..154df0f8d1 100644
--- a/test/blocks/merch-card/merch-card.test.js
+++ b/test/blocks/merch-card/merch-card.test.js
@@ -397,7 +397,7 @@ describe('Merch Card with Offer Selection', () => {
     expect(document.querySelector('merch-quantity-select')).to.not.exist;
   });
 
-  it('should handle callout-text with h6 and em tags', async () => {
+  it('should handle callout-content with h6 and em tags', async () => {
     document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/callout.html');
 
     const merchCards = document.querySelectorAll('.merch-card');
@@ -405,18 +405,17 @@ describe('Merch Card with Offer Selection', () => {
     await delay();
 
     // Assert
-    const calloutSlot = segmentCard.querySelector('[slot="callout-text"]');
+    const calloutSlot = segmentCard.querySelector('[slot="callout-content"]');
     expect(calloutSlot).to.exist;
 
-    const calloutContentWrapper = calloutSlot.querySelector('.callout-content-wrapper-with-icon');
+    const calloutContentWrapper = calloutSlot.querySelector('div > div');
     expect(calloutContentWrapper).to.exist;
-    expect(calloutContentWrapper.classList.contains('callout-content-wrapper-with-icon')).to.be.true;
 
     const imgElement = calloutContentWrapper.querySelector('img.callout-icon');
     expect(imgElement).to.exist;
     expect(imgElement.title).to.equal('this is a dummy tooltip text');
 
-    const calloutContent = calloutContentWrapper.querySelector('div');
+    const calloutContent = calloutContentWrapper.querySelector('div > div');
     expect(calloutContent).to.exist;
     expect(calloutContent.textContent.trim()).to.equal('AI Assistant add-on available');
 

From 03980fd87b8719fcdbea55fd558b84239bba3e62 Mon Sep 17 00:00:00 2001
From: Sanjay Rai <sanrai@adobe.com>
Date: Mon, 29 Jul 2024 02:29:00 -0700
Subject: [PATCH 5/6] MWPW-153580: Add Opt-In Feature for CaaS Badge Display
 (#2625)

* Add Opt-In Feature for CaaS Badge Display

* Updates for unit tests

---------

Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>
---
 libs/blocks/caas-config/caas-config.js                   | 1 +
 libs/blocks/caas/utils.js                                | 2 ++
 test/blocks/caas-config/caas-config.test.html            | 2 +-
 test/blocks/caas-config/expectedConfigs/defaultConfig.js | 1 +
 test/blocks/caas/utils.test.js                           | 3 +++
 5 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js
index a010c60df7..92b5b566c7 100644
--- a/libs/blocks/caas-config/caas-config.js
+++ b/libs/blocks/caas-config/caas-config.js
@@ -364,6 +364,7 @@ const UiPanel = () => html`
   <${Input} label="Use Overlay Links" prop="useOverlayLinks" type="checkbox" />
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
   <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
+  <${Input} label="Enable showing card badges (by default hidden)" prop="showCardBadges" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
   <${Select} options=${defaultOptions.cardTitleAccessibilityLevel} prop="cardTitleAccessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />
diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js
index 6155e2a58a..68ab6c5819 100644
--- a/libs/blocks/caas/utils.js
+++ b/libs/blocks/caas/utils.js
@@ -580,6 +580,7 @@ export const getConfig = async (originalState, strs = {}) => {
       }&size=${state.collectionSize || state.totalCardsToShow}${localesQueryParam}${debug}${flatFile}`,
       fallbackEndpoint: state.fallbackEndpoint,
       totalCardsToShow: state.totalCardsToShow,
+      showCardBadges: state.showCardBadges,
       cardStyle: state.cardStyle,
       showTotalResults: state.showTotalResults,
       i18n: {
@@ -818,6 +819,7 @@ export const defaultState = {
   secondaryTags: [],
   secondarySource: [],
   setCardBorders: false,
+  showCardBadges: false,
   showFooterDivider: false,
   showBookmarksFilter: false,
   showBookmarksOnCards: false,
diff --git a/test/blocks/caas-config/caas-config.test.html b/test/blocks/caas-config/caas-config.test.html
index 0e6e76a227..fa0456dff4 100644
--- a/test/blocks/caas-config/caas-config.test.html
+++ b/test/blocks/caas-config/caas-config.test.html
@@ -312,7 +312,7 @@
         // The header is the part before the first / in the hash
         // Due to this we only compare the characters after the header value
 
-        const hashWithoutHeader = 'bNhD9Lzw7Wafb9qDb2ruLGPBm3diLHoqgGJMjiTDFUcmhvUrR/16Q+nacm/TecL74ZvivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZ7b5AhSITYkIeHMjTpqodeq/JiiwH4zEaqC0VWh6g6P0FpjUFy67Zgi0GyyPRqQJ32kiye4yR2hBT/M36CSPBqT03JuZSgsk/lKiLkjvmoNngg5QxoaM2mpstntGI7PeFkEMpK7a9i9rpClwjpvRY6Yglx9fgXn8fMMugLTqRiU+/LJcv8P6nVlx2FFo+NDWO/ZBtL0QmJIDPut+74OOB4JmqNTjV+WZ4SOFEJv72aHKxEIq+EG/he7MlUEM3lfZwNLgCa9H5EXaQ8+Nx+EeratI2NvRyuXwERUf8KKm6k6Wu0MEHqPXdWKWIJ87aka3QdreA79IEhSpm2ZXUQWONORhzBHl6GsOJhcgROLjZyVwbRvd0Hry3wCpoo3Zg4/UlAVXAWg70liR0XTGY8wQvtBSZIDdAszh+nfo7g/YlXZ6qmpuhR0VgTrf567tYiBJBDW5KrXDNsFHz/7HwCDwC48YyujOYwam2Vy0yYIsABfY66P/vMHbdQEMhCSfmEeoIEagXcnhTwZb4auzImibWturGaWh7lxC5qwM1FNqmtj5YXaWPIQ4UqMTU5MlGtY3yG5k/AljWnGLbG3xXUwekmxrJN4+HEiu8Hw8akFiSUejenGk14tAHw36Hbpca+NtCeAQny2eNpr8aj5KsAteMFQ7QnoKT2IMcG7Mip6aD40u6PBMxukd91irqYcL0TfXPSUS3uVc773hy2Ytygm2ubPaplhl0II67OpU9EuQ4au3Byx+wR7wBvpDSuZ7cWiIwh2Di9Kn+XEu0V7yjOtSzAy3+Fayiag9VbfRkqSeDOM17cjxDn7vhn4F9Rtcl9PgPZbRh5xB6dGfSbkdkRPZpuVxeESlLFNl9i7cPxZXjBF6F60QiSricvPi2EAyFb1X48+UZbUQ0dQVyXN5nHXeLGLDr0eEo+LjJ4luGPm4zhQza+AO+82vdLTrV3dNCcEz1M4LStuieOFHeRyKqJGnuQHH8YjMWInjcRtfR2xA0eHw9ozPQbLU9jZqaPJSBmW5smuDRbWxOcXr++x/O+0/8SwgAAA==';
+        const hashWithoutHeader = 'bNhD9Fz47Wafb9kFva+8uYsCbdWMv+lAExZgcSYQpjkoO7VWK/ntB6u44b9I55FzOXPivAKU0a7JgvuI/AT3vwEHlRfbXt4UAC6ZhLf2ajEEZz32BCkUmxIQ8OJCnTVU79F6TFVkOxmM8oLZUaHmAorcXmNYULLtmC7YYTh6JThW400aS3WP01LqY4m/WTxgJTu25MTGWEkz+oURdlNwxB80GH6SMAR210dxs8YxGZL8vhBxSWbHtTdROV+AaMaXHTEcsGb4G9/r7gFkGbdGJTHz6Zbl8gfc/teKyo9Dyoalx1EO2WohMSACfdb93wccLwTNVa3Cqs83wkNyJTPzt0eRiIRR9Id7C92ZLoAY1lfZwNLgCa9H5EXaQ8+Nx+EeratI2Cnq5XD6CoiN+lFTdyVJX6OAD1PpuzFLEG2ftyFZouyrguzRBoYpRdil10JhjDsYcQZ6eRndiIXIEDm52M9eG0T2dB+stsAraqB3YWL7UQBWwlgO9JQmdKgZznuCFliIT5AZo5sevk74zaF/S5amquRk0KgJzquav72IhSgQ1mCm1wjXDRs3/x8Qj8AiMG8vozmAGo9peSWTAFgEK7Pug/7/DqLqBhkJqnBhHqCNEoF7I4c0OtsRXY0fWNDG3VTdOg+xdQOSuLtRQaJtkfbC6Sh+DHyhQiemRJxu7bWy/kfkjgGXNybe9wXc5dUCq1Ei+eTyUWOH9eNGAxJKMQvfmTNsjDn0w7HfodknA3xbCIzhZPms0fWk8SrIKXDNmOEB7Ck5iD3IUZkVOTQfHl3RJOKgC5/AzEaN71GetYptMmF5r/5x66zb3aueFSCb7Xp1gm6sz+5TiDDoQxxWe1BgJchxb8MHLH7BHvAG+kNK5nhQzEZhDMHEoVX+vJdrK76gO9exCi38Fq6jaQ1UbPdn16UAc8j05nqHP3U6YgX1E1yn0+A9ptG7nEHp0Z9JuR2RE9mm5XF4RKUoU2X2Lt+/HleEEXrnrekeUcDl58W0hGArfNufPd2o8I+JRVyDHnX7WceWIAbueKI5zEBdcfOLQxyWnkEEbf8B3fq27/ae6Oi0Ex1A/Iyhti+7lE+V9JGKXpJ47UJzKKMZCBI/baDpaG5wGj69ndAaarbansacm72dgphsLKHh0G5tTHKr//gcEWd70YggAAA==';
 
         const hash = copyTextArea.value.split('#')[1].trim();
 
diff --git a/test/blocks/caas-config/expectedConfigs/defaultConfig.js b/test/blocks/caas-config/expectedConfigs/defaultConfig.js
index afaed3b076..0e9b72de15 100644
--- a/test/blocks/caas-config/expectedConfigs/defaultConfig.js
+++ b/test/blocks/caas-config/expectedConfigs/defaultConfig.js
@@ -26,6 +26,7 @@ const defaultConfig = {
     },
     detailsTextOption: 'default',
     setCardBorders: false,
+    showCardBadges: false,
     showFooterDivider: false,
     useOverlayLinks: false,
     banner: {
diff --git a/test/blocks/caas/utils.test.js b/test/blocks/caas/utils.test.js
index 04a1b300a0..be7df8253f 100644
--- a/test/blocks/caas/utils.test.js
+++ b/test/blocks/caas/utils.test.js
@@ -186,6 +186,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -448,6 +449,7 @@ describe('getConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},
@@ -771,6 +773,7 @@ describe('getFloodgateCaasConfig', () => {
           titleHeadingLevel: 'h3',
         },
         setCardBorders: false,
+        showCardBadges: false,
         showFooterDivider: false,
         useOverlayLinks: false,
         additionalRequestParams: {},

From c00c7777499c8b1ba594016ea735818a54a7b64e Mon Sep 17 00:00:00 2001
From: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Date: Mon, 29 Jul 2024 12:33:04 +0300
Subject: [PATCH 6/6] [MWPW-153611] [Gray Box] environment aware links (#2622)

make graybox urls environment aware
---
 libs/blocks/graybox/graybox.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/libs/blocks/graybox/graybox.js b/libs/blocks/graybox/graybox.js
index 3143405ded..f5721cec28 100644
--- a/libs/blocks/graybox/graybox.js
+++ b/libs/blocks/graybox/graybox.js
@@ -264,7 +264,16 @@ const setupChangedEls = (globalNoClick) => {
   }
 };
 
+const transformLinks = () => {
+  const grayboxHostname = window.location.hostname;
+  const consumerHostname = grayboxHostname.replace(/[^.]+\.(?:([^.]+)-)?graybox\./, (_, sub) => `${sub || 'www'}.`);
+  document.querySelectorAll(`a[href*="${consumerHostname}"]`).forEach((el) => {
+    el.href = el.href.replace(consumerHostname, grayboxHostname);
+  });
+};
+
 const grayboxThePage = (grayboxEl, grayboxMenuOff) => () => {
+  transformLinks();
   document.body.classList.add(CLASS.GRAYBOX_BODY);
   const globalNoClick = grayboxEl.classList.contains(CLASS.NO_CLICK)
   || grayboxEl.classList.contains(OPTION.NO_CLICK);