@namiml/web-sdk 3.4.10-dev.202609011744 → 3.4.10-dev.202609011954

package/dist/components/PaywallScreen.d.ts

@@ -23,6 +23,22 @@ export declare class NamiPaywallScreen extends LitElement {
     private observeFooterHeight;
     private postImpression;
     private postPaywallScreenData;
+    /**
+     * Resolve the initially selected SKU group for the SHOW_PAYWALL payload, so a
+     * consumer learns the starting toggle state without waiting for the viewer to
+     * flip it (NAM-1066, NAM-4152). Mirrors Apple's EnvironmentWrapperView.onAppear
+     * and Android's ComponentPaywallViewModel: nothing is reported unless the
+     * paywall actually has something to toggle between.
+     *
+     * The name comes from the group's `displayName` rather than
+     * `state.currentGroupName`, which stays empty until a real toggle interaction
+     * writes it via setCurrentGroupData.
+     *
+     * Ordering is safe here without the explicit priming Apple needs:
+     * connectedCallback builds the context provider (running setPaywall, which
+     * seeds `groups` and `currentGroupId`) before firstUpdated emits.
+     */
+    private initialGroupChange;
     private getTemplate;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/nami-web.cjs

@@ -522,7 +522,7 @@
     `),e.map(e=>e.map(e=>(e.spacing&&(this.slideSpacing=2*e.spacing),t.html(eF||(eF=tF`
                 <div class="swiper-slide">
                   ${0}
-                </div>`),$u(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))))))}}])}();Ae([ot({type:Object})],iF.prototype,"component",void 0),Ae([ot({type:Boolean})],iF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],iF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],iF.prototype,"minSDKVersion",void 0),iF=Ae([Fe("nami-carousel-container")],iF);var nF=function(){function e(){var t;return u(this,e),(t=s(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Io({contextProvider:t.contextProvider,onTap:t.muted?t.component.mutedOnTap:t.component.volumeOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return y(e,Es),m(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n="vertical"===e.direction?"margin-top":"margin-left";return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${$s(e,!1)}\n        ${js(e)}\n        ${eu(e,i,!1)}\n      }\n      :host(:focus){\n        ${$s(e,!0)}\n        ${eu(e,i,!0)}\n      }\n      :host(:focus-visible){\n        ${ou(e)}\n      }\n      :host > *:not(:first-child) {\n        ${n}: ${e.spacing?e.spacing*i:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;this.muted=null!==(e=null===(t=Co.instance)||void 0===t?void 0:t.muted)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0});var i=this.muted?this.component.mutedComponents:this.component.volumeComponents;return null==i?void 0:i.map(e=>$u(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],nF.prototype,"component",void 0),Ae([ot({type:Boolean})],nF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],nF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],nF.prototype,"minSDKVersion",void 0),nF=Ae([Fe("nami-volume-button")],nF);var aF=function(){function e(){var t;return u(this,e),(t=s(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Io({contextProvider:t.contextProvider,onTap:t.playing?t.component.playingOnTap:t.component.pausedOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return y(e,Es),m(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n="vertical"===e.direction?"margin-top":"margin-left";return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${$s(e,!1)}\n        ${js(e)}\n        ${eu(e,i,!1)}\n      }\n      :host(:focus){\n        ${$s(e,!0)}\n        ${eu(e,i,!0)}\n      }\n      :host(:focus-visible){\n        ${ou(e)}\n      }\n      :host > *:not(:first-child) {\n        ${n}: ${e.spacing?e.spacing*i:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;return this.playing=null!==(e=null===(t=Co.instance)||void 0===t?void 0:t.playing)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0}),(this.playing?this.component.playingComponents:this.component.pausedComponents).map(e=>$u(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],aF.prototype,"component",void 0),Ae([ot({type:Boolean})],aF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],aF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],aF.prototype,"minSDKVersion",void 0),aF=Ae([Fe("nami-play-pause-button")],aF);var rF=function(){function e(){var t;return u(this,e),(t=s(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t}return y(e,Es),m(e,[{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n=this.minSDKVersion,a=e.backgroundBlur,r="vertical"===e.direction,o=r?"width":"height",s=r?"margin-top":"margin-left",u=t.unsafeCSS(Ns(e));return t.unsafeCSS(`\n        :host {\n          box-sizing: border-box;\n          display: ${e.hidden?"none":"flex"};\n          ${a?`backdrop-filter: blur(${a}px);`:""}\n          ${u};\n          ${iu(e.position)}\n          ${js(e)}\n          ${eu(e,i,!1)}\n          display: ${e.hidden?"none":"flex"};\n          align-items: center;\n          justify-content: center;\n        }\n        :host(:focus){\n          ${$s(e,!0)}\n          ${eu(e,i,!0)}\n        }\n        :host(:focus-visible){\n          ${ou(e)}\n        }\n        /* Overlapping children center on both axes like the other SDKs' ZStack;\n           the flex center on :host doesn't reach absolutely-positioned boxes. */\n        :host > *:not(nami-text) {\n          position: absolute;\n          inset: 0;\n          margin: auto;\n        }\n        :host > * {\n          ${zs(n,o)}\n        }\n        :host > nami-text:not(:first-child) {\n          ${s}: ${e.spacing?e.spacing*i:0}px;\n        }\n    `)}},{key:"render",value:function(){var e,t=this.component,i=t.focusedBorderColor,n=t.focusedFillColor,a=t.fillColor;return!i&&oa(a,n)||(this.tabIndex=0),(null!==(e=this.component.components)&&void 0!==e?e:[]).map(e=>$u(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))}}])}();Ae([ot({type:Object})],rF.prototype,"component",void 0),Ae([ot({type:Boolean})],rF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],rF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],rF.prototype,"minSDKVersion",void 0),rF=Ae([Fe("nami-stack")],rF);var oF,sF,uF,lF=e=>e,dF="nami-disabled",hF=(oF=function(){function i(){var e;return u(this,i),(e=s(this,i,arguments)).active=!0,e.timeSpentOnPaywall=0,e.activeTemplate=null,e}return y(i,t.LitElement),m(i,[{key:"connectedCallback",value:function(){M(i,"connectedCallback",this)([]),this.minSDKVersion=e.parseToSemver(this.paywall.template.min_sdk_version),this.contextProvider=ut.create(this.paywall,this.context,this.campaign),this.contextConsumer=new fs(this,this.contextProvider),this.flow&&this.contextProvider.setFlow(this.flow),this.contextProvider.setTimeSpentOnPaywall(this.timeSpentOnPaywall),this.contextProvider.state.userInteractionEnabled||this.classList.add(dF),this.teardownEvent=this.contextProvider.onEvent("user-interaction-changed",this.userInteractionListener.bind(this))}},{key:"disconnectedCallback",value:function(){var e;M(i,"disconnectedCallback",this)([]),ut.remove(this.contextProvider),this.teardownEvent(),null===(e=this.footerResizeObserver)||void 0===e||e.disconnect(),this.active&&xo()}},{key:"userInteractionListener",value:function(e){this.classList.toggle(dF,!e.enabled)}},{key:"firstUpdated",value:function(){this.postImpression(),this.postPaywallScreenData(),this.updateActiveRenderRoot(),this.observeFooterHeight()}},{key:"updated",value:function(){this.updateActiveRenderRoot()}},{key:"updateActiveRenderRoot",value:function(){this.active&&this.activeTemplate&&(So(this.activeTemplate,this.contextProvider),function(e){if(Va("setActivePageRenderRoot:enter",{hasRoot:!!e,rootType:e instanceof Element?Xa(e):e instanceof DocumentFragment?"document-fragment":String(e),activePageKey:wa,activePageAnnounced:ba,activeElement:Xa(ir())}),ya=e,e&&pa&&!ba){var t=ir();if(t&&"contains"in e&&e.contains(t))Eo(t);else if(e instanceof DocumentFragment){var i=e.activeElement;i&&Eo(i)}}}(this.renderRoot))}},{key:"observeFooterHeight",value:function(){if("undefined"!=typeof ResizeObserver){var e=this.renderRoot.querySelector("nami-footer");e&&(this.footerResizeObserver=new ResizeObserver(e=>{var t,i,n=e[e.length-1];if(n){var a=null!==(t=null===(i=n.borderBoxSize)||void 0===i||null===(i=i[0])||void 0===i?void 0:i.blockSize)&&void 0!==t?t:n.contentRect.height;this.style.setProperty("--nami-footer-height",`${a}px`)}}),this.footerResizeObserver.observe(e))}}},{key:"postImpression",value:function(){var t,i;null!==(t=this.paywall)&&void 0!==t&&t.id&&(t=>{var i,n,a;S(function(r){for(;;)switch(r.p=r.n){case 0:if(!e.isAnonymousMode()){r.n=1;break}return e.logger.info("Skipping paywall impression - anonymous mode"),r.a(2);case 1:return(i=e.storageService.getSessionId())&&(t.session=i),(n=e.storageService.getLaunchId())&&(t.launch_id=n),t.app_env="production",t.url_params=e.getUrlParams(),e.logger.info("Post paywall impression - segment ",t.segment),r.p=2,r.n=3,o(e.NamiAPI.instance.postImpression(t));case 3:r.n=5;break;case 4:r.p=4,a=r.v,e.logger.error("Error posting impression",a);case 5:return r.a(2)}},null,null,[[2,4]],Promise)})({segment:null===(i=this.campaign)||void 0===i?void 0:i.segment,call_to_action:this.paywall.id})}},{key:"postPaywallScreenData",value:function(){e.NamiEventEmitter.getInstance().emit(e.PAYWALL_ACTION_EVENT,v({},this.contextProvider.getPaywallActionEventData(),{action:e.NamiPaywallAction.SHOW_PAYWALL}))}},{key:"getTemplate",value:function(){var e,t,i,n;this.contextProvider.state.selectedPaywall===this.paywall?t=this.contextProvider.state.currentPage:t=null!==(i=null===(n=this.paywall.template)||void 0===n||null===(n=n.initialState)||void 0===n?void 0:n.currentPage)&&void 0!==i?i:"page1";var a=null===(e=this.paywall.template)||void 0===e?void 0:e.pages.find(e=>e.name===t);if(!a)throw new Error(`Page with name ${t} not found in paywall template.`);return this.activeTemplate=a,this.active&&So(a,this.contextProvider),a}},{key:"render",value:function(){var i,n=this.getTemplate(),a=n.backgroundContainer,r=n.header,o=void 0===r?[]:r,s=n.footer,u=void 0===s?[]:s,l=n.contentContainer,d=null!==(i=this.contextProvider.state.fullScreenPresentation)&&void 0!==i&&i,h=this.contextProvider.getFormFactor(),c=e.getDeviceScaleFactor(h);return t.html(sF||(sF=lF`
+                </div>`),$u(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))))))}}])}();Ae([ot({type:Object})],iF.prototype,"component",void 0),Ae([ot({type:Boolean})],iF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],iF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],iF.prototype,"minSDKVersion",void 0),iF=Ae([Fe("nami-carousel-container")],iF);var nF=function(){function e(){var t;return u(this,e),(t=s(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Io({contextProvider:t.contextProvider,onTap:t.muted?t.component.mutedOnTap:t.component.volumeOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return y(e,Es),m(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n="vertical"===e.direction?"margin-top":"margin-left";return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${$s(e,!1)}\n        ${js(e)}\n        ${eu(e,i,!1)}\n      }\n      :host(:focus){\n        ${$s(e,!0)}\n        ${eu(e,i,!0)}\n      }\n      :host(:focus-visible){\n        ${ou(e)}\n      }\n      :host > *:not(:first-child) {\n        ${n}: ${e.spacing?e.spacing*i:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;this.muted=null!==(e=null===(t=Co.instance)||void 0===t?void 0:t.muted)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0});var i=this.muted?this.component.mutedComponents:this.component.volumeComponents;return null==i?void 0:i.map(e=>$u(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],nF.prototype,"component",void 0),Ae([ot({type:Boolean})],nF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],nF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],nF.prototype,"minSDKVersion",void 0),nF=Ae([Fe("nami-volume-button")],nF);var aF=function(){function e(){var t;return u(this,e),(t=s(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Io({contextProvider:t.contextProvider,onTap:t.playing?t.component.playingOnTap:t.component.pausedOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return y(e,Es),m(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n="vertical"===e.direction?"margin-top":"margin-left";return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${$s(e,!1)}\n        ${js(e)}\n        ${eu(e,i,!1)}\n      }\n      :host(:focus){\n        ${$s(e,!0)}\n        ${eu(e,i,!0)}\n      }\n      :host(:focus-visible){\n        ${ou(e)}\n      }\n      :host > *:not(:first-child) {\n        ${n}: ${e.spacing?e.spacing*i:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;return this.playing=null!==(e=null===(t=Co.instance)||void 0===t?void 0:t.playing)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0}),(this.playing?this.component.playingComponents:this.component.pausedComponents).map(e=>$u(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],aF.prototype,"component",void 0),Ae([ot({type:Boolean})],aF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],aF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],aF.prototype,"minSDKVersion",void 0),aF=Ae([Fe("nami-play-pause-button")],aF);var rF=function(){function e(){var t;return u(this,e),(t=s(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t}return y(e,Es),m(e,[{key:"styles",value:function(){var e=this.component,i=this.scaleFactor,n=this.minSDKVersion,a=e.backgroundBlur,r="vertical"===e.direction,o=r?"width":"height",s=r?"margin-top":"margin-left",u=t.unsafeCSS(Ns(e));return t.unsafeCSS(`\n        :host {\n          box-sizing: border-box;\n          display: ${e.hidden?"none":"flex"};\n          ${a?`backdrop-filter: blur(${a}px);`:""}\n          ${u};\n          ${iu(e.position)}\n          ${js(e)}\n          ${eu(e,i,!1)}\n          display: ${e.hidden?"none":"flex"};\n          align-items: center;\n          justify-content: center;\n        }\n        :host(:focus){\n          ${$s(e,!0)}\n          ${eu(e,i,!0)}\n        }\n        :host(:focus-visible){\n          ${ou(e)}\n        }\n        /* Overlapping children center on both axes like the other SDKs' ZStack;\n           the flex center on :host doesn't reach absolutely-positioned boxes. */\n        :host > *:not(nami-text) {\n          position: absolute;\n          inset: 0;\n          margin: auto;\n        }\n        :host > * {\n          ${zs(n,o)}\n        }\n        :host > nami-text:not(:first-child) {\n          ${s}: ${e.spacing?e.spacing*i:0}px;\n        }\n    `)}},{key:"render",value:function(){var e,t=this.component,i=t.focusedBorderColor,n=t.focusedFillColor,a=t.fillColor;return!i&&oa(a,n)||(this.tabIndex=0),(null!==(e=this.component.components)&&void 0!==e?e:[]).map(e=>$u(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))}}])}();Ae([ot({type:Object})],rF.prototype,"component",void 0),Ae([ot({type:Boolean})],rF.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],rF.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],rF.prototype,"minSDKVersion",void 0),rF=Ae([Fe("nami-stack")],rF);var oF,sF,uF,lF=e=>e,dF="nami-disabled",hF=(oF=function(){function i(){var e;return u(this,i),(e=s(this,i,arguments)).active=!0,e.timeSpentOnPaywall=0,e.activeTemplate=null,e}return y(i,t.LitElement),m(i,[{key:"connectedCallback",value:function(){M(i,"connectedCallback",this)([]),this.minSDKVersion=e.parseToSemver(this.paywall.template.min_sdk_version),this.contextProvider=ut.create(this.paywall,this.context,this.campaign),this.contextConsumer=new fs(this,this.contextProvider),this.flow&&this.contextProvider.setFlow(this.flow),this.contextProvider.setTimeSpentOnPaywall(this.timeSpentOnPaywall),this.contextProvider.state.userInteractionEnabled||this.classList.add(dF),this.teardownEvent=this.contextProvider.onEvent("user-interaction-changed",this.userInteractionListener.bind(this))}},{key:"disconnectedCallback",value:function(){var e;M(i,"disconnectedCallback",this)([]),ut.remove(this.contextProvider),this.teardownEvent(),null===(e=this.footerResizeObserver)||void 0===e||e.disconnect(),this.active&&xo()}},{key:"userInteractionListener",value:function(e){this.classList.toggle(dF,!e.enabled)}},{key:"firstUpdated",value:function(){this.postImpression(),this.postPaywallScreenData(),this.updateActiveRenderRoot(),this.observeFooterHeight()}},{key:"updated",value:function(){this.updateActiveRenderRoot()}},{key:"updateActiveRenderRoot",value:function(){this.active&&this.activeTemplate&&(So(this.activeTemplate,this.contextProvider),function(e){if(Va("setActivePageRenderRoot:enter",{hasRoot:!!e,rootType:e instanceof Element?Xa(e):e instanceof DocumentFragment?"document-fragment":String(e),activePageKey:wa,activePageAnnounced:ba,activeElement:Xa(ir())}),ya=e,e&&pa&&!ba){var t=ir();if(t&&"contains"in e&&e.contains(t))Eo(t);else if(e instanceof DocumentFragment){var i=e.activeElement;i&&Eo(i)}}}(this.renderRoot))}},{key:"observeFooterHeight",value:function(){if("undefined"!=typeof ResizeObserver){var e=this.renderRoot.querySelector("nami-footer");e&&(this.footerResizeObserver=new ResizeObserver(e=>{var t,i,n=e[e.length-1];if(n){var a=null!==(t=null===(i=n.borderBoxSize)||void 0===i||null===(i=i[0])||void 0===i?void 0:i.blockSize)&&void 0!==t?t:n.contentRect.height;this.style.setProperty("--nami-footer-height",`${a}px`)}}),this.footerResizeObserver.observe(e))}}},{key:"postImpression",value:function(){var t,i;null!==(t=this.paywall)&&void 0!==t&&t.id&&(t=>{var i,n,a;S(function(r){for(;;)switch(r.p=r.n){case 0:if(!e.isAnonymousMode()){r.n=1;break}return e.logger.info("Skipping paywall impression - anonymous mode"),r.a(2);case 1:return(i=e.storageService.getSessionId())&&(t.session=i),(n=e.storageService.getLaunchId())&&(t.launch_id=n),t.app_env="production",t.url_params=e.getUrlParams(),e.logger.info("Post paywall impression - segment ",t.segment),r.p=2,r.n=3,o(e.NamiAPI.instance.postImpression(t));case 3:r.n=5;break;case 4:r.p=4,a=r.v,e.logger.error("Error posting impression",a);case 5:return r.a(2)}},null,null,[[2,4]],Promise)})({segment:null===(i=this.campaign)||void 0===i?void 0:i.segment,call_to_action:this.paywall.id})}},{key:"postPaywallScreenData",value:function(){var t=this.initialGroupChange();e.NamiEventEmitter.getInstance().emit(e.PAYWALL_ACTION_EVENT,v({},this.contextProvider.getPaywallActionEventData(),{action:e.NamiPaywallAction.SHOW_PAYWALL},t&&{componentChange:t}))}},{key:"initialGroupChange",value:function(){var e=this.contextProvider.state,t=e.groups,i=e.currentGroupId;if(!(t.length<=1)&&i){var n=t.find(({id:e})=>e===i);if(n)return{id:n.id,name:n.displayName}}}},{key:"getTemplate",value:function(){var e,t,i,n;this.contextProvider.state.selectedPaywall===this.paywall?t=this.contextProvider.state.currentPage:t=null!==(i=null===(n=this.paywall.template)||void 0===n||null===(n=n.initialState)||void 0===n?void 0:n.currentPage)&&void 0!==i?i:"page1";var a=null===(e=this.paywall.template)||void 0===e?void 0:e.pages.find(e=>e.name===t);if(!a)throw new Error(`Page with name ${t} not found in paywall template.`);return this.activeTemplate=a,this.active&&So(a,this.contextProvider),a}},{key:"render",value:function(){var i,n=this.getTemplate(),a=n.backgroundContainer,r=n.header,o=void 0===r?[]:r,s=n.footer,u=void 0===s?[]:s,l=n.contentContainer,d=null!==(i=this.contextProvider.state.fullScreenPresentation)&&void 0!==i&&i,h=this.contextProvider.getFormFactor(),c=e.getDeviceScaleFactor(h);return t.html(sF||(sF=lF`
       <nami-background-container
         .component=${0}
         .scaleFactor=${0}

package/dist/nami-web.d.ts

@@ -330,7 +330,7 @@ declare class NamiResponsiveGrid extends NamiElement {
     private isGroupedHorizontal;
     private isTimelineActive;
     protected styles(): CSSResult;
-    render(): lit_html.TemplateResult<1> | any[][] | lit_html.TemplateResult<1>[];
+    render(): any[][] | lit_html.TemplateResult<1> | lit_html.TemplateResult<1>[];
     protected updated(): void;
     private measureTimeline;
     private readTimelineGeometry;
@@ -432,6 +432,22 @@ declare class NamiPaywallScreen extends LitElement {
     private observeFooterHeight;
     private postImpression;
     private postPaywallScreenData;
+    /**
+     * Resolve the initially selected SKU group for the SHOW_PAYWALL payload, so a
+     * consumer learns the starting toggle state without waiting for the viewer to
+     * flip it (NAM-1066, NAM-4152). Mirrors Apple's EnvironmentWrapperView.onAppear
+     * and Android's ComponentPaywallViewModel: nothing is reported unless the
+     * paywall actually has something to toggle between.
+     *
+     * The name comes from the group's `displayName` rather than
+     * `state.currentGroupName`, which stays empty until a real toggle interaction
+     * writes it via setCurrentGroupData.
+     *
+     * Ordering is safe here without the explicit priming Apple needs:
+     * connectedCallback builds the context provider (running setPaywall, which
+     * seeds `groups` and `currentGroupId`) before firstUpdated emits.
+     */
+    private initialGroupChange;
     private getTemplate;
     render(): lit_html.TemplateResult<1>;
 }

package/dist/nami-web.mjs

@@ -522,7 +522,7 @@ import{NAMI_SDK_VERSION as e,getExtendedClientInfo as t,PaywallState as i,logger
     `),e.map(e=>e.map(e=>(e.spacing&&(this.slideSpacing=2*e.spacing),z(GF||(GF=VF`
                 <div class="swiper-slide">
                   ${0}
-                </div>`),xl(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))))))}}])}();yt([Jt({type:Object})],KF.prototype,"component",void 0),yt([Jt({type:Boolean})],KF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],KF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],KF.prototype,"minSDKVersion",void 0),KF=yt([Pt("nami-carousel-container")],KF);var XF=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Ss({contextProvider:t.contextProvider,onTap:t.muted?t.component.mutedOnTap:t.component.volumeOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return le(e,fu),ae(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i="vertical"===e.direction?"margin-top":"margin-left";return H(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${xu(e,!1)}\n        ${Iu(e)}\n        ${Gu(e,t,!1)}\n      }\n      :host(:focus){\n        ${xu(e,!0)}\n        ${Gu(e,t,!0)}\n      }\n      :host(:focus-visible){\n        ${Ju(e)}\n      }\n      :host > *:not(:first-child) {\n        ${i}: ${e.spacing?e.spacing*t:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;this.muted=null!==(e=null===(t=ks.instance)||void 0===t?void 0:t.muted)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0});var i=this.muted?this.component.mutedComponents:this.component.volumeComponents;return null==i?void 0:i.map(e=>xl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();yt([Jt({type:Object})],XF.prototype,"component",void 0),yt([Jt({type:Boolean})],XF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],XF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],XF.prototype,"minSDKVersion",void 0),XF=yt([Pt("nami-volume-button")],XF);var YF=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Ss({contextProvider:t.contextProvider,onTap:t.playing?t.component.playingOnTap:t.component.pausedOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return le(e,fu),ae(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i="vertical"===e.direction?"margin-top":"margin-left";return H(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${xu(e,!1)}\n        ${Iu(e)}\n        ${Gu(e,t,!1)}\n      }\n      :host(:focus){\n        ${xu(e,!0)}\n        ${Gu(e,t,!0)}\n      }\n      :host(:focus-visible){\n        ${Ju(e)}\n      }\n      :host > *:not(:first-child) {\n        ${i}: ${e.spacing?e.spacing*t:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;return this.playing=null!==(e=null===(t=ks.instance)||void 0===t?void 0:t.playing)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0}),(this.playing?this.component.playingComponents:this.component.pausedComponents).map(e=>xl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();yt([Jt({type:Object})],YF.prototype,"component",void 0),yt([Jt({type:Boolean})],YF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],YF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],YF.prototype,"minSDKVersion",void 0),YF=yt([Pt("nami-play-pause-button")],YF);var qF=function(){function e(){var t;return Z(this,e),(t=Q(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t}return le(e,fu),ae(e,[{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i=this.minSDKVersion,n=e.backgroundBlur,a="vertical"===e.direction,r=a?"width":"height",o=a?"margin-top":"margin-left",s=H(Cu(e));return H(`\n        :host {\n          box-sizing: border-box;\n          display: ${e.hidden?"none":"flex"};\n          ${n?`backdrop-filter: blur(${n}px);`:""}\n          ${s};\n          ${Ku(e.position)}\n          ${Iu(e)}\n          ${Gu(e,t,!1)}\n          display: ${e.hidden?"none":"flex"};\n          align-items: center;\n          justify-content: center;\n        }\n        :host(:focus){\n          ${xu(e,!0)}\n          ${Gu(e,t,!0)}\n        }\n        :host(:focus-visible){\n          ${Ju(e)}\n        }\n        /* Overlapping children center on both axes like the other SDKs' ZStack;\n           the flex center on :host doesn't reach absolutely-positioned boxes. */\n        :host > *:not(nami-text) {\n          position: absolute;\n          inset: 0;\n          margin: auto;\n        }\n        :host > * {\n          ${_u(i,r)}\n        }\n        :host > nami-text:not(:first-child) {\n          ${o}: ${e.spacing?e.spacing*t:0}px;\n        }\n    `)}},{key:"render",value:function(){var e,t=this.component,i=t.focusedBorderColor,n=t.focusedFillColor,a=t.fillColor;return!i&&Ja(a,n)||(this.tabIndex=0),(null!==(e=this.component.components)&&void 0!==e?e:[]).map(e=>xl(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))}}])}();yt([Jt({type:Object})],qF.prototype,"component",void 0),yt([Jt({type:Boolean})],qF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],qF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],qF.prototype,"minSDKVersion",void 0),qF=yt([Pt("nami-stack")],qF);var JF,QF,ZF,eO=e=>e,tO="nami-disabled",iO=(JF=function(){function e(){var t;return Z(this,e),(t=Q(this,e,arguments)).active=!0,t.timeSpentOnPaywall=0,t.activeTemplate=null,t}return le(e,U),ae(e,[{key:"connectedCallback",value:function(){ge(e,"connectedCallback",this)([]),this.minSDKVersion=W(this.paywall.template.min_sdk_version),this.contextProvider=Zt.create(this.paywall,this.context,this.campaign),this.contextConsumer=new ru(this,this.contextProvider),this.flow&&this.contextProvider.setFlow(this.flow),this.contextProvider.setTimeSpentOnPaywall(this.timeSpentOnPaywall),this.contextProvider.state.userInteractionEnabled||this.classList.add(tO),this.teardownEvent=this.contextProvider.onEvent("user-interaction-changed",this.userInteractionListener.bind(this))}},{key:"disconnectedCallback",value:function(){var t;ge(e,"disconnectedCallback",this)([]),Zt.remove(this.contextProvider),this.teardownEvent(),null===(t=this.footerResizeObserver)||void 0===t||t.disconnect(),this.active&&ws()}},{key:"userInteractionListener",value:function(e){this.classList.toggle(tO,!e.enabled)}},{key:"firstUpdated",value:function(){this.postImpression(),this.postPaywallScreenData(),this.updateActiveRenderRoot(),this.observeFooterHeight()}},{key:"updated",value:function(){this.updateActiveRenderRoot()}},{key:"updateActiveRenderRoot",value:function(){this.active&&this.activeTemplate&&(ms(this.activeTemplate,this.contextProvider),function(e){if(Wr("setActivePageRenderRoot:enter",{hasRoot:!!e,rootType:e instanceof Element?Nr(e):e instanceof DocumentFragment?"document-fragment":String(e),activePageKey:hr,activePageAnnounced:dr,activeElement:Nr(Kr())}),lr=e,e&&sr&&!dr){var t=Kr();if(t&&"contains"in e&&e.contains(t))fs(t);else if(e instanceof DocumentFragment){var i=e.activeElement;i&&fs(i)}}}(this.renderRoot))}},{key:"observeFooterHeight",value:function(){if("undefined"!=typeof ResizeObserver){var e=this.renderRoot.querySelector("nami-footer");e&&(this.footerResizeObserver=new ResizeObserver(e=>{var t,i,n=e[e.length-1];if(n){var a=null!==(t=null===(i=n.borderBoxSize)||void 0===i||null===(i=i[0])||void 0===i?void 0:i.blockSize)&&void 0!==t?t:n.contentRect.height;this.style.setProperty("--nami-footer-height",`${a}px`)}}),this.footerResizeObserver.observe(e))}}},{key:"postImpression",value:function(){var e,t;null!==(e=this.paywall)&&void 0!==e&&e.id&&(e=>{var t,i,a;me(function(r){for(;;)switch(r.p=r.n){case 0:if(!O()){r.n=1;break}return n.info("Skipping paywall impression - anonymous mode"),r.a(2);case 1:return(t=g.getSessionId())&&(e.session=t),(i=g.getLaunchId())&&(e.launch_id=i),e.app_env="production",e.url_params=s(),n.info("Post paywall impression - segment ",e.segment),r.p=2,r.n=3,J(F.instance.postImpression(e));case 3:r.n=5;break;case 4:r.p=4,a=r.v,n.error("Error posting impression",a);case 5:return r.a(2)}},null,null,[[2,4]],Promise)})({segment:null===(t=this.campaign)||void 0===t?void 0:t.segment,call_to_action:this.paywall.id})}},{key:"postPaywallScreenData",value:function(){v.getInstance().emit(p,oe({},this.contextProvider.getPaywallActionEventData(),{action:f.SHOW_PAYWALL}))}},{key:"getTemplate",value:function(){var e,t,i,n;this.contextProvider.state.selectedPaywall===this.paywall?t=this.contextProvider.state.currentPage:t=null!==(i=null===(n=this.paywall.template)||void 0===n||null===(n=n.initialState)||void 0===n?void 0:n.currentPage)&&void 0!==i?i:"page1";var a=null===(e=this.paywall.template)||void 0===e?void 0:e.pages.find(e=>e.name===t);if(!a)throw new Error(`Page with name ${t} not found in paywall template.`);return this.activeTemplate=a,this.active&&ms(a,this.contextProvider),a}},{key:"render",value:function(){var e,t=this.getTemplate(),i=t.backgroundContainer,n=t.header,a=void 0===n?[]:n,r=t.footer,o=void 0===r?[]:r,s=t.contentContainer,u=null!==(e=this.contextProvider.state.fullScreenPresentation)&&void 0!==e&&e,l=this.contextProvider.getFormFactor(),d=$(l);return z(QF||(QF=eO`
+                </div>`),xl(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))))))}}])}();yt([Jt({type:Object})],KF.prototype,"component",void 0),yt([Jt({type:Boolean})],KF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],KF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],KF.prototype,"minSDKVersion",void 0),KF=yt([Pt("nami-carousel-container")],KF);var XF=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Ss({contextProvider:t.contextProvider,onTap:t.muted?t.component.mutedOnTap:t.component.volumeOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return le(e,fu),ae(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i="vertical"===e.direction?"margin-top":"margin-left";return H(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${xu(e,!1)}\n        ${Iu(e)}\n        ${Gu(e,t,!1)}\n      }\n      :host(:focus){\n        ${xu(e,!0)}\n        ${Gu(e,t,!0)}\n      }\n      :host(:focus-visible){\n        ${Ju(e)}\n      }\n      :host > *:not(:first-child) {\n        ${i}: ${e.spacing?e.spacing*t:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;this.muted=null!==(e=null===(t=ks.instance)||void 0===t?void 0:t.muted)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0});var i=this.muted?this.component.mutedComponents:this.component.volumeComponents;return null==i?void 0:i.map(e=>xl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();yt([Jt({type:Object})],XF.prototype,"component",void 0),yt([Jt({type:Boolean})],XF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],XF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],XF.prototype,"minSDKVersion",void 0),XF=yt([Pt("nami-volume-button")],XF);var YF=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleBlur=()=>{t.inFocusedState=!1},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t._handleClick=()=>{Ss({contextProvider:t.contextProvider,onTap:t.playing?t.component.playingOnTap:t.component.pausedOnTap}),t.requestUpdate()},t.addEventListener("click",t._handleClick,!1),t.addEventListener("focus",t._handleFocus,!1),t.addEventListener("blur",t._handleBlur,!1),t.addEventListener("keydown",t._handleKeyDown,!1),t}return le(e,fu),ae(e,[{key:"updated",value:function(){var e;this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=null!==(e=this.component.screenreaderHint)&&void 0!==e?e:""}},{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i="vertical"===e.direction?"margin-top":"margin-left";return H(`\n      :host {\n        box-sizing: border-box;\n        display: ${e.hidden?"none":"flex"};\n        cursor: pointer;\n        ${xu(e,!1)}\n        ${Iu(e)}\n        ${Gu(e,t,!1)}\n      }\n      :host(:focus){\n        ${xu(e,!0)}\n        ${Gu(e,t,!0)}\n      }\n      :host(:focus-visible){\n        ${Ju(e)}\n      }\n      :host > *:not(:first-child) {\n        ${i}: ${e.spacing?e.spacing*t:0}px;\n      }\n    `)}},{key:"render",value:function(){var e,t;return this.playing=null!==(e=null===(t=ks.instance)||void 0===t?void 0:t.playing)&&void 0!==e&&e,this.tabIndex=0,this.role="button",1==this.inFocusedState&&this.focus({preventScroll:!0}),(this.playing?this.component.playingComponents:this.component.pausedComponents).map(e=>xl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();yt([Jt({type:Object})],YF.prototype,"component",void 0),yt([Jt({type:Boolean})],YF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],YF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],YF.prototype,"minSDKVersion",void 0),YF=yt([Pt("nami-play-pause-button")],YF);var qF=function(){function e(){var t;return Z(this,e),(t=Q(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t}return le(e,fu),ae(e,[{key:"styles",value:function(){var e=this.component,t=this.scaleFactor,i=this.minSDKVersion,n=e.backgroundBlur,a="vertical"===e.direction,r=a?"width":"height",o=a?"margin-top":"margin-left",s=H(Cu(e));return H(`\n        :host {\n          box-sizing: border-box;\n          display: ${e.hidden?"none":"flex"};\n          ${n?`backdrop-filter: blur(${n}px);`:""}\n          ${s};\n          ${Ku(e.position)}\n          ${Iu(e)}\n          ${Gu(e,t,!1)}\n          display: ${e.hidden?"none":"flex"};\n          align-items: center;\n          justify-content: center;\n        }\n        :host(:focus){\n          ${xu(e,!0)}\n          ${Gu(e,t,!0)}\n        }\n        :host(:focus-visible){\n          ${Ju(e)}\n        }\n        /* Overlapping children center on both axes like the other SDKs' ZStack;\n           the flex center on :host doesn't reach absolutely-positioned boxes. */\n        :host > *:not(nami-text) {\n          position: absolute;\n          inset: 0;\n          margin: auto;\n        }\n        :host > * {\n          ${_u(i,r)}\n        }\n        :host > nami-text:not(:first-child) {\n          ${o}: ${e.spacing?e.spacing*t:0}px;\n        }\n    `)}},{key:"render",value:function(){var e,t=this.component,i=t.focusedBorderColor,n=t.focusedFillColor,a=t.fillColor;return!i&&Ja(a,n)||(this.tabIndex=0),(null!==(e=this.component.components)&&void 0!==e?e:[]).map(e=>xl(this.contextProvider,e,this.scaleFactor,void 0,this.minSDKVersion))}}])}();yt([Jt({type:Object})],qF.prototype,"component",void 0),yt([Jt({type:Boolean})],qF.prototype,"inFocusedState",void 0),yt([Jt({type:Number})],qF.prototype,"scaleFactor",void 0),yt([Jt({type:Object})],qF.prototype,"minSDKVersion",void 0),qF=yt([Pt("nami-stack")],qF);var JF,QF,ZF,eO=e=>e,tO="nami-disabled",iO=(JF=function(){function e(){var t;return Z(this,e),(t=Q(this,e,arguments)).active=!0,t.timeSpentOnPaywall=0,t.activeTemplate=null,t}return le(e,U),ae(e,[{key:"connectedCallback",value:function(){ge(e,"connectedCallback",this)([]),this.minSDKVersion=W(this.paywall.template.min_sdk_version),this.contextProvider=Zt.create(this.paywall,this.context,this.campaign),this.contextConsumer=new ru(this,this.contextProvider),this.flow&&this.contextProvider.setFlow(this.flow),this.contextProvider.setTimeSpentOnPaywall(this.timeSpentOnPaywall),this.contextProvider.state.userInteractionEnabled||this.classList.add(tO),this.teardownEvent=this.contextProvider.onEvent("user-interaction-changed",this.userInteractionListener.bind(this))}},{key:"disconnectedCallback",value:function(){var t;ge(e,"disconnectedCallback",this)([]),Zt.remove(this.contextProvider),this.teardownEvent(),null===(t=this.footerResizeObserver)||void 0===t||t.disconnect(),this.active&&ws()}},{key:"userInteractionListener",value:function(e){this.classList.toggle(tO,!e.enabled)}},{key:"firstUpdated",value:function(){this.postImpression(),this.postPaywallScreenData(),this.updateActiveRenderRoot(),this.observeFooterHeight()}},{key:"updated",value:function(){this.updateActiveRenderRoot()}},{key:"updateActiveRenderRoot",value:function(){this.active&&this.activeTemplate&&(ms(this.activeTemplate,this.contextProvider),function(e){if(Wr("setActivePageRenderRoot:enter",{hasRoot:!!e,rootType:e instanceof Element?Nr(e):e instanceof DocumentFragment?"document-fragment":String(e),activePageKey:hr,activePageAnnounced:dr,activeElement:Nr(Kr())}),lr=e,e&&sr&&!dr){var t=Kr();if(t&&"contains"in e&&e.contains(t))fs(t);else if(e instanceof DocumentFragment){var i=e.activeElement;i&&fs(i)}}}(this.renderRoot))}},{key:"observeFooterHeight",value:function(){if("undefined"!=typeof ResizeObserver){var e=this.renderRoot.querySelector("nami-footer");e&&(this.footerResizeObserver=new ResizeObserver(e=>{var t,i,n=e[e.length-1];if(n){var a=null!==(t=null===(i=n.borderBoxSize)||void 0===i||null===(i=i[0])||void 0===i?void 0:i.blockSize)&&void 0!==t?t:n.contentRect.height;this.style.setProperty("--nami-footer-height",`${a}px`)}}),this.footerResizeObserver.observe(e))}}},{key:"postImpression",value:function(){var e,t;null!==(e=this.paywall)&&void 0!==e&&e.id&&(e=>{var t,i,a;me(function(r){for(;;)switch(r.p=r.n){case 0:if(!O()){r.n=1;break}return n.info("Skipping paywall impression - anonymous mode"),r.a(2);case 1:return(t=g.getSessionId())&&(e.session=t),(i=g.getLaunchId())&&(e.launch_id=i),e.app_env="production",e.url_params=s(),n.info("Post paywall impression - segment ",e.segment),r.p=2,r.n=3,J(F.instance.postImpression(e));case 3:r.n=5;break;case 4:r.p=4,a=r.v,n.error("Error posting impression",a);case 5:return r.a(2)}},null,null,[[2,4]],Promise)})({segment:null===(t=this.campaign)||void 0===t?void 0:t.segment,call_to_action:this.paywall.id})}},{key:"postPaywallScreenData",value:function(){var e=this.initialGroupChange();v.getInstance().emit(p,oe({},this.contextProvider.getPaywallActionEventData(),{action:f.SHOW_PAYWALL},e&&{componentChange:e}))}},{key:"initialGroupChange",value:function(){var e=this.contextProvider.state,t=e.groups,i=e.currentGroupId;if(!(t.length<=1)&&i){var n=t.find(({id:e})=>e===i);if(n)return{id:n.id,name:n.displayName}}}},{key:"getTemplate",value:function(){var e,t,i,n;this.contextProvider.state.selectedPaywall===this.paywall?t=this.contextProvider.state.currentPage:t=null!==(i=null===(n=this.paywall.template)||void 0===n||null===(n=n.initialState)||void 0===n?void 0:n.currentPage)&&void 0!==i?i:"page1";var a=null===(e=this.paywall.template)||void 0===e?void 0:e.pages.find(e=>e.name===t);if(!a)throw new Error(`Page with name ${t} not found in paywall template.`);return this.activeTemplate=a,this.active&&ms(a,this.contextProvider),a}},{key:"render",value:function(){var e,t=this.getTemplate(),i=t.backgroundContainer,n=t.header,a=void 0===n?[]:n,r=t.footer,o=void 0===r?[]:r,s=t.contentContainer,u=null!==(e=this.contextProvider.state.fullScreenPresentation)&&void 0!==e&&e,l=this.contextProvider.getFormFactor(),d=$(l);return z(QF||(QF=eO`
       <nami-background-container
         .component=${0}
         .scaleFactor=${0}