diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js index 48fc34b052..875d1fef4c 100644 --- a/libs/blocks/caas-config/caas-config.js +++ b/libs/blocks/caas-config/caas-config.js @@ -827,10 +827,21 @@ const CopyBtn = () => { }, 2000); }; + const removeDefaultsFromState = (fullState) => { + const reducedState = {}; + Object.keys(fullState).forEach((key) => { + if (JSON.stringify(fullState[key]) !== JSON.stringify(defaultState[key])) { + reducedState[key] = fullState[key]; + } + }); + return reducedState; + }; + const getUrl = async () => { const url = new URL(window.location.href); url.search = ''; - const hashStr = await getEncodedObject(state, fgKeyReplacer); + const reducedState = removeDefaultsFromState(state); + const hashStr = await getEncodedObject(reducedState, fgKeyReplacer); // starts with ~~ to differentiate from old hash format url.hash = `~~${hashStr}`; return url.href; @@ -856,7 +867,7 @@ const CopyBtn = () => { hour12: false, }); const collectionName = state.collectionName ? `- ${state.collectionName} ` : ''; - link.textContent = `Content as a Service v2 ${collectionName}- ${dateStr}${state.doNotLazyLoad ? ' (no-lazy)' : ''}`; + link.textContent = `Content as a Service v3 ${collectionName}- ${dateStr}${state.doNotLazyLoad ? ' (no-lazy)' : ''}`; const blob = new Blob([link.outerHTML], { type: 'text/html' }); const data = [new ClipboardItem({ [blob.type]: blob })]; diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index b61afdcf11..9126740c39 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -1027,27 +1027,28 @@ const getSource = async () => { }; export default async function init(block) { - try { - const { mep } = getConfig(); - const sourceUrl = await getSource(); - const [url, hash = ''] = sourceUrl.split('#'); - if (hash === '_noActiveItem') { - setDisableAEDState(); - } - const content = await fetchAndProcessPlainHtml({ url }); - if (!content) return null; - const gnav = new Gnav({ - content, - block, - }); - gnav.init(); - block.setAttribute('daa-im', 'true'); - const mepMartech = mep?.martech || ''; - block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`); - if (isDarkMode()) block.classList.add('feds--dark'); - return gnav; - } catch (e) { - lanaLog({ message: 'Could not create global navigation.', e, tags: 'errorType=error,module=gnav' }); - return null; + const { mep } = getConfig(); + const sourceUrl = await getSource(); + const [url, hash = ''] = sourceUrl.split('#'); + if (hash === '_noActiveItem') { + setDisableAEDState(); } + const content = await fetchAndProcessPlainHtml({ url }); + if (!content) { + const error = new Error('Could not create global navigation. Content not found!'); + error.tags = 'errorType=error,module=gnav'; + error.url = url; + lanaLog({ message: error.message, error, tags: 'errorType=error,module=gnav' }); + throw error; + } + const gnav = new Gnav({ + content, + block, + }); + gnav.init(); + block.setAttribute('daa-im', 'true'); + const mepMartech = mep?.martech || ''; + block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`); + if (isDarkMode()) block.classList.add('feds--dark'); + return gnav; } diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 5a663dd70c..fcbd01abac 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -330,6 +330,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true e: `${res.statusText} url: ${res.url}`, tags: 'errorType=info,module=utilities', }); + return null; } const text = await res.text(); const { body } = new DOMParser().parseFromString(text, 'text/html'); diff --git a/libs/blocks/pdf-viewer/pdf-viewer.js b/libs/blocks/pdf-viewer/pdf-viewer.js index 161d22a994..65a313485d 100644 --- a/libs/blocks/pdf-viewer/pdf-viewer.js +++ b/libs/blocks/pdf-viewer/pdf-viewer.js @@ -31,6 +31,7 @@ const init = async (a) => { const id = `${PDF_RENDER_DIV_ID}_${Math.random().toString().slice(2)}`; const pdfViewerDiv = createTag('div', { class: 'pdf-container', id }); + pdfViewerDiv.dataset.pdfSrc = url; a?.insertAdjacentElement('afterend', pdfViewerDiv); a?.remove(); diff --git a/libs/blocks/preflight/panels/general.js b/libs/blocks/preflight/panels/general.js index 70c22b5553..08faf544bf 100644 --- a/libs/blocks/preflight/panels/general.js +++ b/libs/blocks/preflight/panels/general.js @@ -1,7 +1,12 @@ import { html, signal, useEffect } from '../../../deps/htm-preact.js'; import userCanPublishPage from '../../../tools/utils/publish.js'; -const NOT_FOUND = { preview: { lastModified: 'Not found' }, live: { lastModified: 'Not found' } }; +const DEF_NOT_FOUND = 'Not found'; +const DEF_NEVER = 'Never'; +const NOT_FOUND = { + preview: { lastModified: DEF_NOT_FOUND }, + live: { lastModified: DEF_NOT_FOUND }, +}; const content = signal({}); @@ -17,9 +22,9 @@ async function getStatus(url) { const resp = await fetch(adminUrl); if (!resp.ok) return {}; const json = await resp.json(); + const preview = json.preview.lastModified || DEF_NEVER; + const live = json.live.lastModified || DEF_NEVER; const publish = await userCanPublishPage(json, false); - const preview = json.preview.lastModified || 'Never'; - const live = json.live.lastModified || 'Never'; const edit = json.edit.url; return { url, edit, preview, live, publish }; } @@ -40,7 +45,8 @@ function getUrl(el) { try { return new URL(dataPath); } catch { - const path = dataPath ? `${window.location.origin}${dataPath}` : el.href; + const elPath = el.href || (el.src && el.nodeName === 'IFRAME' ? el?.parentElement.dataset.pdfSrc : el.src); + const path = dataPath ? `${window.location.origin}${dataPath}` : elPath; return new URL(path); } } @@ -65,6 +71,8 @@ async function setContent() { page: { items: [{ url: new URL(window.location.href), edit: null, preview: 'Fetching', live: 'Fetching' }] }, fragments: { items: findLinks('main .fragment, a[data-modal-path], [data-path]') }, links: { items: findLinks('main a[href^="/"') }, + svgs: { items: findLinks('img[src$=".svg"') }, + pdfs: { items: findLinks('main iframe') }, nav: { items: findLinks('header a[href^="/"'), closed: true }, }; @@ -116,6 +124,14 @@ function toggleGroup(name) { content.value = { ...content.value }; } +function checkPublishing(item, isFetching) { + if ((item.preview === DEF_NEVER && item.live === DEF_NEVER) + || (item.preview === DEF_NOT_FOUND && item.live === DEF_NOT_FOUND)) { + return ' not-found'; + } + return isFetching; +} + function prettyDate(string) { if (Number.isNaN(Date.parse(string))) return string; @@ -152,7 +168,7 @@ function Item({ name, item, idx }) { if (!item.url) return undefined; return html` -
handleChange(e.target, name, idx)}>

${prettyPath(item.url)}

${item.edit && html`EDIT`}

diff --git a/libs/blocks/preflight/preflight.css b/libs/blocks/preflight/preflight.css index 394b09519b..73a31fab35 100644 --- a/libs/blocks/preflight/preflight.css +++ b/libs/blocks/preflight/preflight.css @@ -155,7 +155,8 @@ p.preflight-content-heading-edit { bottom: 0; } -.preflight-group-row.preflight-group-detail.is-checked::before { +.preflight-group-row.preflight-group-detail.is-checked::before, +.preflight-group-row.preflight-group-detail.is-checked.not-found::before { background-image: url('./img/check.svg'); background-repeat: no-repeat; font-weight: 700; @@ -177,6 +178,12 @@ a.preflight-edit { height: 32px; } +.preflight-group-row.preflight-group-detail.not-found::before { + background-image: url('./img/red-error.svg'); + background-repeat: no-repeat; + font-weight: 700; +} + .preflight-group-items { max-height: 1000px; transition: max-height .2s ease-in-out; diff --git a/libs/blocks/quiz-entry/quiz-entry.js b/libs/blocks/quiz-entry/quiz-entry.js index 294a7cc18f..5ffecb10ed 100644 --- a/libs/blocks/quiz-entry/quiz-entry.js +++ b/libs/blocks/quiz-entry/quiz-entry.js @@ -3,6 +3,7 @@ import { getQuizEntryData, handleNext, handleSelections } from './utils.js'; import { mlField, getMLResults } from './mlField.js'; import { GetQuizOption } from './quizoption.js'; import { quizPopover, getSuggestions } from './quizPopover.js'; +import { getConfig } from '../../utils/utils.js'; export const locationWrapper = { redirect: (url) => { @@ -343,7 +344,8 @@ const App = ({ if (!dataLoaded || !selectedQuestion) return null; - return html`
+ const { locale } = getConfig(); + return html`

${quizLists.strings[selectedQuestion.questions].heading}

${quizLists.strings[selectedQuestion.questions]['sub-head']}

diff --git a/libs/blocks/quiz-entry/quizoption.js b/libs/blocks/quiz-entry/quizoption.js index 83a3e710f0..031d1ff0c5 100644 --- a/libs/blocks/quiz-entry/quizoption.js +++ b/libs/blocks/quiz-entry/quizoption.js @@ -1,6 +1,7 @@ import { html, useState, useEffect } from '../../deps/htm-preact.js'; import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js'; import { createTag } from '../../utils/utils.js'; +import { removeLeftToRightMark } from '../quiz/utils.js'; export const OptionCard = ({ text, title, image, icon, iconTablet, iconDesktop, options, @@ -18,13 +19,13 @@ export const OptionCard = ({ const getIconHtml = () => html`
- ${iconDesktop && html``} - ${iconTablet && html``} - + ${iconDesktop && html``} + ${iconTablet && html``} +
`; - const imageHtml = image ? html`
` : null; + const imageHtml = image ? html`
` : null; const titleHtml = title ? html`

${title}

` : null; const textHtml = text ? html`

${text}

` : null; diff --git a/libs/blocks/quiz-entry/utils.js b/libs/blocks/quiz-entry/utils.js index dfca985432..787b4ee79a 100644 --- a/libs/blocks/quiz-entry/utils.js +++ b/libs/blocks/quiz-entry/utils.js @@ -1,4 +1,4 @@ -import { getNormalizedMetadata } from '../quiz/utils.js'; +import { getNormalizedMetadata, getLocalizedURL } from '../quiz/utils.js'; export async function fetchJson(path) { const response = await fetch(path); @@ -104,8 +104,8 @@ export const handleSelections = (prevSelections, selectedQuestion, selections) = export async function getQuizEntryData(el) { const blockData = getNormalizedMetadata(el); - const dataPath = blockData.data.text; - const quizPath = blockData.quiz.text; + const dataPath = getLocalizedURL(blockData.data.text); + const quizPath = getLocalizedURL(blockData.quiz.text); const maxQuestions = Number(blockData.maxquestions?.text) || 10; const analyticsType = blockData.analyticstype?.text; const analyticsQuiz = blockData.analyticsquiz?.text; diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index b490e941aa..fec55d0a74 100644 --- a/libs/deps/mas/merch-card.js +++ b/libs/deps/mas/merch-card.js @@ -1,6 +1,6 @@ -import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as U,css as de}from"../lit-all.min.js";var a=class extends me{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?U` +import{LitElement as ze}from"../lit-all.min.js";import{LitElement as le,html as U,css as pe}from"../lit-all.min.js";var n=class extends le{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?U` ${this.alt} - `:U` ${this.alt}`}static styles=de` + `:U` ${this.alt}`}static styles=pe` :host { --img-width: 32px; --img-height: 32px; @@ -23,7 +23,7 @@ import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as width: var(--img-width); height: var(--img-height); } - `};customElements.define("merch-icon",a);import{css as M,unsafeCSS as A}from"../lit-all.min.js";var g="(max-width: 767px)",k="(max-width: 1199px)",h="(min-width: 768px)",s="(min-width: 1200px)",d="(min-width: 1600px)";var G=M` + `};customElements.define("merch-icon",n);import{css as O,unsafeCSS as M}from"../lit-all.min.js";var g="(max-width: 767px)",k="(max-width: 1199px)",h="(min-width: 768px)",s="(min-width: 1200px)",m="(min-width: 1600px)";var q=O` :host { position: relative; display: flex; @@ -234,9 +234,9 @@ import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as display: flex; gap: 8px; } -`,q=()=>{let r=[M` +`,j=()=>{let t=[O` /* Tablet */ - @media screen and ${A(h)} { + @media screen and ${M(h)} { :host([size='wide']), :host([size='super-wide']) { grid-column: span 3; @@ -247,18 +247,18 @@ import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as } /* Laptop */ - @media screen and ${A(s)} { + @media screen and ${M(s)} { :host([size='super-wide']) { grid-column: span 3; } - `];return r.push(M` + `];return t.push(O` /* Large desktop */ - @media screen and ${A(d)} { + @media screen and ${M(m)} { :host([size='super-wide']) { grid-column: span 4; } } - `),r};import{html as z}from"../lit-all.min.js";var m=class r{static styleMap={};card;insertVariantStyle(){if(!r.styleMap[this.card.variant]){r.styleMap[this.card.variant]=!0;let e=document.createElement("style");e.innerHTML=this.getGlobalCSS(),document.head.appendChild(e)}}constructor(e){this.card=e,this.insertVariantStyle()}get badge(){let e;if(!(!this.card.badgeBackgroundColor||!this.card.badgeColor||!this.card.badgeText))return this.evergreen&&(e=`border: 1px solid ${this.card.badgeBackgroundColor}; border-right: none;`),z` + `),t};import{html as L}from"../lit-all.min.js";var d=class t{static styleMap={};card;insertVariantStyle(){if(!t.styleMap[this.card.variant]){t.styleMap[this.card.variant]=!0;let e=document.createElement("style");e.innerHTML=this.getGlobalCSS(),document.head.appendChild(e)}}constructor(e){this.card=e,this.insertVariantStyle()}get badge(){let e;if(!(!this.card.badgeBackgroundColor||!this.card.badgeColor||!this.card.badgeText))return this.evergreen&&(e=`border: 1px solid ${this.card.badgeBackgroundColor}; border-right: none;`),L`
${this.card.badgeText}
- `}get cardImage(){return z`
+ `}get cardImage(){return L`
${this.badge} -
`}getGlobalCSS(){return""}get evergreen(){return this.card.classList.contains("intro-pricing")}get promoBottom(){return this.card.classList.contains("promo-bottom")}get headingSelector(){return'[slot="heading-xs"]'}get secureLabelFooter(){let e=this.card.secureLabel?z``}getGlobalCSS(){return""}get evergreen(){return this.card.classList.contains("intro-pricing")}get promoBottom(){return this.card.classList.contains("promo-bottom")}get headingSelector(){return'[slot="heading-xs"]'}get secureLabelFooter(){let e=this.card.secureLabel?L`${this.card.secureLabel}`:"";return z`
${e}
`}async adjustTitleWidth(){let e=this.card.getBoundingClientRect().width,t=this.card.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.card.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}postCardUpdateHook(){}connectedCallbackHook(){}disconnectedCallbackHook(){}renderLayout(){}};import{html as P,css as le}from"../lit-all.min.js";function F(){return window.matchMedia("(max-width: 767px)").matches}function j(){return window.matchMedia("(max-width: 1024px)").matches}var K="merch-offer-select:ready",I="merch-card:ready",W="merch-card:action-menu-toggle";var O="merch-storage:change",R="merch-quantity-selector:change";var Y=` + >`:"";return L`
${e}
`}async adjustTitleWidth(){let e=this.card.getBoundingClientRect().width,r=this.card.badgeElement?.getBoundingClientRect().width||0;e===0||r===0||this.card.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-r-16)}px`)}postCardUpdateHook(){}connectedCallbackHook(){}disconnectedCallbackHook(){}renderLayout(){}};import{html as H,css as ge}from"../lit-all.min.js";function F(){return window.matchMedia("(max-width: 767px)").matches}function K(){return window.matchMedia("(max-width: 1024px)").matches}var I="merch-offer-select:ready",W="merch-card:ready",Y="merch-card:action-menu-toggle";var R="merch-storage:change",P="merch-quantity-selector:change";var Q=` :root { --consonant-merch-card-catalog-width: 276px; --consonant-merch-card-catalog-icon-size: 40px; @@ -308,7 +308,7 @@ import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.catalog { grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); } @@ -359,12 +359,12 @@ merch-card[variant="catalog"] .payment-details { font-style: italic; font-weight: 400; line-height: var(--consonant-merch-card-body-line-height); -}`;var u=class extends m{constructor(e){super(e)}renderLayout(){return P`
+}`;var u=class extends d{constructor(e){super(e)}renderLayout(){return H`
${this.badge}
@@ -378,14 +378,14 @@ merch-card[variant="catalog"] .payment-details { - ${this.promoBottom?"":P``} - ${this.promoBottom?P``:""}
${this.secureLabelFooter} - `}getGlobalCSS(){return Y}toggleActionMenu=e=>{let t=e?.type==="mouseleave"?!0:void 0,o=this.card.shadowRoot.querySelector('slot[name="action-menu-content"]');o&&(t||this.card.dispatchEvent(new CustomEvent(W,{bubbles:!0,composed:!0,detail:{card:this.card.name,type:"action-menu"}})),o.classList.toggle("hidden",t))};connectedCallbackHook(){this.card.addEventListener("mouseleave",this.toggleActionMenu)}disconnectedCallbackHook(){this.card.removeEventListener("mouseleave",this.toggleActionMenu)}static variantStyle=le` + `}getGlobalCSS(){return Q}toggleActionMenu=e=>{let r=e?.type==="mouseleave"?!0:void 0,o=this.card.shadowRoot.querySelector('slot[name="action-menu-content"]');o&&(r||this.card.dispatchEvent(new CustomEvent(Y,{bubbles:!0,composed:!0,detail:{card:this.card.name,type:"action-menu"}})),o.classList.toggle("hidden",r))};connectedCallbackHook(){this.card.addEventListener("mouseleave",this.toggleActionMenu)}disconnectedCallbackHook(){this.card.removeEventListener("mouseleave",this.toggleActionMenu)}static variantStyle=ge` :host([variant='catalog']) { min-height: 330px; width: var(--consonant-merch-card-catalog-width); @@ -403,7 +403,7 @@ merch-card[variant="catalog"] .payment-details { margin-left: var(--consonant-merch-spacing-xxs); box-sizing: border-box; } - `};import{html as H,css as pe}from"../lit-all.min.js";var Q=` + `};import{html as N,css as xe}from"../lit-all.min.js";var Z=` :root { --consonant-merch-card-ccd-action-width: 276px; --consonant-merch-card-ccd-action-min-height: 320px; @@ -435,23 +435,23 @@ merch-card[variant="ccd-action"] .price-strikethrough { } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.ccd-action { grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); } } -`;var f=class extends m{constructor(e){super(e)}getGlobalCSS(){return Q}renderLayout(){return H`
+`;var f=class extends d{constructor(e){super(e)}getGlobalCSS(){return Z}renderLayout(){return N`
${this.badge} - ${this.promoBottom?H``:H``} + ${this.promoBottom?N``:N``}
-
`}static variantStyle=pe` +
`}static variantStyle=xe` :host([variant='ccd-action']:not([size])) { width: var(--consonant-merch-card-ccd-action-width); } - `};import{html as v}from"../lit-all.min.js";var Z=` + `};import{html as v}from"../lit-all.min.js";var J=` :root { --consonant-merch-card-image-width: 300px; } @@ -482,12 +482,12 @@ merch-card[variant="ccd-action"] .price-strikethrough { } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.image { grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); } } -`;var L=class extends m{constructor(e){super(e)}getGlobalCSS(){return Z}renderLayout(){return v`${this.cardImage} +`;var T=class extends d{constructor(e){super(e)}getGlobalCSS(){return J}renderLayout(){return v`${this.cardImage}
@@ -504,7 +504,7 @@ merch-card[variant="ccd-action"] .price-strikethrough { `:v`
${this.secureLabelFooter} - `}`}};import{html as X}from"../lit-all.min.js";var J=` + `}`}};import{html as ee}from"../lit-all.min.js";var X=` :root { --consonant-merch-card-inline-heading-width: 300px; } @@ -535,12 +535,12 @@ merch-card[variant="ccd-action"] .price-strikethrough { } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.inline-heading { grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); } } -`;var T=class extends m{constructor(e){super(e)}getGlobalCSS(){return J}renderLayout(){return X` ${this.badge} +`;var _=class extends d{constructor(e){super(e)}getGlobalCSS(){return X}renderLayout(){return ee` ${this.badge}
@@ -548,7 +548,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
- ${this.card.customHr?"":X`
`} ${this.secureLabelFooter}`}};import{html as _,css as ge,unsafeCSS as te}from"../lit-all.min.js";var ee=` + ${this.card.customHr?"":ee`
`} ${this.secureLabelFooter}`}};import{html as $,css as ue,unsafeCSS as re}from"../lit-all.min.js";var te=` :root { --consonant-merch-card-mini-compare-chart-icon-size: 32px; --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; @@ -762,7 +762,7 @@ merch-card[variant="ccd-action"] .price-strikethrough { } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.mini-compare-chart { grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); } @@ -799,11 +799,11 @@ merch-card .footer-row-cell:nth-child(7) { merch-card .footer-row-cell:nth-child(8) { min-height: var(--consonant-merch-card-footer-row-8-min-height); } -`;var xe=32,b=class extends m{constructor(e){super(e)}#e;getRowMinHeightPropertyName=e=>`--consonant-merch-card-footer-row-${e}-min-height`;getContainer(){return this.#e=this.#e??this.card.closest('[class*="-merch-cards"]')??this.card.parentElement,this.#e}getGlobalCSS(){return ee}getMiniCompareFooter=()=>{let e=this.card.secureLabel?_` +`;var fe=32,b=class extends d{constructor(e){super(e)}#e;getRowMinHeightPropertyName=e=>`--consonant-merch-card-footer-row-${e}-min-height`;getContainer(){return this.#e=this.#e??this.card.closest('[class*="-merch-cards"]')??this.card.parentElement,this.#e}getGlobalCSS(){return te}getMiniCompareFooter=()=>{let e=this.card.secureLabel?$` ${this.card.secureLabel}`:_``;return _`
${e}
`};updateMiniCompareElementMinHeight(e,t){let o=`--consonant-merch-card-mini-compare-${t}-height`,l=Math.max(0,parseFloat(window.getComputedStyle(e).height)||0),p=parseFloat(this.getContainer().style.getPropertyValue(o))||0;l>p&&this.getContainer().style.setProperty(o,`${l}px`)}adjustMiniCompareBodySlots(){if(this.card.getBoundingClientRect().width<=2)return;this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","body-xxs","price-commitment","offers","promo-text","callout-content"].forEach(o=>this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(`slot[name="${o}"]`),o)),this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector("footer"),"footer");let t=this.card.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.getContainer().style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.card.getBoundingClientRect().width===0)return;[...this.card.querySelector('[slot="footer-rows"]')?.children].forEach((t,o)=>{let l=Math.max(xe,parseFloat(window.getComputedStyle(t).height)||0),p=parseFloat(this.getContainer().style.getPropertyValue(this.getRowMinHeightPropertyName(o+1)))||0;l>p&&this.getContainer().style.setProperty(this.getRowMinHeightPropertyName(o+1),`${l}px`)})}removeEmptyRows(){this.card.querySelectorAll(".footer-row-cell").forEach(t=>{let o=t.querySelector(".footer-row-cell-description");o&&!o.textContent.trim()&&t.remove()})}renderLayout(){return _`
+ >`:$``;return $`
${e}
`};updateMiniCompareElementMinHeight(e,r){let o=`--consonant-merch-card-mini-compare-${r}-height`,l=Math.max(0,parseFloat(window.getComputedStyle(e).height)||0),p=parseFloat(this.getContainer().style.getPropertyValue(o))||0;l>p&&this.getContainer().style.setProperty(o,`${l}px`)}adjustMiniCompareBodySlots(){if(this.card.getBoundingClientRect().width<=2)return;this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","body-xxs","price-commitment","offers","promo-text","callout-content"].forEach(o=>this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(`slot[name="${o}"]`),o)),this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector("footer"),"footer");let r=this.card.shadowRoot.querySelector(".mini-compare-chart-badge");r&&r.textContent!==""&&this.getContainer().style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.card.getBoundingClientRect().width===0)return;[...this.card.querySelector('[slot="footer-rows"]')?.children].forEach((r,o)=>{let l=Math.max(fe,parseFloat(window.getComputedStyle(r).height)||0),p=parseFloat(this.getContainer().style.getPropertyValue(this.getRowMinHeightPropertyName(o+1)))||0;l>p&&this.getContainer().style.setProperty(this.getRowMinHeightPropertyName(o+1),`${l}px`)})}removeEmptyRows(){this.card.querySelectorAll(".footer-row-cell").forEach(r=>{let o=r.querySelector(".footer-row-cell-description");o&&!o.textContent.trim()&&r.remove()})}renderLayout(){return $`
${this.badge}
@@ -815,7 +815,7 @@ merch-card .footer-row-cell:nth-child(8) { ${this.getMiniCompareFooter()} - `}async postCardUpdateHook(){F()?this.removeEmptyRows():(await Promise.all(this.card.prices.map(e=>e.onceSettled())),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows())}static variantStyle=ge` + `}async postCardUpdateHook(){F()?this.removeEmptyRows():(await Promise.all(this.card.prices.map(e=>e.onceSettled())),this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows())}static variantStyle=ue` :host([variant='mini-compare-chart']) > slot:not([name='icons']) { display: block; } @@ -831,7 +831,7 @@ merch-card .footer-row-cell:nth-child(8) { height: var(--consonant-merch-card-mini-compare-top-section-height); } - @media screen and ${te(k)} { + @media screen and ${re(k)} { [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { flex-direction: column; align-items: stretch; @@ -839,7 +839,7 @@ merch-card .footer-row-cell:nth-child(8) { } } - @media screen and ${te(s)} { + @media screen and ${re(s)} { :host([variant='mini-compare-chart']) footer { padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) @@ -887,7 +887,7 @@ merch-card .footer-row-cell:nth-child(8) { --consonant-merch-card-mini-compare-callout-content-height ); } - `};import{html as $,css as ue}from"../lit-all.min.js";var re=` + `};import{html as A,css as ve}from"../lit-all.min.js";var oe=` :root { --consonant-merch-card-plans-width: 300px; --consonant-merch-card-plans-icon-size: 40px; @@ -936,28 +936,28 @@ merch-card[variant="plans"] [slot="quantity-select"] { } /* Large desktop */ - @media screen and ${d} { + @media screen and ${m} { .four-merch-cards.plans { grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); } } -`;var y=class extends m{constructor(e){super(e)}getGlobalCSS(){return re}postCardUpdateHook(){this.adjustTitleWidth()}get stockCheckbox(){return this.card.checkboxLabel?$``:""}renderLayout(){return A` ${this.badge}
- ${this.promoBottom?"":$` `} + ${this.promoBottom?"":A` `} - ${this.promoBottom?$` `:""} + ${this.promoBottom?A` `:""} ${this.stockCheckbox}
- ${this.secureLabelFooter}`}static variantStyle=ue` + ${this.secureLabelFooter}`}static variantStyle=ve` :host([variant='plans']) { min-height: 348px; } @@ -965,7 +965,7 @@ merch-card[variant="plans"] [slot="quantity-select"] { :host([variant='plans']) ::slotted([slot='heading-xs']) { max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); } - `};import{html as N}from"../lit-all.min.js";var oe=` + `};import{html as B}from"../lit-all.min.js";var ne=` :root { --consonant-merch-card-product-width: 300px; } @@ -1000,21 +1000,21 @@ merch-card[variant="plans"] [slot="quantity-select"] { } /* Large desktop */ -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.product { grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); } } -`;var w=class extends m{constructor(e){super(e)}getGlobalCSS(){return oe}renderLayout(){return N` ${this.badge} +`;var w=class extends d{constructor(e){super(e)}getGlobalCSS(){return ne}renderLayout(){return B` ${this.badge}
- ${this.promoBottom?"":N``} + ${this.promoBottom?"":B``} - ${this.promoBottom?N``:""} + ${this.promoBottom?B``:""}
- ${this.secureLabelFooter}`}};import{html as B,css as fe}from"../lit-all.min.js";var ae=` + ${this.secureLabelFooter}`}};import{html as D,css as be}from"../lit-all.min.js";var ae=` :root { --consonant-merch-card-segment-width: 378px; } @@ -1060,23 +1060,23 @@ merch-card[variant="plans"] [slot="quantity-select"] { grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); } } -`;var E=class extends m{constructor(e){super(e)}getGlobalCSS(){return ae}postCardUpdateHook(){this.adjustTitleWidth()}renderLayout(){return B` ${this.badge} +`;var E=class extends d{constructor(e){super(e)}getGlobalCSS(){return ae}postCardUpdateHook(){this.adjustTitleWidth()}renderLayout(){return D` ${this.badge}
- ${this.promoBottom?"":B``} + ${this.promoBottom?"":D``} - ${this.promoBottom?B``:""} + ${this.promoBottom?D``:""}
- ${this.secureLabelFooter}`}static variantStyle=fe` + ${this.secureLabelFooter}`}static variantStyle=be` :host([variant='segment']) { min-height: 214px; } :host([variant='segment']) ::slotted([slot='heading-xs']) { max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); } - `};import{html as D,css as ve}from"../lit-all.min.js";var ne=` + `};import{html as V,css as ye}from"../lit-all.min.js";var ce=` :root { --consonant-merch-card-special-offers-width: 378px; } @@ -1119,29 +1119,29 @@ merch-card[variant="special-offers"] span[is="inline-price"][data-template="stri } } -@media screen and ${d} { +@media screen and ${m} { .four-merch-cards.special-offers { grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); } } -`;var S=class extends m{constructor(e){super(e)}getGlobalCSS(){return ne}get headingSelector(){return'[slot="detail-m"]'}renderLayout(){return D`${this.cardImage} +`;var S=class extends d{constructor(e){super(e)}getGlobalCSS(){return ce}get headingSelector(){return'[slot="detail-m"]'}renderLayout(){return V`${this.cardImage}
- ${this.evergreen?D` + ${this.evergreen?V`
- `:D` + `:V`
${this.secureLabelFooter} `} - `}static variantStyle=ve` + `}static variantStyle=ye` :host([variant='special-offers']) { min-height: 439px; } @@ -1153,7 +1153,7 @@ merch-card[variant="special-offers"] span[is="inline-price"][data-template="stri :host([variant='special-offers'].center) { text-align: center; } - `};import{html as be,css as ye}from"../lit-all.min.js";var ce=` + `};import{html as we,css as Ee}from"../lit-all.min.js";var ie=` :root { --consonant-merch-card-twp-width: 268px; --consonant-merch-card-twp-mobile-width: 300px; @@ -1245,7 +1245,7 @@ merch-card[variant='twp'] merch-offer-select { } } -@media screen and ${d} { +@media screen and ${m} { .one-merch-card.twp .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1254,7 +1254,7 @@ merch-card[variant='twp'] merch-offer-select { grid-template-columns: repeat(3, var(--consonant-merch-card-twp-width)); } } -`;var C=class extends m{constructor(e){super(e)}getGlobalCSS(){return ce}renderLayout(){return be`${this.badge} +`;var C=class extends d{constructor(e){super(e)}getGlobalCSS(){return ie}renderLayout(){return we`${this.badge}
@@ -1263,7 +1263,7 @@ merch-card[variant='twp'] merch-offer-select {
-
`}static variantStyle=ye` +
`}static variantStyle=Ee` :host([variant='twp']) { padding: 4px 10px 5px 10px; } @@ -1302,7 +1302,91 @@ merch-card[variant='twp'] merch-offer-select { flex-direction: column; align-self: flex-start; } - `};var V=(r,e=!1)=>{switch(r.variant){case"catalog":return new u(r);case"ccd-action":return new f(r);case"image":return new L(r);case"inline-heading":return new T(r);case"mini-compare-chart":return new b(r);case"plans":return new y(r);case"product":return new w(r);case"segment":return new E(r);case"special-offers":return new S(r);case"twp":return new C(r);default:return e?void 0:new w(r)}},ie=()=>{let r=[];return r.push(u.variantStyle),r.push(f.variantStyle),r.push(b.variantStyle),r.push(y.variantStyle),r.push(E.variantStyle),r.push(S.variantStyle),r.push(C.variantStyle),r};var se=document.createElement("style");se.innerHTML=` + `};import{html as Se,css as Ce}from"../lit-all.min.js";var se=` +:root { + --consonant-merch-card-ccd-slice-single-width: 322px; + --consonant-merch-card-ccd-slice-icon-size: 30px; + --consonant-merch-card-ccd-slice-wide-width: 600px; + --consonant-merch-card-ccd-slice-single-height: 154px; + --consonant-merch-card-ccd-slice-background-img-size: 119px; +} + +merch-card[variant="ccd-slice"] [slot='body-s'] a:not(.con-button) { + font-size: var(--consonant-merch-card-body-xxs-font-size); + font-style: normal; + font-weight: 400; + line-height: var(--consonant-merch-card-body-xxs-line-height); + text-decoration-line: underline; + color: var(--merch-color-grey-80); + } + + merch-card[variant="ccd-slice"] [slot='image'] img { + overflow: hidden; + border-radius: 50%; + } +`;var z=class extends d{getGlobalCSS(){return se}renderLayout(){return Se`
+ ${this.badge} + + +
+ + `}static variantStyle=Ce` + :host([variant='ccd-slice']) { + width: var(--consonant-merch-card-ccd-slice-single-width); + border-radius: 4px; + display: flex; + flex-flow: wrap; + } + + :host([variant='ccd-slice']) ::slotted([slot='body-s']) { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xxs-line-height); + } + + :host([variant='ccd-slice'][size='wide']) { + width: var(--consonant-merch-card-ccd-slice-wide-width); + } + + :host([variant='ccd-slice']) .content { + display: flex; + gap: var(--consonant-merch-spacing-xxs); + padding: var(--consonant-merch-spacing-xs); + padding-inline-end: 0; + width: 154px; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + flex: 1 0 0; + } + + :host([variant='ccd-slice']) ::slotted([slot='body-s']) ::slotted(a:not(.con-button)) { + font-size: var(--consonant-merch-card-body-xxs-font-size); + font-style: normal; + font-weight: 400; + line-height: var(--consonant-merch-card-body-xxs-line-height); + text-decoration-line: underline; + color: var(--merch-color-grey-80); + } + + :host([variant='ccd-slice']) ::slotted([slot='image']) { + display: flex; + justify-content: center; + flex-shrink: 0; + width: var(--consonant-merch-card-ccd-slice-background-img-size); + height: var(--consonant-merch-card-ccd-slice-background-img-size); + overflow: hidden; + border-radius: 50%; + padding: var(--consonant-merch-spacing-xs); + align-self: center; + } + + :host([variant='ccd-slice']) ::slotted([slot='image']) img { + overflow: hidden; + border-radius: 50%; + width: inherit; + height: inherit; + } + `};var G=(t,e=!1)=>{switch(t.variant){case"catalog":return new u(t);case"ccd-action":return new f(t);case"image":return new T(t);case"inline-heading":return new _(t);case"mini-compare-chart":return new b(t);case"plans":return new y(t);case"product":return new w(t);case"segment":return new E(t);case"special-offers":return new S(t);case"twp":return new C(t);case"ccd-slice":return new z(t);default:return e?void 0:new w(t)}},de=()=>{let t=[];return t.push(u.variantStyle),t.push(f.variantStyle),t.push(b.variantStyle),t.push(y.variantStyle),t.push(E.variantStyle),t.push(S.variantStyle),t.push(C.variantStyle),t.push(z.variantStyle),t};var he=document.createElement("style");he.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; --consonant-merch-card-detail-font-weight: 500; @@ -1665,4 +1749,4 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(se);var c="merch-card",n=class extends we{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,o,l]=e.split(",");return{PUF:t,ABM:o,M2M:l}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[o,l,p]=t.split(":"),x=Number(l);return[o,{order:isNaN(x)?void 0:x,size:p}]})),toAttribute:e=>Object.entries(e).map(([t,{order:o,size:l}])=>[t,o,l].filter(p=>p!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[G,ie(),...q()];customerSegment;marketSegment;variantLayout;constructor(){super(),this.filters={},this.types="",this.selected=!1}firstUpdated(){this.variantLayout=V(this,!1),this.variantLayout?.connectedCallbackHook()}willUpdate(e){(e.has("variant")||!this.variantLayout)&&(this.variantLayout=V(this),this.variantLayout.connectedCallbackHook())}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get badgeElement(){return this.shadowRoot.getElementById("badge")}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"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let o of t){await o.onceSettled();let l=o.value?.[0]?.planType;if(!l)return;let p=this.stockOfferOsis[l];if(!p)return;let x=o.dataset.wcsOsi.split(",").filter(he=>he!==p);e.checked&&x.push(p),o.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let t=this.checkoutLinks;for(let o of t)o.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}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(o=>{if(e){t[o].order=Math.min(t[o].order||2,2);return}let l=t[o].order;l===1||isNaN(l)||(t[o].order=Number(l)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(R,this.handleQuantitySelection),this.addEventListener(K,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(R,this.handleQuantitySelection),this.storageOptions?.removeEventListener(O,this.handleStorageChange)}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(I,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(O,{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 o=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(o)}):t.replaceWith(o)}}};customElements.define(c,n); +`;document.head.appendChild(he);var c="merch-card",a=class extends ze{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[r,o,l]=e.split(",");return{PUF:r,ABM:o,M2M:l}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(r=>{let[o,l,p]=r.split(":"),x=Number(l);return[o,{order:isNaN(x)?void 0:x,size:p}]})),toAttribute:e=>Object.entries(e).map(([r,{order:o,size:l}])=>[r,o,l].filter(p=>p!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,de(),...j()];customerSegment;marketSegment;variantLayout;constructor(){super(),this.filters={},this.types="",this.selected=!1}firstUpdated(){this.variantLayout=G(this,!1),this.variantLayout?.connectedCallbackHook()}willUpdate(e){(e.has("variant")||!this.variantLayout)&&(this.variantLayout=G(this),this.variantLayout.connectedCallbackHook())}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get badgeElement(){return this.shadowRoot.getElementById("badge")}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"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let r=this.checkoutLinks;if(r.length!==0)for(let o of r){await o.onceSettled();let l=o.value?.[0]?.planType;if(!l)return;let p=this.stockOfferOsis[l];if(!p)return;let x=o.dataset.wcsOsi.split(",").filter(me=>me!==p);e.checked&&x.push(p),o.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let r=this.checkoutLinks;for(let o of r)o.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let r={...this.filters};Object.keys(r).forEach(o=>{if(e){r[o].order=Math.min(r[o].order||2,2);return}let l=r[o].order;l===1||isNaN(l)||(r[o].order=Number(l)+1)}),this.filters=r}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(P,this.handleQuantitySelection),this.addEventListener(I,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(P,this.handleQuantitySelection),this.storageOptions?.removeEventListener(R,this.handleStorageChange)}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let r=this.querySelector(`merch-offer-select[storage="${e}"]`);if(r)return r}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(W,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(R,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let r=this.dynamicPrice;if(e.price&&r){let o=e.price.cloneNode(!0);r.onceSettled?r.onceSettled().then(()=>{r.replaceWith(o)}):r.replaceWith(o)}}};customElements.define(c,a); diff --git a/libs/deps/mas/merch-datasource.js b/libs/deps/mas/merch-datasource.js index 978cc0a807..b36b550007 100644 --- a/libs/deps/mas/merch-datasource.js +++ b/libs/deps/mas/merch-datasource.js @@ -1 +1 @@ -function g(l,t={},s){let e=document.createElement(l);s instanceof HTMLElement?e.appendChild(s):e.innerHTML=s;for(let[r,i]of Object.entries(t))e.setAttribute(r,i);return e}function T(l=1e3){return new Promise(t=>setTimeout(t,l))}var m="Network error",F={sort:[{on:"created",order:"ASC"}]},p=class{#t;constructor(t,s){this.#t=/^author-/.test(t);let e=s||`https://${t}.adobeaemcloud.com`,r=`${e}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`,this.cfPublishUrl=`${this.cfFragmentsUrl}/publish`,this.wcmcommandUrl=`${e}/bin/wcmcommand`,this.csrfTokenUrl=`${e}/libs/granite/csrf/token.json`,this.foldersUrl=`${e}/adobe/folders`,this.foldersClassicUrl=`${e}/api/assets`,this.headers={Authorization:`Bearer ${sessionStorage.getItem("masAccessToken")??window.adobeid?.authorize?.()}`,pragma:"no-cache","cache-control":"no-cache"}}async getCsrfToken(){let t=await fetch(this.csrfTokenUrl,{headers:this.headers}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!t.ok)throw new Error(`Failed to get CSRF token: ${t.status} ${t.statusText}`);let{token:s}=await t.json();return s}async*searchFragment({path:t,query:s="",sort:e}){let r={path:t};s?r.fullText={text:encodeURIComponent(s),queryMode:"EXACT_WORDS"}:r.onlyDirectChildren=!0;let i={...F,filter:r};e&&(i.sort=e);let a={query:JSON.stringify(i)},o;for(;;){o&&(a.cursor=o);let c=new URLSearchParams(a).toString(),n=await fetch(`${this.cfSearchUrl}?${c}`,{headers:this.headers}).catch(d=>{throw new Error(`${m}: ${d.message}`)});if(!n.ok)throw new Error(`Search failed: ${n.status} ${n.statusText}`);let h;if({items:h,cursor:o}=await n.json(),yield h,!o)break}}async getFragmentByPath(t){let s=this.#t?this.headers:{},e=await fetch(`${this.cfFragmentsUrl}?path=${t}`,{headers:s}).catch(i=>{throw new Error(`${m}: ${i.message}`)});if(!e.ok)throw new Error(`Failed to get fragment: ${e.status} ${e.statusText}`);let{items:r}=await e.json();if(!r||r.length===0)throw new Error("Fragment not found");return r[0]}async getFragment(t){let s=t.headers.get("Etag"),e=await t.json();return e.etag=s,e}async getFragmentById(t){let s=await fetch(`${this.cfFragmentsUrl}/${t}`,{headers:this.headers});if(!s.ok)throw new Error(`Failed to get fragment: ${s.status} ${s.statusText}`);return await this.getFragment(s)}async saveFragment(t){let{title:s,fields:e}=t,r=await fetch(`${this.cfFragmentsUrl}/${t.id}`,{method:"PUT",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers},body:JSON.stringify({title:s,fields:e})}).catch(i=>{throw new Error(`${m}: ${i.message}`)});if(!r.ok)throw new Error(`Failed to save fragment: ${r.status} ${r.statusText}`);return await this.getFragment(r)}async copyFragmentClassic(t){let s=await this.getCsrfToken(),e=t.path.split("/").slice(0,-1).join("/"),r=new FormData;r.append("cmd","copyPage"),r.append("srcPath",t.path),r.append("destParentPath",e),r.append("shallow","false"),r.append("_charset_","UTF-8");let i=await fetch(this.wcmcommandUrl,{method:"POST",headers:{...this.headers,"csrf-token":s},body:r}).catch(b=>{throw new Error(`${m}: ${b.message}`)});if(!i.ok)throw new Error(`Failed to copy fragment: ${i.status} ${i.statusText}`);let a=await i.text(),h=new DOMParser().parseFromString(a,"text/html").getElementById("Message")?.textContent.trim();if(!h)throw new Error("Failed to extract new path from copy response");await T();let d=await this.getFragmentByPath(h);return d&&(d=await this.getFragmentById(d.id)),d}async publishFragment(t){let s=await fetch(this.cfPublishUrl,{method:"POST",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers},body:JSON.stringify({paths:[t.path],filterReferencesByStatus:["DRAFT","UNPUBLISHED"],workflowModelId:"/var/workflow/models/scheduled_activation_with_references"})}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!s.ok)throw new Error(`Failed to publish fragment: ${s.status} ${s.statusText}`);return await s.json()}async deleteFragment(t){let s=await fetch(`${this.cfFragmentsUrl}/${t.id}`,{method:"DELETE",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers}}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!s.ok)throw new Error(`Failed to delete fragment: ${s.status} ${s.statusText}`);return s}async listFolders(t){let s=new URLSearchParams({path:t}).toString(),e=await fetch(`${this.foldersUrl}/?${s}`,{method:"GET",headers:{...this.headers,"X-Adobe-Accept-Experimental":"1"}}).catch(r=>{throw new Error(`${m}: ${r.message}`)});if(!e.ok)throw new Error(`Failed to list folders: ${e.status} ${e.statusText}`);return await e.json()}async listFoldersClassic(t){let s=t?.replace(/^\/content\/dam/,""),e=await fetch(`${this.foldersClassicUrl}${s}.json?limit=1000`,{method:"GET",headers:{...this.headers}}).catch(a=>{throw new Error(`${m}: ${a.message}`)});if(!e.ok)throw new Error(`Failed to list folders: ${e.status} ${e.statusText}`);let{properties:{name:r},entities:i=[]}=await e.json();return{self:{name:r,path:t},children:i.filter(({class:[a]})=>/folder/.test(a)).map(({properties:{name:a,title:o}})=>({name:a,title:o,folderId:`${t}/${a}`,path:`${t}/${a}`}))}}sites={cf:{fragments:{search:this.searchFragment.bind(this),getByPath:this.getFragmentByPath.bind(this),getById:this.getFragmentById.bind(this),save:this.saveFragment.bind(this),copy:this.copyFragmentClassic.bind(this),publish:this.publishFragment.bind(this),delete:this.deleteFragment.bind(this)}}};folders={list:this.listFoldersClassic.bind(this)}};var C="aem-bucket",k="publish-p22655-e155390",$=class{#t=new Map;clear(){this.#t.clear()}add(...t){t.forEach(s=>{let{path:e}=s;e&&this.#t.set(e,s)})}has(t){return this.#t.has(t)}get(t){return this.#t.get(t)}remove(t){this.#t.delete(t)}},w=new $,f=class extends HTMLElement{#t;cache=w;item;refs=[];path;consonant=!1;_readyPromise;static get observedAttributes(){return["path"]}attributeChangedCallback(t,s,e){this[t]=e}connectedCallback(){this.consonant=this.hasAttribute("consonant"),this.clearRefs();let t=this.getAttribute(C)??k;this.#t=new p(t),this.refresh(!1)}clearRefs(){this.refs.forEach(t=>{t.remove()})}async refresh(t=!0){this.path&&(this._readyPromise&&!await Promise.race([this._readyPromise,Promise.resolve(!1)])||(this.clearRefs(),this.refs=[],t&&this.cache.remove(this.path),this._readyPromise=this.fetchData().then(()=>!0)))}async fetchData(){let t=w.get(this.path);t||(t=await this.#t.sites.cf.fragments.getByPath(this.path),w.add(t)),this.item=t,this.render()}get updateComplete(){return this._readyPromise??Promise.reject(new Error("datasource is not correctly configured"))}async render(){}};customElements.define("aem-datasource",f);var u={CATALOG:"catalog",AH:"ah",CCD_ACTION:"ccd-action",SPECIAL_OFFERS:"special-offers"},P={[u.CATALOG]:{title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},[u.AH]:{title:{tag:"h3",slot:"heading-xxs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},ctas:{size:"s"}},[u.CCD_ACTION]:{title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},[u.SPECIAL_OFFERS]:{name:{tag:"h4",slot:"detail-m"},title:{tag:"h4",slot:"detail-m"},backgroundImage:{tag:"div",slot:"bg-image"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}}};async function A(l,t,s,e){let r=l.fields.reduce((o,{name:c,multiple:n,values:h})=>(o[c]=n?h:h[0],o),{id:l.id});r.model=r.model;let{variant:i="catalog"}=r;s.setAttribute("variant",i);let a=P[i]??"catalog";if(r.mnemonicIcon?.forEach((o,c)=>{let n=r.mnemonicLink?.length>c?r.mnemonicLink[c]:"",h=r.mnemonicAlt?.length>c?r.mnemonicAlt[c]:"",d=g("merch-icon",{slot:"icons",src:o,alt:h,href:n,size:"l"});t(d)}),r.cardTitle&&a.title&&t(g(a.title.tag,{slot:a.title.slot},r.cardTitle)),r.backgroundImage&&a.backgroundImage&&t(g(a.backgroundImage.tag,{slot:a.backgroundImage.slot},``)),r.prices&&a.prices){let o=r.prices,c=g(a.prices.tag,{slot:a.prices.slot},o);t(c)}if(r.description&&a.description){let o=g(a.description.tag,{slot:a.description.slot},r.description);t(o)}if(r.ctas){let o=g("div",{slot:"footer"},r.ctas),c=[];[...o.querySelectorAll("a")].forEach(n=>{let h=n.parentElement.tagName==="STRONG";if(e)n.classList.add("con-button"),h&&n.classList.add("blue"),c.push(n);else{let E=g("sp-button",{treatment:h?"fill":"outline",variant:h?"accent":"primary"},n);E.addEventListener("click",x=>{x.stopPropagation(),n.click()}),c.push(E)}}),o.innerHTML="",o.append(...c),t(o)}}var y=class extends f{async render(){if(this.item){let t=s=>{this.parentElement.appendChild(s),this.refs.push(s)};A(this.item,t,this.parentElement,this.consonant)}}};customElements.define("merch-datasource",y);export{y as MerchDataSource}; +function g(l,t={},s){let e=document.createElement(l);s instanceof HTMLElement?e.appendChild(s):e.innerHTML=s;for(let[r,i]of Object.entries(t))e.setAttribute(r,i);return e}function T(l=1e3){return new Promise(t=>setTimeout(t,l))}var m="Network error",C={sort:[{on:"created",order:"ASC"}]},u=class{#t;constructor(t,s){this.#t=/^author-/.test(t);let e=s||`https://${t}.adobeaemcloud.com`,r=`${e}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`,this.cfPublishUrl=`${this.cfFragmentsUrl}/publish`,this.wcmcommandUrl=`${e}/bin/wcmcommand`,this.csrfTokenUrl=`${e}/libs/granite/csrf/token.json`,this.foldersUrl=`${e}/adobe/folders`,this.foldersClassicUrl=`${e}/api/assets`,this.headers={Authorization:`Bearer ${sessionStorage.getItem("masAccessToken")??window.adobeid?.authorize?.()}`,pragma:"no-cache","cache-control":"no-cache"}}async getCsrfToken(){let t=await fetch(this.csrfTokenUrl,{headers:this.headers}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!t.ok)throw new Error(`Failed to get CSRF token: ${t.status} ${t.statusText}`);let{token:s}=await t.json();return s}async*searchFragment({path:t,query:s="",sort:e}){let r={path:t};s?r.fullText={text:encodeURIComponent(s),queryMode:"EXACT_WORDS"}:r.onlyDirectChildren=!0;let i={...C,filter:r};e&&(i.sort=e);let a={query:JSON.stringify(i)},o;for(;;){o&&(a.cursor=o);let c=new URLSearchParams(a).toString(),n=await fetch(`${this.cfSearchUrl}?${c}`,{headers:this.headers}).catch(d=>{throw new Error(`${m}: ${d.message}`)});if(!n.ok)throw new Error(`Search failed: ${n.status} ${n.statusText}`);let h;if({items:h,cursor:o}=await n.json(),yield h,!o)break}}async getFragmentByPath(t){let s=this.#t?this.headers:{},e=await fetch(`${this.cfFragmentsUrl}?path=${t}`,{headers:s}).catch(i=>{throw new Error(`${m}: ${i.message}`)});if(!e.ok)throw new Error(`Failed to get fragment: ${e.status} ${e.statusText}`);let{items:r}=await e.json();if(!r||r.length===0)throw new Error("Fragment not found");return r[0]}async getFragment(t){let s=t.headers.get("Etag"),e=await t.json();return e.etag=s,e}async getFragmentById(t){let s=await fetch(`${this.cfFragmentsUrl}/${t}`,{headers:this.headers});if(!s.ok)throw new Error(`Failed to get fragment: ${s.status} ${s.statusText}`);return await this.getFragment(s)}async saveFragment(t){let{title:s,fields:e}=t,r=await fetch(`${this.cfFragmentsUrl}/${t.id}`,{method:"PUT",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers},body:JSON.stringify({title:s,fields:e})}).catch(i=>{throw new Error(`${m}: ${i.message}`)});if(!r.ok)throw new Error(`Failed to save fragment: ${r.status} ${r.statusText}`);return await this.getFragment(r)}async copyFragmentClassic(t){let s=await this.getCsrfToken(),e=t.path.split("/").slice(0,-1).join("/"),r=new FormData;r.append("cmd","copyPage"),r.append("srcPath",t.path),r.append("destParentPath",e),r.append("shallow","false"),r.append("_charset_","UTF-8");let i=await fetch(this.wcmcommandUrl,{method:"POST",headers:{...this.headers,"csrf-token":s},body:r}).catch(b=>{throw new Error(`${m}: ${b.message}`)});if(!i.ok)throw new Error(`Failed to copy fragment: ${i.status} ${i.statusText}`);let a=await i.text(),h=new DOMParser().parseFromString(a,"text/html").getElementById("Message")?.textContent.trim();if(!h)throw new Error("Failed to extract new path from copy response");await T();let d=await this.getFragmentByPath(h);return d&&(d=await this.getFragmentById(d.id)),d}async publishFragment(t){let s=await fetch(this.cfPublishUrl,{method:"POST",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers},body:JSON.stringify({paths:[t.path],filterReferencesByStatus:["DRAFT","UNPUBLISHED"],workflowModelId:"/var/workflow/models/scheduled_activation_with_references"})}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!s.ok)throw new Error(`Failed to publish fragment: ${s.status} ${s.statusText}`);return await s.json()}async deleteFragment(t){let s=await fetch(`${this.cfFragmentsUrl}/${t.id}`,{method:"DELETE",headers:{"Content-Type":"application/json","If-Match":t.etag,...this.headers}}).catch(e=>{throw new Error(`${m}: ${e.message}`)});if(!s.ok)throw new Error(`Failed to delete fragment: ${s.status} ${s.statusText}`);return s}async listFolders(t){let s=new URLSearchParams({path:t}).toString(),e=await fetch(`${this.foldersUrl}/?${s}`,{method:"GET",headers:{...this.headers,"X-Adobe-Accept-Experimental":"1"}}).catch(r=>{throw new Error(`${m}: ${r.message}`)});if(!e.ok)throw new Error(`Failed to list folders: ${e.status} ${e.statusText}`);return await e.json()}async listFoldersClassic(t){let s=t?.replace(/^\/content\/dam/,""),e=await fetch(`${this.foldersClassicUrl}${s}.json?limit=1000`,{method:"GET",headers:{...this.headers}}).catch(a=>{throw new Error(`${m}: ${a.message}`)});if(!e.ok)throw new Error(`Failed to list folders: ${e.status} ${e.statusText}`);let{properties:{name:r},entities:i=[]}=await e.json();return{self:{name:r,path:t},children:i.filter(({class:[a]})=>/folder/.test(a)).map(({properties:{name:a,title:o}})=>({name:a,title:o,folderId:`${t}/${a}`,path:`${t}/${a}`}))}}sites={cf:{fragments:{search:this.searchFragment.bind(this),getByPath:this.getFragmentByPath.bind(this),getById:this.getFragmentById.bind(this),save:this.saveFragment.bind(this),copy:this.copyFragmentClassic.bind(this),publish:this.publishFragment.bind(this),delete:this.deleteFragment.bind(this)}}};folders={list:this.listFoldersClassic.bind(this)}};var F="aem-bucket",k="publish-p22655-e155390",$=class{#t=new Map;clear(){this.#t.clear()}add(...t){t.forEach(s=>{let{path:e}=s;e&&this.#t.set(e,s)})}has(t){return this.#t.has(t)}get(t){return this.#t.get(t)}remove(t){this.#t.delete(t)}},w=new $,f=class extends HTMLElement{#t;cache=w;item;refs=[];path;consonant=!1;_readyPromise;static get observedAttributes(){return["path"]}attributeChangedCallback(t,s,e){this[t]=e}connectedCallback(){this.consonant=this.hasAttribute("consonant"),this.clearRefs();let t=this.getAttribute(F)??k;this.#t=new u(t),this.refresh(!1)}clearRefs(){this.refs.forEach(t=>{t.remove()})}async refresh(t=!0){this.path&&(this._readyPromise&&!await Promise.race([this._readyPromise,Promise.resolve(!1)])||(this.clearRefs(),this.refs=[],t&&this.cache.remove(this.path),this._readyPromise=this.fetchData().then(()=>!0)))}async fetchData(){let t=w.get(this.path);t||(t=await this.#t.sites.cf.fragments.getByPath(this.path),w.add(t)),this.item=t,this.render()}get updateComplete(){return this._readyPromise??Promise.reject(new Error("datasource is not correctly configured"))}async render(){}};customElements.define("aem-datasource",f);var p={CATALOG:"catalog",AH:"ah",CCD_ACTION:"ccd-action",SPECIAL_OFFERS:"special-offers",CCD_SLICE:"ccd-slice"},P={[p.CATALOG]:{title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},[p.AH]:{title:{tag:"h3",slot:"heading-xxs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},ctas:{size:"s"}},[p.CCD_ACTION]:{title:{tag:"h3",slot:"heading-xs"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},[p.SPECIAL_OFFERS]:{name:{tag:"h4",slot:"detail-m"},title:{tag:"h4",slot:"detail-m"},backgroundImage:{tag:"div",slot:"bg-image"},prices:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xs"},ctas:{size:"l"}},[p.CCD_SLICE]:{backgroundImage:{tag:"div",slot:"image"},description:{tag:"div",slot:"body-s"},ctas:{size:"l"}}};async function S(l,t,s,e){let r=l.fields.reduce((o,{name:c,multiple:n,values:h})=>(o[c]=n?h:h[0],o),{id:l.id});r.model=r.model;let{variant:i="catalog"}=r;s.setAttribute("variant",i);let a=P[i]??"catalog";if(r.mnemonicIcon?.forEach((o,c)=>{let n=r.mnemonicLink?.length>c?r.mnemonicLink[c]:"",h=r.mnemonicAlt?.length>c?r.mnemonicAlt[c]:"",d=g("merch-icon",{slot:"icons",src:o,alt:h,href:n,size:"l"});t(d)}),r.cardTitle&&a.title&&t(g(a.title.tag,{slot:a.title.slot},r.cardTitle)),r.backgroundImage&&a.backgroundImage&&t(g(a.backgroundImage.tag,{slot:a.backgroundImage.slot},``)),r.prices&&a.prices){let o=r.prices,c=g(a.prices.tag,{slot:a.prices.slot},o);t(c)}if(r.description&&a.description){let o=g(a.description.tag,{slot:a.description.slot},r.description);t(o)}if(r.ctas){let o=g("div",{slot:"footer"},r.ctas),c=[];[...o.querySelectorAll("a")].forEach(n=>{let h=n.parentElement.tagName==="STRONG";if(e)n.classList.add("con-button"),h&&n.classList.add("blue"),c.push(n);else{let E=g("sp-button",{treatment:h?"fill":"outline",variant:h?"accent":"primary"},n);E.addEventListener("click",x=>{x.stopPropagation(),n.click()}),c.push(E)}}),o.innerHTML="",o.append(...c),t(o)}}var y=class extends f{async render(){if(this.item){let t=s=>{this.parentElement.appendChild(s),this.refs.push(s)};S(this.item,t,this.parentElement,this.consonant)}}};customElements.define("merch-datasource",y);export{y as MerchDataSource}; diff --git a/libs/features/mas/web-components/src/merch-datasource.js b/libs/features/mas/web-components/src/merch-datasource.js index e7d95ad2bd..dc515c358d 100644 --- a/libs/features/mas/web-components/src/merch-datasource.js +++ b/libs/features/mas/web-components/src/merch-datasource.js @@ -6,6 +6,7 @@ const VARIANTS = { AH: 'ah', CCD_ACTION: 'ccd-action', SPECIAL_OFFERS: 'special-offers', + CCD_SLICE: 'ccd-slice', }; const cardContent = { @@ -35,6 +36,11 @@ const cardContent = { description: { tag: 'div', slot: 'body-xs' }, ctas: { size: 'l' }, }, + [VARIANTS.CCD_SLICE]: { + backgroundImage: { tag: 'div', slot: 'image' }, + description: { tag: 'div', slot: 'body-s' }, + ctas: { size: 'l' }, + }, }; async function parseMerchCard(fragmentData, appendFn, merchCard, consonant) { diff --git a/libs/features/mas/web-components/src/variants/ccd-slice.css.js b/libs/features/mas/web-components/src/variants/ccd-slice.css.js new file mode 100644 index 0000000000..fb6ce43f3a --- /dev/null +++ b/libs/features/mas/web-components/src/variants/ccd-slice.css.js @@ -0,0 +1,23 @@ +export const CSS = ` +:root { + --consonant-merch-card-ccd-slice-single-width: 322px; + --consonant-merch-card-ccd-slice-icon-size: 30px; + --consonant-merch-card-ccd-slice-wide-width: 600px; + --consonant-merch-card-ccd-slice-single-height: 154px; + --consonant-merch-card-ccd-slice-background-img-size: 119px; +} + +merch-card[variant="ccd-slice"] [slot='body-s'] a:not(.con-button) { + font-size: var(--consonant-merch-card-body-xxs-font-size); + font-style: normal; + font-weight: 400; + line-height: var(--consonant-merch-card-body-xxs-line-height); + text-decoration-line: underline; + color: var(--merch-color-grey-80); + } + + merch-card[variant="ccd-slice"] [slot='image'] img { + overflow: hidden; + border-radius: 50%; + } +`; diff --git a/libs/features/mas/web-components/src/variants/ccd-slice.js b/libs/features/mas/web-components/src/variants/ccd-slice.js new file mode 100644 index 0000000000..06ad21510c --- /dev/null +++ b/libs/features/mas/web-components/src/variants/ccd-slice.js @@ -0,0 +1,78 @@ +import { VariantLayout } from './variant-layout.js'; +import { html, css } from 'lit'; +import { CSS } from './ccd-slice.css.js'; + +export class CCDSlice extends VariantLayout { + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html`
+ ${this.badge} + + +
+ + `; + } + + static variantStyle = css` + :host([variant='ccd-slice']) { + width: var(--consonant-merch-card-ccd-slice-single-width); + border-radius: 4px; + display: flex; + flex-flow: wrap; + } + + :host([variant='ccd-slice']) ::slotted([slot='body-s']) { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xxs-line-height); + } + + :host([variant='ccd-slice'][size='wide']) { + width: var(--consonant-merch-card-ccd-slice-wide-width); + } + + :host([variant='ccd-slice']) .content { + display: flex; + gap: var(--consonant-merch-spacing-xxs); + padding: var(--consonant-merch-spacing-xs); + padding-inline-end: 0; + width: 154px; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + flex: 1 0 0; + } + + :host([variant='ccd-slice']) ::slotted([slot='body-s']) ::slotted(a:not(.con-button)) { + font-size: var(--consonant-merch-card-body-xxs-font-size); + font-style: normal; + font-weight: 400; + line-height: var(--consonant-merch-card-body-xxs-line-height); + text-decoration-line: underline; + color: var(--merch-color-grey-80); + } + + :host([variant='ccd-slice']) ::slotted([slot='image']) { + display: flex; + justify-content: center; + flex-shrink: 0; + width: var(--consonant-merch-card-ccd-slice-background-img-size); + height: var(--consonant-merch-card-ccd-slice-background-img-size); + overflow: hidden; + border-radius: 50%; + padding: var(--consonant-merch-spacing-xs); + align-self: center; + } + + :host([variant='ccd-slice']) ::slotted([slot='image']) img { + overflow: hidden; + border-radius: 50%; + width: inherit; + height: inherit; + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/variants.js b/libs/features/mas/web-components/src/variants/variants.js index d9e328e572..9a676de7d8 100644 --- a/libs/features/mas/web-components/src/variants/variants.js +++ b/libs/features/mas/web-components/src/variants/variants.js @@ -8,6 +8,7 @@ import { Product } from './product.js'; import { Segment } from './segment.js'; import { SpecialOffer } from './special-offer.js'; import { TWP } from './twp.js'; +import { CCDSlice } from './ccd-slice.js'; const getVariantLayout = (card, mustMatch = false) => { switch (card.variant) { @@ -31,6 +32,8 @@ const getVariantLayout = (card, mustMatch = false) => { return new SpecialOffer(card); case 'twp': return new TWP(card); + case 'ccd-slice': + return new CCDSlice(card); default: return mustMatch ? undefined : new Product(card); } @@ -45,6 +48,7 @@ const getVariantStyles = () => { styles.push(Segment.variantStyle); styles.push(SpecialOffer.variantStyle); styles.push(TWP.variantStyle); + styles.push(CCDSlice.variantStyle); return styles; }; diff --git a/libs/features/mas/web-components/test/img/pixel.png b/libs/features/mas/web-components/test/img/pixel.png new file mode 100644 index 0000000000..08c830d9e0 Binary files /dev/null and b/libs/features/mas/web-components/test/img/pixel.png differ diff --git a/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html b/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html new file mode 100644 index 0000000000..537a8db907 --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html @@ -0,0 +1,84 @@ + + + + + + + Merch Card CCD SliceWeb Component demo page + + + + + + +
+ + + + undefined + undefined +

+ Creative Cloud Photography plan.
+ Starting at US$19.99/mo + +

+
+ Buy now +
+
+ +
+ + + + undefined +

+ Save over 30% on Creative Cloud All Apps. Register for MAX by August 31 and save US$200 on a full conference pass. +
See terms +

+
+ Register now +
+
+ +
+ + +
+ + diff --git a/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js b/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js new file mode 100644 index 0000000000..de5c3898be --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js @@ -0,0 +1,37 @@ +// @ts-nocheck +import { runTests } from '@web/test-runner-mocha'; +import { expect } from '@esm-bundle/chai'; + +import { mockLana } from './mocks/lana.js'; +import { mockFetch } from './mocks/fetch.js'; + +import './spectrum.js'; +import '../src/merch-offer.js'; +import '../src/merch-offer-select.js'; +import '../src/merch-quantity-select.js'; + +import { mockIms } from './mocks/ims.js'; +import { withWcs } from './mocks/wcs.js'; +import mas from './mas.js'; + +const skipTests = sessionStorage.getItem('skipTests'); + +runTests(async () => { + mockIms(); + mockLana(); + await mockFetch(withWcs); + await mas(); + + describe('merch-card web component', () => { + it('should exist in the HTML document', async () => { + expect(document.querySelector('merch-card[variant="ccd-slice"]')).to.exist; + }); + + it('should have correct attributes for the ccd-slice wide card', async () => { + const ccdSliceWideCard = document.querySelector('merch-card[variant="ccd-slice"][size="wide"]'); + expect(ccdSliceWideCard.getAttribute('variant')).to.equal('ccd-slice'); + expect(ccdSliceWideCard.getAttribute('size')).to.equal('wide'); + }); + }); + +}); diff --git a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js index 55e5028ca4..e439f80272 100644 --- a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js +++ b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js @@ -52,7 +52,7 @@ runTests(async () => { const el = miniCompareChart.shadowRoot.querySelector(selector); if (!el) return 0; - return parseFloat(window.getComputedStyle(el).height); + return parseInt(window.getComputedStyle(el).height, 10); }) .join(','); return heights; @@ -76,12 +76,13 @@ runTests(async () => { .fill() .map( (_, i) => - parseFloat( + parseInt( window.getComputedStyle( miniCompareChart.querySelector( `.footer-row-cell:nth-child(${i + 1})`, ), ), + 10, ).height, ) .join(','); diff --git a/libs/features/mas/web-components/test/merch-twp-d2p.test.html b/libs/features/mas/web-components/test/merch-twp-d2p.test.html index 5a011e698e..3c019b547d 100644 --- a/libs/features/mas/web-components/test/merch-twp-d2p.test.html +++ b/libs/features/mas/web-components/test/merch-twp-d2p.test.html @@ -86,7 +86,7 @@