@inappstory/slide-api 0.0.22 → 0.0.24

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`]; }
 }
 
@@ -1423,11 +1462,11 @@ 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);
@@ -2039,7 +2078,9 @@ class WidgetDateCountdown extends WidgetBase {
             this._showLayer(this.layers, 0);
         }
         else {
-            this._showLayer(this.layers, 1);
+            if (this.layers[1] != null) {
+                this._showLayer(this.layers, 1);
+            }
         }
     }
     onPause() {
@@ -2122,7 +2163,9 @@ class WidgetDateCountdown extends WidgetBase {
         }
         else {
             this.pendingUpdate = false;
-            this._showLayer(this.layers, 1);
+            if (this.layers[1] != null) {
+                this._showLayer(this.layers, 1);
+            }
         }
         if (this.pendingUpdate) {
             this.env.requestAnimationFrame(() => this.updateTimer());
@@ -3082,6 +3125,7 @@ class WidgetQuest extends WidgetBase {
     isWidget;
     slideCount;
     nonFinalSlide;
+    slideDisabledNavigation;
     finalSlide;
     constructor(element, options) {
         const isWidget = !hasClass(element, "narrative-slide");
@@ -3094,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;
     }
     /**
@@ -3238,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;
             }
@@ -3261,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()) {
@@ -4219,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);
@@ -4247,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) {
@@ -15280,6 +15333,1136 @@ 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) {
+        // console.log("handleDown", {e, startPageCoordinate: this.startPageCoordinate})
+        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);
+            this.env.document.removeEventListener("touchmove", this.handleMove);
+            this.env.document.removeEventListener("touchend", this.handleEnd);
+        }
+        else {
+            this.env.document.removeEventListener("mousedown", this.handleDown);
+            this.env.document.removeEventListener("mousemove", this.handleMove);
+            this.env.document.removeEventListener("mouseup", this.handleEnd);
+        }
+    }
+    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) {
+            if (this.swipeGestureDetector == null) {
+                this.swipeGestureDetector = new SwipeGestureDetector(this.env, this.isScreenSupportsTouch, 
+                // detect gestures started on backdrop view
+                (e) => e.target instanceof HTMLElement ? e.target.classList.contains("ias-products-container-backdrop-view") : 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;
+    get isForcePaused() {
+        return this.isOpen;
+    }
+    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.swipeGestureDetector = null;
+        }
+        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 scrollViewGroup = document.createElement("div");
+        scrollViewGroup.classList.add("ias-products-scroll-view-group");
+        const scrollView = document.createElement("div");
+        scrollView.classList.add("ias-products-scroll-view");
+        offers.forEach(offer => scrollView.appendChild(this.createCardView(offer)));
+        scrollViewGroup.appendChild(scrollView);
+        if (!this.isScreenSupportsTouch) {
+            const { scrollLeft, scrollRight, mountScrollControls } = this.createScrollControls(scrollView);
+            const scrollControlsView = document.createElement("div");
+            scrollControlsView.classList.add("ias-products-scroll-controls-view");
+            const scrollControlStartView = document.createElement("div");
+            scrollControlStartView.classList.add("ias-products-scroll-control-start-view");
+            const scrollControlStartIconView = document.createElement("div");
+            scrollControlStartIconView.classList.add("ias-products-scroll-control-start-icon-view");
+            scrollControlStartView.appendChild(scrollControlStartIconView);
+            scrollControlsView.appendChild(scrollControlStartView);
+            scrollControlStartView.onclick = e => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.layoutDirection === "ltr") {
+                    scrollLeft();
+                }
+                else {
+                    scrollRight();
+                }
+            };
+            const scrollControlEndView = document.createElement("div");
+            scrollControlEndView.classList.add("ias-products-scroll-control-end-view");
+            const scrollControlEndIconView = document.createElement("div");
+            scrollControlEndIconView.classList.add("ias-products-scroll-control-end-icon-view");
+            scrollControlEndView.appendChild(scrollControlEndIconView);
+            scrollControlsView.appendChild(scrollControlEndView);
+            scrollControlEndView.onclick = e => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.layoutDirection === "ltr") {
+                    scrollRight();
+                }
+                else {
+                    scrollLeft();
+                }
+            };
+            mountScrollControls(() => scrollViewGroup.appendChild(scrollControlsView));
+        }
+        return scrollViewGroup;
+    }
+    createProductsView(offers, onClose) {
+        const containerView = document.createElement("div");
+        containerView.classList.add("ias-products-container-view");
+        containerView.dir = this.layoutDirection;
+        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;
+    }
+    scrollViewRef = null;
+    getScrollLeft() {
+        if (this.scrollViewRef != null) {
+            return this.scrollViewRef.scrollLeft;
+        }
+        return 0;
+    }
+    getScrollViewportWidth() {
+        if (this.scrollViewRef != null) {
+            return this.scrollViewRef.clientWidth;
+        }
+        return 0;
+    }
+    setScrollLeft(value) {
+        if (this.scrollViewRef != null) {
+            this.scrollViewRef.scrollLeft = Math.round(value);
+        }
+    }
+    createScrollControls(scrollViewRef) {
+        this.scrollViewRef = scrollViewRef;
+        return {
+            scrollLeft: () => this.setScrollLeft(this.getScrollLeft() - this.getScrollViewportWidth()),
+            scrollRight: () => this.setScrollLeft(this.getScrollLeft() + this.getScrollViewportWidth()),
+            mountScrollControls: (cb) => this.env.requestAnimationFrame(() => scrollViewRef.scrollWidth > scrollViewRef.clientWidth && cb()),
+        };
+    }
+    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;
+        },
+        isForcePaused: function (element) {
+            const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetProducts.getInstance(widgetElement);
+                if (widget) {
+                    return widget.isForcePaused;
+                }
+            }
+            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;
@@ -15300,6 +16483,7 @@ const getSlideApi = (_sdkInterface) => {
         WidgetTest: WidgetTest.api,
         WidgetVote: WidgetVote.api,
         WidgetBarcode: WidgetBarcode.api,
+        WidgetProducts: WidgetProducts.api,
     };
 };