@namiml/web-sdk 3.4.5-dev.202607101539 → 3.4.5-dev.202607111456
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 +2 -2
- package/package.json +2 -2
package/dist/nami-web.cjs
CHANGED
|
@@ -573,7 +573,7 @@
|
|
|
573
573
|
aria-valuemax="100"
|
|
574
574
|
></div>
|
|
575
575
|
</div>
|
|
576
|
-
`),this.currentWidth,Math.round(this.currentWidth))}}])}();Ae([ot({type:Object})],_O.prototype,"component",void 0),Ae([ot({type:Number})],_O.prototype,"scaleFactor",void 0),Ae([ot({type:Boolean})],_O.prototype,"inFocusedState",void 0),Ae([ot({type:Object})],_O.prototype,"minSDKVersion",void 0),Ae([ot({type:Number})],_O.prototype,"currentWidth",void 0),_O=Ae([Fe("nami-progress-indicator")],_O);var RO=function(){function e(){var t;return u(this,e),(t=s(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.isActive=!1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t}return y(e,ws),m(e,[{key:"connectedCallback",value:function(){M(e,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){M(e,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_handleClick",value:function(){var e,t,i=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(i){var n={function:i,parameters:v({},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})};Do({onTap:n,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,i=this.contextProvider.getCurrentFormId(e.formId||""),n=!0===i||i===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 t.unsafeCSS(`\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 ${Xs(e,this.scaleFactor,this.inFocusedState)}\n ${_s(r)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Gs(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Ls(a)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map(e=>Lu(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],RO.prototype,"component",void 0),Ae([ot({type:Boolean})],RO.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],RO.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],RO.prototype,"minSDKVersion",void 0),Ae([ot({type:Boolean})],RO.prototype,"isActive",void 0),RO=Ae([Fe("nami-toggle-button")],RO);var FO,OO,WO,$O,NO,jO,BO,zO,UO,HO,GO=e=>e,VO=(FO=function(){function i(){var e;return u(this,i),(e=s(this,i,arguments)).inFocusedState=!1,e.scaleFactor=1,e.timer=null,e.startTime=0,e.initialDuration=0,e.hasEmittedCompletion=!1,e}return y(i,ws),m(i,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){M(i,"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,i=t.mode,n=t.durationSeconds;if("duration"===i&&void 0!==n){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(),HO.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.resetOnRemount;"duration"===t&&void 0!==i&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,i):this.resetTimerState(i))}},{key:"restoreTimerFromState",value:function(e,t){var i=(Date.now()-e.savedAt)/1e3,n=Math.max(0,e.remainingSeconds-i);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-n),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,i=this.component.units||HO.DEFAULT_UNITS,n=i.days,a=i.hours,r=i.minutes,o=i.seconds;return v({},this.convertSecondsToTimeUnits(e,{days:n,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(i):"targetDateTime"===t&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var i=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-i)}if(this.initialDuration>0&&this.startTime>0){var n=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-n)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),i=Date.now();return Math.max(0,(t-i)/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 i=t.days?Math.floor(e/HO.SECONDS_PER_DAY):0,n=e-i*HO.SECONDS_PER_DAY,a=t.hours?Math.floor(n/HO.SECONDS_PER_HOUR):0,r=n-a*HO.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/HO.SECONDS_PER_MINUTE):0,s=r-o*HO.SECONDS_PER_MINUTE;return{days:i,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,e.NamiEventEmitter.getInstance().emit(e.PAYWALL_ACTION_EVENT,v({},this.contextProvider.getPaywallActionEventData(),{action:e.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,i=t.mode,n=t.durationSeconds,a=t.targetDateTime;(i!==e.mode||n!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,i=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=i&&(i.days||i.hours||i.minutes||i.seconds)||"none"!==g;return t.unsafeCSS(`\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 ${Fs(e,this.inFocusedState)}\n ${js(e,this.scaleFactor)}\n ${zs(e,this.scaleFactor,this.inFocusedState)}\n ${Ws(e)}\n ${Us(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?Rs(f):""}\n ${Ks(v)}\n ${p?`text-align: ${p};`:""}\n ${Gs(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 ${Ks(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?Rs(f):""}\n ${Ks(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,i=void 0===e?"zero":e,n=this.calculateTimeValues();if(n.isCompleted&&(this.emitCompletionEvent(),"hidden"===i))return t.html(OO||(OO=GO``));var a=this.buildUnitsToRender(n);return 0===a.length?t.html(WO||(WO=GO`<div class="timer-text"></div>`)):this.renderTimerUnits(a)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,i=t.labels,n=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=n||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(i,h);return[{enabled:s,value:e.days,label:this.getLabel("days",i,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",i,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",i,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",i,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,i){var n;return null!==(n=null==t?void 0:t[e])&&void 0!==n?n:i?HO.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var i=this.component,n=i.separator,a=i.zeroPad,r=void 0===a||a,o=i.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!=n?n:":";return t.html($O||($O=GO`
|
|
576
|
+
`),this.currentWidth,Math.round(this.currentWidth))}}])}();Ae([ot({type:Object})],_O.prototype,"component",void 0),Ae([ot({type:Number})],_O.prototype,"scaleFactor",void 0),Ae([ot({type:Boolean})],_O.prototype,"inFocusedState",void 0),Ae([ot({type:Object})],_O.prototype,"minSDKVersion",void 0),Ae([ot({type:Number})],_O.prototype,"currentWidth",void 0),_O=Ae([Fe("nami-progress-indicator")],_O);var RO=function(){function i(){var e;return u(this,i),(e=s(this,i,arguments)).inFocusedState=!1,e.scaleFactor=1,e.isActive=!1,e._handleFocus=()=>{e.inFocusedState=!0},e._handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key&&142!==t.keyCode&&195!==t.keyCode||e._handleClick()},e}return y(i,ws),m(i,[{key:"connectedCallback",value:function(){M(i,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){M(i,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_handleClick",value:function(){var t,i,n=null===(t=this.component.onTap)||void 0===t?void 0:t.function;if(n){var a={function:n,parameters:v({},null===(i=this.component.onTap)||void 0===i?void 0:i.parameters,{formId:this.component.formId||"",value:"radio"===this.component.mode?this.component.value:void 0})};Do({onTap:a,contextProvider:this.contextProvider}),this.contextProvider.flow&&this.component.id&&(e.logger.debug(`Trigger NamiFlow action for component ${this.component.id}`),this.contextProvider.flow.triggerActions(this.component.id))}}},{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.contextProvider.getCurrentFormId(e.formId||""),n=!0===i||i===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 t.unsafeCSS(`\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 ${Xs(e,this.scaleFactor,this.inFocusedState)}\n ${_s(r)}\n border-width: ${n?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Gs(n?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Ls(a)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map(e=>Lu(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();Ae([ot({type:Object})],RO.prototype,"component",void 0),Ae([ot({type:Boolean})],RO.prototype,"inFocusedState",void 0),Ae([ot({type:Number})],RO.prototype,"scaleFactor",void 0),Ae([ot({type:Object})],RO.prototype,"minSDKVersion",void 0),Ae([ot({type:Boolean})],RO.prototype,"isActive",void 0),RO=Ae([Fe("nami-toggle-button")],RO);var FO,OO,WO,$O,NO,jO,BO,zO,UO,HO,GO=e=>e,VO=(FO=function(){function i(){var e;return u(this,i),(e=s(this,i,arguments)).inFocusedState=!1,e.scaleFactor=1,e.timer=null,e.startTime=0,e.initialDuration=0,e.hasEmittedCompletion=!1,e}return y(i,ws),m(i,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){M(i,"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,i=t.mode,n=t.durationSeconds;if("duration"===i&&void 0!==n){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(),HO.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.resetOnRemount;"duration"===t&&void 0!==i&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,i):this.resetTimerState(i))}},{key:"restoreTimerFromState",value:function(e,t){var i=(Date.now()-e.savedAt)/1e3,n=Math.max(0,e.remainingSeconds-i);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-n),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,i=this.component.units||HO.DEFAULT_UNITS,n=i.days,a=i.hours,r=i.minutes,o=i.seconds;return v({},this.convertSecondsToTimeUnits(e,{days:n,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(i):"targetDateTime"===t&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var i=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-i)}if(this.initialDuration>0&&this.startTime>0){var n=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-n)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),i=Date.now();return Math.max(0,(t-i)/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 i=t.days?Math.floor(e/HO.SECONDS_PER_DAY):0,n=e-i*HO.SECONDS_PER_DAY,a=t.hours?Math.floor(n/HO.SECONDS_PER_HOUR):0,r=n-a*HO.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/HO.SECONDS_PER_MINUTE):0,s=r-o*HO.SECONDS_PER_MINUTE;return{days:i,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,e.NamiEventEmitter.getInstance().emit(e.PAYWALL_ACTION_EVENT,v({},this.contextProvider.getPaywallActionEventData(),{action:e.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,i=t.mode,n=t.durationSeconds,a=t.targetDateTime;(i!==e.mode||n!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,i=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=i&&(i.days||i.hours||i.minutes||i.seconds)||"none"!==g;return t.unsafeCSS(`\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 ${Fs(e,this.inFocusedState)}\n ${js(e,this.scaleFactor)}\n ${zs(e,this.scaleFactor,this.inFocusedState)}\n ${Ws(e)}\n ${Us(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?Rs(f):""}\n ${Ks(v)}\n ${p?`text-align: ${p};`:""}\n ${Gs(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 ${Ks(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?Rs(f):""}\n ${Ks(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,i=void 0===e?"zero":e,n=this.calculateTimeValues();if(n.isCompleted&&(this.emitCompletionEvent(),"hidden"===i))return t.html(OO||(OO=GO``));var a=this.buildUnitsToRender(n);return 0===a.length?t.html(WO||(WO=GO`<div class="timer-text"></div>`)):this.renderTimerUnits(a)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,i=t.labels,n=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=n||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(i,h);return[{enabled:s,value:e.days,label:this.getLabel("days",i,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",i,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",i,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",i,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,i){var n;return null!==(n=null==t?void 0:t[e])&&void 0!==n?n:i?HO.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var i=this.component,n=i.separator,a=i.zeroPad,r=void 0===a||a,o=i.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!=n?n:":";return t.html($O||($O=GO`
|
|
577
577
|
<div class="timer-text">
|
|
578
578
|
${0}
|
|
579
579
|
</div>
|
package/dist/nami-web.mjs
CHANGED
|
@@ -573,7 +573,7 @@ import{NAMI_SDK_VERSION as e,getExtendedClientInfo as t,PaywallState as i,logger
|
|
|
573
573
|
aria-valuemax="100"
|
|
574
574
|
></div>
|
|
575
575
|
</div>
|
|
576
|
-
`),this.currentWidth,Math.round(this.currentWidth))}}])}();gt([qt({type:Object})],EO.prototype,"component",void 0),gt([qt({type:Number})],EO.prototype,"scaleFactor",void 0),gt([qt({type:Boolean})],EO.prototype,"inFocusedState",void 0),gt([qt({type:Object})],EO.prototype,"minSDKVersion",void 0),gt([qt({type:Number})],EO.prototype,"currentWidth",void 0),EO=gt([Mt("nami-progress-indicator")],EO);var TO=function(){function e(){var t;return Q(this,e),(t=J(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.isActive=!1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t}return ue(e,du),ne(e,[{key:"connectedCallback",value:function(){pe(e,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){pe(e,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_handleClick",value:function(){var e,t,i=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(i){var n={function:i,parameters:re({},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})};ys({onTap:n,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||""),i=!0===t||t===e.value;this.inFocusedState=i;var n=i?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",a=i?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return U(`\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 ${$u(e,this.scaleFactor,this.inFocusedState)}\n ${Eu(a)}\n border-width: ${i?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Fu(i?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Su(n)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map(e=>Sl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();gt([qt({type:Object})],TO.prototype,"component",void 0),gt([qt({type:Boolean})],TO.prototype,"inFocusedState",void 0),gt([qt({type:Number})],TO.prototype,"scaleFactor",void 0),gt([qt({type:Object})],TO.prototype,"minSDKVersion",void 0),gt([qt({type:Boolean})],TO.prototype,"isActive",void 0),TO=gt([Mt("nami-toggle-button")],TO);var MO,PO,AO,DO,xO,CO,IO,LO,_O,RO,FO=e=>e,WO=(MO=function(){function e(){var t;return Q(this,e),(t=J(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.timer=null,t.startTime=0,t.initialDuration=0,t.hasEmittedCompletion=!1,t}return ue(e,du),ne(e,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){pe(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,i=t.mode,n=t.durationSeconds;if("duration"===i&&void 0!==n){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(),RO.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.resetOnRemount;"duration"===t&&void 0!==i&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,i):this.resetTimerState(i))}},{key:"restoreTimerFromState",value:function(e,t){var i=(Date.now()-e.savedAt)/1e3,n=Math.max(0,e.remainingSeconds-i);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-n),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,i=this.component.units||RO.DEFAULT_UNITS,n=i.days,a=i.hours,r=i.minutes,o=i.seconds;return re({},this.convertSecondsToTimeUnits(e,{days:n,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(i):"targetDateTime"===t&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var i=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-i)}if(this.initialDuration>0&&this.startTime>0){var n=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-n)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),i=Date.now();return Math.max(0,(t-i)/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 i=t.days?Math.floor(e/RO.SECONDS_PER_DAY):0,n=e-i*RO.SECONDS_PER_DAY,a=t.hours?Math.floor(n/RO.SECONDS_PER_HOUR):0,r=n-a*RO.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/RO.SECONDS_PER_MINUTE):0,s=r-o*RO.SECONDS_PER_MINUTE;return{days:i,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,f.getInstance().emit(v,re({},this.contextProvider.getPaywallActionEventData(),{action:m.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,i=t.mode,n=t.durationSeconds,a=t.targetDateTime;(i!==e.mode||n!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,t=e.labels,i=e.separator,n=e.labelPosition,a=void 0===n?"none":n,r=e.direction,o=void 0===r?"horizontal":r,s=e.labelFontSize,u=e.labelFontColor,l=e.labelFontName,d=e.labelSpacing,h=e.spacing,c=e.fontSize,m=e.fontColor,f=e.fontName,v=e.alignment,p="below"===a?"bottom":"above"===a?"top":a,g="vertical"===o,y=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==p;return U(`\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: ${g?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Mu(e,this.inFocusedState)}\n ${Cu(e,this.scaleFactor)}\n ${Lu(e,this.scaleFactor,this.inFocusedState)}\n ${Au(e)}\n ${_u(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${g?"column":"row"};\n align-items: center;\n gap: ${g?h?h*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===p||"bottom"===p?"column":"row"};\n align-items: center;\n ${g?`margin-top: ${h?h*this.scaleFactor:4}px;`:`margin-right: ${h?h*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 ${c?`font-size: ${c*this.scaleFactor}px;`:""}\n ${m?Tu(m):""}\n ${Ou(f)}\n ${v?`text-align: ${v};`:""}\n ${Fu(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${s?s*this.scaleFactor:12*this.scaleFactor}px;\n color: ${u||"inherit"};\n ${Ou(l)}\n ${"top"===p?`margin-bottom: ${d?d*this.scaleFactor:2}px;`:""}\n ${"bottom"===p?`margin-top: ${d?d*this.scaleFactor:2}px;`:""}\n ${y?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${i?`\n display: flex;\n align-items: center;\n ${c?`font-size: ${c*this.scaleFactor}px;`:""}\n ${m?Tu(m):""}\n ${Ou(f)}\n line-height: 1;\n ${g?`margin-top: ${h?h*this.scaleFactor:4}px;`:`margin-right: ${h?h*this.scaleFactor:4}px;`} \n ${"bottom"===p||"top"===p?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var e=this.component.showWhenCompleted,t=void 0===e?"zero":e,i=this.calculateTimeValues();if(i.isCompleted&&(this.emitCompletionEvent(),"hidden"===t))return B(PO||(PO=FO``));var n=this.buildUnitsToRender(i);return 0===n.length?B(AO||(AO=FO`<div class="timer-text"></div>`)):this.renderTimerUnits(n)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,i=t.labels,n=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=n||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(i,h);return[{enabled:s,value:e.days,label:this.getLabel("days",i,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",i,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",i,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",i,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,i){var n;return null!==(n=null==t?void 0:t[e])&&void 0!==n?n:i?RO.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var t=this.component,i=t.separator,n=t.zeroPad,a=void 0===n||n,r=t.labelPosition,o=void 0===r?"none":r,s=this.component.labels,u=this.normalizeLabelPosition(o),l=s&&(s.days||s.hours||s.minutes||s.seconds),d=Boolean(l||"none"!==u),h=null!=i?i:":";return B(DO||(DO=FO`
|
|
576
|
+
`),this.currentWidth,Math.round(this.currentWidth))}}])}();gt([qt({type:Object})],EO.prototype,"component",void 0),gt([qt({type:Number})],EO.prototype,"scaleFactor",void 0),gt([qt({type:Boolean})],EO.prototype,"inFocusedState",void 0),gt([qt({type:Object})],EO.prototype,"minSDKVersion",void 0),gt([qt({type:Number})],EO.prototype,"currentWidth",void 0),EO=gt([Mt("nami-progress-indicator")],EO);var TO=function(){function e(){var t;return Q(this,e),(t=J(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.isActive=!1,t._handleFocus=()=>{t.inFocusedState=!0},t._handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key&&142!==e.keyCode&&195!==e.keyCode||t._handleClick()},t}return ue(e,du),ne(e,[{key:"connectedCallback",value:function(){pe(e,"connectedCallback",this)([]),this.addEventListener("click",this._handleClick,!1),this.addEventListener("keydown",this._handleKeyDown),this.addEventListener("focus",this._handleFocus)}},{key:"disconnectedCallback",value:function(){pe(e,"disconnectedCallback",this)([]),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("focus",this._handleFocus)}},{key:"_handleClick",value:function(){var e,t,i=null===(e=this.component.onTap)||void 0===e?void 0:e.function;if(i){var a={function:i,parameters:re({},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})};ys({onTap:a,contextProvider:this.contextProvider}),this.contextProvider.flow&&this.component.id&&(n.debug(`Trigger NamiFlow action for component ${this.component.id}`),this.contextProvider.flow.triggerActions(this.component.id))}}},{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||""),i=!0===t||t===e.value;this.inFocusedState=i;var n=i?e.activeFillColor||e.activeFillColorFallback||"transparent":e.inactiveFillColor||e.inactiveFillColorFallback||"transparent",a=i?e.activeBorderColor||"transparent":e.inactiveBorderColor||"transparent";return U(`\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 ${$u(e,this.scaleFactor,this.inFocusedState)}\n ${Eu(a)}\n border-width: ${i?e.activeBorderWidth||0:e.inactiveBorderWidth||0}px !important;\n ${Fu(i?e.activeDropShadow:e.inactiveDropShadow)};\n border-style: solid;\n ${Su(n)}\n }\n `)}},{key:"render",value:function(){return this.tabIndex=0,this.component.components.map(e=>Sl(this.contextProvider,e,this.scaleFactor,this.inFocusedState,this.minSDKVersion))}}])}();gt([qt({type:Object})],TO.prototype,"component",void 0),gt([qt({type:Boolean})],TO.prototype,"inFocusedState",void 0),gt([qt({type:Number})],TO.prototype,"scaleFactor",void 0),gt([qt({type:Object})],TO.prototype,"minSDKVersion",void 0),gt([qt({type:Boolean})],TO.prototype,"isActive",void 0),TO=gt([Mt("nami-toggle-button")],TO);var MO,PO,AO,DO,xO,CO,IO,LO,_O,RO,FO=e=>e,WO=(MO=function(){function e(){var t;return Q(this,e),(t=J(this,e,arguments)).inFocusedState=!1,t.scaleFactor=1,t.timer=null,t.startTime=0,t.initialDuration=0,t.hasEmittedCompletion=!1,t}return ue(e,du),ne(e,[{key:"firstUpdated",value:function(){this.loadTimerState(),this.startTimer()}},{key:"disconnectedCallback",value:function(){pe(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,i=t.mode,n=t.durationSeconds;if("duration"===i&&void 0!==n){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(),RO.TIMER_INTERVAL_MS)}},{key:"initializeTimerState",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.resetOnRemount;"duration"===t&&void 0!==i&&(this.timerState&&!n?this.restoreTimerFromState(this.timerState,i):this.resetTimerState(i))}},{key:"restoreTimerFromState",value:function(e,t){var i=(Date.now()-e.savedAt)/1e3,n=Math.max(0,e.remainingSeconds-i);this.initialDuration=t,this.startTime=Date.now()-1e3*(this.initialDuration-n),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,i=this.component.units||RO.DEFAULT_UNITS,n=i.days,a=i.hours,r=i.minutes,o=i.seconds;return re({},this.convertSecondsToTimeUnits(e,{days:n,hours:a,minutes:r,seconds:o}),{isCompleted:t})}},{key:"calculateTotalRemainingSeconds",value:function(){var e=this.component,t=e.mode,i=e.durationSeconds,n=e.targetDateTime;return"duration"===t?this.calculateDurationRemainingSeconds(i):"targetDateTime"===t&&n?this.calculateTargetDateTimeRemainingSeconds(n):0}},{key:"calculateDurationRemainingSeconds",value:function(e){var t=this.getSavedTimerState();if(t){var i=(Date.now()-t.savedAt)/1e3;return Math.max(0,t.remainingSeconds-i)}if(this.initialDuration>0&&this.startTime>0){var n=(Date.now()-this.startTime)/1e3;return Math.max(0,this.initialDuration-n)}return void 0!==e?Math.max(0,e):0}},{key:"calculateTargetDateTimeRemainingSeconds",value:function(e){var t=new Date(e).getTime(),i=Date.now();return Math.max(0,(t-i)/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 i=t.days?Math.floor(e/RO.SECONDS_PER_DAY):0,n=e-i*RO.SECONDS_PER_DAY,a=t.hours?Math.floor(n/RO.SECONDS_PER_HOUR):0,r=n-a*RO.SECONDS_PER_HOUR,o=t.minutes?Math.floor(r/RO.SECONDS_PER_MINUTE):0,s=r-o*RO.SECONDS_PER_MINUTE;return{days:i,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,f.getInstance().emit(v,re({},this.contextProvider.getPaywallActionEventData(),{action:m.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,i=t.mode,n=t.durationSeconds,a=t.targetDateTime;(i!==e.mode||n!==e.durationSeconds||a!==e.targetDateTime)&&this.startTimer()}}},{key:"styles",value:function(){var e=this.component,t=e.labels,i=e.separator,n=e.labelPosition,a=void 0===n?"none":n,r=e.direction,o=void 0===r?"horizontal":r,s=e.labelFontSize,u=e.labelFontColor,l=e.labelFontName,d=e.labelSpacing,h=e.spacing,c=e.fontSize,m=e.fontColor,f=e.fontName,v=e.alignment,p="below"===a?"bottom":"above"===a?"top":a,g="vertical"===o,y=t&&(t.days||t.hours||t.minutes||t.seconds)||"none"!==p;return U(`\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: ${g?"column":"row"};\n align-items: center;\n justify-content: flex-start;\n ${Mu(e,this.inFocusedState)}\n ${Cu(e,this.scaleFactor)}\n ${Lu(e,this.scaleFactor,this.inFocusedState)}\n ${Au(e)}\n ${_u(e,this.scaleFactor)}\n }\n .timer-text {\n display: flex;\n flex-direction: ${g?"column":"row"};\n align-items: center;\n gap: ${g?h?h*this.scaleFactor:4:0}px;\n }\n .timer-unit {\n display: flex;\n flex-direction: ${"top"===p||"bottom"===p?"column":"row"};\n align-items: center;\n ${g?`margin-top: ${h?h*this.scaleFactor:4}px;`:`margin-right: ${h?h*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 ${c?`font-size: ${c*this.scaleFactor}px;`:""}\n ${m?Tu(m):""}\n ${Ou(f)}\n ${v?`text-align: ${v};`:""}\n ${Fu(e.dropShadow,!0)}\n line-height: 1;\n }\n .timer-text-value-label {\n font-size: ${s?s*this.scaleFactor:12*this.scaleFactor}px;\n color: ${u||"inherit"};\n ${Ou(l)}\n ${"top"===p?`margin-bottom: ${d?d*this.scaleFactor:2}px;`:""}\n ${"bottom"===p?`margin-top: ${d?d*this.scaleFactor:2}px;`:""}\n ${y?"":"display: none;"}\n }\n .timer-text-value-separator {\n ${i?`\n display: flex;\n align-items: center;\n ${c?`font-size: ${c*this.scaleFactor}px;`:""}\n ${m?Tu(m):""}\n ${Ou(f)}\n line-height: 1;\n ${g?`margin-top: ${h?h*this.scaleFactor:4}px;`:`margin-right: ${h?h*this.scaleFactor:4}px;`} \n ${"bottom"===p||"top"===p?"align-self: flex-start;":""}\n `:"display: none;"}\n }\n `)}},{key:"render",value:function(){this.tabIndex=0;var e=this.component.showWhenCompleted,t=void 0===e?"zero":e,i=this.calculateTimeValues();if(i.isCompleted&&(this.emitCompletionEvent(),"hidden"===t))return B(PO||(PO=FO``));var n=this.buildUnitsToRender(i);return 0===n.length?B(AO||(AO=FO`<div class="timer-text"></div>`)):this.renderTimerUnits(n)}},{key:"buildUnitsToRender",value:function(e){var t=this.component,i=t.labels,n=t.units,a=t.labelPosition,r=void 0===a?"none":a,o=n||{},s=o.days,u=o.hours,l=o.minutes,d=o.seconds,h=this.normalizeLabelPosition(r),c=this.shouldDisplayLabels(i,h);return[{enabled:s,value:e.days,label:this.getLabel("days",i,c),class:"timer-text-value-days"},{enabled:u,value:e.hours,label:this.getLabel("hours",i,c),class:"timer-text-value-hours"},{enabled:l,value:e.minutes,label:this.getLabel("minutes",i,c),class:"timer-text-value-minutes"},{enabled:d,value:e.seconds,label:this.getLabel("seconds",i,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,i){var n;return null!==(n=null==t?void 0:t[e])&&void 0!==n?n:i?RO.DEFAULT_LABELS[e]:""}},{key:"renderTimerUnits",value:function(e){var t=this.component,i=t.separator,n=t.zeroPad,a=void 0===n||n,r=t.labelPosition,o=void 0===r?"none":r,s=this.component.labels,u=this.normalizeLabelPosition(o),l=s&&(s.days||s.hours||s.minutes||s.seconds),d=Boolean(l||"none"!==u),h=null!=i?i:":";return B(DO||(DO=FO`
|
|
577
577
|
<div class="timer-text">
|
|
578
578
|
${0}
|
|
579
579
|
</div>
|