CCD Merch Card Combined changes (adobecom#3063)

* initial commit

* slots, styles and basic layout

* more changes

* Update merch-card.ccd-suggested.test.html

* Update merch-twp-d2p.test.html

* unit tests, strip slot and more

* fixed review comments

* review comments fixed

* RTL background image support

* Initial @adobecom/mas-js version.

* a

* Update merch-card.ccd-suggested.test.html

* a

* dark mode, unit tests and rtl

* simplified styles

* updated deps

* Update variant-layout.js

* dark theme ut

* Update merch-card.ccd-suggested.test.html.js

* Update variant-layout.js

* card mapping

* MWPW-158200: Merch card Dark mode

* updated deps

* MWPW-159257 refactor mas enablement

- move of wcms-commerce -> mas-commerce-service
- move of some public functions to mas-commerce-service,
- remove mas.js code for initialization, everything needs to go through the component,
- split of settings code with locale settings, make milo locale settings an explicit function,
- unit tests,
- updates of docs, especially  mas.js.html with that component

* MWPW-159257 fix unit test + register co

* review comments fixed

* MWPW-159257 some feedbacks, more coverage

* draft

* bump pkg version

* MWPW-160085: WIP

* wip

* fix cta mapping for suggested card

* ccd-suggested fixes

* dark theme update

* remove css var

* fix size attribute in hydrate

* MWPW-159257 remove init & reset concept

- also removed typescript stuff,
- refactor mixin to simple aggregated MasElement,
- refactor how things are initialised"

* update docs

* merge changes, add more docs

* update docs

* update docs

* fix docu

* add ccd test page

* MWPW-159257 remove init & reset concept

- also removed typescript stuff,
- refactor mixin to simple aggregated MasElement,
- refactor how things are initialised,
- make merch block working with this

* update docs

* merge changes, add more docs

* update ccd gallery

* update docs

* fix docu

* add dark theme

* merge

* re-enable notification test

* ost

* add doc

* fix fragment test init

* add vpn banner

* various fixes

* MWPW-159257 move to relative path

* MWPW-159257 various fixes

* rename promise -> readyPromise

not documenting it as i'm not sure it's needed by consumers

* MWPW-160015: M@S: support for mnemonic multifield

during card hydration.

* MWPW-160511: add badge

* MWPW-159257 enhance coverage

* MWPW-159257 yet more coverage

* MWPW-159257 final?

* MWPW-159257 non reported cov issues

* prob. some issue in cov reporting as its used several times

* MWPW-159257 review fixes

* yet some over c8 ignore

* MWPW-159257 removing it.only & built docs

* MWPW-159257 unwrap single condition block

* fixed issued by by QA

* MWPW-159257: [M@S] Support override env/landscape

Milo only consumes WCS prod.
However with this PR, on local and stage environments, `allow-override`
parameter will be added to `mas-commerce-service` allowing to override
the commerce env/landscape via query parameters.

* PR feedback

* reduce codecov requirement

* CCD Merch Card Combined changes

* updated deps

* links in gray

* updated deps

* strip changes

* updated deps

* updated deps

* attribute name fixed

* updated deps and new logic in hydrate

* updated deps

* updated deps

* padding for wide strip

* wide stip condition

* Update ccd.html

* updated deps

* suggested ccd card in test page

* ut

* add change in merch-card

* strikethrough color

* correct link colors

* link colors

* gray 800 link slice card

---------

Co-authored-by: Ilyas Türkben <ilyas@adobe.com>
Co-authored-by: Nicolas Peltier <npeltier@adobe.com>
Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com>

libs/deps/mas/merch-card-collection.js

@@ -96,9 +96,9 @@ import{html as l,LitElement as N}from"../lit-all.min.js";var m=class{constructor
             justify-content: end;
         }
     }
-`;var u=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var M="merch-card-collection",n={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)),v=(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"})),H=(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,E=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:n.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,_);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return l`${this.header}
+`;var d=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var M="merch-card-collection",n={alphabetical:"alphabetical",authored:"authored"},O={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},v=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),L=(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"})),H=(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,E=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:n.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,_);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return l`${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 i=this.sort===n.alphabetical?D:H,h=[L,v,B,i].reduce((s,a)=>a(s,this),o).map((s,a)=>[s,a]);if(this.resultCount=h.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=h.length>s,h=h.filter(([,a])=>a<s)}let d=new Map(h);o.forEach(s=>{if(d.has(s)){let a=d.get(s);s.style.order=a,s.setAttribute("tabindex",a+1),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()}else 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 l`<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 i=this.sort===n.alphabetical?D:H,h=[v,L,B,i].reduce((s,a)=>a(s,this),o).map((s,a)=>[s,a]);if(this.resultCount=h.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=h.length>s,h=h.filter(([,a])=>a<s)}let u=new Map(h);o.forEach(s=>{if(u.has(s)){let a=u.get(s);s.style.order=a,s.setAttribute("tabindex",a+1),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()}else 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 l`<div id="header">
                 <sp-theme theme="spectrum" color="light" scale="medium">
                     ${this.searchBar} ${this.filtersButton} ${this.sortButton}
                 </sp-theme>
@@ -122,13 +122,13 @@ import{html as l,LitElement as N}from"../lit-all.min.js";var m=class{constructor
                   treatment="outline"
                   @click="${this.openFilters}"
                   ><slot name="filtersText"></slot
-              ></sp-action-button>`:""}get searchBar(){let e=u(this,"searchText");return this.mobileAndTablet.matches?l`<merch-search deeplink="search">
+              ></sp-action-button>`:""}get searchBar(){let e=d(this,"searchText");return this.mobileAndTablet.matches?l`<merch-search deeplink="search">
                   <sp-search
                       id="searchBar"
                       @submit="${this.searchSubmit}"
                       placeholder="${e}"
                   ></sp-search>
-              </merch-search>`:""}get sortButton(){let e=u(this,"sortText"),t=u(this,"popularityText"),o=u(this,"alphabeticallyText");if(!(e&&t&&o))return;let i=this.sort===n.alphabetical;return l`
+              </merch-search>`:""}get sortButton(){let e=d(this,"sortText"),t=d(this,"popularityText"),o=d(this,"alphabeticallyText");if(!(e&&t&&o))return;let i=this.sort===n.alphabetical;return l`
             <sp-action-menu
                 id="sortButton"
                 size="m"
@@ -147,4 +147,4 @@ import{html as l,LitElement as N}from"../lit-all.min.js";var m=class{constructor
                     >${o}</sp-menu-item
                 >
             </sp-action-menu>
-        `}sortChanged(e){e.target.value===n.authored?p({sort:void 0}):p({sort:e.target.value}),this.dispatchEvent(new CustomEvent(x,{bubbles:!0,composed:!0,detail:{value:e.target.value}}))}async showMore(){this.dispatchEvent(new CustomEvent(g,{bubbles:!0,composed:!0}));let e=this.page+1;p({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=T(({category:e,filter:t,types:o,sort:i,search:c,single_app:h,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{p({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=c??"",this.singleApp=h,this.sort=i,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[R]};E.SortOrder=n;customElements.define(M,E);export{E as MerchCardCollection};
+        `}sortChanged(e){e.target.value===n.authored?p({sort:void 0}):p({sort:e.target.value}),this.dispatchEvent(new CustomEvent(x,{bubbles:!0,composed:!0,detail:{value:e.target.value}}))}async showMore(){this.dispatchEvent(new CustomEvent(g,{bubbles:!0,composed:!0}));let e=this.page+1;p({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=T(({category:e,filter:t,types:o,sort:i,search:c,single_app:h,page:u})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{p({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=c??"",this.singleApp=h,this.sort=i,this.page=Number(u)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[R]};E.SortOrder=n;customElements.define(M,E);export{E as MerchCardCollection};