diff --git a/libs/blocks/merch-twp/merch-twp.js b/libs/blocks/merch-twp/merch-twp.js index cb789c1519..78113ebaa6 100644 --- a/libs/blocks/merch-twp/merch-twp.js +++ b/libs/blocks/merch-twp/merch-twp.js @@ -55,20 +55,14 @@ export default async function init(el) { if (cards.length) { const { base } = getConfig(); await import(`${base}/features/spectrum-web-components/dist/theme.js`); - const layout = createTag('merch-subscription-layout', { }, '', { }); - const merchCards = [...cards].map((card) => { card.setAttribute('slot', 'cards'); return card; }); - layout.append(merchCards[0]); - const panel = createPanel(); - layout.append(panel); - + layout.append(...merchCards); + layout.append(createPanel()); el.append(layout); - await cards[0].querySelector('[data-wcs-osi]')?.onceSettled(); - panel.card = cards[0]; } return el; } diff --git a/libs/deps/merch-subscription-layout.js b/libs/deps/merch-subscription-layout.js index 933881b8c8..5c0cbf27ee 100644 --- a/libs/deps/merch-subscription-layout.js +++ b/libs/deps/merch-subscription-layout.js @@ -1,5 +1,5 @@ -// branch: MWPW-144805-twp commit: 3f2b985bb0f93cdac2c759c36f7e58aa704f3c16 Mon, 25 Mar 2024 16:01:55 GMT -import{LitElement as s,html as i}from"/libs/deps/lit-all.min.js";import{css as o,unsafeCSS as a}from"/libs/deps/lit-all.min.js";var e="(min-width: 768px)",n="(min-width: 1200px)";var r=o` +// branch: MWPW-144805-twp commit: 3f2b985bb0f93cdac2c759c36f7e58aa704f3c16 Tue, 26 Mar 2024 15:57:34 GMT +import{LitElement as m,html as h}from"/libs/deps/lit-all.min.js";import{css as p,unsafeCSS as c}from"/libs/deps/lit-all.min.js";var r="(min-width: 768px)",o="(min-width: 1200px)";var d=p` :host { background-color: #fbfbfb; border-radius: var(--consonant-merch-spacing-xs); @@ -40,10 +40,10 @@ import{LitElement as s,html as i}from"/libs/deps/lit-all.min.js";import{css as o grid-area: panel; } - @media ${a(e)} { + @media ${c(r)} { } - @media ${a(n)} { + @media ${c(o)} { :host { padding: 0; } @@ -64,7 +64,7 @@ import{LitElement as s,html as i}from"/libs/deps/lit-all.min.js";import{css as o grid-template-areas: 'cards panel'; } } -`;var d="merch-subscription-layout",t=class extends s{static styles=[r];render(){return i` +`;var u="merch-subscription-layout",n=class extends m{static styles=[d];cards;panel;tabs={individual:[],business:[],students:[]};connectedCallback(){if(super.connectedCallback(),this.cards=this.querySelectorAll("merch-card"),this.panel=this.querySelector("merch-subscription-panel"),this.panel&&this.cards.length){let i=[];[...this.cards].forEach(a=>{let t=a.querySelectorAll('[is="inline-price"][data-template="price"]');t.length&&(i=[...i,...[...t].map(e=>e.onceSettled())])}),Promise.all(i).then(()=>{this.cards.forEach(t=>{let e=t.querySelector('[is="inline-price"][data-template="price"]');if(!e.value)return;let{marketSegments:s,customerSegment:l}=e.value[0];s&&(s[0]==="COM"&&l==="INDIVIDUAL"?this.tabs.individual=[...this.tabs.individual,t]:s[0]==="COM"?this.tabs.business=[...this.tabs.business,t]:s[0]==="EDU"&&(this.tabs.students=[...this.tabs.students,t]))});let a=this.cards[1];this.panel.card=this.cards[0]})}}render(){return h`
@@ -75,5 +75,5 @@ import{LitElement as s,html as i}from"/libs/deps/lit-all.min.js";import{css as o
- `}};window.customElements.define(d,t);export{t as SubscriptionLayout}; + `}};window.customElements.define(u,n);export{n as SubscriptionLayout}; //# sourceMappingURL=merch-subscription-layout.js.map diff --git a/libs/deps/merch-subscription-panel.js b/libs/deps/merch-subscription-panel.js index 966274597a..550aac9fb7 100644 --- a/libs/deps/merch-subscription-panel.js +++ b/libs/deps/merch-subscription-panel.js @@ -1,4 +1,4 @@ -// branch: MWPW-144805-twp commit: 3f2b985bb0f93cdac2c759c36f7e58aa704f3c16 Tue, 26 Mar 2024 10:29:48 GMT +// branch: MWPW-144805-twp commit: 3f2b985bb0f93cdac2c759c36f7e58aa704f3c16 Tue, 26 Mar 2024 15:57:34 GMT import{LitElement as X,html as y,nothing as Z}from"/libs/deps/lit-all.min.js";function k(r,e,t){return typeof r===e?()=>r:typeof r=="function"?r:t}var g=class{constructor(e,{direction:t,elementEnterAction:s,elements:n,focusInIndex:i,isFocusableElement:a,listenerScope:c}={elements:()=>[]}){this._currentIndex=-1,this._direction=()=>"both",this.directionLength=5,this.elementEnterAction=o=>{},this._focused=!1,this._focusInIndex=o=>0,this.isFocusableElement=o=>!0,this._listenerScope=()=>this.host,this.offset=0,this.recentlyConnected=!1,this.handleFocusin=o=>{if(!this.isEventWithinListenerScope(o))return;this.isRelatedTargetAnElement(o)&&this.hostContainsFocus();let h=o.composedPath(),l=-1;h.find(d=>(l=this.elements.indexOf(d),l!==-1)),this.currentIndex=l>-1?l:this.currentIndex},this.handleFocusout=o=>{this.isRelatedTargetAnElement(o)&&this.hostNoLongerContainsFocus()},this.handleKeydown=o=>{if(!this.acceptsEventCode(o.code)||o.defaultPrevented)return;let h=0;switch(o.code){case"ArrowRight":h+=1;break;case"ArrowDown":h+=this.direction==="grid"?this.directionLength:1;break;case"ArrowLeft":h-=1;break;case"ArrowUp":h-=this.direction==="grid"?this.directionLength:1;break;case"End":this.currentIndex=0,h-=1;break;case"Home":this.currentIndex=this.elements.length-1,h+=1;break}o.preventDefault(),this.direction==="grid"&&this.currentIndex+h<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+h>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(h),this.elementEnterAction(this.elements[this.currentIndex]),this.focus()},this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation()}),this.host=e,this.host.addController(this),this._elements=n,this.isFocusableElement=a||this.isFocusableElement,this._direction=k(t,"string",this._direction),this.elementEnterAction=s||this.elementEnterAction,this._focusInIndex=k(i,"number",this._focusInIndex),this._listenerScope=k(c,"object",this._listenerScope)}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e)}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?!0:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;let e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;let t=this.currentIndex!==this.elements.length,s=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(s),this.focus()}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage()}focus(e){let t=this.elements;if(!t.length)return;let s=t[this.currentIndex];(!s||!this.isFocusableElement(s))&&(this.setCurrentIndexCircularly(1),s=t[this.currentIndex]),s&&this.isFocusableElement(s)&&s.focus(e)}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:!0})})})}setCurrentIndexCircularly(e){let{length:t}=this.elements,s=t,n=(t+this.currentIndex+e)%t;for(;s&&this.elements[n]&&!this.isFocusableElement(this.elements[n]);)n=(t+n+e)%t,s-=1;this.currentIndex=n}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=!0}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=!1}isRelatedTargetAnElement(e){let t=e.relatedTarget;return!this.elements.includes(t)}acceptsEventCode(e){if(e==="End"||e==="Home")return!0;switch(this.direction){case"horizontal":return e==="ArrowLeft"||e==="ArrowRight";case"vertical":return e==="ArrowUp"||e==="ArrowDown";case"both":case"grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners()}unmanage(){this.removeEventListeners()}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin)}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown)}hostConnected(){this.recentlyConnected=!0,this.addEventListeners()}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners()}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=!1,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:!0})}))}};var x=class extends g{constructor(){super(...arguments),this.managed=!0,this.manageIndexesAnimationFrame=0}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes())}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()))}manageTabindexes(){this.focused?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}))}updateTabindexes(e){this.elements.forEach(t=>{let{tabIndex:s,removeTabIndex:n}=e(t);if(!n){t.tabIndex=s;return}t.removeAttribute("tabindex");let i=t;i.requestUpdate&&i.requestUpdate()})}manage(){this.managed=!0,this.manageTabindexes(),super.manage()}unmanage(){this.managed=!1,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage()}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes()}};var E="merch",p="hidden",T="wcms:commerce:ready",L="wcms-commerce";var A=(r,e,{bubbles:t=!0,cancelable:s,composed:n,detail:i}={})=>window.setTimeout(()=>r?.dispatchEvent(new CustomEvent(e,{bubbles:t,cancelable:s,composed:n,detail:i})));function S(...r){let[e,...t]=r;if(!e)return null;let s=e.parentElement;if(!t.length)return s;for(;s;){if(t.every(n=>s.contains(n)))return s;s=s.parentElement}return null}function v(r){if(r.isInlinePrice){let{template:e}=r.dataset;if(e==="price"||!e)return!0}return!1}var _=(r,e)=>r.flatMap(t=>t?.split?.(/\W+/g)).filter((t,s)=>t&&(s>0||t!==E)).join(e),O=(...r)=>`${E}-${_(r,"-")}`,N=(...r)=>`${E}:${_(r,":")}`;function w(r,e=()=>!0){let t=0;for(let s of r.values())s.container?.classList.toggle(p,!e(s,t++))}var u="failed",f="pending",m="resolved",b=class{#t={};#n={};#e;#i;constructor(e,{cssPrefix:t,eventOptions:s={},eventPrefix:n}={}){this.#i=e;let i=this.#n;i.cssClassNames={},i.eventOptions=s,i.eventTypeNames={};for(let a of[u,f,m])i.cssClassNames[a]=O(t,a),i.eventTypeNames[a]=N(n,a);this.init()}#s(){let[e,{cssClassNames:t,eventOptions:s,eventTypeNames:n},i,a]=[this.#t,this.#n,this.#e,this.#i];[u,f,m].forEach(c=>{a.classList.toggle(t[c],c===i)}),A(a,n[i],{...s,detail:e})}get error(){return this.#t.error}get options(){return this.#n}get promise(){return new Promise((e,t)=>{this.subscribe(e,t)})}get state(){return this.#e}init(){return this.#e!==f?(this.#e=f,this.#s(),!0):!1}reject(e){return this.#e!==f?!1:(this.#t.error=e,this.#e=u,this.#s(),!0)}async resolve(e){return this.#e!==f?!1:(this.#t.value=e==null?void 0:await e,this.#e=m,this.#s(),!0)}subscribe(e,t=()=>{},s=!1){let[n,{eventTypeNames:i},a,c]=[this.#t,this.#n,this.#e,this.#i];if(m===a)return e(n.value,c),()=>{};if(u===a)return t?.(n.error,c),()=>{};let o=s?{once:!0}:void 0,h=d=>t(n.error,d.target),l=d=>e(n.value,d.target);return c.addEventListener(i[u],h,o),c.addEventListener(i[m],l,o),()=>{c.removeEventListener(i[u],h),c.removeEventListener(i[m],l)}}static FAILED=u;static PENDING=f;static RESOLVED=m};var z="UNKNOWN";async function W(r,e,t){let s=new Map;await Promise.allSettled(t.map(i=>i.onceSettled()));let n=0;for(let i of t){if(!e.filterPlaceholder(i,n++))continue;let a=i?.value??[];for(let{planType:c=z}of a){let o=s.get(c)??{checkoutLinks:[],inlinePrices:[],planType:c,get container(){let{checkoutLinks:h,inlinePrices:l}=o,d=S(...h,...l);if(d?.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_CONTAINS)return d}};i.isCheckoutLink?o.checkoutLinks.push(i):i.isInlinePrice&&o.inlinePrices.push(i),s.set(c,o)}}n=0;for(let i of s.values())e.filterOffer(i,n++)||s.delete(i.planType);return s}function H(r,{once:e=!1}={}){let{head:t}=document,s=null;function n(){let i=t.querySelector(L);i!==s&&(s=i,i&&r(i))}return t.addEventListener(T,n,{once:e}),window.setTimeout(n),()=>t.removeEventListener(T,n)}function P(r,e){return class extends r{#t=new b(this,{cssPrefix:e,eventPrefix:e});#n;#e;#i;#s;#o;#r;#c(s){let{offers:n}=this;if(!n)return;let i=n.get(s)??n.get(s?.planType);if(i===this.#r)return;let a=this.#r;this.#r=i,this.requestUpdate("selected",a),this.log?.debug("Selected:",{selected:this.selected?.planType,element:this})}get commerce(){return this.#n}get control(){return this.#t}get log(){return this.#i}get offers(){return this.#s}get resolveComplete(){return this.#t.promise}get selected(){return this.#r}set selected(s){this.#o=s,this.#c(s)}connectedCallback(){super.connectedCallback(),this.#e=H(s=>{let n=[this.#n,this.#i,this.#s];this.#n=s,this.#i=s.Log.module(e),this.#s=void 0,this.#i.debug("Connected:",{element:this}),this.requestUpdate("commerce",n[0]),this.requestUpdate("log",n[1]),this.requestUpdate("offers",n[2])})}disconnectedCallback(){this.#i.debug("Disconnected:",{element:this}),super.disconnectedCallback(),this.#e?.()}filterOffer(s,n){return!0}filterPlaceholder(s,n){return!0}async discoverOffers(s){this.#t.init();let n=[],{commerce:i}=this;if(i){let{CheckoutLink:c,InlinePrice:o}=i;n.push(...c.getCheckoutLinks(s),...o.getInlinePrices(s)),this.log.debug("Discovering offers:",{container:s,element:this})}let a=this.#s;try{let c=await W(s,this,n);this.#s=c,this.requestUpdate("offers",a),this.#c(this.#o)}catch(c){this.#t.reject(c)}}}}import{css as V}from"/libs/deps/lit-all.min.js";var $=V` :host { background-color: #f5f5f5;