diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index 3e025a8a5e7..abb10c361cf 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -108,6 +108,15 @@ const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', const MINI_COMPARE_CHART = 'mini-compare-chart'; const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART]; +// Force cards to refresh once they become visible so that the footer rows are properly aligned. +const sectionObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') { + sectionObserver.disconnect(mutation.target); + [...mutation.target.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate()); + } + }); +}); const textStyles = { H5: 'detail-m', @@ -355,6 +364,10 @@ const init = async (el) => { } let footerRows; if (cardType === MINI_COMPARE_CHART) { + const container = el.closest('[data-status="decorated"]'); + if (container) { + sectionObserver.observe(container, { attributes: true, subtree: false }); + } footerRows = getMiniCompareChartFooterRows(el); } const images = el.querySelectorAll('picture'); diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js index 0dffe051878..34b76199035 100644 --- a/libs/deps/merch-card.js +++ b/libs/deps/merch-card.js @@ -1,4 +1,4 @@ -// Tue, 30 Jan 2024 21:29:32 GMT +// Wed, 31 Jan 2024 17:14:26 GMT import{html as n,LitElement as T}from"/libs/deps/lit-all.min.js";import{css as x,unsafeCSS as f}from"/libs/deps/lit-all.min.js";var p="(max-width: 767px)";var i="(min-width: 768px)",c="(min-width: 1200px)",s="(min-width: 1600px)";var y=x` :host { position: relative; @@ -16,6 +16,26 @@ import{html as n,LitElement as T}from"/libs/deps/lit-all.min.js";import{css as x border: 1px solid var(--consonant-merch-card-border-color); } + :host(.placeholder) { + visibility: hidden; + } + + :host([variant='special-offers']) { + min-height: 439px; + } + + :host([variant='catalog']) { + min-height: 330px; + } + + :host([variant='plans']) { + min-height: 348px; + } + + :host([variant='segment']) { + min-height: 214px; + } + .invisible { visibility: hidden; } @@ -254,7 +274,7 @@ import{html as n,LitElement as T}from"/libs/deps/lit-all.min.js";import{css as x grid-column: span 4; } } - `),h};var[u,b,k,z,$,E]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var C=document.createElement("style");C.innerHTML=` + `),h};var[u,v,k,z,$,E]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var C=document.createElement("style");C.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; @@ -956,7 +976,7 @@ merch-card .footer-row-cell:nth-child(8) { min-height: var(--consonant-merch-card-footer-row-8-min-height); } -`;document.head.appendChild(C);var S="MERCH-CARD",M="merch-card",_=32,A="mini-compare-chart",L=h=>`--consonant-merch-card-footer-row-${h}-min-height`,v=class extends T{static properties={name:{type:String},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},icons:{type:Array},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},title:{type:String},description:{type:String},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[r,t,a]=e.split(",");return{PUF:r,ABM:t,M2M:a}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(r=>{let[t,a,o]=r.split(":"),d=Number(a);return[t,{order:isNaN(d)?void 0:d,size:o}]})),toAttribute:e=>Object.entries(e).map(([r,{order:t,size:a}])=>[r,t,a].filter(o=>o!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0}};static styles=[y,...w()];constructor(){super(),this.filters={},this.types=""}#e;updated(e){e.has("badgeBackgroundColor")&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(()=>this.adjustFooterRow())}renderIcons(){return this.icons&&this.icons.length>0?n` +`;document.head.appendChild(C);var S="MERCH-CARD",M="merch-card",_=32,A="mini-compare-chart",L=h=>`--consonant-merch-card-footer-row-${h}-min-height`,b=class extends T{static properties={name:{type:String},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},icons:{type:Array},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},title:{type:String},description:{type:String},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[r,t,a]=e.split(",");return{PUF:r,ABM:t,M2M:a}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(r=>{let[t,a,o]=r.split(":"),d=Number(a);return[t,{order:isNaN(d)?void 0:d,size:o}]})),toAttribute:e=>Object.entries(e).map(([r,{order:t,size:a}])=>[r,t,a].filter(o=>o!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0}};static styles=[y,...w()];constructor(){super(),this.filters={},this.types=""}#e;updated(e){e.has("badgeBackgroundColor")&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(()=>this.adjustFooterRows())}renderIcons(){return this.icons&&this.icons.length>0?n`
${this.icons.map(e=>{let r=this.querySelector('div[slot="body-xs"]')?.querySelector('a[href$="#mnemonic-link"]');return r&&(r.href=r.href.replace("#mnemonic-link","")),r?n` @@ -1086,5 +1106,5 @@ merch-card .footer-row-cell:nth-child(8) {
- `}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener("selection-changed",this.handleQuantitySelection)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler)}keydownHandler(e){let r=document.activeElement?.closest(S);if(!r)return;function t(R,O){let g=document.elementFromPoint(R,O)?.closest(S);g&&(e.preventDefault(),e.stopImmediatePropagation(),g.focus(),g.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:a,y:o,width:d,height:m}=r.getBoundingClientRect(),l=64;switch(e.code===E?e.shiftKey?u:b:e.code){case u:t(a-l,o);break;case b:t(a+d+l,o);break;case k:t(a,o-l);break;case z:t(a,o+m+l);break;case $:this.footerSlot?.querySelector("a")?.click();break}}adjustFooterRow(){if(this.variant!==A||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((r,t)=>{let a=Math.max(_,parseInt(window.getComputedStyle(r).height)||0),o=parseInt(this.#e.style.getPropertyValue(L(t+1)))||0;a>o&&this.#e.style.setProperty(L(t+1),`${a}px`)})}};customElements.define(M,v);export{M as MERCH_CARD,S as MERCH_CARD_NODE_NAME,v as MerchCard,L as getRowMinHeightPropertyName}; + `}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener("selection-changed",this.handleQuantitySelection)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler)}keydownHandler(e){let r=document.activeElement?.closest(S);if(!r)return;function t(R,O){let g=document.elementFromPoint(R,O)?.closest(S);g&&(e.preventDefault(),e.stopImmediatePropagation(),g.focus(),g.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:a,y:o,width:d,height:m}=r.getBoundingClientRect(),l=64;switch(e.code===E?e.shiftKey?u:v:e.code){case u:t(a-l,o);break;case v:t(a+d+l,o);break;case k:t(a,o-l);break;case z:t(a,o+m+l);break;case $:this.footerSlot?.querySelector("a")?.click();break}}adjustFooterRows(){if(this.variant!==A||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((r,t)=>{let a=Math.max(_,parseInt(window.getComputedStyle(r).height)||0),o=parseInt(this.#e.style.getPropertyValue(L(t+1)))||0;a>o&&this.#e.style.setProperty(L(t+1),`${a}px`)})}};customElements.define(M,b);export{M as MERCH_CARD,S as MERCH_CARD_NODE_NAME,b as MerchCard,L as getRowMinHeightPropertyName}; //# 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 9972d5d1fcf..32fab5333bd 100644 --- a/test/blocks/merch-card/merch-card.test.js +++ b/test/blocks/merch-card/merch-card.test.js @@ -309,6 +309,7 @@ describe('Mini Compare Chart Merch Card', () => { it('Supports Mini Compare Chart with footer rows', async () => { document.body.innerHTML = await readFile({ path: './mocks/mini-compare-chart.html' }); const merchCard = await init(document.querySelector('.merch-card.mini-compare-chart')); + document.querySelector('.section').removeAttribute('data-status'); const heading = merchCard.querySelector('h2[slot="heading-m"]'); const body = merchCard.querySelector('div[slot="body-m"]'); const priceHeading = merchCard.querySelector('h2[slot="heading-m-price"]'); diff --git a/test/blocks/merch-card/mocks/mini-compare-chart.html b/test/blocks/merch-card/mocks/mini-compare-chart.html index a8b053f4354..002d4d67ffd 100644 --- a/test/blocks/merch-card/mocks/mini-compare-chart.html +++ b/test/blocks/merch-card/mocks/mini-compare-chart.html @@ -1,4 +1,4 @@ -
+
#EDCC2D, #000000