From ced0ee53e8c24f9dd9893cfbf549f0973e2b5e84 Mon Sep 17 00:00:00 2001 From: Mira Date: Fri, 12 Jul 2024 13:56:47 +0200 Subject: [PATCH 1/3] updated merch-card with no height set for secure transaction --- libs/deps/merch-card.js | 239 ++++++++++++++++++++++++++++------------ 1 file changed, 170 insertions(+), 69 deletions(-) diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js index 34545131dd..1f990d9e00 100644 --- a/libs/deps/merch-card.js +++ b/libs/deps/merch-card.js @@ -1,7 +1,6 @@ -// branch: main commit: 258ad3d851cc4945eae2aab2dcc80a8d0c14d861 Fri, 28 Jun 2024 14:19:21 GMT -import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitElement as q,html as T,css as F}from"/libs/deps/lit-all.min.js";var s=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?T` +import{html as o,LitElement as te,nothing as re}from"/libs/deps/lit-all.min.js";import{LitElement as Y,html as M,css as Q}from"/libs/deps/lit-all.min.js";var h=class extends Y{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` ${this.alt} - `:T` ${this.alt}`}static styles=F` + `:M` ${this.alt}`}static styles=Q` :host { --img-width: 32px; --img-height: 32px; @@ -24,7 +23,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme width: var(--img-width); height: var(--img-height); } - `};customElements.define("merch-icon",s);import{css as k,unsafeCSS as u}from"/libs/deps/lit-all.min.js";var f="(max-width: 767px)",y="(max-width: 1199px)",i="(min-width: 768px)",c="(min-width: 1200px)",h="(min-width: 1600px)";var A=k` + `};customElements.define("merch-icon",h);var Z=localStorage.getItem("masAccessToken"),L={Authorization:`Bearer ${Z}`,pragma:"no-cache","cache-control":"no-cache"};async function J({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:L}).then(n=>n.json()).then(({items:n})=>n)}async function X(c){return fetch(`${this.cfFragmentsUrl}?path=${c}`,{headers:L}).then(e=>e.json()).then(({items:[e]})=>e)}var k=class{sites={cf:{fragments:{search:J.bind(this),getCfByPath:X.bind(this)}}};constructor(e){let r=`${`https://${e}.adobeaemcloud.com`}/adobe/sites`;this.cfFragmentsUrl=`${r}/cf/fragments`,this.cfSearchUrl=`${this.cfFragmentsUrl}/search`}};var O="merch-offer-select:ready",N="merch-card:ready";var z="merch-storage:change",$="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 H="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 ee(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 T=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)}},D=new T,m=class extends HTMLElement{#e;cache=D;path;static get observedAttributes(){return["source","path"]}attributeChangedCallback(e,t,r){this[e]=r}connectedCallback(){let e=this.getAttribute(H)??document.querySelector("mas-studio")?.getAttribute(H);this.#e=new k(e),this.fetchData()}refresh(){this.cache.remove(this.path),this.fetchData()}async fetchData(){let e=D.get(this.path);if(e||(e=await this.#e.sites.cf.fragments.getCfByPath(this.path)),e){ee(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)",C="(max-width: 1199px)",d="(min-width: 768px)",s="(min-width: 1200px)",g="(min-width: 1600px)";var I=A` :host { position: relative; display: flex; @@ -59,6 +58,10 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme min-height: 214px; } + :host([variant='ccd-action']:not([size])) { + width: var(--consonant-merch-card-ccd-action-width); + } + :host([aria-selected]) { outline: none; box-sizing: border-box; @@ -221,7 +224,6 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme gap: var(--consonant-merch-spacing-xxs); align-items: center; flex: 1; - height: 100%; line-height: normal; } @@ -329,7 +331,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme height: var(--consonant-merch-card-mini-compare-top-section-height); } - @media screen and ${u(y)} { + @media screen and ${y(C)} { [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { flex-direction: column; align-items: stretch; @@ -337,7 +339,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme } } - @media screen and ${u(f)} { + @media screen and ${y(b)} { :host([variant='mini-compare-chart']) .top-section { padding-top: var(--consonant-merch-spacing-xs); } @@ -347,7 +349,7 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme top: 10px; } } - @media screen and ${u(c)} { + @media screen and ${y(s)} { :host([variant='mini-compare-chart']) footer { padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) @@ -390,9 +392,9 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme :host([variant='segment']) ::slotted([slot='heading-xs']) { max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); } -`,R=()=>{let p=[k` +`,q=()=>{let c=[A` /* Tablet */ - @media screen and ${u(i)} { + @media screen and ${y(d)} { :host([size='wide']), :host([size='super-wide']) { grid-column: span 3; @@ -403,18 +405,18 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme } /* Laptop */ - @media screen and ${u(c)} { + @media screen and ${y(s)} { :host([size='super-wide']) { grid-column: span 3; } - `];return p.push(k` + `];return c.push(A` /* Large desktop */ - @media screen and ${u(h)} { + @media screen and ${y(g)} { :host([size='super-wide']) { grid-column: span 4; } } - `),p};var[_,M,O,L,N,te]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var P=document.createElement("style");P.innerHTML=` + `),c};var[j,F,U,V,W,Ue]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var G=document.createElement("style");G.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; --consonant-merch-card-detail-font-weight: 500; @@ -518,6 +520,11 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme --consonant-merch-card-twp-mobile-width: 300px; --consonant-merch-card-twp-mobile-height: 358px; + /* ccd-action */ + --consonant-merch-card-ccd-action-width: 276px; + --consonant-merch-card-ccd-action-min-height: 320px; + + /*mini compare chart */ --consonant-merch-card-mini-compare-chart-icon-size: 32px; --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; @@ -533,6 +540,15 @@ import{html as a,LitElement as j}from"/libs/deps/lit-all.min.js";import{LitEleme --ellipsis-icon: url('data:image/svg+xml,'); + /* callout */ + --consonant-merch-card-callout-line-height: 21px; + --consonant-merch-card-callout-font-size: 14px; + --consonant-merch-card-callout-font-color: #2C2C2C; + --consonant-merch-card-callout-icon-size: 16px; + --consonant-merch-card-callout-icon-top: 6px; + --consonant-merch-card-callout-icon-right: 8px; + --consonant-merch-card-callout-letter-spacing: 0px; + --consonant-merch-card-callout-icon-padding: 34px; } merch-card-collection { @@ -643,6 +659,43 @@ merch-card [slot='heading-xl'] { color: var(--merch-color-grey-80); } +merch-card [slot='callout-text'] { + display: inline-block; + margin: var(--consonant-merch-spacing-xxxs) 0px; +} + +merch-card [slot='callout-text'] > div { + position: relative; + display: inline-grid; + 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 { + 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; + letter-spacing: var(--consonant-merch-card-callout-letter-spacing); + 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); + width: var(--consonant-merch-card-callout-icon-size); + height: var(--consonant-merch-card-callout-icon-size); +} + +merch-card[variant="mini-compare-chart"] [slot="callout-text"] { + padding: 0px var(--consonant-merch-spacing-s); +} + merch-card [slot='detail-m'] { font-size: var(--consonant-merch-card-detail-m-font-size); letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing); @@ -729,6 +782,10 @@ merch-card[variant="catalog"] [slot="action-menu-content"] a { text-decoration: underline; } +merch-card[variant="ccd-action"] .price-strikethrough { + font-size: 18px; +} + merch-card[variant="plans"] [slot="quantity-select"] { display: flex; justify-content: flex-start; @@ -875,7 +932,7 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { text-decoration: solid; } -@media screen and ${f} { +@media screen and ${b} { merch-card[variant="mini-compare-chart"] .mini-compare-chart-badge + [slot='heading-m'] { margin-top: var(--consonant-merch-spacing-m); } @@ -966,7 +1023,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${f} { +@media screen and ${b} { :root { --consonant-merch-card-mini-compare-chart-width: 142px; --consonant-merch-card-segment-width: 276px; @@ -978,7 +1035,7 @@ div[slot='bg-image'] img { /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { :root { --consonant-merch-card-catalog-width: 302px; --consonant-merch-card-plans-width: 302px; @@ -991,7 +1048,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { :root { --consonant-merch-card-catalog-width: 276px; --consonant-merch-card-plans-width: 276px; @@ -1015,7 +1072,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.plans, .three-merch-cards.plans, .four-merch-cards.plans { @@ -1024,7 +1081,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.plans, .four-merch-cards.plans { grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); @@ -1032,7 +1089,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.plans { grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); } @@ -1048,7 +1105,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.catalog, .three-merch-cards.catalog, .four-merch-cards.catalog { @@ -1057,7 +1114,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.catalog, .four-merch-cards.catalog { grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); @@ -1065,7 +1122,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.catalog { grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); } @@ -1081,7 +1138,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.special-offers, .three-merch-cards.special-offers, .four-merch-cards.special-offers { @@ -1090,14 +1147,14 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.special-offers, .four-merch-cards.special-offers { grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); } } -@media screen and ${h} { +@media screen and ${g} { .four-merch-cards.special-offers { grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); } @@ -1113,7 +1170,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.image, .three-merch-cards.image, .four-merch-cards.image { @@ -1122,7 +1179,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.image, .four-merch-cards.image { grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); @@ -1130,7 +1187,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.image { grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); } @@ -1146,7 +1203,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.segment, .three-merch-cards.segment, .four-merch-cards.segment { @@ -1155,7 +1212,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.segment { grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); } @@ -1175,7 +1232,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.product, .three-merch-cards.product, .four-merch-cards.product { @@ -1184,7 +1241,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.product, .four-merch-cards.product { grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); @@ -1192,7 +1249,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.product { grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); } @@ -1206,7 +1263,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .one-merch-card.twp, .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1217,7 +1274,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .one-merch-card.twp .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1228,7 +1285,7 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .one-merch-card.twp .two-merch-cards.twp { grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); @@ -1239,7 +1296,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${f} { +@media screen and ${b} { .one-merch-card.twp, .two-merch-cards.twp, .three-merch-cards.twp { @@ -1256,7 +1313,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.inline-heading, .three-merch-cards.inline-heading, .four-merch-cards.inline-heading { @@ -1265,7 +1322,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .three-merch-cards.inline-heading, .four-merch-cards.inline-heading { grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); @@ -1273,12 +1330,44 @@ div[slot='bg-image'] img { } /* Large desktop */ - @media screen and ${h} { + @media screen and ${g} { .four-merch-cards.inline-heading { grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); } } +/* grid style for ccd-action */ +.one-merch-card.ccd-action, +.two-merch-cards.ccd-action, +.three-merch-cards.ccd-action, +.four-merch-cards.ccd-action { + grid-template-columns: var(--consonant-merch-card-ccd-action-width); +} + +/* Tablet */ +@media screen and ${d} { + .two-merch-cards.ccd-action, + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); + } +} + +/* desktop */ +@media screen and ${s} { + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); + } +} + +/* Large desktop */ + @media screen and ${g} { + .four-merch-cards.ccd-action { + grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); + } +} + /* grid style for mini-compare-chart */ .one-merch-card.mini-compare-chart { grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); @@ -1292,7 +1381,7 @@ div[slot='bg-image'] img { gap: var(--consonant-merch-spacing-xs); } -@media screen and ${f} { +@media screen and ${b} { .two-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { @@ -1300,7 +1389,7 @@ div[slot='bg-image'] img { } } -@media screen and ${y} { +@media screen and ${C} { .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { flex: 1; @@ -1308,7 +1397,7 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${i} { +@media screen and ${d} { .two-merch-cards.mini-compare-chart { grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); gap: var(--consonant-merch-spacing-m); @@ -1321,7 +1410,7 @@ div[slot='bg-image'] img { } /* desktop */ -@media screen and ${c} { +@media screen and ${s} { .one-merch-card.mini-compare-chart { grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); } @@ -1338,7 +1427,7 @@ div[slot='bg-image'] img { } } -@media screen and ${h} { +@media screen and ${g} { .four-merch-cards.mini-compare-chart { grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); } @@ -1402,20 +1491,20 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild(P);var H="merch-offer-select:ready",B="merch-card:ready";var C="merch-storage:change",z="merch-quantity-selector:change";function D(p){let e=[];function t(r){r.nodeType===Node.TEXT_NODE?e.push(r):r.childNodes.forEach(t)}return t(p),e}var l="MERCH-CARD",g="merch-card",W=32,S="mini-compare-chart",I=p=>`--consonant-merch-card-footer-row-${p}-min-height`,d=class extends j{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"},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,o]=t.split(":"),m=Number(n);return[r,{order:isNaN(m)?void 0:m,size:o}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:n}])=>[t,r,n].filter(o=>o!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[A,...R()];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 evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?a`