@inappstory/slide-api 0.0.21 → 0.0.23

package/dist/index.js

@@ -573,8 +573,8 @@ const getWinWidth = function (env) {
 const getWinHeight = function (env) {
     return env.innerHeight || env.document.documentElement.clientHeight || env.document.body.clientHeight;
 };
-const sendStatisticEventToApp = function (sdkApi, name, data, devPayload) {
-    sdkApi.sendStatisticEvent(name, data, devPayload);
+const sendStatisticEventToApp = function (sdkApi, name, data, devPayload, options) {
+    sdkApi.sendStatisticEvent(name, data, devPayload, options?.forceEnableStatisticV2 ?? false);
 };
 const getValueOrException = function (value, message) {
     if (value == null) {
@@ -670,6 +670,37 @@ const Clipboard = (function (window, document, navigator) {
         copy,
     };
 })(window, document, navigator);
+function FilterNumber(x) {
+    return typeof x === "number";
+}
+function determineLocale() {
+    // All modern browsers support this. Should match what's used by localeCompare() etc.
+    const intl = window.Intl;
+    if (intl !== undefined) {
+        return intl.NumberFormat().resolvedOptions().locale;
+    }
+    // Fall back to ranked choice locales, which are configured in the browser but aren't necessarily
+    // what's used in functions like localeCompare().
+    const languages = navigator.languages;
+    if (languages !== undefined && languages.length > 0) {
+        return languages[0];
+    }
+    // Old standard.
+    return navigator.language ?? "en-US";
+}
+function isScreenSupportsTouch(env) {
+    let supportsTouch = false;
+    if ("ontouchstart" in env) {
+        supportsTouch = true;
+    }
+    else if (env.navigator.msPointerEnabled) {
+        supportsTouch = true;
+    }
+    else if ("ontouchstart" in env.document.documentElement) {
+        supportsTouch = true;
+    }
+    return supportsTouch;
+}
 
 var supportAnimate = document.documentElement.animate !== undefined;
 supportAnimate = false; // tmp off
@@ -1067,8 +1098,8 @@ class EsModuleSdkApi {
     showNextSlide(duration) {
         this.sdkBinding().showNextSlide(duration);
     }
-    sendStatisticEvent(name, data, devPayload) {
-        this.sdkBinding().sendStatisticEvent(name, data, devPayload);
+    sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2) {
+        this.sdkBinding().sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2);
     }
     getCardLocalData() {
         return this.sdkBinding().getCardLocalData();
@@ -1169,6 +1200,14 @@ class EsModuleSdkApi {
     getCardFonts() {
         return this.sdkBinding().getCardFonts();
     }
+    disableVerticalSwipeGesture() {
+        this.sdkBinding().disableVerticalSwipeGesture();
+    }
+    enableVerticalSwipeGesture() {
+        this.sdkBinding().enableVerticalSwipeGesture();
+    }
+    disableBackpress() { }
+    enableBackpress() { }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`() => SDKInterface`]; }
 }
 
@@ -1200,6 +1239,8 @@ class WidgetBase {
     localData = null;
     firstOpenTime = 0;
     id;
+    startReadyPromise = null;
+    startReadyResolve = null;
     constructor(element, options, elementIdGetter, slideGetter) {
         this.options = extend({}, this.constructor.DEFAULTS, options);
         this.element = element;
@@ -1251,12 +1292,32 @@ class WidgetBase {
         this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
         this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
         ++WidgetBase.widgetIndex;
+        this.resetStartReadyPromise();
+    }
+    resetStartReadyPromise() {
+        this.startReadyPromise = new Promise(resolve => {
+            this.startReadyResolve = resolve;
+        });
     }
     /**
      * Start or restart widget
      * @param localData
      */
-    onRefreshUserData(localData) { }
+    onRefreshUserData(localData) {
+        this.savedData = this.sdkApi.getCardServerData(this.cardId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+    }
+    onStart() {
+        // add active class for enable animation
+        this.element.classList.add("active");
+        this.startReadyResolve();
+    }
+    onStop() {
+        this.element.classList.remove("active");
+        this.resetStartReadyPromise();
+    }
+    onPause() { }
+    onResume() { }
     static widgetCacheKey = "ias.story-element";
     static widgetClassName = "";
     static getInstance(element) {
@@ -1401,16 +1462,16 @@ class WidgetBase {
         }
         return data;
     }
-    static sendStatisticEventToApp(name, data, devPayload) {
-        sendStatisticEventToApp(this.widgetsService.sdkApi, name, data, devPayload);
+    static sendStatisticEventToApp(name, data, devPayload, options) {
+        sendStatisticEventToApp(this.widgetsService.sdkApi, name, data, devPayload, options);
     }
-    sendStatisticEventToApp(name, data, devPayload) {
-        this.constructor.sendStatisticEventToApp(name, data, devPayload);
+    sendStatisticEventToApp(name, data, devPayload, options) {
+        this.constructor.sendStatisticEventToApp(name, data, devPayload, options);
     }
     startDisabledTimeline() {
         this.sdkApi.startDisabledTimeline(this.cardId, this.slideIndex);
     }
-    _showLayout(layers, selectIndex, withStatEvent = false) {
+    _showLayer(layers, selectIndex, withStatEvent = false) {
         if (this.sdkApi.isExistsShowLayer()) {
             this.sdkApi.showLayer(selectIndex);
         }
@@ -1553,9 +1614,21 @@ class WidgetCopy extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
+        // return DOM to init state (ready to copy)
+        this.element.classList.remove("done");
+        if (this.resultLayer) {
+            this.resultLayer.classList.remove("done");
+        }
         this.state = null;
+        if (this.isPromotionalCode) {
+            this.initPromotionalCodeFromLocalData();
+        }
+    }
+    onStart() {
+        super.onStart();
+        // add active class for enable animation
+        this.resultLayer?.classList.add("active");
         if (this.isPromotionalCode) {
             this.fetchPromoCode();
         }
@@ -1579,16 +1652,22 @@ class WidgetCopy extends WidgetBase {
             this.button.textContent = newText;
         }
     }
-    fetchPromoCode() {
-        this.state = 0;
-        if (this.localData["_cp_g_" + this.elementId + "_pc"] !== undefined) {
+    getPromotionalCodeFromLocalData() {
+        return this.localData["_cp_g_" + this.elementId + "_pc"];
+    }
+    initPromotionalCodeFromLocalData() {
+        if (this.getPromotionalCodeFromLocalData() !== undefined) {
             this.state = 1;
-            this.clipboardTarget = this.localData["_cp_g_" + this.elementId + "_pc"];
+            this.clipboardTarget = this.getPromotionalCodeFromLocalData();
             if (this.clipboardTarget != null) {
                 this.changeText(this.clipboardTarget);
             }
             removeClass(this.element, "loader");
         }
+    }
+    fetchPromoCode() {
+        this.state = 0;
+        this.initPromotionalCodeFromLocalData();
         if (this.state === 0) {
             if (!this.isTransparentElement()) {
                 // for transparent element
@@ -1676,12 +1755,14 @@ class WidgetCopy extends WidgetBase {
         if (this.resultLayer) {
             this.resultLayer.classList.add("done");
         }
-        if (this.disableTimer) {
-            // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
-            // смотрим что прозрачный текст - тогда и лоадер прозрачный
-            // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
+                // смотрим что прозрачный текст - тогда и лоадер прозрачный
+                // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
+                this.startDisabledTimeline();
+            }
+        });
     }
     copyToClipboard(element) {
         this._select();
@@ -1715,6 +1796,13 @@ class WidgetCopy extends WidgetBase {
             // prevent initWidget for result layer
             const elements = slice.call(nodeList).filter(element => !element.classList.contains("narrative-element-copy-result-variant"));
             WidgetCopy.initWidgets((element, options) => new WidgetCopy(element, options), elements, localData);
+            elements.forEach(element => WidgetCopy.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetCopy.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetCopy.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetCopy.widgetClassName}`);
@@ -1770,17 +1858,21 @@ class WidgetDataInput extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
-        const text = this.localData["_di_g_" + this.elementId + "_t"];
+        super.onRefreshUserData(localData);
+        const text = this.getTextFromLocalData();
         this._fillUserText(text);
-        if (text) {
+        if (text != null) {
             this.element.classList.add("done");
-            if (this.disableTimer) {
-                this.startDisabledTimeline();
-            }
+            this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.startDisabledTimeline();
+                }
+            });
         }
     }
+    getTextFromLocalData() {
+        return this.localData["_di_g_" + this.elementId + "_t"];
+    }
     _statEventFocusIn() {
         try {
             const labelText = this.label ? this.label.textContent ?? "" : "";
@@ -1858,7 +1950,7 @@ class WidgetDataInput extends WidgetBase {
     }
     _fillUserText(text) {
         if (this.inputElement && this.textElement) {
-            if (text) {
+            if (text != null) {
                 this.inputElement.classList.remove("_is-placeholder");
                 text = text.replace(new RegExp("\r?\n", "g"), "<br />");
                 this.textElement.innerHTML = text;
@@ -1908,7 +2000,15 @@ class WidgetDataInput extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, localData) {
+            const elements = slice.call(nodeList);
             WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
+            elements.forEach(element => WidgetDataInput.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetDataInput.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetDataInput.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetDataInput.widgetClassName}`);
@@ -1939,7 +2039,7 @@ class WidgetDateCountdown extends WidgetBase {
     label;
     layers;
     messages;
-    timestampSeconds;
+    timestampMs;
     diff;
     timerInit;
     pendingUpdate;
@@ -1961,58 +2061,58 @@ class WidgetDateCountdown extends WidgetBase {
             minutes: getTagData(this.element, "tMinutes") ?? "",
             seconds: getTagData(this.element, "tSeconds") ?? "",
         };
-        this.timestampSeconds = getValueOrException(getTagDataAsNumber(this.element, "timestampSeconds"), "Empty timestampSeconds");
+        this.timestampMs = getValueOrException(getTagDataAsNumber(this.element, "timestampSeconds"), "Empty timestampSeconds") * 1000;
         this.diff = 0;
         this.timerInit = false;
         this.pendingUpdate = true;
         this.layers = this.options.layers;
-        // if (false) {
-        //     // if (sendApiRequestSupported()) {
-        //     // fetch project time
-        //     var path = "story/" + this.storyId + "/widget/" + this.elementId + "/timestamp";
-        //     var profileKey = "fetch-story-timestamp";
-        //     this.sdkApi
-        //         .sendApiRequest<{ timestamp: number }>(path, "GET", null, null, null, profileKey)
-        //         .then(response => {
-        //             var status = response.status;
-        //             var timestamp = null;
-        //             if (status === 200) {
-        //                 if (response.data) timestamp = response.data.timestamp;
-        //                 if (timestamp) {
-        //                     this.diff = new Date().getTime() - timestamp * 1000;
-        //                 }
-        //             }
-        //
-        //             this.initTimer();
-        //         })
-        //         .catch( (reason)=> {
-        //             console.error(reason);
-        //             this.initTimer();
-        //         });
-        // } else {
-        this.initTimer();
-        // }
     }
     /**
      * Start or restart widget
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
+        if (value > 0) {
+            this._showLayer(this.layers, 0);
+        }
+        else {
+            if (this.layers[1] != null) {
+                this._showLayer(this.layers, 1);
+            }
+        }
     }
-    pause() {
+    onPause() {
+        super.onPause();
         if (this.timerInit) {
             this.pendingUpdate = false;
         }
     }
-    resume() {
-        if (this.timerInit) {
+    onResume() {
+        super.onResume();
+        if (this.timerInit && !this.pendingUpdate) {
             this.pendingUpdate = true;
             this.updateTimer();
         }
     }
+    onStart() {
+        super.onStart();
+        if (!this.timerInit) {
+            this.initTimer();
+        }
+    }
+    onStop() {
+        super.onStop();
+        if (this.timerInit) {
+            this.pendingUpdate = false;
+            this.timerInit = false;
+        }
+    }
     initTimer() {
+        if (this.timerInit) {
+            return;
+        }
         // find groups
         this.firstGroup1 = getValueOrException(this.element.querySelector(".date-item-view-group-1 .date-output-label-1"), "Empty firstGroup1");
         this.firstGroup2 = getValueOrException(this.element.querySelector(".date-item-view-group-1 .date-output-label-2"), "Empty firstGroup2");
@@ -2023,16 +2123,18 @@ class WidgetDateCountdown extends WidgetBase {
         this.thirdGroup1 = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-output-label-1"), "Empty thirdGroup1");
         this.thirdGroup2 = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-output-label-2"), "Empty thirdGroup2");
         this.thirdGroupCaption = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-item-caption"), "Empty thirdGroupCaption");
-        this.timestampSeconds *= 1000;
         this.timerInit = true;
-        const value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
         if (value > 0) {
-            this._showLayout(this.layers, 0);
+            this._showLayer(this.layers, 0);
         }
         this.updateTimer();
     }
     updateTimer() {
-        const value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        if (!this.timerInit) {
+            return;
+        }
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
         if (value > 0) {
             const result = this._asDuration(Math.round(value / 1000));
             if (result.days) {
@@ -2061,7 +2163,9 @@ class WidgetDateCountdown extends WidgetBase {
         }
         else {
             this.pendingUpdate = false;
-            this._showLayout(this.layers, 1);
+            if (this.layers[1] != null) {
+                this._showLayer(this.layers, 1);
+            }
         }
         if (this.pendingUpdate) {
             this.env.requestAnimationFrame(() => this.updateTimer());
@@ -2134,24 +2238,32 @@ class WidgetDateCountdown extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, layers, localData) {
-            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData);
+            elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetDateCountdown.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetDateCountdown.getInstance(element)?.onStop();
         },
         onPause: function (element) {
-            WidgetDateCountdown.getInstance(element)?.pause();
+            WidgetDateCountdown.getInstance(element)?.onPause();
         },
         onResume: function (element) {
-            WidgetDateCountdown.getInstance(element)?.resume();
+            WidgetDateCountdown.getInstance(element)?.onResume();
         },
         /** @deprecated */
         pause: function (nodeList) {
             forEach(slice.call(nodeList), function (el, index) {
-                WidgetDateCountdown.getInstance(el)?.pause();
+                WidgetDateCountdown.getInstance(el)?.onPause();
             });
         },
         /** @deprecated */
         resume: function (nodeList) {
             forEach(slice.call(nodeList), function (el, index) {
-                WidgetDateCountdown.getInstance(el)?.resume();
+                WidgetDateCountdown.getInstance(el)?.onResume();
             });
         },
     };
@@ -2343,8 +2455,7 @@ class WidgetPoll extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.localData) {
             if (this.localData["_p_g_" + this.elementId + "_sa"] !== undefined) {
@@ -2427,14 +2538,11 @@ class WidgetPoll extends WidgetBase {
             this.element.classList.add("with-total-result");
             this.displayPercents(index, filled);
         }
-        if (this.disableTimer) {
-            this.env.setTimeout(() => {
-                // todo poll - если виджет на первом слайде то при повторном заходе автоматически не стартует таймлайн слайда
-                // только в web sdk такое
-                // если поставить через setTimeout то все ок
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
                 this.startDisabledTimeline();
-            });
-        }
+            }
+        });
     }
     _clearVariantSelection() {
         forEach(this.variants, function (variant) {
@@ -2781,6 +2889,13 @@ class WidgetPoll extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
+            WidgetPoll.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetPoll.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetPoll.getInstance(element)?.onStop();
         },
         /**
          * click
@@ -2855,14 +2970,13 @@ class WidgetPollLayers extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.slidePollIsDone()) {
             this._selectVariant(this.localData["_pl_g_" + this.elementId + "_sa"]);
         }
         else {
-            this._showLayout(this.layers, 0);
+            this._showLayer(this.layers, 0);
         }
         this.firstOpenTime = new Date().getTime();
     }
@@ -2908,10 +3022,12 @@ class WidgetPollLayers extends WidgetBase {
         else if (index === 1) {
             layerIndex = 2;
         }
-        this._showLayout(this.layers, layerIndex, userAction);
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this._showLayer(this.layers, layerIndex, userAction);
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     selectVariant(variant) {
         if (this.selectedVariant !== undefined) {
@@ -2968,6 +3084,13 @@ class WidgetPollLayers extends WidgetBase {
                 localData = undefined;
             }
             WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData);
+            WidgetPollLayers.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetPollLayers.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetPollLayers.getInstance(element)?.onStop();
         },
         /**
          * click on poll variant
@@ -3002,6 +3125,7 @@ class WidgetQuest extends WidgetBase {
     isWidget;
     slideCount;
     nonFinalSlide;
+    slideDisabledNavigation;
     finalSlide;
     constructor(element, options) {
         const isWidget = !hasClass(element, "narrative-slide");
@@ -3014,6 +3138,7 @@ class WidgetQuest extends WidgetBase {
         this.finalSlide = !this.isWidget && !this.nonFinalSlide;
         this.label = this.element.querySelector(".label-view .label");
         this.variants = slice.call(this.element.querySelectorAll(".variants-box .variant-view"));
+        this.slideDisabledNavigation = Boolean(getTagDataAsNumber(this.slide, "disableNavigation") ?? 0);
         this.selectedAnswer = undefined;
     }
     /**
@@ -3021,8 +3146,7 @@ class WidgetQuest extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
     }
     setCardSessionValue(name, value) {
         this.sdkApi.setCardSessionValue(this.element, name, value);
@@ -3159,6 +3283,10 @@ class WidgetQuest extends WidgetBase {
         const directionForward = event.direction === "forward";
         event.direction === "backward";
         if (this.isWidget) {
+            // like in web-sdk - simple block tap navigation at all
+            if (this.slideDisabledNavigation) {
+                return;
+            }
             if (directionForward) {
                 return;
             }
@@ -3182,6 +3310,10 @@ class WidgetQuest extends WidgetBase {
             }
         }
         else {
+            // like in web-sdk - simple block tap navigation at all
+            if (this.slideDisabledNavigation) {
+                return;
+            }
             // slides without quest form
             // simple slide case
             if (this.nonFinalSlide || event.slideIndex < this.firstSlideWithQuestIndex()) {
@@ -3275,8 +3407,15 @@ class WidgetQuest extends WidgetBase {
                         resolve(true);
                     }
                 });
+                WidgetQuest.getInstance(element)?.onStart();
             });
         },
+        onStart: function (element) {
+            WidgetQuest.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuest.getInstance(element)?.onStop();
+        },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetQuest.widgetClassName}`);
             if (widgetElement) {
@@ -3327,8 +3466,7 @@ class WidgetQuiz extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedAnswer = undefined;
         if (this.localData) {
             if (this.localData["_q_g_" + this.elementId + "_sa"] !== undefined) {
@@ -3371,9 +3509,11 @@ class WidgetQuiz extends WidgetBase {
         //     })
         //   })
         // }
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearAnswerSelection() {
         forEach(this.answers, function (answer) {
@@ -3472,6 +3612,13 @@ class WidgetQuiz extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
+            WidgetQuiz.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetQuiz.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuiz.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -3525,8 +3672,7 @@ class WidgetQuizGrouped extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedAnswer = undefined;
         if (this.localData) {
             if (this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined) {
@@ -3556,9 +3702,11 @@ class WidgetQuizGrouped extends WidgetBase {
                 this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
             }
         });
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearAnswerSelection() {
         forEach(this.answers, function (answer) {
@@ -3674,6 +3822,13 @@ class WidgetQuizGrouped extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
+            WidgetQuizGrouped.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetQuizGrouped.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuizGrouped.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -3919,15 +4074,16 @@ class WidgetRangeSlider extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         if (this.localData["_rs_g_" + this.elementId + "_v"] !== undefined) {
             this.elementSlider.value = String(tryParseFloat(this.localData["_rs_g_" + this.elementId + "_v"], 0));
             this.element.classList.add("done");
             this.displayAverageAnswer();
-            if (this.disableTimer) {
-                this.startDisabledTimeline();
-            }
+            this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.startDisabledTimeline();
+                }
+            });
         }
         else {
             this.elementSlider.value = String(this.startValue);
@@ -3936,6 +4092,10 @@ class WidgetRangeSlider extends WidgetBase {
         }
         this.init();
     }
+    onStop() {
+        super.onStop();
+        this.destroy();
+    }
     _statEventInputSave(val) {
         try {
             const labelText = this.label?.textContent ?? "";
@@ -4112,10 +4272,10 @@ class WidgetRangeSlider extends WidgetBase {
         if (!this.maxHandlePos) {
             this.update(true, false);
         }
-        document.addEventListener("touchmove", this.handleMove);
-        document.addEventListener("touchend", this.handleEnd);
-        document.addEventListener("mousemove", this.handleMove);
-        document.addEventListener("mouseup", this.handleEnd);
+        this.env.document.addEventListener("touchmove", this.handleMove);
+        this.env.document.addEventListener("touchend", this.handleEnd);
+        this.env.document.addEventListener("mousemove", this.handleMove);
+        this.env.document.addEventListener("mouseup", this.handleEnd);
         // add active class because Firefox is ignoring
         // the handle:active pseudo selector because of `e.preventDefault();`
         this.range.classList.add(this.options.activeClass);
@@ -4140,10 +4300,10 @@ class WidgetRangeSlider extends WidgetBase {
             this.isClickCapturedBySlider = false;
         });
         // e.preventDefault();
-        document.removeEventListener("touchmove", this.handleMove);
-        document.removeEventListener("touchend", this.handleEnd);
-        document.removeEventListener("mousemove", this.handleMove);
-        document.removeEventListener("mouseup", this.handleEnd);
+        this.env.document.removeEventListener("touchmove", this.handleMove);
+        this.env.document.removeEventListener("touchend", this.handleEnd);
+        this.env.document.removeEventListener("mousemove", this.handleMove);
+        this.env.document.removeEventListener("mouseup", this.handleEnd);
         this.range.classList.remove(this.options.activeClass);
         this.element.classList.add("input-done");
         if (!this.hasSubmitButton) {
@@ -4287,11 +4447,18 @@ class WidgetRangeSlider extends WidgetBase {
         onRefreshUserData: WidgetRangeSlider.onRefreshUserData,
         init: function (element, localData) {
             WidgetRangeSlider.initWidget(element, localData, (element, options) => new WidgetRangeSlider(element, options));
+            WidgetRangeSlider.getInstance(element)?.onStart();
         },
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
         },
+        onStart: function (element) {
+            WidgetRangeSlider.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetRangeSlider.getInstance(element)?.onStop();
+        },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetRangeSlider.widgetClassName}`);
             if (widgetElement) {
@@ -4352,8 +4519,7 @@ class WidgetRate extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedStar = undefined;
         if (this.localData) {
             if (this.localData["_r_g_" + this.elementId + "_ss"] !== undefined) {
@@ -4411,9 +4577,11 @@ class WidgetRate extends WidgetBase {
         this.selectedStar = value;
         this.localData["_r_g_" + this.elementId + "_ss"] = value;
         this.element.classList.add("done");
-        if (this.disableTimer && runTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer && runTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearSelectedStar() {
         forEach(this.stars, function (element) {
@@ -4546,7 +4714,15 @@ class WidgetRate extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, localData) {
-            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData);
+            elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetRate.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetRate.getInstance(element)?.onStop();
         },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetRate.widgetClassName}`);
@@ -4598,19 +4774,20 @@ class WidgetShare extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         if (this.withLayer) {
             if (this.isDone()) {
-                this._showLayout(this.layers, 1);
+                this._showLayer(this.layers, 1);
             }
             else {
-                this._showLayout(this.layers, 0);
+                this._showLayer(this.layers, 0);
             }
         }
-        if (this.isDone() && this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.isDone() && this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
         this.btnDisabled = false;
     }
     _statEventShare(result, via) {
@@ -4665,7 +4842,7 @@ class WidgetShare extends WidgetBase {
         }
         this._statEventShare(isSuccess, null);
         if (isSuccess && this.withLayer) {
-            this._showLayout(this.layers, 1, true);
+            this._showLayer(this.layers, 1, true);
         }
         if (this.disableTimer) {
             this.startDisabledTimeline();
@@ -4681,7 +4858,10 @@ class WidgetShare extends WidgetBase {
         refreshUserData: WidgetShare.refreshUserData,
         onRefreshUserData: WidgetShare.onRefreshUserData,
         init: function (element, layers, localData) {
-            WidgetShare.initWidget(element, localData, (element, options) => new WidgetShare(element, { ...options, layers }));
+            WidgetShare.initWidget(element, localData, (element, options) => new WidgetShare(element, {
+                ...options,
+                layers,
+            }));
         },
         /** @deprecated
          * signature variants
@@ -4695,7 +4875,15 @@ class WidgetShare extends WidgetBase {
                 layers = localData;
                 localData = undefined;
             }
-            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData);
+            elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetShare.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetShare.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetShare.widgetClassName}`);
@@ -4775,8 +4963,7 @@ class WidgetTest extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedAnswer = undefined;
         if (this.localData) {
             if (this.localData["_t_g_" + this.elementId + "_sa"] !== undefined) {
@@ -4800,7 +4987,9 @@ class WidgetTest extends WidgetBase {
                 this.timeLeft = this.timeLeftDefault;
                 this.animationFrameId = null;
                 this.startTimerAt = new Date().getTime();
-                this.tick();
+                this.startReadyPromise.then(() => {
+                    this.tick();
+                });
                 // set answer - unanswered (for close and run again)
                 this.localData["_t_g_" + this.elementId + "_sa"] = -1;
                 this.setLocalData(this.localData, true);
@@ -4820,6 +5009,15 @@ class WidgetTest extends WidgetBase {
             }
         }
     }
+    onStart() {
+        super.onStart();
+    }
+    onStop() {
+        super.onStop();
+        if (this.slideTestWithTimer()) {
+            this.cancelTick();
+        }
+    }
     _statEventVoteAnswer(answerScore) {
         try {
             if (this.selectedAnswer != null) {
@@ -4867,9 +5065,11 @@ class WidgetTest extends WidgetBase {
                 this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
             }
         });
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     selectAnswer(answer) {
         if (this.selectedAnswer !== undefined) {
@@ -4948,6 +5148,13 @@ class WidgetTest extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
+            WidgetTest.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetTest.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetTest.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -5057,8 +5264,7 @@ class WidgetVote extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.localData) {
             if (this.localData["_v_g_" + this.elementId + "_sa"] != null) {
@@ -5188,9 +5394,11 @@ class WidgetVote extends WidgetBase {
             this._removeInputDone();
             this._hideSubmitBtn();
         }
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _showSubmitBtn() {
         this.env.requestAnimationFrame(() => {
@@ -5421,6 +5629,13 @@ class WidgetVote extends WidgetBase {
             WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData).then(localData => {
                 WidgetVote.api.fallbackInitOnMultiSlide(element, localData);
             });
+            WidgetVote.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetVote.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetVote.getInstance(element)?.onStop();
         },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetVote.widgetClassName}`);
@@ -14849,17 +15064,22 @@ class WidgetBarcode extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.state = null;
         if (this.isPromotionalCode) {
-            this.fetchPromoCode();
+            this.initPromotionalCodeFromLocalData();
         }
         else {
             this.renderCodeView();
             this.renderCaptionView();
         }
     }
+    onStart() {
+        super.onStart();
+        if (this.isPromotionalCode) {
+            this.fetchPromoCode();
+        }
+    }
     isTransparentElement() {
         if (this.element) {
             try {
@@ -14941,17 +15161,23 @@ class WidgetBarcode extends WidgetBase {
             this.captionView.textContent = text;
         }
     }
-    fetchPromoCode() {
-        this.state = 0;
-        if (this.localData["_bc_g_" + this.elementId + "_pc"] !== undefined) {
+    getPromotionalCodeFromLocalData() {
+        return this.localData["_bc_g_" + this.elementId + "_pc"];
+    }
+    initPromotionalCodeFromLocalData() {
+        if (this.getPromotionalCodeFromLocalData() !== undefined) {
             this.state = 1;
-            this.clipboardTarget = this.localData["_bc_g_" + this.elementId + "_pc"];
+            this.clipboardTarget = this.getPromotionalCodeFromLocalData();
             if (this.clipboardTarget != null) {
                 this.renderCaptionView();
                 this.renderCodeView();
             }
             removeClass(this.element, "loader");
         }
+    }
+    fetchPromoCode() {
+        this.state = 0;
+        this.initPromotionalCodeFromLocalData();
         if (this.state === 0) {
             if (!this.isTransparentElement()) {
                 // for transparent element
@@ -15037,12 +15263,14 @@ class WidgetBarcode extends WidgetBase {
     }
     _select() {
         this.element.classList.add("done");
-        if (this.disableTimer) {
-            // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
-            // смотрим что прозрачный текст - тогда и лоадер прозрачный
-            // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
+                // смотрим что прозрачный текст - тогда и лоадер прозрачный
+                // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
+                this.startDisabledTimeline();
+            }
+        });
         if (this.copiedText) {
             this.sdkApi.showToast(this.copiedText);
         }
@@ -15073,7 +15301,15 @@ class WidgetBarcode extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, localData) {
-            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData);
+            elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetBarcode.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetBarcode.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetBarcode.widgetClassName}`);
@@ -15097,6 +15333,1045 @@ class WidgetBarcode extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
 }
 
+class Formatter {
+    intlSupport = false;
+    defaultTimeFormat = "medium";
+    defaultDatetimeFormat = "medium";
+    defaultDateFormat = "medium";
+    decimalSeparator = ".";
+    thousandSeparator = "&thinsp;";
+    spaceSeparator = "&thinsp;";
+    static Second = 1000;
+    static Minute = 60 * Formatter.Second;
+    static Hour = 60 * Formatter.Minute;
+    static Day = 24 * Formatter.Hour;
+    datetimeFormatOptions = {
+        short: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+        },
+        medium: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+        },
+        long: {
+            year: "numeric",
+            month: "long",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZoneName: "short",
+        },
+        full: {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZoneName: "long",
+        },
+    };
+    dateFormatOptions = {
+        short: {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+        },
+        medium: {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        },
+        long: {
+            year: "numeric",
+            month: "long",
+            day: "2-digit",
+        },
+        full: {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "2-digit",
+        },
+    };
+    timeFormatOptions = {
+        short: {
+            hour: "2-digit",
+            minute: "2-digit",
+        },
+        medium: {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+        },
+        long: {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZoneName: "short",
+        },
+        full: {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZoneName: "long",
+        },
+    };
+    context;
+    constructor(context) {
+        this.intlSupport = typeof Intl === "object" && Intl !== null;
+        this.context = context;
+    }
+    asDate(value, format = undefined, options = {}) {
+        if (!format) {
+            format = this.defaultDateFormat;
+        }
+        return this.formatDateTimeValue(value, format, "date", options);
+    }
+    asTime(value, format = undefined, options = {}) {
+        if (!format) {
+            format = this.defaultTimeFormat;
+        }
+        return this.formatDateTimeValue(value, format, "time", options);
+    }
+    asDatetime(value, format = undefined, options = {}) {
+        if (!format) {
+            format = this.defaultTimeFormat;
+        }
+        return this.formatDateTimeValue(value, format, "datetime", options);
+    }
+    formatDateTimeValue(value, format = undefined, type = undefined, options = {}) {
+        const normalizedValue = Formatter.normalizeDatetimeValue(value);
+        if (normalizedValue === null) {
+            return "";
+        }
+        if (this.intlSupport) {
+            let formatterOptions = {};
+            if (type === "date") {
+                if (typeof format === "undefined") {
+                    format = this.defaultDateFormat;
+                }
+                if (typeof format === "object") {
+                    formatterOptions = format;
+                }
+                else {
+                    if (format in this.dateFormatOptions) {
+                        formatterOptions = this.dateFormatOptions[format];
+                    }
+                    else {
+                        return this.momentFallback(normalizedValue, format, options);
+                    }
+                }
+            }
+            else if (type === "time") {
+                if (typeof format === "undefined") {
+                    format = this.defaultTimeFormat;
+                }
+                if (typeof format === "object") {
+                    formatterOptions = format;
+                }
+                else {
+                    if (format in this.timeFormatOptions) {
+                        formatterOptions = this.timeFormatOptions[format];
+                    }
+                    else {
+                        return this.momentFallback(normalizedValue, format, options);
+                    }
+                }
+            }
+            else if (type === "datetime") {
+                if (typeof format === "undefined") {
+                    format = this.defaultDatetimeFormat;
+                }
+                if (typeof format === "object") {
+                    formatterOptions = format;
+                }
+                else {
+                    if (format in this.datetimeFormatOptions) {
+                        formatterOptions = this.datetimeFormatOptions[format];
+                    }
+                    else {
+                        return this.momentFallback(normalizedValue, format, options);
+                    }
+                }
+            }
+            if (options.timezone) {
+                formatterOptions.timeZone = options.timezone;
+            }
+            Intl.DateTimeFormat(this.locale, formatterOptions).format(normalizedValue);
+            return Intl.DateTimeFormat(this.locale, formatterOptions).format(normalizedValue);
+        }
+        return "";
+    }
+    momentFallback(value, format, options = {}) {
+        return value.toLocaleString(this.locale);
+        // return this.context.$moment(value).format(format);
+    }
+    asInteger(value) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (this.intlSupport) {
+            return Intl.NumberFormat(this.locale, {
+                maximumFractionDigits: 0,
+                useGrouping: true,
+            }).format(normalizedValue);
+        }
+        return Formatter.numberFormat(normalizedValue, 0, this.decimalSeparator, this.thousandSeparator);
+    }
+    asDecimal(value, decimals = 2) {
+        if (value == null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (this.intlSupport) {
+            return Intl.NumberFormat(this.locale, {
+                maximumFractionDigits: decimals,
+                minimumFractionDigits: decimals,
+                useGrouping: true,
+            }).format(normalizedValue);
+        }
+        return Formatter.numberFormat(normalizedValue, decimals, this.decimalSeparator, this.thousandSeparator);
+    }
+    asDecimalMax(value, decimals = 2) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (this.intlSupport) {
+            return Intl.NumberFormat(this.locale, {
+                maximumFractionDigits: decimals,
+                minimumFractionDigits: 0,
+                useGrouping: true,
+            }).format(normalizedValue);
+        }
+        return Formatter.numberFormat(normalizedValue, decimals, this.decimalSeparator, this.thousandSeparator);
+    }
+    asPercent(value, decimals = 0) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (this.intlSupport) {
+            return Intl.NumberFormat(this.locale, {
+                style: "percent",
+                maximumFractionDigits: decimals,
+                minimumFractionDigits: decimals,
+            }).format(normalizedValue);
+        }
+        return Formatter.numberFormat(normalizedValue * 100, decimals, this.decimalSeparator, this.thousandSeparator);
+    }
+    asPercentMax(value, decimals = 0) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (this.intlSupport) {
+            return Intl.NumberFormat(this.locale, {
+                style: "percent",
+                maximumFractionDigits: decimals,
+                minimumFractionDigits: 0,
+            }).format(normalizedValue);
+        }
+        return Formatter.numberFormat(normalizedValue * 100, decimals, this.decimalSeparator, this.thousandSeparator);
+    }
+    asRelativeTime(value, referenceTime = undefined) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeDatetimeValue(value);
+        if (normalizedValue == null) {
+            return this.nullDisplay;
+        }
+        if (referenceTime === undefined || referenceTime === null) {
+            referenceTime = new Date();
+        }
+        else {
+            referenceTime = Formatter.normalizeDatetimeValue(value);
+        }
+        const dt = referenceTime.getTime() - normalizedValue.getTime();
+        const absDt = Math.abs(dt);
+        const invert = dt < 0;
+        if (absDt < Formatter.Second) {
+            return this.context.i18n?.t("format.relativeTime.justNow").toString() ?? "";
+        }
+        const seconds = absDt / 1000;
+        let interval = seconds / 31536000;
+        if (interval > 1) {
+            return this.context.i18n?.tc("format.relativeTime.year" + (invert ? "In" : "Ago"), Math.floor(interval)).toString() ?? "";
+        }
+        interval = seconds / 2592000;
+        if (interval > 1) {
+            return this.context.i18n?.tc("format.relativeTime.month" + (invert ? "In" : "Ago"), Math.floor(interval)).toString() ?? "";
+        }
+        interval = seconds / 86400;
+        if (interval > 1) {
+            return this.context.i18n?.tc("format.relativeTime.day" + (invert ? "In" : "Ago"), Math.floor(interval)).toString() ?? "";
+        }
+        interval = seconds / 3600;
+        if (interval > 1) {
+            return this.context.i18n?.tc("format.relativeTime.hour" + (invert ? "In" : "Ago"), Math.floor(interval)).toString() ?? "";
+        }
+        interval = seconds / 60;
+        if (interval > 1) {
+            return this.context.i18n?.tc("format.relativeTime.minute" + (invert ? "In" : "Ago"), Math.floor(interval)).toString() ?? "";
+        }
+        return this.context.i18n?.tc("format.relativeTime.second" + (invert ? "In" : "Ago"), Math.floor(seconds)).toString() ?? "";
+    }
+    asDuration(value) {
+        if (value === undefined || value === null) {
+            return "00:00";
+        }
+        const normalizedValue = Formatter.normalizeDatetimeValue(value);
+        if (normalizedValue === undefined || normalizedValue === null) {
+            return "00:00";
+        }
+        const hours = Math.floor(value / 3600);
+        const minutes = Math.floor((value / 60) % 60);
+        const seconds = value % 60;
+        if (hours > 0) {
+            return `${hours}:${minutes < 10 ? 0 : ""}${minutes}:${seconds < 10 ? 0 : ""}${seconds}`;
+        }
+        else {
+            return `${minutes < 10 ? 0 : ""}${minutes}:${seconds < 10 ? 0 : ""}${seconds}`;
+        }
+    }
+    asCurrency(value, currency = undefined) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        if (currency === undefined || currency === null) {
+            currency = "USD";
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (normalizedValue == null) {
+            return this.nullDisplay;
+        }
+        let decimals = 2;
+        if (Number.isInteger(normalizedValue)) {
+            decimals = 0;
+        }
+        if (currency === "RUR" || currency === "RUB") {
+            return `${this.asDecimal(normalizedValue, decimals)}${this.spaceSeparator}₽`;
+        }
+        if (this.intlSupport) {
+            try {
+                return Intl.NumberFormat(this.locale, {
+                    style: "currency",
+                    currency,
+                    currencyDisplay: "symbol",
+                    maximumFractionDigits: decimals,
+                    minimumFractionDigits: decimals,
+                }).format(normalizedValue);
+            }
+            catch (e) {
+                console.error(e);
+                return String(normalizedValue);
+            }
+        }
+        return currency + "&thinsp;" + this.asDecimal(normalizedValue, 2);
+    }
+    asShortSizeCasual(value, dp = 1) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (normalizedValue === undefined || normalizedValue === null) {
+            return this.nullDisplay;
+        }
+        const thresh = 1024;
+        if (Math.abs(value) < thresh) {
+            return value + " B";
+        }
+        const units = ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        let u = -1;
+        const r = 10 ** dp;
+        do {
+            value /= thresh;
+            ++u;
+        } while (Math.round(Math.abs(value) * r) / r >= thresh && u < units.length - 1);
+        return value.toFixed(dp) + " " + units[u];
+    }
+    asShortSize(value, si = false, dp = 1) {
+        if (value === undefined || value === null) {
+            return this.nullDisplay;
+        }
+        const normalizedValue = Formatter.normalizeNumericValue(value);
+        if (normalizedValue === undefined || normalizedValue === null) {
+            return this.nullDisplay;
+        }
+        const thresh = si ? 1000 : 1024;
+        if (Math.abs(value) < thresh) {
+            return value + " B";
+        }
+        const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+        let u = -1;
+        const r = 10 ** dp;
+        do {
+            value /= thresh;
+            ++u;
+        } while (Math.round(Math.abs(value) * r) / r >= thresh && u < units.length - 1);
+        return value.toFixed(dp) + " " + units[u];
+    }
+    static numberFormat(value, decimals = 0, decimalSeparator = ".", thousandsSeparator) {
+        const sign = value < 0 ? "-" : "";
+        const sNumber = Math.abs(parseInt((+value || 0).toFixed(decimals))) + "";
+        const len = sNumber.length;
+        const tchunk = len > 3 ? len % 3 : 0;
+        const chFirst = tchunk ? sNumber.substr(0, tchunk) + thousandsSeparator : "";
+        const chRest = sNumber.substr(tchunk).replace(/(\d\d\d)(?=\d)/g, "$1" + thousandsSeparator);
+        const chLast = decimals ? decimalSeparator + (Math.abs(value) - parseFloat(sNumber)).toFixed(decimals).slice(2) : "";
+        return sign + chFirst + chRest + chLast;
+    }
+    get nullDisplay() {
+        return "";
+        // if (this.context && this.context.i18n) {
+        //     return this.context.i18n.t("notSet").toString();
+        // }
+        //
+        // return "not set";
+    }
+    static normalizeDatetimeValue(value) {
+        const type = typeof value;
+        if (type === "object" && value instanceof Date) {
+            return value;
+        }
+        else if (type === "number") {
+            return new Date(value);
+        }
+        else if (type === "string") {
+            if (isNaN(value)) {
+                return new Date(parseInt(value));
+            }
+            else {
+                const d = Date.parse(value);
+                if (isNaN(d)) {
+                    return null;
+                }
+                return new Date(d);
+            }
+        }
+        return null;
+    }
+    static normalizeNumericValue(value) {
+        const type = typeof value;
+        if ((type === "object" && value === null) || type === "undefined") {
+            return 0;
+        }
+        else if (type === "number") {
+            return value;
+        }
+        return parseFloat(value);
+    }
+    get locale() {
+        return this.context.determineLocale();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n        determineLocale: () => string;\n        i18n: { t: (key: string) => string; tc: (key: string, value: string | number) => string } | undefined;\n    }`]; }
+}
+const formatter = new Formatter({ determineLocale, i18n: undefined });
+
+class SwipeGestureDetector {
+    env;
+    isScreenSupportsTouch;
+    canContinueHandleDown;
+    onStart;
+    onUpdate;
+    onEnd;
+    constructor(env, isScreenSupportsTouch, canContinueHandleDown, onStart, onUpdate, onEnd) {
+        this.env = env;
+        this.isScreenSupportsTouch = isScreenSupportsTouch;
+        this.canContinueHandleDown = canContinueHandleDown;
+        this.onStart = onStart;
+        this.onUpdate = onUpdate;
+        this.onEnd = onEnd;
+        // Store context
+        this.handleDown = this.handleDown.bind(this);
+        this.handleMove = this.handleMove.bind(this);
+        this.handleEnd = this.handleEnd.bind(this);
+        this.supportsTouch = false;
+        if (this.isScreenSupportsTouch) {
+            this.env.document.addEventListener("touchstart", this.handleDown, false);
+        }
+        else {
+            this.env.document.addEventListener("mousedown", this.handleDown, false);
+        }
+    }
+    startPageCoordinate = [0, 0];
+    limit = Math.tan(((45 * 1.5) / 180) * Math.PI);
+    pageWidth = window.innerWidth || document.body.clientWidth;
+    threshold = Math.max(1, Math.floor(0.01 * this.pageWidth));
+    supportsTouch = false;
+    handleDown(e) {
+        if (!this.canContinueHandleDown(e)) {
+            return;
+        }
+        this.startPageCoordinate = this.getPageCoordinate(e);
+        if (this.isScreenSupportsTouch) {
+            this.env.document.addEventListener("touchmove", this.handleMove, false);
+            this.env.document.addEventListener("touchend", this.handleEnd, false);
+        }
+        else {
+            this.env.document.addEventListener("mousemove", this.handleMove, false);
+            this.env.document.addEventListener("mouseup", this.handleEnd, false);
+        }
+        this.onStart(e);
+    }
+    handleMove(e) {
+        // console.log("handleMove", { startPageCoordinate: this.startPageCoordinate})
+        // this.currentPageCoordinate = this.getPageCoordinate(e);
+        this.onUpdate(e);
+    }
+    handleEnd(e) {
+        if (this.isScreenSupportsTouch) {
+            this.env.document.removeEventListener("touchmove", this.handleMove);
+            this.env.document.removeEventListener("touchend", this.handleEnd);
+        }
+        else {
+            this.env.document.removeEventListener("mousemove", this.handleMove);
+            this.env.document.removeEventListener("mouseup", this.handleEnd);
+        }
+        const currentPageCoordinate = this.getPageCoordinate(e);
+        let gesture = 0 /* SwipeGesture.undefined */;
+        const x = currentPageCoordinate[0] - this.startPageCoordinate[0];
+        const y = currentPageCoordinate[1] - this.startPageCoordinate[1];
+        // console.log("handleEnd", {currentPageCoordinate, startPageCoordinate: this.startPageCoordinate})
+        let xy = Math.abs(x / y);
+        let yx = Math.abs(y / x);
+        if (Math.abs(x) > this.threshold || Math.abs(y) > this.threshold) {
+            if (yx <= this.limit) {
+                if (x < 0) {
+                    gesture = 4 /* SwipeGesture.SwipeLeft */;
+                    // @ts-ignore
+                    // _log(JSON.stringify({t: "SwipeLeft", yx, x, threshold: this.threshold}), true);
+                }
+                else {
+                    // @ts-ignore
+                    // _log(JSON.stringify({t: "SwipeRight", yx, x, threshold: this.threshold}), true);
+                    gesture = 5 /* SwipeGesture.SwipeRight */;
+                }
+            }
+            if (xy <= this.limit) {
+                if (y < 0) {
+                    // @ts-ignore
+                    // _log(JSON.stringify({t: "SwipeUp", xy, y, threshold: this.threshold}), true);
+                    gesture = 2 /* SwipeGesture.SwipeUp */;
+                }
+                else {
+                    // @ts-ignore
+                    // _log(JSON.stringify({t: "SwipeDown", xy, y, threshold: this.threshold}), true);
+                    gesture = 3 /* SwipeGesture.SwipeDown */;
+                }
+            }
+        }
+        else {
+            // @ts-ignore
+            // _log(JSON.stringify({t: "Tap", x, y, threshold: this.threshold}), true);
+            gesture = 1 /* SwipeGesture.Tap */;
+        }
+        this.onEnd(e, gesture);
+    }
+    destroy() {
+        if (this.isScreenSupportsTouch) {
+            this.env.document.removeEventListener("touchstart", this.handleDown);
+        }
+        else {
+            this.env.document.removeEventListener("mousedown", this.handleDown);
+        }
+    }
+    getPageCoordinate(e) {
+        let x = 0;
+        let y = 0;
+        if (e["clientX"] != null && e["clientY"] != null) {
+            x = e["clientX"];
+            y = e["clientY"];
+        }
+        else if (e.touches &&
+            e.touches[0] &&
+            e.touches[0]["clientX"] != null &&
+            e.touches[0]["clientY"] != null) {
+            x = e.touches[0]["clientX"];
+            y = e.touches[0]["clientY"];
+        }
+        else if (e.changedTouches &&
+            e.changedTouches[0] &&
+            e.changedTouches[0]["clientX"] != null &&
+            e.changedTouches[0]["clientY"] != null) {
+            x = e.changedTouches[0]["clientX"];
+            y = e.changedTouches[0]["clientY"];
+        }
+        // @ts-ignore
+        else if (e.currentPoint && e.currentPoint["x"] != null && e.currentPoint["y"] != null) {
+            // @ts-ignore
+            x = e.currentPoint["x"];
+            // @ts-ignore
+            y = e.currentPoint["y"];
+        }
+        return [x, y];
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Window`, `boolean`, `(e: MouseEvent | TouchEvent) => boolean`, `(e: MouseEvent | TouchEvent) => void`, `(e: MouseEvent | TouchEvent) => void`, `(e: MouseEvent | TouchEvent, gesture: SwipeGesture) => void`]; }
+}
+
+/**
+ * adult: null
+ * availability: 1
+ * coverUrl: "https://cdn.test.inappstory.com/np/file/cf/wb/wc/vcaji5clqon3nkwdwle3cjz63x.jpg?k=KgAAAAAAAAACAQ"
+ * currency: "RUR"
+ * description: "Непромокаемый комбинезон - дождевик детский Муссон"
+ * id: 204
+ * name: "Непромокаемый комбинезон - дождевик детский \"Муссон\""
+ * offerId: "10125"
+ * oldPrice: null
+ * price: "2690.0000"
+ * url: "http://www.songnomik.ru/products/detskaya-odezhda-optom-dlya-novorozhdennyh/detskie-kombinezony-optom/2166483.html"
+ */
+class WidgetProducts extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-products";
+    captionView;
+    linkTarget = [];
+    msgNetworkError;
+    msgServiceError;
+    swipeGestureDetector = null;
+    isClickCapturedByWidget = false;
+    isScreenSupportsTouch = false;
+    constructor(element, options) {
+        super(element, options);
+        this.captionView = this.element.querySelector(".narrative-element-text-lines");
+        const linkTarget = decodeURIComponent(getTagData(element, "linkTarget") ?? "[]");
+        try {
+            let parsed = JSON.parse(linkTarget);
+            if (Array.isArray(parsed)) {
+                this.linkTarget = parsed.filter(FilterNumber);
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        this.isScreenSupportsTouch = isScreenSupportsTouch(this.env);
+        this.msgNetworkError = getTagData(this.element, "msgNetworkError");
+        this.msgServiceError = getTagData(this.element, "msgServiceError");
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+    }
+    onStart() {
+        super.onStart();
+        // reinit for case when we returned to slide from other slide and onStop  destroyed SwipeGestureDetector
+        this.initSwipeGestureDetector();
+    }
+    isTransparentElement() {
+        if (this.element) {
+            try {
+                const color = window.getComputedStyle(this.element).color;
+                if (color === "transparent" || color === "rgba(0, 0, 0, 0)" || color === "rgba(0,0,0,0)") {
+                    return true;
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        return false;
+    }
+    _statEventWidgetClick() {
+        try {
+            const captionViewText = this.captionView?.textContent ?? "";
+            this.sendStatisticEventToApp("w-products-click", {
+                ...this.statisticEventBaseFieldsShortForm,
+                wi: this.elementId,
+                wl: captionViewText,
+                wv: this.linkTarget,
+            }, {
+                ...this.statisticEventBaseFieldsShortForm,
+                widget_id: this.elementId,
+                widget_label: captionViewText,
+                widget_value: this.linkTarget,
+            }, {
+                forceEnableStatisticV2: true,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _statEventWidgetOpen(offers) {
+        try {
+            const captionViewText = this.captionView?.textContent ?? "";
+            this.sendStatisticEventToApp("w-products-open", {
+                ...this.statisticEventBaseFieldsShortForm,
+                wi: this.elementId,
+                wl: captionViewText,
+                wv: this.linkTarget,
+                wit: offers.map(item => item.offerId),
+            }, {
+                ...this.statisticEventBaseFieldsShortForm,
+                widget_id: this.elementId,
+                widget_label: captionViewText,
+                widget_value: this.linkTarget,
+                widget_items: offers.map(item => item.offerId),
+            }, {
+                forceEnableStatisticV2: true,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _statEventWidgetCardClick(offer) {
+        try {
+            const captionViewText = this.captionView?.textContent ?? "";
+            this.sendStatisticEventToApp("w-products-card-click", {
+                ...this.statisticEventBaseFieldsShortForm,
+                wi: this.elementId,
+                wl: captionViewText,
+                wv: offer.offerId,
+                wvi: offer.id,
+            }, {
+                ...this.statisticEventBaseFieldsShortForm,
+                widget_id: this.elementId,
+                widget_label: captionViewText,
+                widget_value: offer.offerId,
+                widget_value_id: offer.id,
+            }, {
+                forceEnableStatisticV2: true,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async fetchProducts() {
+        const fetchAndCacheMedia = async () => {
+            if (!this.linkTarget.length) {
+                return { message: this.msgServiceError ?? "", models: [] };
+            }
+            const path = `product/offer?id=${this.linkTarget.join(",")}`;
+            const headers = {
+                accept: "application/json",
+                "Content-Type": "application/json",
+            };
+            const profileKey = "fetch-products";
+            try {
+                const response = await this.sdkApi.sendApiRequest(path, "GET", null, headers, null, profileKey);
+                // console.log({response});
+                const status = response.status;
+                if (status === 200 || status === 201) {
+                    if (response.data && Array.isArray(response.data) && response.data.length > 0) {
+                        try {
+                            await this.cacheOffersMediaResources(response.data);
+                        }
+                        catch (error) {
+                            console.error(error);
+                        }
+                        return { message: "", models: response.data };
+                    }
+                    else {
+                        return { message: this.msgServiceError ?? "", models: [] };
+                    }
+                }
+                else if (status === 12163 || status === 12002) {
+                    return { message: this.msgNetworkError ?? "", models: [] };
+                }
+                else {
+                    return { message: this.msgServiceError ?? "", models: [] };
+                }
+            }
+            catch (error) {
+                console.error(error);
+                return { message: this.msgServiceError ?? "", models: [] };
+            }
+        };
+        return Promise.all([
+            fetchAndCacheMedia(),
+            new Promise(t => {
+                return setTimeout(t, 200);
+            }),
+        ]).then(([result]) => result);
+    }
+    cacheOffersMediaResources(offers) {
+        const cacheItem = (offer) => {
+            return new Promise(resolve => {
+                if (offer.coverUrl != null) {
+                    this.env
+                        .fetch(offer.coverUrl)
+                        .then(response => {
+                        if (response != null && response.ok) {
+                            response
+                                .blob()
+                                .then(blob => {
+                                offer.coverUrl = URL.createObjectURL(blob);
+                                resolve();
+                            })
+                                .catch(resolve);
+                        }
+                        else {
+                            resolve();
+                        }
+                    })
+                        .catch(resolve);
+                }
+                else {
+                    resolve();
+                }
+            });
+        };
+        const promises = offers.map(cacheItem);
+        return Promise.all(promises);
+    }
+    revokeOffersMediaResources(offers) {
+        offers.forEach(offer => {
+            if (offer.coverUrl != null) {
+                // todo check if coverUrl really is object URL
+                URL.revokeObjectURL(offer.coverUrl);
+            }
+        });
+    }
+    initSwipeGestureDetector() {
+        if (this.isOpen) {
+            this.swipeGestureDetector = new SwipeGestureDetector(this.env, this.isScreenSupportsTouch, () => true, e => {
+                // this.isClickCapturedByWidget = true;
+                return;
+            }, e => {
+                return;
+            }, (e, gesture) => {
+                if (gesture === 3 /* SwipeGesture.SwipeDown */) {
+                    this.closeProductsView();
+                }
+                // this.env.requestAnimationFrame(() => {
+                //     this.isClickCapturedByWidget = false;
+                // });
+            });
+        }
+    }
+    productsView = null;
+    isOpen = false;
+    currentModels = [];
+    async openProductsView() {
+        if (this.isOpen) {
+            return;
+        }
+        this._statEventWidgetClick();
+        if (!this.disableTimer) {
+            this.sdkApi.pauseUI();
+        }
+        if (!this.isTransparentElement()) {
+            this.element.classList.add("loader");
+        }
+        // const start = window.performance.now();
+        const result = await this.fetchProducts();
+        // @ts-ignore
+        // _log(`fetched for ${window.performance.now() - start}ms`, true);
+        // console.log({result})
+        if (result.models.length > 0) {
+            this.currentModels = result.models;
+            this.productsView = this.createProductsView(this.currentModels, this.closeProductsView.bind(this));
+            this.productsView.classList.add("ias-products-container-view--visible");
+            this.slide.appendChild(this.productsView);
+            this.element.classList.add("hidden");
+            this.isOpen = true;
+            // prevent next slide navigation gesture
+            this.isClickCapturedByWidget = true;
+            this.sdkApi.disableVerticalSwipeGesture();
+            this.sdkApi.disableBackpress();
+            this._statEventWidgetOpen(this.currentModels);
+            this.initSwipeGestureDetector();
+        }
+        else {
+            if (result.message) {
+                this.sdkApi.showToast(result.message);
+            }
+        }
+        this.element.classList.remove("loader");
+    }
+    closeProductsView() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.productsView?.classList.add("ias-products-container-view--hidden");
+        this.element.classList.remove("hidden");
+        this.isClickCapturedByWidget = false;
+        if (this.swipeGestureDetector != null) {
+            this.swipeGestureDetector.destroy();
+        }
+        this.sdkApi.enableVerticalSwipeGesture();
+        this.sdkApi.enableBackpress();
+        const onClosed = () => {
+            this.productsView?.removeEventListener("animationend", onClosed);
+            this.productsView?.parentElement?.removeChild(this.productsView);
+            this.revokeOffersMediaResources(this.currentModels);
+            if (!this.disableTimer) {
+                this.sdkApi.resumeUI();
+            }
+            this.isOpen = false;
+            this.currentModels = [];
+        };
+        this.productsView?.addEventListener("animationend", onClosed);
+    }
+    createCardView(offer) {
+        const figure = document.createElement("div");
+        figure.classList.add("ias-products-card-figure");
+        if (offer.coverUrl) {
+            // todo preload coverImage by fetch, save to offer.coverUrl via createUrl (add revoke)
+            // if cannot fetch - skip caching
+            const image = document.createElement("img");
+            image.classList.add("ias-products-card-figure-image");
+            image.alt = offer.name ?? "";
+            image.src = offer.coverUrl;
+            figure.appendChild(image);
+        }
+        // const subTitle = document.createElement("div");
+        // subTitle.classList.add("ias-products-card-subtitle");
+        // subTitle.innerText = offer.description ?? "";
+        const title = document.createElement("div");
+        title.classList.add("ias-products-card-title");
+        title.innerText = offer.name ?? "";
+        let price = null;
+        if (offer.price) {
+            price = document.createElement("div");
+            price.classList.add("ias-products-card-price");
+            price.innerHTML = formatter.asCurrency(offer.price, offer.currency);
+        }
+        let oldPrice = null;
+        if (offer.oldPrice) {
+            oldPrice = document.createElement("div");
+            oldPrice.classList.add("ias-products-card-old-price");
+            oldPrice.innerHTML = formatter.asCurrency(offer.oldPrice, offer.currency);
+        }
+        const prices = document.createElement("div");
+        prices.classList.add("ias-products-card-prices");
+        if (price) {
+            prices.appendChild(price);
+        }
+        if (oldPrice) {
+            prices.appendChild(oldPrice);
+        }
+        const card = document.createElement("div");
+        card.classList.add("ias-products-card");
+        card.onclick = () => {
+            this._statEventWidgetCardClick(offer);
+            if (offer.url) {
+                this.sdkApi.openUrl(offer.url);
+            }
+        };
+        card.appendChild(figure);
+        // card.appendChild(subTitle);
+        card.appendChild(prices);
+        card.appendChild(title);
+        return card;
+    }
+    createScrollView(offers) {
+        const scrollView = document.createElement("div");
+        scrollView.classList.add("ias-products-scroll-view");
+        offers.forEach(offer => scrollView.appendChild(this.createCardView(offer)));
+        return scrollView;
+    }
+    createProductsView(offers, onClose) {
+        const containerView = document.createElement("div");
+        containerView.classList.add("ias-products-container-view");
+        const backdropView = document.createElement("div");
+        backdropView.classList.add("ias-products-container-backdrop-view");
+        backdropView.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+        };
+        const backgroundView = document.createElement("div");
+        backgroundView.classList.add("ias-products-container-background-view");
+        const scrollView = this.createScrollView(offers);
+        const closeButton = document.createElement("div");
+        closeButton.classList.add("ias-products-container-close-button");
+        // fill=${ProductsWidgetOptionsDefault.productsList.closeBackgroundColor}
+        closeButton.innerHTML = `<svg width="32" height="12.5" viewBox="0 0 64 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M56.293 1.23375C58.054 -0.41125 60.846 -0.41125 62.607 1.23375C64.464 2.96775 64.464 5.85675 62.607 7.59075L35.157 23.2288C33.396 24.8738 30.604 24.8738 28.843 23.2288L1.393 7.59075C0.494002 6.75175 0 5.62775 0 4.41275C0 3.19775 0.494002 2.07375 1.393 1.23475C3.154 -0.410251 5.946 -0.410251 7.707 1.23475L32 13.9237L56.293 1.23375Z" fill="currentColor" /></svg>`;
+        closeButton.onclick = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+        };
+        backgroundView.appendChild(scrollView);
+        backgroundView.appendChild(closeButton);
+        containerView.appendChild(backdropView);
+        containerView.appendChild(backgroundView);
+        return containerView;
+    }
+    getIsClickCapturedByWidget() {
+        return this.isClickCapturedByWidget;
+    }
+    destroy() {
+        if (this.swipeGestureDetector != null) {
+            this.swipeGestureDetector.destroy();
+            this.swipeGestureDetector = null;
+        }
+    }
+    onStop() {
+        super.onStop();
+        this.destroy();
+    }
+    static api = {
+        widgetClassName: WidgetProducts.widgetClassName,
+        onRefreshUserData: WidgetProducts.onRefreshUserData,
+        init: function (element, localData) {
+            WidgetProducts.initWidget(element, localData, (element, options) => new WidgetProducts(element, options));
+        },
+        onStart: function (element) {
+            WidgetProducts.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetProducts.getInstance(element)?.onStop();
+        },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetProducts.getInstance(widgetElement);
+                if (widget) {
+                    widget.openProductsView();
+                }
+            }
+            return false;
+        },
+        isClickCapturedByWidget: function (element) {
+            const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetProducts.getInstance(widgetElement);
+                if (widget) {
+                    return widget.getIsClickCapturedByWidget();
+                }
+            }
+            return false;
+        },
+        onHandleBackpress: function (element) {
+            const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetProducts.getInstance(widgetElement);
+                if (widget) {
+                    widget.closeProductsView();
+                }
+            }
+            return false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
 let sdkInterface;
 const getSlideApi = (_sdkInterface) => {
     sdkInterface = _sdkInterface;
@@ -15117,6 +16392,7 @@ const getSlideApi = (_sdkInterface) => {
         WidgetTest: WidgetTest.api,
         WidgetVote: WidgetVote.api,
         WidgetBarcode: WidgetBarcode.api,
+        WidgetProducts: WidgetProducts.api,
     };
 };