@namiml/web-sdk 3.3.9-dev.202603182003 → 3.3.9-dev.202603182019
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nami-web.cjs +1 -1
- package/dist/nami-web.mjs +1 -1
- package/dist/nami-web.umd.js +1 -1
- package/package.json +1 -1
package/dist/nami-web.cjs
CHANGED
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
aria-valuemax="100"
|
|
354
354
|
></div>
|
|
355
355
|
</div>
|
|
356
|
-
`),this.currentWidth,Math.round(this.currentWidth))}}])}();oe([Vc({type:Object})],Iz.prototype,"component",void 0),oe([Vc({type:Number})],Iz.prototype,"scaleFactor",void 0),oe([Vc({type:Boolean})],Iz.prototype,"inFocusedState",void 0),oe([Vc({type:Object})],Iz.prototype,"minSDKVersion",void 0),oe([Vc({type:Number})],Iz.prototype,"currentWidth",void 0),Iz=oe([kc("nami-progress-indicator")],Iz);var Lz=function(){function t(){var e;return s(this,t),(e=o(this,t,arguments)).inFocusedState=!1,e.scaleFactor=1,e.isActive=!1,e._handleFocus=()=>{e._announceButtonLabel()},e._handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||e._handleClick()},e}return g(t,Cf),c(t,[{key:"connectedCallback",value:function(){T(t,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){T(t,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_announceButtonLabel",value:function(){var e=this.component.screenreaderText||this.component.title||"";e&&cc(e)}},{key:"_handleClick",value:function(){var e,t,n=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(n){var a={function:n,parameters:f({},null===(t=this.component.onTap)||void 0===t?void 0:t.parameters,{formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0})};Fp({onTap:a,contextProvider:this.contextProvider})}}},{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 t=this.component,n=this.contextProvider.getCurrentFormId(t.formId||""),a=!0===n||n===t.value;this.inFocusedState=a;var i=a?t.activeFillColor||t.activeFillColorFallback||"transparent":t.inactiveFillColor||t.inactiveFillColorFallback||"transparent",r=a?t.activeBorderColor||"transparent":t.inactiveBorderColor||"transparent";return e.unsafeCSS(`\n :host {\n box-sizing: border-box;\n display: ${t.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${t.borderRadius}px !important;\n ${sv(t,this.scaleFactor,this.inFocusedState)}\n ${Vf(r)}\n border-width: ${a?t.activeBorderWidth||0:t.inactiveBorderWidth||0}px !important;\n ${iv(a?t.activeDropShadow:t.inactiveDropShadow)};\n border-style: solid;\n ${Gf(i)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map((e=>tp(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}}])}();oe([Vc({type:Object})],Lz.prototype,"component",void 0),oe([Vc({type:Boolean})],Lz.prototype,"inFocusedState",void 0),oe([Vc({type:Number})],Lz.prototype,"scaleFactor",void 0),oe([Vc({type:Object})],Lz.prototype,"minSDKVersion",void 0),oe([Vc({type:Boolean})],Lz.prototype,"isActive",void 0),Lz=oe([kc("nami-toggle-button")],Lz);var Fz,Rz,Wz,Nz,Oz,jz,$z,zz,Bz,Hz=e=>e,Uz=Bz=function(){function t(){var e;return s(this,t),(e=o(this,t,arguments)).inFocusedState=!1,e.scaleFactor=1,e.timer=null,e.startTime=0,e.initialDuration=0,e.hasEmittedCompletion=!1,e}return g(t,Cf),c(t,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){T(t,"disconnectedCallback",this)([]),this.saveTimerState(),this.clearTimer()}},{key:"getTimerId",value:function(){var e,t;return null!==(e=null===(t=this.component)||void 0===t?void 0:t.id)&&void 0!==e?e:""}},{key:"loadTimerState",value:function(){var e;null!==(e=this.contextProvider)&&void 0!==e&&e.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}},{key:"saveTimerState",value:function(){var e;if(null!==(e=this.contextProvider)&&void 0!==e&&e.flow){var t=this.component,n=t.mode,a=t.durationSeconds;if("duration"===n&&void 0!==a){var i=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:i,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}}}},{key:"getSavedTimerState",value:function(){var e;return null===(e=this.contextProvider)||void 0===e||null===(e=e.flow)||void 0===e?void 0:e.timerStates[this.getTimerId()]}},{key:"startTimer",value:function(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),Bz.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,a=e.resetOnRemount;"duration"===t&&void 0!==n&&(this.timerState&&!a?this.restoreTimerFromState(this.timerState,n):this.resetTimerState(n))}},{key:"restoreTimerFromState",value:function(e,t){var n=(Date.now()-e.savedAt)/1e3,a=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-a),this.hasEmittedCompletion=e.hasEmittedCompletion}},{key:"resetTimerState",value:function(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}},{key:"onTimerTick",value:function(){this.calculateTimeValues().isCompleted?this.clearTimer():this.requestUpdate()}},{key:"clearTimer",value:function(){this.timer&&(clearInterval(this.timer),this.timer=null)}},{key:"calculateTimeValues",value:function(){var e=this.calculateTotalRemainingSeconds(),t=e<=0,n=this.component.units||Bz.DEFAULT_UNITS,a=n.days,i=n.hours,r=n.minutes,o=n.seconds;return f({},this.convertSecondsToTimeUnits(e,{days:a,hours:i,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,a=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(n):"targetDateTime"===t&&a?this.calculateTargetDateTimeRemainingSeconds(a):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var n=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-n)}if(this.initialDuration>0&&this.startTime>0){var a=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-a)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}},{key:"calculateCurrentRemainingSeconds",value:function(){var e=this.component.durationSeconds;if(this.initialDuration>0&&this.startTime>0){var t=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-t)}return null!=e?e:0}},{key:"convertSecondsToTimeUnits",value:function(e,t){var n=t.days?Math.floor(e/Bz.SECONDS_PER_DAY):0,a=e-n*Bz.SECONDS_PER_DAY,i=t.hours?Math.floor(a/Bz.SECONDS_PER_HOUR):0,r=a-i*Bz.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/Bz.SECONDS_PER_MINUTE):0,s=r-o*Bz.SECONDS_PER_MINUTE;return{days:n,hours:i,minutes:o,seconds:t.seconds?Math.floor(s):0}}},{key:"formatValue",value:function(e,t){return t?e.toString().padStart(2,"0"):e.toString()}},{key:"emitCompletionEvent",value:function(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,Bu.getInstance().emit(En,f({},this.contextProvider.getPaywallActionEventData(),{action:exports.NamiPaywallAction.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}})))}},{key:"updated",value:function(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}},{key:"updateAccessibilityAttributes",value:function(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}},{key:"handleComponentChange",value:function(e){if(e){var t=this.component,n=t.mode,a=t.durationSeconds,i=t.targetDateTime;(n!==e.mode||a!==e.durationSeconds||i!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var t=this.component,n=t.labels,a=t.separator,i=t.labelPosition,r=void 0===i?"none":i,o=t.direction,s=void 0===o?"horizontal":o,u=t.labelFontSize,l=t.labelFontColor,d=t.labelFontName,h=t.labelSpacing,c=t.spacing,m=t.fontSize,f=t.fontColor,v=t.fontName,p=t.alignment,g="below"===r?"bottom":"above"===r?"top":r,y="vertical"===s,b=n&&(n.days||n.hours||n.minutes||n.seconds)||"none"!==g;return e.unsafeCSS(`\n :host {\n box-sizing: border-box;\n display: ${t.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${t.borderRadius||0}px !important;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Kf(t,this.inFocusedState)}\n ${Zf(t,this.scaleFactor)}\n ${tv(t,this.scaleFactor,this.inFocusedState)}\n ${qf(t)}\n ${nv(t,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n gap: ${y?c?c*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===g||"bottom"===g?"column":"row"};\n align-items: center;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Xf(f):""}\n ${ov(v)}\n ${p?`text-align: ${p};`:""}\n ${iv(t.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${u?u*this.scaleFactor:12*this.scaleFactor}px;\n color: ${l||"inherit"};\n ${ov(d)}\n ${"top"===g?`margin-bottom: ${h?h*this.scaleFactor:2}px;`:""}\n ${"bottom"===g?`margin-top: ${h?h*this.scaleFactor:2}px;`:""}\n ${b?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${a?`\n display: flex;\n align-items: center;\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Xf(f):""}\n ${ov(v)}\n line-height: 1;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n ${"bottom"===g||"top"===g?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var t=this.component.showWhenCompleted,n=void 0===t?"zero":t,a=this.calculateTimeValues();if(a.isCompleted&&(this.emitCompletionEvent(),"hidden"===n))return e.html(Fz||(Fz=Hz``));var i=this.buildUnitsToRender(a);return 0===i.length?e.html(Rz||(Rz=Hz`<div class="timer-text"></div>`)):this.renderTimerUnits(i)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,n=t.labels,a=t.units,i=t.labelPosition,r=void 0===i?"none":i,o=a||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(n,h);return[{enabled:s,value:e.days,label:this.getLabel("days",n,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",n,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",n,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",n,c),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}},{key:"normalizeLabelPosition",value:function(e){return"below"===e?"bottom":"above"===e?"top":e}},{key:"shouldDisplayLabels",value:function(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}},{key:"getLabel",value:function(e,t,n){var a;return null!==(a=null==t?void 0:t[e])&&void 0!==a?a:n?Bz.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(t){var n=this.component,a=n.separator,i=n.zeroPad,r=void 0===i||i,o=n.labelPosition,s=void 0===o?"none":o,u=this.component.labels,l=this.normalizeLabelPosition(s),d=u&&(u.days||u.hours||u.minutes||u.seconds),h=Boolean(d||"none"!==l),c=null!=a?a:":";return e.html(Wz||(Wz=Hz`
|
|
356
|
+
`),this.currentWidth,Math.round(this.currentWidth))}}])}();oe([Vc({type:Object})],Iz.prototype,"component",void 0),oe([Vc({type:Number})],Iz.prototype,"scaleFactor",void 0),oe([Vc({type:Boolean})],Iz.prototype,"inFocusedState",void 0),oe([Vc({type:Object})],Iz.prototype,"minSDKVersion",void 0),oe([Vc({type:Number})],Iz.prototype,"currentWidth",void 0),Iz=oe([kc("nami-progress-indicator")],Iz);var Lz=function(){function t(){var e;return s(this,t),(e=o(this,t,arguments)).inFocusedState=!1,e.scaleFactor=1,e.isActive=!1,e._handleFocus=()=>{e._announceButtonLabel()},e._handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||e._handleClick()},e}return g(t,Cf),c(t,[{key:"connectedCallback",value:function(){T(t,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){T(t,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_announceButtonLabel",value:function(){var e=this.component.screenreaderText||this.component.title||"";e&&cc(e)}},{key:"_handleClick",value:function(){var e,t,n=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(n){var a={function:n,parameters:f({},null===(t=this.component.onTap)||void 0===t?void 0:t.parameters,{formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0})};Fp({onTap:a,contextProvider:this.contextProvider})}}},{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 t=this.component,n=this.contextProvider.getCurrentFormId(t.formId||""),a=!0===n||n===t.value;this.inFocusedState=a;var i=a?t.activeFillColor||t.activeFillColorFallback||"transparent":t.inactiveFillColor||t.inactiveFillColorFallback||"transparent",r=a?t.activeBorderColor||"transparent":t.inactiveBorderColor||"transparent";return e.unsafeCSS(`\n :host {\n box-sizing: border-box;\n display: ${t.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${t.borderRadius}px !important;\n ${sv(t,this.scaleFactor,this.inFocusedState)}\n ${Vf(r)}\n border-width: ${a?t.activeBorderWidth||0:t.inactiveBorderWidth||0}px !important;\n ${iv(a?t.activeDropShadow:t.inactiveDropShadow)};\n border-style: solid;\n ${Gf(i)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map((e=>tp(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}}])}();oe([Vc({type:Object})],Lz.prototype,"component",void 0),oe([Vc({type:Boolean})],Lz.prototype,"inFocusedState",void 0),oe([Vc({type:Number})],Lz.prototype,"scaleFactor",void 0),oe([Vc({type:Object})],Lz.prototype,"minSDKVersion",void 0),oe([Vc({type:Boolean})],Lz.prototype,"isActive",void 0),Lz=oe([kc("nami-toggle-button")],Lz);var Fz,Rz,Wz,Nz,Oz,jz,$z,zz,Bz,Hz=e=>e,Uz=Bz=function(){function t(){var e;return s(this,t),(e=o(this,t,arguments)).inFocusedState=!1,e.scaleFactor=1,e.timer=null,e.startTime=0,e.initialDuration=0,e.hasEmittedCompletion=!1,e}return g(t,Cf),c(t,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){T(t,"disconnectedCallback",this)([]),this.saveTimerState(),this.clearTimer()}},{key:"getTimerId",value:function(){var e,t;return null!==(e=null===(t=this.component)||void 0===t?void 0:t.id)&&void 0!==e?e:""}},{key:"loadTimerState",value:function(){var e;null!==(e=this.contextProvider)&&void 0!==e&&e.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}},{key:"saveTimerState",value:function(){var e;if(null!==(e=this.contextProvider)&&void 0!==e&&e.flow){var t=this.component,n=t.mode,a=t.durationSeconds;if("duration"===n&&void 0!==a){var i=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:i,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}}}},{key:"getSavedTimerState",value:function(){var e;return null===(e=this.contextProvider)||void 0===e||null===(e=e.flow)||void 0===e?void 0:e.timerStates[this.getTimerId()]}},{key:"startTimer",value:function(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),Bz.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,a=e.resetOnRemount;"duration"===t&&void 0!==n&&(this.timerState&&!a?this.restoreTimerFromState(this.timerState,n):this.resetTimerState(n))}},{key:"restoreTimerFromState",value:function(e,t){var n=(Date.now()-e.savedAt)/1e3,a=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-a),this.hasEmittedCompletion=e.hasEmittedCompletion}},{key:"resetTimerState",value:function(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}},{key:"onTimerTick",value:function(){var e=this.calculateTimeValues().isCompleted;this.requestUpdate(),e&&this.clearTimer()}},{key:"clearTimer",value:function(){this.timer&&(clearInterval(this.timer),this.timer=null)}},{key:"calculateTimeValues",value:function(){var e=this.calculateTotalRemainingSeconds(),t=e<=0,n=this.component.units||Bz.DEFAULT_UNITS,a=n.days,i=n.hours,r=n.minutes,o=n.seconds;return f({},this.convertSecondsToTimeUnits(e,{days:a,hours:i,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,a=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(n):"targetDateTime"===t&&a?this.calculateTargetDateTimeRemainingSeconds(a):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var n=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-n)}if(this.initialDuration>0&&this.startTime>0){var a=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-a)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}},{key:"calculateCurrentRemainingSeconds",value:function(){var e=this.component.durationSeconds;if(this.initialDuration>0&&this.startTime>0){var t=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-t)}return null!=e?e:0}},{key:"convertSecondsToTimeUnits",value:function(e,t){var n=t.days?Math.floor(e/Bz.SECONDS_PER_DAY):0,a=e-n*Bz.SECONDS_PER_DAY,i=t.hours?Math.floor(a/Bz.SECONDS_PER_HOUR):0,r=a-i*Bz.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/Bz.SECONDS_PER_MINUTE):0,s=r-o*Bz.SECONDS_PER_MINUTE;return{days:n,hours:i,minutes:o,seconds:t.seconds?Math.floor(s):0}}},{key:"formatValue",value:function(e,t){return t?e.toString().padStart(2,"0"):e.toString()}},{key:"emitCompletionEvent",value:function(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,Bu.getInstance().emit(En,f({},this.contextProvider.getPaywallActionEventData(),{action:exports.NamiPaywallAction.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}})))}},{key:"updated",value:function(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}},{key:"updateAccessibilityAttributes",value:function(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}},{key:"handleComponentChange",value:function(e){if(e){var t=this.component,n=t.mode,a=t.durationSeconds,i=t.targetDateTime;(n!==e.mode||a!==e.durationSeconds||i!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var t=this.component,n=t.labels,a=t.separator,i=t.labelPosition,r=void 0===i?"none":i,o=t.direction,s=void 0===o?"horizontal":o,u=t.labelFontSize,l=t.labelFontColor,d=t.labelFontName,h=t.labelSpacing,c=t.spacing,m=t.fontSize,f=t.fontColor,v=t.fontName,p=t.alignment,g="below"===r?"bottom":"above"===r?"top":r,y="vertical"===s,b=n&&(n.days||n.hours||n.minutes||n.seconds)||"none"!==g;return e.unsafeCSS(`\n :host {\n box-sizing: border-box;\n display: ${t.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${t.borderRadius||0}px !important;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Kf(t,this.inFocusedState)}\n ${Zf(t,this.scaleFactor)}\n ${tv(t,this.scaleFactor,this.inFocusedState)}\n ${qf(t)}\n ${nv(t,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n gap: ${y?c?c*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===g||"bottom"===g?"column":"row"};\n align-items: center;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Xf(f):""}\n ${ov(v)}\n ${p?`text-align: ${p};`:""}\n ${iv(t.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${u?u*this.scaleFactor:12*this.scaleFactor}px;\n color: ${l||"inherit"};\n ${ov(d)}\n ${"top"===g?`margin-bottom: ${h?h*this.scaleFactor:2}px;`:""}\n ${"bottom"===g?`margin-top: ${h?h*this.scaleFactor:2}px;`:""}\n ${b?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${a?`\n display: flex;\n align-items: center;\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Xf(f):""}\n ${ov(v)}\n line-height: 1;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n ${"bottom"===g||"top"===g?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var t=this.component.showWhenCompleted,n=void 0===t?"zero":t,a=this.calculateTimeValues();if(a.isCompleted&&(this.emitCompletionEvent(),"hidden"===n))return e.html(Fz||(Fz=Hz``));var i=this.buildUnitsToRender(a);return 0===i.length?e.html(Rz||(Rz=Hz`<div class="timer-text"></div>`)):this.renderTimerUnits(i)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,n=t.labels,a=t.units,i=t.labelPosition,r=void 0===i?"none":i,o=a||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(n,h);return[{enabled:s,value:e.days,label:this.getLabel("days",n,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",n,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",n,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",n,c),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}},{key:"normalizeLabelPosition",value:function(e){return"below"===e?"bottom":"above"===e?"top":e}},{key:"shouldDisplayLabels",value:function(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}},{key:"getLabel",value:function(e,t,n){var a;return null!==(a=null==t?void 0:t[e])&&void 0!==a?a:n?Bz.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(t){var n=this.component,a=n.separator,i=n.zeroPad,r=void 0===i||i,o=n.labelPosition,s=void 0===o?"none":o,u=this.component.labels,l=this.normalizeLabelPosition(s),d=u&&(u.days||u.hours||u.minutes||u.seconds),h=Boolean(d||"none"!==l),c=null!=a?a:":";return e.html(Wz||(Wz=Hz`
|
|
357
357
|
<div class="timer-text">
|
|
358
358
|
${0}
|
|
359
359
|
</div>
|
package/dist/nami-web.mjs
CHANGED
|
@@ -353,7 +353,7 @@ import{css as e,html as t,LitElement as n,unsafeCSS as i,svg as a}from"lit";impo
|
|
|
353
353
|
aria-valuemax="100"
|
|
354
354
|
></div>
|
|
355
355
|
</div>
|
|
356
|
-
`),this.currentWidth,Math.round(this.currentWidth))}}])}();de([qc({type:Object})],Wz.prototype,"component",void 0),de([qc({type:Number})],Wz.prototype,"scaleFactor",void 0),de([qc({type:Boolean})],Wz.prototype,"inFocusedState",void 0),de([qc({type:Object})],Wz.prototype,"minSDKVersion",void 0),de([qc({type:Number})],Wz.prototype,"currentWidth",void 0),Wz=de([Pc("nami-progress-indicator")],Wz);var Oz=function(){function e(){var t;return h(this,e),(t=d(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.isActive=!1,t._handleFocus=()=>{t._announceButtonLabel()},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||t._handleClick()},t}return k(e,Rf),p(e,[{key:"connectedCallback",value:function(){x(e,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){x(e,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_announceButtonLabel",value:function(){var e=this.component.screenreaderText||this.component.title||"";e&&pc(e)}},{key:"_handleClick",value:function(){var e,t,n=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(n){var i={function:n,parameters:y({},null===(t=this.component.onTap)||void 0===t?void 0:t.parameters,{formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0})};Np({onTap:i,contextProvider:this.contextProvider})}}},{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.contextProvider.getCurrentFormId(e.formId||""),n=!0===t||t===e.value;this.inFocusedState=n;var a=n?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",r=n?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return i(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius}px !important;\n ${hv(e,this.scaleFactor,this.inFocusedState)}\n ${qf(r)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${uv(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Yf(a)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map((e=>rp(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}}])}();de([qc({type:Object})],Oz.prototype,"component",void 0),de([qc({type:Boolean})],Oz.prototype,"inFocusedState",void 0),de([qc({type:Number})],Oz.prototype,"scaleFactor",void 0),de([qc({type:Object})],Oz.prototype,"minSDKVersion",void 0),de([qc({type:Boolean})],Oz.prototype,"isActive",void 0),Oz=de([Pc("nami-toggle-button")],Oz);var Nz,jz,$z,zz,Bz,Hz,Uz,Gz,Vz,Xz=e=>e,Kz=Vz=function(){function e(){var t;return h(this,e),(t=d(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.timer=null,t.startTime=0,t.initialDuration=0,t.hasEmittedCompletion=!1,t}return k(e,Rf),p(e,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){x(e,"disconnectedCallback",this)([]),this.saveTimerState(),this.clearTimer()}},{key:"getTimerId",value:function(){var e,t;return null!==(e=null===(t=this.component)||void 0===t?void 0:t.id)&&void 0!==e?e:""}},{key:"loadTimerState",value:function(){var e;null!==(e=this.contextProvider)&&void 0!==e&&e.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}},{key:"saveTimerState",value:function(){var e;if(null!==(e=this.contextProvider)&&void 0!==e&&e.flow){var t=this.component,n=t.mode,i=t.durationSeconds;if("duration"===n&&void 0!==i){var a=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:a,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}}}},{key:"getSavedTimerState",value:function(){var e;return null===(e=this.contextProvider)||void 0===e||null===(e=e.flow)||void 0===e?void 0:e.timerStates[this.getTimerId()]}},{key:"startTimer",value:function(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),Vz.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,i=e.resetOnRemount;"duration"===t&&void 0!==n&&(this.timerState&&!i?this.restoreTimerFromState(this.timerState,n):this.resetTimerState(n))}},{key:"restoreTimerFromState",value:function(e,t){var n=(Date.now()-e.savedAt)/1e3,i=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-i),this.hasEmittedCompletion=e.hasEmittedCompletion}},{key:"resetTimerState",value:function(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}},{key:"onTimerTick",value:function(){this.calculateTimeValues().isCompleted?this.clearTimer():this.requestUpdate()}},{key:"clearTimer",value:function(){this.timer&&(clearInterval(this.timer),this.timer=null)}},{key:"calculateTimeValues",value:function(){var e=this.calculateTotalRemainingSeconds(),t=e<=0,n=this.component.units||Vz.DEFAULT_UNITS,i=n.days,a=n.hours,r=n.minutes,o=n.seconds;return y({},this.convertSecondsToTimeUnits(e,{days:i,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,i=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(n):"targetDateTime"===t&&i?this.calculateTargetDateTimeRemainingSeconds(i):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var n=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-n)}if(this.initialDuration>0&&this.startTime>0){var i=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-i)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}},{key:"calculateCurrentRemainingSeconds",value:function(){var e=this.component.durationSeconds;if(this.initialDuration>0&&this.startTime>0){var t=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-t)}return null!=e?e:0}},{key:"convertSecondsToTimeUnits",value:function(e,t){var n=t.days?Math.floor(e/Vz.SECONDS_PER_DAY):0,i=e-n*Vz.SECONDS_PER_DAY,a=t.hours?Math.floor(i/Vz.SECONDS_PER_HOUR):0,r=i-a*Vz.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/Vz.SECONDS_PER_MINUTE):0,s=r-o*Vz.SECONDS_PER_MINUTE;return{days:n,hours:a,minutes:o,seconds:t.seconds?Math.floor(s):0}}},{key:"formatValue",value:function(e,t){return t?e.toString().padStart(2,"0"):e.toString()}},{key:"emitCompletionEvent",value:function(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,Vu.getInstance().emit(_n,y({},this.contextProvider.getPaywallActionEventData(),{action:rf.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}})))}},{key:"updated",value:function(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}},{key:"updateAccessibilityAttributes",value:function(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}},{key:"handleComponentChange",value:function(e){if(e){var t=this.component,n=t.mode,i=t.durationSeconds,a=t.targetDateTime;(n!==e.mode||i!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,t=e.labels,n=e.separator,a=e.labelPosition,r=void 0===a?"none":a,o=e.direction,s=void 0===o?"horizontal":o,u=e.labelFontSize,l=e.labelFontColor,d=e.labelFontName,h=e.labelSpacing,c=e.spacing,m=e.fontSize,f=e.fontColor,v=e.fontName,p=e.alignment,g="below"===r?"bottom":"above"===r?"top":r,y="vertical"===s,b=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==g;return i(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius||0}px !important;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Qf(e,this.inFocusedState)}\n ${iv(e,this.scaleFactor)}\n ${rv(e,this.scaleFactor,this.inFocusedState)}\n ${ev(e)}\n ${ov(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n gap: ${y?c?c*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===g||"bottom"===g?"column":"row"};\n align-items: center;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Jf(f):""}\n ${dv(v)}\n ${p?`text-align: ${p};`:""}\n ${uv(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${u?u*this.scaleFactor:12*this.scaleFactor}px;\n color: ${l||"inherit"};\n ${dv(d)}\n ${"top"===g?`margin-bottom: ${h?h*this.scaleFactor:2}px;`:""}\n ${"bottom"===g?`margin-top: ${h?h*this.scaleFactor:2}px;`:""}\n ${b?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${n?`\n display: flex;\n align-items: center;\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Jf(f):""}\n ${dv(v)}\n line-height: 1;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n ${"bottom"===g||"top"===g?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var e=this.component.showWhenCompleted,n=void 0===e?"zero":e,i=this.calculateTimeValues();if(i.isCompleted&&(this.emitCompletionEvent(),"hidden"===n))return t(Nz||(Nz=Xz``));var a=this.buildUnitsToRender(i);return 0===a.length?t(jz||(jz=Xz`<div class="timer-text"></div>`)):this.renderTimerUnits(a)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,n=t.labels,i=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=i||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(n,h);return[{enabled:s,value:e.days,label:this.getLabel("days",n,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",n,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",n,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",n,c),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}},{key:"normalizeLabelPosition",value:function(e){return"below"===e?"bottom":"above"===e?"top":e}},{key:"shouldDisplayLabels",value:function(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}},{key:"getLabel",value:function(e,t,n){var i;return null!==(i=null==t?void 0:t[e])&&void 0!==i?i:n?Vz.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var n=this.component,i=n.separator,a=n.zeroPad,r=void 0===a||a,o=n.labelPosition,s=void 0===o?"none":o,u=this.component.labels,l=this.normalizeLabelPosition(s),d=u&&(u.days||u.hours||u.minutes||u.seconds),h=Boolean(d||"none"!==l),c=null!=i?i:":";return t($z||($z=Xz`
|
|
356
|
+
`),this.currentWidth,Math.round(this.currentWidth))}}])}();de([qc({type:Object})],Wz.prototype,"component",void 0),de([qc({type:Number})],Wz.prototype,"scaleFactor",void 0),de([qc({type:Boolean})],Wz.prototype,"inFocusedState",void 0),de([qc({type:Object})],Wz.prototype,"minSDKVersion",void 0),de([qc({type:Number})],Wz.prototype,"currentWidth",void 0),Wz=de([Pc("nami-progress-indicator")],Wz);var Oz=function(){function e(){var t;return h(this,e),(t=d(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.isActive=!1,t._handleFocus=()=>{t._announceButtonLabel()},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||t._handleClick()},t}return k(e,Rf),p(e,[{key:"connectedCallback",value:function(){x(e,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){x(e,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_announceButtonLabel",value:function(){var e=this.component.screenreaderText||this.component.title||"";e&&pc(e)}},{key:"_handleClick",value:function(){var e,t,n=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(n){var i={function:n,parameters:y({},null===(t=this.component.onTap)||void 0===t?void 0:t.parameters,{formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0})};Np({onTap:i,contextProvider:this.contextProvider})}}},{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.contextProvider.getCurrentFormId(e.formId||""),n=!0===t||t===e.value;this.inFocusedState=n;var a=n?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",r=n?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return i(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius}px !important;\n ${hv(e,this.scaleFactor,this.inFocusedState)}\n ${qf(r)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${uv(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Yf(a)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map((e=>rp(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}}])}();de([qc({type:Object})],Oz.prototype,"component",void 0),de([qc({type:Boolean})],Oz.prototype,"inFocusedState",void 0),de([qc({type:Number})],Oz.prototype,"scaleFactor",void 0),de([qc({type:Object})],Oz.prototype,"minSDKVersion",void 0),de([qc({type:Boolean})],Oz.prototype,"isActive",void 0),Oz=de([Pc("nami-toggle-button")],Oz);var Nz,jz,$z,zz,Bz,Hz,Uz,Gz,Vz,Xz=e=>e,Kz=Vz=function(){function e(){var t;return h(this,e),(t=d(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.timer=null,t.startTime=0,t.initialDuration=0,t.hasEmittedCompletion=!1,t}return k(e,Rf),p(e,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){x(e,"disconnectedCallback",this)([]),this.saveTimerState(),this.clearTimer()}},{key:"getTimerId",value:function(){var e,t;return null!==(e=null===(t=this.component)||void 0===t?void 0:t.id)&&void 0!==e?e:""}},{key:"loadTimerState",value:function(){var e;null!==(e=this.contextProvider)&&void 0!==e&&e.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}},{key:"saveTimerState",value:function(){var e;if(null!==(e=this.contextProvider)&&void 0!==e&&e.flow){var t=this.component,n=t.mode,i=t.durationSeconds;if("duration"===n&&void 0!==i){var a=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:a,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}}}},{key:"getSavedTimerState",value:function(){var e;return null===(e=this.contextProvider)||void 0===e||null===(e=e.flow)||void 0===e?void 0:e.timerStates[this.getTimerId()]}},{key:"startTimer",value:function(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),Vz.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,i=e.resetOnRemount;"duration"===t&&void 0!==n&&(this.timerState&&!i?this.restoreTimerFromState(this.timerState,n):this.resetTimerState(n))}},{key:"restoreTimerFromState",value:function(e,t){var n=(Date.now()-e.savedAt)/1e3,i=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-i),this.hasEmittedCompletion=e.hasEmittedCompletion}},{key:"resetTimerState",value:function(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}},{key:"onTimerTick",value:function(){var e=this.calculateTimeValues().isCompleted;this.requestUpdate(),e&&this.clearTimer()}},{key:"clearTimer",value:function(){this.timer&&(clearInterval(this.timer),this.timer=null)}},{key:"calculateTimeValues",value:function(){var e=this.calculateTotalRemainingSeconds(),t=e<=0,n=this.component.units||Vz.DEFAULT_UNITS,i=n.days,a=n.hours,r=n.minutes,o=n.seconds;return y({},this.convertSecondsToTimeUnits(e,{days:i,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,n=e.durationSeconds,i=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(n):"targetDateTime"===t&&i?this.calculateTargetDateTimeRemainingSeconds(i):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var n=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-n)}if(this.initialDuration>0&&this.startTime>0){var i=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-i)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}},{key:"calculateCurrentRemainingSeconds",value:function(){var e=this.component.durationSeconds;if(this.initialDuration>0&&this.startTime>0){var t=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-t)}return null!=e?e:0}},{key:"convertSecondsToTimeUnits",value:function(e,t){var n=t.days?Math.floor(e/Vz.SECONDS_PER_DAY):0,i=e-n*Vz.SECONDS_PER_DAY,a=t.hours?Math.floor(i/Vz.SECONDS_PER_HOUR):0,r=i-a*Vz.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/Vz.SECONDS_PER_MINUTE):0,s=r-o*Vz.SECONDS_PER_MINUTE;return{days:n,hours:a,minutes:o,seconds:t.seconds?Math.floor(s):0}}},{key:"formatValue",value:function(e,t){return t?e.toString().padStart(2,"0"):e.toString()}},{key:"emitCompletionEvent",value:function(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,Vu.getInstance().emit(_n,y({},this.contextProvider.getPaywallActionEventData(),{action:rf.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}})))}},{key:"updated",value:function(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}},{key:"updateAccessibilityAttributes",value:function(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}},{key:"handleComponentChange",value:function(e){if(e){var t=this.component,n=t.mode,i=t.durationSeconds,a=t.targetDateTime;(n!==e.mode||i!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,t=e.labels,n=e.separator,a=e.labelPosition,r=void 0===a?"none":a,o=e.direction,s=void 0===o?"horizontal":o,u=e.labelFontSize,l=e.labelFontColor,d=e.labelFontName,h=e.labelSpacing,c=e.spacing,m=e.fontSize,f=e.fontColor,v=e.fontName,p=e.alignment,g="below"===r?"bottom":"above"===r?"top":r,y="vertical"===s,b=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==g;return i(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius||0}px !important;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Qf(e,this.inFocusedState)}\n ${iv(e,this.scaleFactor)}\n ${rv(e,this.scaleFactor,this.inFocusedState)}\n ${ev(e)}\n ${ov(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${y?"column":"row"};\n align-items: center;\n gap: ${y?c?c*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===g||"bottom"===g?"column":"row"};\n align-items: center;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Jf(f):""}\n ${dv(v)}\n ${p?`text-align: ${p};`:""}\n ${uv(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${u?u*this.scaleFactor:12*this.scaleFactor}px;\n color: ${l||"inherit"};\n ${dv(d)}\n ${"top"===g?`margin-bottom: ${h?h*this.scaleFactor:2}px;`:""}\n ${"bottom"===g?`margin-top: ${h?h*this.scaleFactor:2}px;`:""}\n ${b?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${n?`\n display: flex;\n align-items: center;\n ${m?`font-size: ${m*this.scaleFactor}px;`:""}\n ${f?Jf(f):""}\n ${dv(v)}\n line-height: 1;\n ${y?`margin-top: ${c?c*this.scaleFactor:4}px;`:`margin-right: ${c?c*this.scaleFactor:4}px;`} \n ${"bottom"===g||"top"===g?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var e=this.component.showWhenCompleted,n=void 0===e?"zero":e,i=this.calculateTimeValues();if(i.isCompleted&&(this.emitCompletionEvent(),"hidden"===n))return t(Nz||(Nz=Xz``));var a=this.buildUnitsToRender(i);return 0===a.length?t(jz||(jz=Xz`<div class="timer-text"></div>`)):this.renderTimerUnits(a)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,n=t.labels,i=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=i||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(n,h);return[{enabled:s,value:e.days,label:this.getLabel("days",n,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",n,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",n,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",n,c),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}},{key:"normalizeLabelPosition",value:function(e){return"below"===e?"bottom":"above"===e?"top":e}},{key:"shouldDisplayLabels",value:function(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}},{key:"getLabel",value:function(e,t,n){var i;return null!==(i=null==t?void 0:t[e])&&void 0!==i?i:n?Vz.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var n=this.component,i=n.separator,a=n.zeroPad,r=void 0===a||a,o=n.labelPosition,s=void 0===o?"none":o,u=this.component.labels,l=this.normalizeLabelPosition(s),d=u&&(u.days||u.hours||u.minutes||u.seconds),h=Boolean(d||"none"!==l),c=null!=i?i:":";return t($z||($z=Xz`
|
|
357
357
|
<div class="timer-text">
|
|
358
358
|
${0}
|
|
359
359
|
</div>
|
package/dist/nami-web.umd.js
CHANGED
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
aria-valuemax="100"
|
|
354
354
|
></div>
|
|
355
355
|
</div>
|
|
356
|
-
`}};T([Um({type:Object})],I$.prototype,"component",void 0),T([Um({type:Number})],I$.prototype,"scaleFactor",void 0),T([Um({type:Boolean})],I$.prototype,"inFocusedState",void 0),T([Um({type:Object})],I$.prototype,"minSDKVersion",void 0),T([Um({type:Number})],I$.prototype,"currentWidth",void 0),I$=T([zm("nami-progress-indicator")],I$);let D$=class extends kp{constructor(){super(...arguments),this.inFocusedState=!1,this.scaleFactor=1,this.isActive=!1,this._handleFocus=()=>{this._announceButtonLabel()},this._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||this._handleClick()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}_announceButtonLabel(){const e=this.component.screenreaderText||this.component.title||"";e&&_h(e)}_handleClick(){const e=this.component.onTap?.function;if(!e)return;const t={function:e,parameters:{...this.component.onTap?.parameters,formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0}};Ug({onTap:t,contextProvider:this.contextProvider})}updated(){this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=this.component.screenreaderHint??""}styles(){const{component:e}=this,t=this.contextProvider.getCurrentFormId(e.formId||""),n=!0===t||t===e.value;this.inFocusedState=n;const i=n?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",a=n?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return Dh(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius}px !important;\n ${Jp(e,this.scaleFactor,this.inFocusedState)}\n ${Np(a)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Kp(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Wp(i)}\n }\n `)}render(){this.tabIndex=0;return this.component.components.map((e=>gg(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}};var R$;T([Um({type:Object})],D$.prototype,"component",void 0),T([Um({type:Boolean})],D$.prototype,"inFocusedState",void 0),T([Um({type:Number})],D$.prototype,"scaleFactor",void 0),T([Um({type:Object})],D$.prototype,"minSDKVersion",void 0),T([Um({type:Boolean})],D$.prototype,"isActive",void 0),D$=T([zm("nami-toggle-button")],D$);let W$=R$=class extends kp{constructor(){super(...arguments),this.inFocusedState=!1,this.scaleFactor=1,this.timer=null,this.startTime=0,this.initialDuration=0,this.hasEmittedCompletion=!1}firstUpdated(){this.loadTimerState(),this.startTimer()}disconnectedCallback(){super.disconnectedCallback(),this.saveTimerState(),this.clearTimer()}getTimerId(){return this.component?.id??""}loadTimerState(){this.contextProvider?.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}saveTimerState(){if(!this.contextProvider?.flow)return;const{mode:e,durationSeconds:t}=this.component;if("duration"!==e||void 0===t)return;const n=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:n,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}getSavedTimerState(){return this.contextProvider?.flow?.timerStates[this.getTimerId()]}startTimer(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),R$.TIMER_INTERVAL_MS)}initializeTimerState(){const{mode:e,durationSeconds:t,resetOnRemount:n}=this.component;"duration"===e&&void 0!==t&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,t):this.resetTimerState(t))}restoreTimerFromState(e,t){const n=(Date.now()-e.savedAt)/1e3,i=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-i),this.hasEmittedCompletion=e.hasEmittedCompletion}resetTimerState(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}onTimerTick(){const{isCompleted:e}=this.calculateTimeValues();e?this.clearTimer():this.requestUpdate()}clearTimer(){this.timer&&(clearInterval(this.timer),this.timer=null)}calculateTimeValues(){const e=this.calculateTotalRemainingSeconds(),t=e<=0,{units:n}=this.component,{days:i,hours:a,minutes:r,seconds:o}=n||R$.DEFAULT_UNITS;return{...this.convertSecondsToTimeUnits(e,{days:i,hours:a,minutes:r,seconds:o}),isCompleted:t}}calculateTotalRemainingSeconds(){const{mode:e,durationSeconds:t,targetDateTime:n}=this.component;return"duration"===e?this.calculateDurationRemainingSeconds(t):"targetDateTime"===e&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}calculateDurationRemainingSeconds(e){const t=this.getSavedTimerState();if(t){const e=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-e)}if(this.initialDuration>0&&this.startTime>0){const e=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-e)}return void 0!==e?Math.max(0,e):0}calculateTargetDateTimeRemainingSeconds(e){const t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}calculateCurrentRemainingSeconds(){const{durationSeconds:e}=this.component;if(this.initialDuration>0&&this.startTime>0){const e=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-e)}return e??0}convertSecondsToTimeUnits(e,t){const n=t.days?Math.floor(e/R$.SECONDS_PER_DAY):0,i=e-n*R$.SECONDS_PER_DAY,a=t.hours?Math.floor(i/R$.SECONDS_PER_HOUR):0,r=i-a*R$.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/R$.SECONDS_PER_MINUTE):0,s=r-o*R$.SECONDS_PER_MINUTE;return{days:n,hours:a,minutes:o,seconds:t.seconds?Math.floor(s):0}}formatValue(e,t){return t?e.toString().padStart(2,"0"):e.toString()}emitCompletionEvent(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,td.getInstance().emit(He,{...this.contextProvider.getPaywallActionEventData(),action:e.NamiPaywallAction.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}}))}updated(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}updateAccessibilityAttributes(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}handleComponentChange(e){if(!e)return;const{mode:t,durationSeconds:n,targetDateTime:i}=this.component;(t!==e.mode||n!==e.durationSeconds||i!==e.targetDateTime)&&this.startTimer()}styles(){const{component:e}=this,{labels:t,separator:n,labelPosition:i="none",direction:a="horizontal",labelFontSize:r,labelFontColor:o,labelFontName:s,labelSpacing:l,spacing:d,fontSize:u,fontColor:c,fontName:h,alignment:m}=e,f="below"===i?"bottom":"above"===i?"top":i,p="vertical"===a,g=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==f;return Dh(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius||0}px !important;\n flex-direction: ${p?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Op(e,this.inFocusedState)}\n ${Bp(e,this.scaleFactor)}\n ${Gp(e,this.scaleFactor,this.inFocusedState)}\n ${jp(e)}\n ${Vp(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${p?"column":"row"};\n align-items: center;\n gap: ${p?d?d*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===f||"bottom"===f?"column":"row"};\n align-items: center;\n ${p?`margin-top: ${d?d*this.scaleFactor:4}px;`:`margin-right: ${d?d*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${u?`font-size: ${u*this.scaleFactor}px;`:""}\n ${c?Fp(c):""}\n ${qp(h)}\n ${m?`text-align: ${m};`:""}\n ${Kp(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${r?r*this.scaleFactor:12*this.scaleFactor}px;\n color: ${o||"inherit"};\n ${qp(s)}\n ${"top"===f?`margin-bottom: ${l?l*this.scaleFactor:2}px;`:""}\n ${"bottom"===f?`margin-top: ${l?l*this.scaleFactor:2}px;`:""}\n ${g?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${n?`\n display: flex;\n align-items: center;\n ${u?`font-size: ${u*this.scaleFactor}px;`:""}\n ${c?Fp(c):""}\n ${qp(h)}\n line-height: 1;\n ${p?`margin-top: ${d?d*this.scaleFactor:4}px;`:`margin-right: ${d?d*this.scaleFactor:4}px;`} \n ${"bottom"===f||"top"===f?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}render(){this.tabIndex=0;const{showWhenCompleted:e="zero"}=this.component,t=this.calculateTimeValues();if(t.isCompleted&&(this.emitCompletionEvent(),"hidden"===e))return ym``;const n=this.buildUnitsToRender(t);return 0===n.length?ym`<div class="timer-text"></div>`:this.renderTimerUnits(n)}buildUnitsToRender(e){const{labels:t,units:n,labelPosition:i="none"}=this.component,{days:a,hours:r,minutes:o,seconds:s}=n||{},l=this.normalizeLabelPosition(i),d=this.shouldDisplayLabels(t,l);return[{enabled:a,value:e.days,label:this.getLabel("days",t,d),class:"timer-text-value-days"},{enabled:r,value:e.hours,label:this.getLabel("hours",t,d),class:"timer-text-value-hours"},{enabled:o,value:e.minutes,label:this.getLabel("minutes",t,d),class:"timer-text-value-minutes"},{enabled:s,value:e.seconds,label:this.getLabel("seconds",t,d),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}normalizeLabelPosition(e){return"below"===e?"bottom":"above"===e?"top":e}shouldDisplayLabels(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}getLabel(e,t,n){return t?.[e]??(n?R$.DEFAULT_LABELS[e]:"")}renderTimerUnits(e){const{separator:t,zeroPad:n=!0,labelPosition:i="none"}=this.component,{labels:a}=this.component,r=this.normalizeLabelPosition(i),o=a&&(a.days||a.hours||a.minutes||a.seconds),s=Boolean(o||"none"!==r),l=t??":";return ym`
|
|
356
|
+
`}};T([Um({type:Object})],I$.prototype,"component",void 0),T([Um({type:Number})],I$.prototype,"scaleFactor",void 0),T([Um({type:Boolean})],I$.prototype,"inFocusedState",void 0),T([Um({type:Object})],I$.prototype,"minSDKVersion",void 0),T([Um({type:Number})],I$.prototype,"currentWidth",void 0),I$=T([zm("nami-progress-indicator")],I$);let D$=class extends kp{constructor(){super(...arguments),this.inFocusedState=!1,this.scaleFactor=1,this.isActive=!1,this._handleFocus=()=>{this._announceButtonLabel()},this._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||this._handleClick()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}_announceButtonLabel(){const e=this.component.screenreaderText||this.component.title||"";e&&_h(e)}_handleClick(){const e=this.component.onTap?.function;if(!e)return;const t={function:e,parameters:{...this.component.onTap?.parameters,formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0}};Ug({onTap:t,contextProvider:this.contextProvider})}updated(){this.ariaLabel=this.component.screenreaderText||this.component.title||"",this.ariaDescription=this.component.screenreaderHint??""}styles(){const{component:e}=this,t=this.contextProvider.getCurrentFormId(e.formId||""),n=!0===t||t===e.value;this.inFocusedState=n;const i=n?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",a=n?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return Dh(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius}px !important;\n ${Jp(e,this.scaleFactor,this.inFocusedState)}\n ${Np(a)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Kp(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Wp(i)}\n }\n `)}render(){this.tabIndex=0;return this.component.components.map((e=>gg(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion)))}};var R$;T([Um({type:Object})],D$.prototype,"component",void 0),T([Um({type:Boolean})],D$.prototype,"inFocusedState",void 0),T([Um({type:Number})],D$.prototype,"scaleFactor",void 0),T([Um({type:Object})],D$.prototype,"minSDKVersion",void 0),T([Um({type:Boolean})],D$.prototype,"isActive",void 0),D$=T([zm("nami-toggle-button")],D$);let W$=R$=class extends kp{constructor(){super(...arguments),this.inFocusedState=!1,this.scaleFactor=1,this.timer=null,this.startTime=0,this.initialDuration=0,this.hasEmittedCompletion=!1}firstUpdated(){this.loadTimerState(),this.startTimer()}disconnectedCallback(){super.disconnectedCallback(),this.saveTimerState(),this.clearTimer()}getTimerId(){return this.component?.id??""}loadTimerState(){this.contextProvider?.flow&&(this.timerState=this.contextProvider.flow.timerStates[this.getTimerId()])}saveTimerState(){if(!this.contextProvider?.flow)return;const{mode:e,durationSeconds:t}=this.component;if("duration"!==e||void 0===t)return;const n=this.calculateCurrentRemainingSeconds();this.contextProvider.flow.timerStates[this.getTimerId()]={remainingSeconds:n,savedAt:Date.now(),hasEmittedCompletion:this.hasEmittedCompletion}}getSavedTimerState(){return this.contextProvider?.flow?.timerStates[this.getTimerId()]}startTimer(){this.initializeTimerState(),this.clearTimer(),this.timer=setInterval((()=>this.onTimerTick()),R$.TIMER_INTERVAL_MS)}initializeTimerState(){const{mode:e,durationSeconds:t,resetOnRemount:n}=this.component;"duration"===e&&void 0!==t&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,t):this.resetTimerState(t))}restoreTimerFromState(e,t){const n=(Date.now()-e.savedAt)/1e3,i=Math.max(0,e.remainingSeconds-n);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-i),this.hasEmittedCompletion=e.hasEmittedCompletion}resetTimerState(e){this.initialDuration=e,this.startTime=Date.now(),this.hasEmittedCompletion=!1}onTimerTick(){const{isCompleted:e}=this.calculateTimeValues();this.requestUpdate(),e&&this.clearTimer()}clearTimer(){this.timer&&(clearInterval(this.timer),this.timer=null)}calculateTimeValues(){const e=this.calculateTotalRemainingSeconds(),t=e<=0,{units:n}=this.component,{days:i,hours:a,minutes:r,seconds:o}=n||R$.DEFAULT_UNITS;return{...this.convertSecondsToTimeUnits(e,{days:i,hours:a,minutes:r,seconds:o}),isCompleted:t}}calculateTotalRemainingSeconds(){const{mode:e,durationSeconds:t,targetDateTime:n}=this.component;return"duration"===e?this.calculateDurationRemainingSeconds(t):"targetDateTime"===e&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}calculateDurationRemainingSeconds(e){const t=this.getSavedTimerState();if(t){const e=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-e)}if(this.initialDuration>0&&this.startTime>0){const e=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-e)}return void 0!==e?Math.max(0,e):0}calculateTargetDateTimeRemainingSeconds(e){const t=new Date(e).getTime(),n=Date.now();return Math.max(0,(t-n)/1e3)}calculateCurrentRemainingSeconds(){const{durationSeconds:e}=this.component;if(this.initialDuration>0&&this.startTime>0){const e=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-e)}return e??0}convertSecondsToTimeUnits(e,t){const n=t.days?Math.floor(e/R$.SECONDS_PER_DAY):0,i=e-n*R$.SECONDS_PER_DAY,a=t.hours?Math.floor(i/R$.SECONDS_PER_HOUR):0,r=i-a*R$.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/R$.SECONDS_PER_MINUTE):0,s=r-o*R$.SECONDS_PER_MINUTE;return{days:n,hours:a,minutes:o,seconds:t.seconds?Math.floor(s):0}}formatValue(e,t){return t?e.toString().padStart(2,"0"):e.toString()}emitCompletionEvent(){!this.hasEmittedCompletion&&this.contextProvider&&(this.hasEmittedCompletion=!0,td.getInstance().emit(He,{...this.contextProvider.getPaywallActionEventData(),action:e.NamiPaywallAction.COUNTDOWN_TIMER_COMPLETED,componentChange:{id:this.component.id,name:this.component.title}}))}updated(e){this.updateAccessibilityAttributes(),e.has("component")&&this.handleComponentChange(e.get("component"))}updateAccessibilityAttributes(){this.ariaLabel=this.component.screenreaderText||"",this.ariaDescription=this.component.screenreaderHint||""}handleComponentChange(e){if(!e)return;const{mode:t,durationSeconds:n,targetDateTime:i}=this.component;(t!==e.mode||n!==e.durationSeconds||i!==e.targetDateTime)&&this.startTimer()}styles(){const{component:e}=this,{labels:t,separator:n,labelPosition:i="none",direction:a="horizontal",labelFontSize:r,labelFontColor:o,labelFontName:s,labelSpacing:l,spacing:d,fontSize:u,fontColor:c,fontName:h,alignment:m}=e,f="below"===i?"bottom":"above"===i?"top":i,p="vertical"===a,g=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==f;return Dh(`\n :host {\n box-sizing: border-box;\n display: ${e.hidden?"none":"flex"};\n position: relative;\n cursor: pointer;\n height: 100%;\n border-radius: ${e.borderRadius||0}px !important;\n flex-direction: ${p?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Op(e,this.inFocusedState)}\n ${Bp(e,this.scaleFactor)}\n ${Gp(e,this.scaleFactor,this.inFocusedState)}\n ${jp(e)}\n ${Vp(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${p?"column":"row"};\n align-items: center;\n gap: ${p?d?d*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===f||"bottom"===f?"column":"row"};\n align-items: center;\n ${p?`margin-top: ${d?d*this.scaleFactor:4}px;`:`margin-right: ${d?d*this.scaleFactor:4}px;`} \n }\n .timer-text-value-days,\n .timer-text-value-hours,\n .timer-text-value-minutes,\n .timer-text-value-seconds {\n ${u?`font-size: ${u*this.scaleFactor}px;`:""}\n ${c?Fp(c):""}\n ${qp(h)}\n ${m?`text-align: ${m};`:""}\n ${Kp(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${r?r*this.scaleFactor:12*this.scaleFactor}px;\n color: ${o||"inherit"};\n ${qp(s)}\n ${"top"===f?`margin-bottom: ${l?l*this.scaleFactor:2}px;`:""}\n ${"bottom"===f?`margin-top: ${l?l*this.scaleFactor:2}px;`:""}\n ${g?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${n?`\n display: flex;\n align-items: center;\n ${u?`font-size: ${u*this.scaleFactor}px;`:""}\n ${c?Fp(c):""}\n ${qp(h)}\n line-height: 1;\n ${p?`margin-top: ${d?d*this.scaleFactor:4}px;`:`margin-right: ${d?d*this.scaleFactor:4}px;`} \n ${"bottom"===f||"top"===f?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}render(){this.tabIndex=0;const{showWhenCompleted:e="zero"}=this.component,t=this.calculateTimeValues();if(t.isCompleted&&(this.emitCompletionEvent(),"hidden"===e))return ym``;const n=this.buildUnitsToRender(t);return 0===n.length?ym`<div class="timer-text"></div>`:this.renderTimerUnits(n)}buildUnitsToRender(e){const{labels:t,units:n,labelPosition:i="none"}=this.component,{days:a,hours:r,minutes:o,seconds:s}=n||{},l=this.normalizeLabelPosition(i),d=this.shouldDisplayLabels(t,l);return[{enabled:a,value:e.days,label:this.getLabel("days",t,d),class:"timer-text-value-days"},{enabled:r,value:e.hours,label:this.getLabel("hours",t,d),class:"timer-text-value-hours"},{enabled:o,value:e.minutes,label:this.getLabel("minutes",t,d),class:"timer-text-value-minutes"},{enabled:s,value:e.seconds,label:this.getLabel("seconds",t,d),class:"timer-text-value-seconds"}].filter((e=>e.enabled)).map((e=>({value:e.value,label:e.label,unitClass:e.class,showUnit:!0})))}normalizeLabelPosition(e){return"below"===e?"bottom":"above"===e?"top":e}shouldDisplayLabels(e,t){return Boolean(e&&(e.days||e.hours||e.minutes||e.seconds))||"none"!==t&&void 0!==t}getLabel(e,t,n){return t?.[e]??(n?R$.DEFAULT_LABELS[e]:"")}renderTimerUnits(e){const{separator:t,zeroPad:n=!0,labelPosition:i="none"}=this.component,{labels:a}=this.component,r=this.normalizeLabelPosition(i),o=a&&(a.days||a.hours||a.minutes||a.seconds),s=Boolean(o||"none"!==r),l=t??":";return ym`
|
|
357
357
|
<div class="timer-text">
|
|
358
358
|
${e.map(((t,i)=>ym`
|
|
359
359
|
${this.renderUnit(t.value,t.label,t.unitClass,t.showUnit,n,r,s)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@namiml/web-sdk",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.3.9-dev.
|
|
4
|
+
"version": "3.3.9-dev.202603182019",
|
|
5
5
|
"source": "src/nami-web.ts",
|
|
6
6
|
"description": "Subscription monetization infrastructure — drop-in SDK with no-code paywalls, onboarding flows, A/B testing for web",
|
|
7
7
|
"scripts": {
|