Merge branch 'main' into MWPW-154335

* main:
  MWPW-153245 [merch] make shadow elements spit custom events (#42)
  MWPW-148229  Left Rail filter hover Text  (#43)
  Stop using code which resolves default display tax label value per country and segment (#27)
  Mwpw-147034: Custom border color + badge/border color decoupling [Mer… (#15)
  MWPW-154026: Long CTAs fall in the second line in merch card footer (#38)

# Conflicts:
#	libs/commerce.js
#	libs/mas.js
#	libs/merch-card-all.js
#	libs/merch-card.js
#	web-components/src/merch-card.js

commerce/src/inline-price.js

@@ -222,11 +222,15 @@ export class HTMLPriceSpanElement extends HTMLSpanElement {
         );
         if (!options.wcsOsi.length) return false;
 
+        /*
+        Commented out until issues in content with manually added tax labels are resolved
+
         if (!this.placeholder.dataset.displayTax) {
             // set default value for displayTax if not set neither in OST nor in price URL
             options.displayTax =
                 (await this.resolveDisplayTax(service, options)) || false;
         }
+        */
 
         const version = this.placeholder.togglePending(options);
         this.innerHTML = '';

commerce/test/price.test.js

@@ -288,6 +288,9 @@ describe('class "InlinePrice"', () => {
         });
     });
 
+    /*
+    Commented out until issues in content with manually added tax labels are resolved
+
     describe('default display tax', () => {
         const SEGMENTS = ['individual', 'business', 'student', 'university'];
         const TESTS = [
@@ -676,6 +679,7 @@ describe('class "InlinePrice"', () => {
             expect(inlinePrice.textContent).equal('US$89.99/mo');
         });
     });
+    */
 });
 
 describe('commerce service', () => {

libs/merch-card-collection.js

@@ -1,4 +1,4 @@
-import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var g="hashchange";function w(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function E(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=w(window.location.hash);r(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var _=localStorage.getItem("masAccessToken"),P={Authorization:`Bearer ${_}`,pragma:"no-cache","cache-control":"no-cache"};var x=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var T="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as A,unsafeCSS as C}from"/libs/deps/lit-all.min.js";var S=A`
+import{html as a,LitElement as v}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function N(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,c=""]=o.split("=");n&&e.push([n,decodeURIComponent(c.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,c])=>{c?e.set(n,c):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function g(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=N(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var R=localStorage.getItem("masAccessToken"),U={Authorization:`Bearer ${R}`,pragma:"no-cache","cache-control":"no-cache"};var T="merch-card-collection:sort",x="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var y="(max-width: 1199px)",_="(min-width: 768px)",b="(min-width: 1200px)";import{css as A,unsafeCSS as S}from"/libs/deps/lit-all.min.js";var w=A`
     #header,
     #resultText,
     #footer {
@@ -61,7 +61,7 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con
     }
 
     /* tablets */
-    @media screen and ${C(y)} {
+    @media screen and ${S(_)} {
         #header {
             grid-template-columns: 1fr fit-content(100%) fit-content(100%);
         }
@@ -80,7 +80,7 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con
     }
 
     /* Laptop */
-    @media screen and ${C(b)} {
+    @media screen and ${S(b)} {
         #resultText {
             grid-column: span 2;
             order: -3;
@@ -92,9 +92,9 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con
             justify-content: end;
         }
     }
-`;var p=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var R="merch-card-collection",i={alphabetical:"alphabetical",authored:"authored"},v={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},M=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),$=(r,{types:e})=>e?(e=e.split(","),r.filter(t=>e.some(o=>t.types.includes(o)))):r,L=r=>r.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),k=(r,{filter:e})=>r.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),B=(r,{search:e})=>e?.length?(e=e.toLowerCase(),r.filter(t=>(t.title??"").toLowerCase().includes(e))):r,f=class extends N{static properties={filter:{type:String,attribute:"filter",reflect:!0},filtered:{type:String,attribute:"filtered"},search:{type:String,attribute:"search",reflect:!0},sort:{type:String,attribute:"sort",default:i.authored,reflect:!0},types:{type:String,attribute:"types",reflect:!0},limit:{type:Number,attribute:"limit"},page:{type:Number,attribute:"page",reflect:!0},singleApp:{type:String,attribute:"single-app",reflect:!0},hasMore:{type:Boolean},displayResult:{type:Boolean,attribute:"display-result"},resultCount:{type:Number},sidenav:{type:Object}};mobileAndTablet=new m(this,T);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return a`${this.header}
+`;var p=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var M="merch-card-collection",i={alphabetical:"alphabetical",authored:"authored"},O={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},L=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),$=(r,{types:e})=>e?(e=e.split(","),r.filter(t=>e.some(o=>t.types.includes(o)))):r,D=r=>r.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),k=(r,{filter:e})=>r.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),B=(r,{search:e})=>e?.length?(e=e.toLowerCase(),r.filter(t=>(t.title??"").toLowerCase().includes(e))):r,f=class extends v{static properties={filter:{type:String,attribute:"filter",reflect:!0},filtered:{type:String,attribute:"filtered"},search:{type:String,attribute:"search",reflect:!0},sort:{type:String,attribute:"sort",default:i.authored,reflect:!0},types:{type:String,attribute:"types",reflect:!0},limit:{type:Number,attribute:"limit"},page:{type:Number,attribute:"page",reflect:!0},singleApp:{type:String,attribute:"single-app",reflect:!0},hasMore:{type:Boolean},displayResult:{type:Boolean,attribute:"display-result"},resultCount:{type:Number},sidenav:{type:Object}};mobileAndTablet=new m(this,y);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return a`${this.header}
             <slot></slot>
-            ${this.footer}`}updated(e){if(!this.querySelector("merch-card"))return;let t=window.scrollY||document.documentElement.scrollTop,o=[...this.children].filter(s=>s.tagName==="MERCH-CARD");if(o.length===0)return;e.has("singleApp")&&this.singleApp&&o.forEach(s=>{s.updateFilters(s.name===this.singleApp)});let n=this.sort===i.alphabetical?L:k,c=[M,$,B,n].reduce((s,h)=>h(s,this),o).map((s,h)=>[s,h]);if(this.resultCount=c.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=c.length>s,c=c.filter(([,h])=>h<s)}let d=new Map(c);o.forEach(s=>{d.has(s)?(s.style.order=d.get(s),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()):(s.style.display="none",s.size=void 0,s.style.removeProperty("order"))}),window.scrollTo(0,t),this.updateComplete.then(()=>{let s=this.shadowRoot.getElementById("resultText")?.firstElementChild?.assignedElements?.()?.[0];s&&x(s,{resultCount:this.resultCount,searchTerm:this.search,filter:this.sidenav?.filters.selectedText})})}connectedCallback(){super.connectedCallback(),this.filtered?(this.filter=this.filtered,this.page=1):this.startDeeplink(),this.sidenav=document.querySelector("merch-sidenav")}disconnectedCallback(){super.disconnectedCallback(),this.stopDeeplink?.()}get header(){if(!this.filtered)return a`<div id="header">
+            ${this.footer}`}updated(e){if(!this.querySelector("merch-card"))return;let t=window.scrollY||document.documentElement.scrollTop,o=[...this.children].filter(s=>s.tagName==="MERCH-CARD");if(o.length===0)return;e.has("singleApp")&&this.singleApp&&o.forEach(s=>{s.updateFilters(s.name===this.singleApp)});let n=this.sort===i.alphabetical?D:k,l=[L,$,B,n].reduce((s,h)=>h(s,this),o).map((s,h)=>[s,h]);if(this.resultCount=l.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=l.length>s,l=l.filter(([,h])=>h<s)}let d=new Map(l);o.forEach(s=>{d.has(s)?(s.style.order=d.get(s),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()):(s.style.display="none",s.size=void 0,s.style.removeProperty("order"))}),window.scrollTo(0,t),this.updateComplete.then(()=>{let s=this.shadowRoot.getElementById("resultText")?.firstElementChild?.assignedElements?.()?.[0];s&&C(s,{resultCount:this.resultCount,searchTerm:this.search,filter:this.sidenav?.filters.selectedText})})}connectedCallback(){super.connectedCallback(),this.filtered?(this.filter=this.filtered,this.page=1):this.startDeeplink(),this.sidenav=document.querySelector("merch-sidenav")}disconnectedCallback(){super.disconnectedCallback(),this.stopDeeplink?.()}get header(){if(!this.filtered)return a`<div id="header">
                 <sp-theme theme="spectrum" color="light" scale="medium">
                     ${this.searchBar} ${this.filtersButton} ${this.sortButton}
                 </sp-theme>
@@ -105,7 +105,7 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con
             <sp-theme theme="spectrum" color="light" scale="medium">
                 ${this.showMoreButton}
             </sp-theme>
-        </div>`}get resultTextSlotName(){return v[this.search?this.mobileAndTablet.matches?"mobile":"desktop":"filters"][Math.min(this.resultCount,2)]}get showMoreButton(){if(this.hasMore)return a`<sp-button
+        </div>`}get resultTextSlotName(){return O[this.search?this.mobileAndTablet.matches?"mobile":"desktop":"filters"][Math.min(this.resultCount,2)]}get showMoreButton(){if(this.hasMore)return a`<sp-button
             variant="secondary"
             treatment="outline"
             style="order: 1000;"
@@ -143,4 +143,4 @@ import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{con
                     >${o}</sp-menu-item
                 >
             </sp-action-menu>
-        `}sortChanged(e){e.target.value===i.authored?u({sort:void 0}):u({sort:e.target.value})}async showMore(){let e=this.page+1;u({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=E(({category:e,filter:t,types:o,sort:n,search:l,single_app:c,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{u({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=l??"",this.singleApp=c,this.sort=n,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[S]};f.SortOrder=i;customElements.define(R,f);export{f as MerchCardCollection};
+        `}sortChanged(e){e.target.value===i.authored?u({sort:void 0}):u({sort:e.target.value}),this.dispatchEvent(new CustomEvent(T,{bubbles:!0,composed:!0,detail:{value:e.target.value}}))}async showMore(){this.dispatchEvent(new CustomEvent(x,{bubbles:!0,composed:!0}));let e=this.page+1;u({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=g(({category:e,filter:t,types:o,sort:n,search:c,single_app:l,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{u({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=c??"",this.singleApp=l,this.sort=n,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[w]};f.SortOrder=i;customElements.define(M,f);export{f as MerchCardCollection};