@inappstory/slide-api 0.0.1

package/index.esm.js

@@ -0,0 +1,4911 @@
+const arPrototype = Array.prototype;
+const obPrototype = Object.prototype;
+const slice = arPrototype.slice;
+const obKeys = Object.keys;
+const obHasOwnProp = obPrototype.hasOwnProperty;
+const toString = obPrototype.toString;
+const isArray = Array.isArray ||
+    function (e) {
+        return toString.call(e) === "[object Array]";
+    };
+// Matches dashed string for camelizing
+const rmsPrefix = /^-ms-/;
+const rdashAlpha = /-([\da-z])/gi;
+const fcamelCase = function (letter) {
+    return letter.toUpperCase();
+};
+// private methods
+const isObject = function (e) {
+    var t = typeof e;
+    return t === "function" || (t === "object" && !!e);
+};
+const isNumber = function (t) {
+    return toString.call(t) === "[object Number]";
+};
+const isNumeric = function (n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+};
+// isEmpty = function(e) {
+//   if (e == null)
+//     return !0;
+//   if (isArray(e) || isString(e) || isArguments(e))
+//     return e.length === 0;
+//   for (var t in e)
+//     if (p.has(e, t))
+//       return !1;
+//   return !0
+// },
+const has = function (e, t) {
+    return e != null && obHasOwnProp.call(e, t);
+};
+const keys = function (e) {
+    if (!isObject(e))
+        return [];
+    if (obKeys)
+        return obKeys(e);
+    var t = [];
+    for (var n in e)
+        has(e, n) && t.push(n);
+    return t;
+};
+const d = function (e, t, n) {
+    if (t === void 0)
+        return e;
+    switch (3 ) {
+        case 1:
+            return function (n) {
+                return e.call(t, n);
+            };
+        case 2:
+            return function (n, r) {
+                return e.call(t, n, r);
+            };
+        case 3:
+            return function (n, r, i) {
+                return e.call(t, n, r, i);
+            };
+        case 4:
+            return function (n, r, i, s) {
+                return e.call(t, n, r, i, s);
+            };
+    }
+    return function () {
+        return e.apply(t, arguments);
+    };
+};
+const each = function (e, t, n) {
+    if (e == null)
+        return e;
+    t = d(t, n);
+    var r, i = e.length;
+    if (i === +i)
+        for (r = 0; r < i; ++r)
+            t(e[r], r, e);
+    else {
+        var s = keys(e);
+        for (r = 0, i = s.length; r < i; ++r)
+            t(e[s[r]], s[r], e);
+    }
+    return e;
+};
+const forEach = each;
+const extend = function (e, ...args) {
+    var t, n;
+    for (var r = 1, i = arguments.length; r < i; r++) {
+        t = arguments[r];
+        for (n in t)
+            obHasOwnProp.call(t, n) && (e[n] = t[n]);
+    }
+    return e;
+};
+const isEmptyObject = function (obj) {
+    var name;
+    for (name in obj) {
+        return false;
+    }
+    return true;
+};
+const expando = function () {
+    return "app" + ("" + Math.random()).replace(/\D/g, "");
+};
+// Convert dashed to camelCase; used by the css and data modules
+// Support: IE9-11+
+// Microsoft forgot to hump their vendor prefix (#9572)
+const camelCase = function (string) {
+    return string.replace(rmsPrefix, "ms-").replace(rdashAlpha, fcamelCase);
+};
+const proxy = function (func, obj) {
+    if (typeof func != "function") {
+        return func;
+    }
+    // If obj is empty or another set another object
+    if (!obj) {
+        // @ts-ignore
+        obj = this;
+    }
+    return function () {
+        return func.apply(obj, arguments);
+    };
+};
+/*
+    hasData: function( elem ) {
+  return data_user.hasData( elem ) || data_priv.hasData( elem );
+},
+
+data: function( elem, name, data ) {
+  return data_user.access( elem, name, data );
+},
+
+removeData: function( elem, name ) {
+  data_user.remove( elem, name );
+},
+ */
+const data = function (elem, name, data) {
+    return data_user.access(elem, name, data);
+};
+const getTagData = function (element, key) {
+    return element.dataset[key];
+};
+const getTagDataAsNumber = function (element, key) {
+    const data = element.dataset[key];
+    if (data == null) {
+        return undefined;
+    }
+    return parseInt(data);
+};
+var rnotwhite = /\S+/g;
+class Data {
+    static uid = 1;
+    static accepts(owner) {
+        // Accepts only:
+        //  - Node
+        //    - Node.ELEMENT_NODE
+        //    - Node.DOCUMENT_NODE
+        //  - Object
+        //    - Any
+        /* jshint -W018 */
+        return owner.nodeType === 1 || owner.nodeType === 9 || !+owner.nodeType;
+    }
+    expando;
+    cache;
+    constructor() {
+        // Support: Android<4,
+        // Old WebKit does not have Object.preventExtensions/freeze method,
+        // return new empty object instead with no [[set]] accessor
+        Object.defineProperty((this.cache = {}), 0, {
+            get: function () {
+                return {};
+            },
+        });
+        this.expando = expando() + String(Data.uid++);
+    }
+    key(owner) {
+        const _owner = owner;
+        // We can accept data for non-element nodes in modern browsers,
+        // but we should not, see #8335.
+        // Always return the key for a frozen object.
+        if (!Data.accepts(_owner)) {
+            return 0;
+        }
+        var descriptor = {}, 
+        // Check if the owner object already has a cache key
+        unlock = _owner[this.expando];
+        // If not, create one
+        if (!unlock) {
+            unlock = Data.uid++;
+            // Secure it in a non-enumerable, non-writable property
+            try {
+                descriptor[this.expando] = { value: unlock };
+                Object.defineProperties(_owner, descriptor);
+                // Support: Android<4
+                // Fallback to a less secure definition
+            }
+            catch (e) {
+                descriptor[this.expando] = unlock;
+                extend(_owner, descriptor);
+            }
+        }
+        // Ensure the cache object
+        if (!this.cache[unlock]) {
+            this.cache[unlock] = {};
+        }
+        return unlock;
+    }
+    set(owner, data, value) {
+        var prop, 
+        // There may be an unlock assigned to this node,
+        // if there is no entry for this "owner", create one inline
+        // and set the unlock as though an owner entry had always existed
+        unlock = this.key(owner), cache = this.cache[unlock];
+        // Handle: [ owner, key, value ] args
+        if (typeof data === "string") {
+            cache[data] = value;
+            // Handle: [ owner, { properties } ] args
+        }
+        else {
+            // Fresh assignments by object are shallow copied
+            if (isEmptyObject(cache)) {
+                extend(this.cache[unlock], data);
+                // Otherwise, copy the properties one-by-one to the cache object
+            }
+            else {
+                for (prop in data) {
+                    //@ts-ignore
+                    cache[prop] = data[prop];
+                }
+            }
+        }
+        return cache;
+    }
+    get(owner, key) {
+        // Either a valid cache is found, or will be created.
+        // New caches will be created and the unlock returned,
+        // allowing direct access to the newly created
+        // empty data object. A valid owner object must be provided.
+        var cache = this.cache[this.key(owner)];
+        return key === undefined ? cache : cache[key];
+    }
+    access(owner, key, value) {
+        var stored;
+        // In cases where either:
+        //
+        //   1. No key was specified
+        //   2. A string key was specified, but no value provided
+        //
+        // Take the "read" path and allow the get method to determine
+        // which value to return, respectively either:
+        //
+        //   1. The entire cache object
+        //   2. The data stored at the key
+        //
+        if (key === undefined || (key && typeof key === "string" && value === undefined)) {
+            stored = this.get(owner, key);
+            return stored !== undefined ? stored : this.get(owner, camelCase(key));
+        }
+        // [*]When the key is not a string, or both a key and value
+        // are specified, set or extend (existing objects) with either:
+        //
+        //   1. An object of properties
+        //   2. A key and value
+        //
+        this.set(owner, key, value);
+        // Since the "set" path can have two possible entry points
+        // return the expected data based on which path was taken[*]
+        return value !== undefined ? value : key;
+    }
+    remove(owner, key) {
+        var i, name, camel, unlock = this.key(owner), cache = this.cache[unlock];
+        if (key === undefined) {
+            this.cache[unlock] = {};
+        }
+        else {
+            // Support array or space separated string of keys
+            if (isArray(key)) {
+                // If "name" is an array of keys...
+                // When data is initially created, via ("key", "val") signature,
+                // keys will be converted to camelCase.
+                // Since there is no way to tell _how_ a key was added, remove
+                // both plain key and camelCase key. #12786
+                // This will only penalize the array argument path.
+                name = key.concat(key.map(camelCase));
+            }
+            else {
+                camel = camelCase(key);
+                // Try the string as a key before any manipulation
+                if (key in cache) {
+                    name = [key, camel];
+                }
+                else {
+                    // If a key with the spaces exists, use it.
+                    // Otherwise, create an array by matching non-whitespace
+                    name = camel;
+                    name = name in cache ? [name] : name.match(rnotwhite) || [];
+                }
+            }
+            i = name.length;
+            while (i--) {
+                delete cache[name[i]];
+            }
+        }
+    }
+    hasData(owner) {
+        const _owner = owner;
+        return !isEmptyObject(this.cache[_owner[this.expando]] || {});
+    }
+    discard(owner) {
+        const _owner = owner;
+        if (_owner[this.expando]) {
+            delete this.cache[_owner[this.expando]];
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return []; }
+}
+// var data_priv = new Data();
+const data_user = new Data();
+const getSlideDuration = function (sdkApi, storyId, slideIndex) {
+    return sdkApi.getSlideDuration(storyId, slideIndex) ?? 10000;
+};
+const getWinWidth = function (env) {
+    return env.innerWidth || env.document.documentElement.clientWidth || env.document.body.clientWidth;
+};
+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 getValueOrException = function (value, message) {
+    if (value == null) {
+        throw new Error(message);
+    }
+    return value;
+};
+const getValueOrDefault = function (value, defaultValue) {
+    if (value == null) {
+        return defaultValue;
+    }
+    return value;
+};
+const getElementBounding = (env, rect) => {
+    var wWidth = getWinWidth(env);
+    var wHeight = getWinHeight(env);
+    var bounding = {
+        absolute: {
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            right: 0,
+            center: {
+                x: rect.x + rect.width / 2,
+                y: rect.y + rect.height / 2,
+            },
+        },
+        width: (rect.width / wWidth) * 100,
+        height: (rect.height / wHeight) * 100,
+        left: (rect.left / wWidth) * 100,
+        right: 0,
+        center: {
+            x: ((rect.x + rect.width / 2) / wWidth) * 100,
+            y: ((rect.y + rect.height / 2) / wHeight) * 100,
+        },
+    };
+    bounding.right = bounding.left + bounding.width;
+    bounding.absolute.right = rect.left + rect.width;
+    return bounding;
+};
+const toArray = (value) => Array.prototype.slice.call(value);
+const addClass = (target, className) => {
+    var arr = target.className.split(" ");
+    if (arr.indexOf(className) === -1) {
+        target.className += " " + className;
+    }
+};
+const removeClass = (target, className) => {
+    target.className = target.className.replace(new RegExp("(?:^|\\s)" + className + "(?:\\s|$)"), " ").trim();
+};
+const classList = (target) => {
+    if (target.classList !== undefined) {
+        return toArray(target.classList);
+    }
+    return target.className.split(" ");
+};
+const hasClass = (target, className) => classList(target).indexOf(className) !== -1;
+const Clipboard = (function (window, document, navigator) {
+    let textArea;
+    function isOS() {
+        return navigator.userAgent.match(/ipad|iphone/i);
+    }
+    function createTextArea(text) {
+        textArea = document.createElement("textArea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+    }
+    function selectText() {
+        if (isOS()) {
+            const range = document.createRange();
+            range.selectNodeContents(textArea);
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            textArea.setSelectionRange(0, 999999);
+        }
+        else {
+            textArea.select();
+        }
+    }
+    function copyToClipboard() {
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+    }
+    const copy = function (text) {
+        createTextArea(text);
+        selectText();
+        copyToClipboard();
+    };
+    return {
+        copy,
+    };
+})(window, document, navigator);
+
+var supportAnimate = document.documentElement.animate !== undefined;
+supportAnimate = false; // tmp off
+var _intervals = [];
+var _startShakeAnimation = function (element) {
+    var step = 0;
+    return window.setInterval(function () {
+        if (element) {
+            switch (step) {
+                case 0:
+                    element.style.setProperty("transform", "translate(1px, 1px) rotate(0deg)");
+                    break;
+                case 10:
+                    element.style.setProperty("transform", "translate(-1px, -2px) rotate(-1deg)");
+                    break;
+                case 20:
+                    element.style.setProperty("transform", "translate(-3px, 0px) rotate(1deg)");
+                    break;
+                case 30:
+                    element.style.setProperty("transform", "translate(3px, 2px) rotate(0deg)");
+                    break;
+                case 40:
+                    element.style.setProperty("transform", "translate(1px, -1px) rotate(1deg)");
+                    break;
+                case 50:
+                    element.style.setProperty("transform", "translate(-1px, 2px) rotate(-1deg)");
+                    break;
+                case 60:
+                    element.style.setProperty("transform", "translate(-3px, 1px) rotate(0deg)");
+                    break;
+                case 70:
+                    element.style.setProperty("transform", "translate(-3px, 1px) rotate(0deg)");
+                    break;
+                case 80:
+                    element.style.setProperty("transform", "translate(-1px, -1px) rotate(1deg)");
+                    break;
+                case 90:
+                    element.style.setProperty("transform", "translate(1px, 2px) rotate(0deg)");
+                    break;
+                case 100:
+                    element.style.setProperty("transform", "translate(1px, -2px) rotate(-1deg)");
+                    break;
+            }
+            step += 10;
+            if (step > 100) {
+                step = 0;
+            }
+        }
+    }, 100);
+};
+var _startExpandShakeAnimation = function (element) {
+    var step = 0;
+    return window.setInterval(function () {
+        if (element) {
+            switch (step) {
+                case 0:
+                    element.style.setProperty("transform", "translate(1px, 1px) rotate(0deg) scale(1.1)");
+                    break;
+                case 10:
+                    element.style.setProperty("transform", "translate(-1px, -2px) rotate(-1deg) scale(1.1)");
+                    break;
+                case 20:
+                    element.style.setProperty("transform", "translate(-3px, 0px) rotate(1deg) scale(1.1)");
+                    break;
+                case 30:
+                    element.style.setProperty("transform", "translate(3px, 2px) rotate(0deg) scale(1.1)");
+                    break;
+                case 40:
+                    element.style.setProperty("transform", "translate(1px, -1px) rotate(1deg) scale(1.1)");
+                    break;
+                case 50:
+                    element.style.setProperty("transform", "translate(-1px, 2px) rotate(-1deg) scale(1.1)");
+                    break;
+                case 60:
+                    element.style.setProperty("transform", "translate(-3px, 1px) rotate(0deg) scale(1.1)");
+                    break;
+                case 70:
+                    element.style.setProperty("transform", "translate(3px, 1px) rotate(-1deg) scale(1.1)");
+                    break;
+                case 80:
+                    element.style.setProperty("transform", "translate(-1px, -1px) rotate(1deg) scale(1.1)");
+                    break;
+                case 90:
+                    element.style.setProperty("transform", "translate(1px, 2px) rotate(0deg) scale(1.1)");
+                    break;
+                case 100:
+                    element.style.setProperty("transform", "translate(1px, -2px) rotate(-1deg) scale(1.1)");
+                    break;
+            }
+            step += 10;
+            if (step > 100) {
+                step = 0;
+            }
+        }
+    }, 100);
+};
+var _startBlurAnimation = function (element) {
+    const listener = (e) => {
+        if (e.propertyName === "filter" && e.target != null) {
+            const target = e.target;
+            if (hasClass(target, "animated")) {
+                if (target.style.filter === "blur(0px)" || target.style.filter === "") {
+                    setTimeout(function () {
+                        target.style.filter = "blur(5px)";
+                    }, 10);
+                }
+                else if (target.style.filter === "blur(5px)") {
+                    setTimeout(function () {
+                        target.style.filter = "blur(0px)";
+                    }, 10);
+                }
+            }
+            else {
+                target.style.filter = "";
+                target.removeEventListener("transitionend", listener);
+            }
+        }
+    };
+    element.addEventListener("transitionend", listener);
+};
+var shortDuration = {
+    duration: 1000,
+    iterations: 1,
+};
+var longDuration = {
+    duration: 10000,
+    iterations: 1,
+};
+var extraLongDuration = {
+    duration: 20000,
+    iterations: 1,
+};
+var longInfinityDuration = {
+    duration: 10000,
+    iterations: Infinity,
+};
+var getAnimationFunction = function (element) {
+    if (!hasClass(element, "animated")) {
+        if (hasClass(element, "narrative-element-animation-shake")) {
+            if (element.parentElement && hasClass(element.parentElement, "narrative-element-expand")) {
+                return function () {
+                    _intervals.push(_startExpandShakeAnimation(element));
+                    addClass(element, "animated");
+                };
+            }
+            else {
+                return function () {
+                    _intervals.push(_startShakeAnimation(element));
+                    addClass(element, "animated");
+                };
+            }
+        }
+        else if (hasClass(element, "narrative-element-animation-blur")) {
+            return function () {
+                _startBlurAnimation(element);
+                addClass(element, "animated");
+            };
+        }
+        else {
+            return function () {
+                addClass(element, "active");
+                addClass(element, "animated");
+            };
+        }
+    }
+    return function () { };
+};
+const animationApi = {
+    start: function (slide, animate = false) {
+        if (supportAnimate && animate) {
+            // for editor, todo add .reset-animation to narrative-editor-slide && clear that
+            if (!hasClass(slide, "narrative-slide")) {
+                addClass(slide, "reset-animation");
+            }
+            const elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
+            elements.forEach(element => {
+                var width = element.offsetWidth;
+                var height = element.offsetHeight;
+                var _classList = classList(element);
+                if (_classList.indexOf("narrative-element-animation-fade-in-up") !== -1) {
+                    element.animate({
+                        transform: ["translateY(" + height + "px)", "translateY(0)"],
+                        opacity: [0, 1],
+                    }, shortDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-fade-in-down") !== -1) {
+                    element.animate({
+                        transform: ["translateY(" + -1 * height + "px)", "translateY(0)"],
+                        opacity: [0, 1],
+                    }, shortDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-fade-in-left") !== -1) {
+                    element.animate({
+                        transform: ["translateX(" + -1 * width + "px)", "translateX(0)"],
+                        opacity: [0, 1],
+                    }, shortDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-fade-in-right") !== -1) {
+                    element.animate({
+                        transform: ["translateX(" + width + "px)", "translateX(0)"],
+                        opacity: [0, 1],
+                    }, shortDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-blur") !== -1) {
+                    element.animate([
+                        { filter: "blur(5px)", offset: 0 },
+                        { filter: "blur(0px)", offset: 0.5 },
+                        { filter: "blur(5px)", offset: 1 },
+                    ], longInfinityDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-focus-in") !== -1) {
+                    element.animate({ filter: ["blur(12px)", "blur(0px)"], opacity: [0, 1] }, shortDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-scroll-left") !== -1) {
+                    element.animate({
+                        transform: ["scale(1.2) translateX(" + 0.08 * width + "px)", "scale(1.2) translateX(" + -0.08 * width + "px)"],
+                    }, extraLongDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-scroll-right") !== -1) {
+                    element.animate({
+                        transform: ["scale(1.2) translateX(" + -0.08 * width + "px)", "scale(1.2) translateX(" + 0.08 * width + "px)"],
+                    }, extraLongDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-scroll-up") !== -1) {
+                    element.animate({
+                        transform: ["scale(1.2) translateY(" + 0.08 * width + "px)", "scale(1.2) translateY(" + -0.08 * width + "px)"],
+                    }, extraLongDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-scroll-down") !== -1) {
+                    element.animate({
+                        transform: ["scale(1.2) translateY(" + -0.08 * width + "px)", "scale(1.2) translateY(" + 0.08 * width + "px)"],
+                    }, extraLongDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-zoom") !== -1) {
+                    element.animate({ transform: ["scale(1)", "scale(1.2)"] }, longDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-zoom-out") !== -1) {
+                    element.animate({ transform: ["scale(1.2)", "scale(1)"] }, longDuration);
+                }
+                else if (_classList.indexOf("narrative-element-animation-shake") !== -1) {
+                    element.animate([
+                        { transform: "translate(1px, 1px) rotate(0deg)", offset: 0 },
+                        { transform: "translate(-1px, -2px) rotate(-1deg)", offset: 0.1 },
+                        { transform: "translate(-3px, 0px) rotate(1deg)", offset: 0.2 },
+                        { transform: "translate(3px, 2px) rotate(0deg)", offset: 0.3 },
+                        { transform: "translate(1px, -1px) rotate(1deg)", offset: 0.4 },
+                        { transform: "translate(-1px, 2px) rotate(-1deg)", offset: 0.5 },
+                        { transform: "translate(-3px, 1px) rotate(0deg)", offset: 0.6 },
+                        { transform: "translate(3px, 1px) rotate(-1deg)", offset: 0.7 },
+                        { transform: "translate(-1px, -1px) rotate(1deg)", offset: 0.8 },
+                        { transform: "translate(1px, 2px) rotate(0deg)", offset: 0.9 },
+                        { transform: "translate(1px, -2px) rotate(-1deg)", offset: 1 },
+                    ], { duration: 1000, iterations: Infinity, composite: "add" });
+                }
+            });
+            if (elements.length > 0) {
+                requestAnimationFrame(() => removeClass(slide, "reset-animation"));
+            }
+        }
+        else {
+            addClass(slide, "animation-fallback");
+            const animations = [];
+            // просто Array
+            var elements = slide.querySelectorAll(".narrative-element-animation");
+            var isEditorSlide = hasClass(slide, "narrative-editor-slide");
+            for (var i = 0; i < elements.length; i++) {
+                if (!isEditorSlide && !elements[i].style.getPropertyValue("--width")) {
+                    var rects = elements[i].getBoundingClientRect();
+                    var width = rects.width;
+                    var height = rects.height;
+                    if (width && height) {
+                        elements[i].style.setProperty("--width", width + "px");
+                        elements[i].style.setProperty("--height", height + "px");
+                    }
+                }
+                (function (element) {
+                    var timeout = 50;
+                    if (element.getAttribute("data-animation-timeout") && parseFloat(element.getAttribute("data-animation-timeout") ?? "0")) {
+                        timeout = parseFloat(element.getAttribute("data-animation-timeout") ?? "0") * 1000;
+                    }
+                    const cb = () => {
+                        getAnimationFunction(element)();
+                        if (animation) {
+                            animation.timerId = undefined;
+                        }
+                    };
+                    const animation = {
+                        cb,
+                        timeout,
+                        timerId: window.setTimeout(cb, timeout),
+                    };
+                    animations.push(animation);
+                })(elements[i]);
+            }
+            var startAt = new Date().getTime();
+            // onstop && onpause
+            return function (isStop) {
+                for (var animation of animations) {
+                    if (animation["timerId"] !== undefined) {
+                        clearTimeout(animation["timerId"]);
+                        animation["timerId"] = undefined;
+                        animation["timeout"] -= new Date().getTime() - startAt;
+                        animation["needResume"] = !isStop;
+                    }
+                }
+                // resume
+                return function () {
+                    startAt = new Date().getTime();
+                    for (const animation of animations) {
+                        if (animation["timerId"] === undefined && animation["needResume"] === true) {
+                            animation["timerId"] = window.setTimeout(animation["cb"], animation["timeout"]);
+                        }
+                    }
+                };
+            };
+        }
+    },
+    stop: function (slide, animate) {
+        if (supportAnimate && animate) {
+            /** @type {HTMLElement[]} */
+            var elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
+            elements.forEach(function (el) {
+                el.getAnimations().forEach(function (animation) {
+                    animation.cancel();
+                });
+            });
+        }
+        else {
+            for (var i = 0; i < _intervals.length; i++) {
+                clearInterval(_intervals[i]);
+            }
+            if (slide) {
+                var elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
+                for (var i = 0; i < elements.length; i++) {
+                    removeClass(elements[i], "active");
+                    removeClass(elements[i], "animated");
+                    elements[i].style.setProperty("transform", "");
+                    elements[i].style.setProperty("filter", "");
+                }
+            }
+        }
+    },
+    pause: function (slide) {
+        if (supportAnimate) {
+            /*          var elements = document.querySelectorAll('.narrative-element-animation');
+                                  elements = _toArray(elements);
+
+                                  elements.forEach(function(el) {
+                                    el.playState = "paused";
+                                    // el.currentTime = 0;
+                                  });*/
+            var elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
+            elements.forEach(function (el) {
+                el.getAnimations().forEach(function (animation) {
+                    if (animation.playState !== "finished" && animation.playState === "running") {
+                        animation.pause();
+                    }
+                });
+            });
+            // slide.getAnimations().forEach(function (animation) {
+            //     if (animation.playState !== 'finished' && animation.playState === 'running') {
+            //         animation.pause();
+            //     }
+            // });
+        }
+    },
+    resume: function (slide) {
+        if (supportAnimate) {
+            var elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
+            elements.forEach(function (el) {
+                el.getAnimations().forEach(function (animation) {
+                    if (animation.playState === "paused") {
+                        animation.play();
+                    }
+                });
+            });
+        }
+    },
+    reset: function (slide) {
+        // _addClass(slide, 'reset-animation');
+    },
+};
+
+const CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER = `___CTOR_ARGS___`;
+const CONSTRUCTOR_ARGUMENTS_SYMBOL = Symbol.for(CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER);
+
+/**
+ * A Dependency-Injection container that holds services and can produce instances of them as required.
+ * It mimics reflection by parsing the app at compile-time and supporting the generic-reflection syntax.
+ * @author Frederik Wessberg
+ */
+class DIContainer {
+    /**
+     * A map between interface names and the services that should be dependency injected
+     */
+    constructorArguments = new Map();
+    /**
+     * A Map between identifying names for services and their IRegistrationRecords.
+     */
+    serviceRegistry = new Map();
+    /**
+     * A map between identifying names for services and concrete instances of their implementation.
+     */
+    instances = new Map();
+    registerSingleton(newExpression, options) {
+        if (options == null) {
+            throw new ReferenceError(`2 arguments required, but only 0 present. ${DI_COMPILER_ERROR_HINT}`);
+        }
+        if (newExpression == null) {
+            return this.register("SINGLETON", newExpression, options);
+        }
+        else {
+            return this.register("SINGLETON", newExpression, options);
+        }
+    }
+    registerTransient(newExpression, options) {
+        if (options == null) {
+            throw new ReferenceError(`2 arguments required, but only 0 present. ${DI_COMPILER_ERROR_HINT}`);
+        }
+        if (newExpression == null) {
+            return this.register("TRANSIENT", newExpression, options);
+        }
+        else {
+            return this.register("TRANSIENT", newExpression, options);
+        }
+    }
+    /**
+     * Gets an instance of the service matching the interface given as a generic type parameter.
+     * For example, 'container.get<IFoo>()' returns a concrete instance of the implementation associated with the
+     * generic interface name.
+     *
+     * You should not pass any options to the method if using the compiler. It will do that automatically.
+     */
+    get(options) {
+        if (options == null) {
+            throw new ReferenceError(`1 argument required, but only 0 present. ${DI_COMPILER_ERROR_HINT}`);
+        }
+        return this.constructInstance(options);
+    }
+    /**
+     * Returns true if a service has been registered matching the interface given as a generic type parameter.
+     * For example, 'container.get<IFoo>()' returns a concrete instance of the implementation associated with the
+     * generic interface name.
+     *
+     * You should not pass any options to the method if using the compiler. It will do that automatically.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    has(options) {
+        if (options == null) {
+            throw new ReferenceError(`1 argument required, but only 0 present. ${DI_COMPILER_ERROR_HINT}`);
+        }
+        return this.serviceRegistry.has(options.identifier);
+    }
+    register(kind, newExpression, options) {
+        // Take all of the constructor arguments for the implementation
+        const implementationArguments = "implementation" in options &&
+            options.implementation != null &&
+            options.implementation[CONSTRUCTOR_ARGUMENTS_SYMBOL] != null
+            ? options.implementation[CONSTRUCTOR_ARGUMENTS_SYMBOL]
+            : [];
+        this.constructorArguments.set(options.identifier, implementationArguments);
+        this.serviceRegistry.set(options.identifier, "implementation" in options && options.implementation != null
+            ? { ...options, kind }
+            : { ...options, kind, newExpression: newExpression });
+    }
+    /**
+     * Returns true if an instance exists that matches the given identifier.
+     */
+    hasInstance(identifier) {
+        return this.getInstance(identifier) != null;
+    }
+    /**
+     * Gets the cached instance, if any, associated with the given identifier.
+     */
+    getInstance(identifier) {
+        const instance = this.instances.get(identifier);
+        return instance == null ? null : instance;
+    }
+    /**
+     * Gets an IRegistrationRecord associated with the given identifier.
+     */
+    getRegistrationRecord({ identifier, parentChain, }) {
+        const record = this.serviceRegistry.get(identifier);
+        if (record == null) {
+            throw new ReferenceError(`${this.constructor.name} could not find a service for identifier: "${identifier}". ${parentChain == null || parentChain.length < 1
+                ? ""
+                : `It is required by the service: '${parentChain
+                    .map((parent) => parent.identifier)
+                    .join(" -> ")}'.`} Remember to register it as a service!`);
+        }
+        return record;
+    }
+    /**
+     * Caches the given instance so that it can be retrieved in the future.
+     */
+    setInstance(identifier, instance) {
+        this.instances.set(identifier, instance);
+        return instance;
+    }
+    /**
+     * Gets a lazy reference to another service
+     */
+    getLazyIdentifier(lazyPointer) {
+        return (new Proxy({}, { get: (_, key) => lazyPointer()[key] }));
+    }
+    /**
+     * Constructs a new instance of the given identifier and returns it.
+     * It checks the constructor arguments and injects any services it might depend on recursively.
+     */
+    constructInstance({ identifier, parentChain = [], }) {
+        const registrationRecord = this.getRegistrationRecord({
+            identifier,
+            parentChain,
+        });
+        // If an instance already exists (and it is a singleton), return that one
+        if (this.hasInstance(identifier) &&
+            registrationRecord.kind === "SINGLETON") {
+            return this.getInstance(identifier);
+        }
+        // Otherwise, instantiate a new one
+        let instance;
+        const me = {
+            identifier,
+            ref: this.getLazyIdentifier(() => instance),
+        };
+        // If a user-provided new-expression has been provided, invoke that to get an instance.
+        if ("newExpression" in registrationRecord) {
+            if (typeof registrationRecord.newExpression !== "function") {
+                throw new TypeError(`Could not instantiate the service with the identifier: '${registrationRecord.identifier}': You provided a custom instantiation argument, but it wasn't of type function. It has to be a function that returns whatever should be used as an instance of the Service!`);
+            }
+            try {
+                instance = registrationRecord.newExpression();
+            }
+            catch (ex) {
+                throw new Error(`Could not instantiate the service with the identifier: '${registrationRecord.identifier}': When you registered the service, you provided a custom instantiation function, but it threw an exception when it was run!`);
+            }
+        }
+        else {
+            // Find the arguments for the identifier
+            const mappedArgs = this.constructorArguments.get(identifier);
+            if (mappedArgs == null) {
+                throw new ReferenceError(`${this.constructor.name} could not find constructor arguments for the service: '${identifier}'. Have you registered it as a service?`);
+            }
+            // Instantiate all of the argument services (or re-use them if they were registered as singletons)
+            const instanceArgs = mappedArgs.map((dep) => {
+                if (dep === undefined)
+                    return undefined;
+                const matchedParent = parentChain.find((parent) => parent.identifier === dep);
+                if (matchedParent != null)
+                    return matchedParent.ref;
+                return this.constructInstance({
+                    identifier: dep,
+                    parentChain: [...parentChain, me],
+                });
+            });
+            try {
+                // Try to construct an instance with 'new' and if it fails, call the implementation directly.
+                const newable = registrationRecord.implementation;
+                instance = new newable(...instanceArgs);
+            }
+            catch (ex) {
+                if (registrationRecord.implementation == null) {
+                    throw new ReferenceError(`${this.constructor.name} could not construct a new service of kind: ${identifier}. Reason: No implementation was given!`);
+                }
+                const constructable = registrationRecord.implementation;
+                // Try without 'new' and call the implementation as a function.
+                instance = constructable(...instanceArgs);
+            }
+        }
+        return registrationRecord.kind === "SINGLETON"
+            ? this.setInstance(identifier, instance)
+            : instance;
+    }
+}
+const DI_COMPILER_ERROR_HINT = `Note: You must use DI-Compiler (https://github.com/wessberg/di-compiler) for this library to work correctly. Please consult the readme for instructions on how to install and configure it for your project.`;
+
+const container = new DIContainer();
+
+class WidgetsService {
+    _env;
+    _sdkApi;
+    constructor(_env, _sdkApi) {
+        this._env = _env;
+        this._sdkApi = _sdkApi;
+    }
+    get env() {
+        return this._env;
+    }
+    get sdkApi() {
+        return this._sdkApi;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Window`, `SDKApi`]; }
+}
+
+container.registerSingleton(undefined, { identifier: `WidgetsService`, implementation: WidgetsService });
+
+// import '../adapters/dateTimeSource/composition';
+// import '../adapters/uuidGenerator/composition';
+// import '../effects/eventHandler/composition';
+// import '../effects/logger/composition';
+// import '../effects/timer/composition';
+container.registerSingleton(() => window, { identifier: `Window` });
+
+class WidgetBase {
+    /**
+     * @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146
+     */
+    ["constructor"];
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetIndex = 0;
+    env = WidgetBase.widgetsService.env;
+    sdkApi = WidgetBase.widgetsService.sdkApi;
+    options = null;
+    element = null;
+    elementId = null;
+    slide = null;
+    slideIndex = null;
+    disableTimer = null;
+    layoutDirection = "ltr";
+    storyId = null;
+    widgetDone = null;
+    showWidgetCompleteToast = null;
+    submitButtonAnimatedView = null;
+    submitButtonView = null;
+    submitButtonViewHeight = 0;
+    savedData = null;
+    localData = null;
+    firstOpenTime = 0;
+    id;
+    constructor(element, options, elementIdGetter, slideGetter) {
+        this.options = extend({}, this.constructor.DEFAULTS, options);
+        this.element = element;
+        if (elementIdGetter) {
+            this.elementId = elementIdGetter(this.element);
+        }
+        else {
+            this.elementId = getValueOrException(getTagData(this.element, "elementId"), "Empty elementId");
+        }
+        if (slideGetter) {
+            this.slide = slideGetter(this.element);
+        }
+        else {
+            this.slide = getValueOrException(this.element.closest(".narrative-slide"), "Empty slide");
+        }
+        this.slideIndex = getValueOrException(getTagDataAsNumber(this.slide, "index"), "Empty slideIndex");
+        this.disableTimer = getTagData(this.slide, "disableTimer") === "1";
+        this.storyId = getValueOrException(getTagDataAsNumber(this.slide, "id"), "Empty storyId");
+        if (this.env.getComputedStyle(this.element).direction === "rtl") {
+            this.layoutDirection = "rtl";
+        }
+        else {
+            this.layoutDirection = "ltr";
+        }
+        this.element.dir = this.layoutDirection;
+        if (this.element.parentElement != null) {
+            this.widgetDone = this.element.parentElement?.nextElementSibling; // geometry + .widget-sent-toast
+            if (this.widgetDone) {
+                if (!this.widgetDone.classList.contains("widget-sent-toast")) {
+                    this.widgetDone = null;
+                }
+            }
+        }
+        this.showWidgetCompleteToast = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "showWidgetCompleteToast"), 0));
+        if (!this.showWidgetCompleteToast) {
+            this.widgetDone = null;
+        }
+        if (this.element != null) {
+            this.submitButtonAnimatedView = this.element.querySelector(".submit-button-animated-view");
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonView = this.submitButtonAnimatedView.querySelector(".submit-button-view");
+                if (this.submitButtonView != null) {
+                    this.submitButtonViewHeight = this.submitButtonView.clientHeight;
+                }
+            }
+        }
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
+        this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
+        ++WidgetBase.widgetIndex;
+    }
+    refreshUserData(localData) { }
+    static widgetCacheKey = "ias.story-element";
+    static widgetClassName = "";
+    static getInstance(element) {
+        return data(element, this.widgetCacheKey);
+    }
+    static getInstanceById(id) {
+        const widgetsElements = slice.call(this.widgetsService.env.document.querySelectorAll(`.${this.widgetClassName}`));
+        let widget;
+        forEach(widgetsElements, (element, index) => {
+            const localWidget = data(element, this.widgetCacheKey);
+            if (localWidget && localWidget.id === id) {
+                widget = localWidget;
+            }
+        });
+        return widget;
+    }
+    static createInstance(instantiate, element, options) {
+        // get from objects cache (just Map<key, data> where key assigned to HTMLElement)
+        let instance = WidgetBase.getInstance(element);
+        if (instance == null) {
+            // can throw Error
+            instance = instantiate(element, options);
+            // save object in cache by key associated with HTMLElement
+            data(element, WidgetBase.widgetCacheKey, instance);
+        }
+        return instance;
+    }
+    static initWidgets(instantiate, elements, localData) {
+        if (localData != null) {
+            forEach(elements, element => {
+                this.createInstance(instantiate, element, {
+                    slide: null,
+                    localData,
+                });
+            });
+            return Promise.resolve(localData);
+        }
+        else {
+            return new Promise(resolve => {
+                this.getLocalData().then(localData => {
+                    forEach(elements, element => {
+                        this.createInstance(instantiate, element, {
+                            slide: null,
+                            localData,
+                        });
+                    });
+                    resolve(localData);
+                });
+            });
+        }
+    }
+    static get widgetsService() {
+        return container.get({ identifier: "WidgetsService" });
+    }
+    static getLocalData() {
+        return this.widgetsService.sdkApi.getStoryLocalData();
+    }
+    getLocalData() {
+        return this.constructor.getLocalData();
+    }
+    static setLocalData(keyValue, sendToServer, syncWithRuntimeLocalData) {
+        // push json object as string
+        if (sendToServer === undefined) {
+            sendToServer = true;
+        }
+        else {
+            sendToServer = Boolean(sendToServer);
+        }
+        if (syncWithRuntimeLocalData === undefined) {
+            syncWithRuntimeLocalData = true;
+        }
+        else {
+            syncWithRuntimeLocalData = Boolean(syncWithRuntimeLocalData);
+        }
+        if (syncWithRuntimeLocalData) {
+            this.getLocalData().then(localData => {
+                // 1 - old values, 2 - new values
+                keyValue = extend({}, localData, keyValue);
+                // todo make async via promise or async
+                this.widgetsService.sdkApi.setStoryLocalData(keyValue, sendToServer);
+            });
+        }
+        else {
+            // todo make async via promise or async
+            this.widgetsService.sdkApi.setStoryLocalData(keyValue, sendToServer);
+        }
+    }
+    setLocalData(keyValue, sendToServer, syncWithRuntimeLocalData) {
+        return this.constructor.setLocalData(keyValue, sendToServer, syncWithRuntimeLocalData);
+    }
+    static sendStatisticEventToApp(name, data, devPayload) {
+        sendStatisticEventToApp(this.widgetsService.sdkApi, name, data, devPayload);
+    }
+    sendStatisticEventToApp(name, data, devPayload) {
+        this.constructor.sendStatisticEventToApp(name, data, devPayload);
+    }
+    showNextSlide() {
+        this.sdkApi.showNextSlide(getSlideDuration(this.sdkApi, this.storyId, this.slideIndex));
+    }
+    _showLayout(layers, selectIndex, withStatEvent = false) {
+        if (this.sdkApi.isExistsShowLayer()) {
+            this.sdkApi.showLayer(selectIndex);
+        }
+        else {
+            forEach(layers, (layer, index) => {
+                if (index === selectIndex) {
+                    layer.classList.remove("hidden");
+                    this.sdkApi.storyAnimation?.start(layer);
+                }
+                else {
+                    layer.classList.add("hidden");
+                }
+            });
+        }
+        if (withStatEvent) {
+            this._statEventLayoutShow(selectIndex);
+        }
+    }
+    _statEventLayoutShow(layoutIndex) {
+        try {
+            this.sendStatisticEventToApp("layout-show", {
+                i: this.storyId,
+                si: this.slideIndex,
+                li: layoutIndex,
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                layout_index: layoutIndex,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    static api = {
+        refreshUserData: function (nodes, localData) {
+            const cb = (el, localData) => {
+                var widgetElement = el.closest(`.${WidgetBase.widgetClassName}`);
+                if (widgetElement) {
+                    const widget = WidgetBase.getInstance(widgetElement);
+                    if (widget) {
+                        widget.refreshUserData(localData);
+                    }
+                }
+            };
+            if (localData != null) {
+                const elements = slice.call(nodes);
+                forEach(elements, el => cb(el, localData));
+            }
+            else {
+                WidgetBase.getLocalData().then(localData => {
+                    const elements = slice.call(nodes);
+                    forEach(elements, el => cb(el, localData));
+                });
+            }
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `(element: HTMLElement) => string`, `(element: HTMLElement) => HTMLElement`]; }
+}
+
+class WidgetCopy extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-copy";
+    button;
+    clipboardTarget;
+    isPromotionalCode;
+    state;
+    msgNetworkError;
+    msgServiceError;
+    msgNoMoreCodes;
+    msgTryAgain;
+    geometry;
+    resultLayer;
+    resultLayerGeometry;
+    constructor(element, options) {
+        super(element, options);
+        this.button = this.element.querySelector(".narrative-element-text-lines");
+        this.clipboardTarget = getTagData(element, "clipboardTarget");
+        this.isPromotionalCode = getTagData(element, "clipboardType") === "promocode";
+        this.state = null;
+        this.msgNetworkError = getTagData(this.element, "msgNetworkError");
+        this.msgServiceError = getTagData(this.element, "msgServiceError");
+        this.msgNoMoreCodes = getTagData(this.element, "msgNoMoreCodes");
+        this.msgTryAgain = getTagData(this.element, "msgTryAgain");
+        this.geometry = this.element.closest(".narrative-element-geometry");
+        this.resultLayer = this.slide.querySelector(".narrative-element-copy-result-variant");
+        if (this.resultLayer && this.geometry) {
+            this.resultLayerGeometry = this.resultLayer.closest(".narrative-element-geometry");
+            // create align center
+            if (this.resultLayerGeometry) {
+                var baseComputedGeometry = window.getComputedStyle(this.geometry);
+                var resultComputedGeometry = window.getComputedStyle(this.resultLayerGeometry);
+                if (parseFloat(resultComputedGeometry.width) < parseFloat(baseComputedGeometry.width)) {
+                    // prevent resultLayer shrinking
+                    this.resultLayerGeometry.style.setProperty("width", parseFloat(baseComputedGeometry.width) + "px");
+                    resultComputedGeometry = window.getComputedStyle(this.resultLayerGeometry);
+                }
+                var geometryCenter = parseFloat(baseComputedGeometry.left) + parseFloat(baseComputedGeometry.width) / 2;
+                var resultLayerGeometryWidth = parseFloat(resultComputedGeometry.width);
+                var newResultLayerGeometryLeft = geometryCenter - resultLayerGeometryWidth / 2;
+                this.resultLayerGeometry.style.setProperty("left", newResultLayerGeometryLeft + "px");
+            }
+        }
+        if (this.isPromotionalCode) {
+            this.fetchPromoCode();
+        }
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    isTransparentElement() {
+        if (this.element) {
+            try {
+                var 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;
+    }
+    changeText(newText) {
+        if (this.button) {
+            this.button.textContent = newText;
+        }
+    }
+    fetchPromoCode() {
+        this.state = 0;
+        if (this.localData["_cp_g_" + this.elementId + "_pc"] !== undefined) {
+            this.state = 1;
+            this.clipboardTarget = this.localData["_cp_g_" + this.elementId + "_pc"];
+            if (this.clipboardTarget != null) {
+                this.changeText(this.clipboardTarget);
+            }
+            removeClass(this.element, "loader");
+        }
+        if (this.state === 0) {
+            if (!this.isTransparentElement()) {
+                // for transparent element
+                addClass(this.element, "loader");
+            }
+            // fetch  promo code
+            var path = "story/" + this.storyId + "/widget/" + this.elementId + "/promo-code/" + this.clipboardTarget;
+            var headers = {
+                accept: "application/json",
+                "Content-Type": "application/json",
+            };
+            var profileKey = "fetch-promo-code";
+            Promise.all([
+                this.sdkApi.sendApiRequest(path, "POST", null, headers, null, profileKey),
+                new Promise(function (t, e) {
+                    return setTimeout(t, 300);
+                }),
+            ]).then(values => {
+                var r = values[0];
+                var status = r.status;
+                var code = null;
+                var success = false;
+                if (status === 200 || status === 201) {
+                    if (r.data)
+                        code = r.data.code;
+                    if (code) {
+                        // success case
+                        this.clipboardTarget = code;
+                        this.changeText(this.clipboardTarget);
+                        success = true;
+                        this.state = 1;
+                        removeClass(this.element, "loader");
+                        if (status === 201) {
+                            this.localData["_cp_g_" + this.elementId + "_pc_fetched_at"] = Math.round(new Date().getTime() / 1000);
+                            this.localData["_&ts_cp_g_" + this.elementId + "_pc_fetched_at"] = Math.round(new Date().getTime() / 1000);
+                        }
+                        this.localData["_cp_g_" + this.elementId + "_pc"] = code;
+                        this.setLocalData(this.localData, true);
+                    }
+                    else {
+                        this.msgNoMoreCodes && this.sdkApi.showToast(this.msgNoMoreCodes);
+                    }
+                }
+                else if (status === 12163 || status === 12002) {
+                    this.msgNetworkError && this.sdkApi.showToast(this.msgNetworkError);
+                }
+                else {
+                    this.msgServiceError && this.sdkApi.showToast(this.msgServiceError);
+                }
+                if (!success) {
+                    this.state = 3;
+                    this.changeText(this.msgTryAgain ?? "");
+                    removeClass(this.element, "loader");
+                }
+            });
+        }
+    }
+    getStateValue() {
+        return this.state;
+    }
+    getIsPromotionalCode() {
+        return this.isPromotionalCode;
+    }
+    _statEventCopyClick(clipboardTarget) {
+        try {
+            var buttonText = this.button?.textContent ?? "";
+            this.sendStatisticEventToApp("w-copy", {
+                i: this.storyId,
+                si: this.slideIndex,
+                wi: this.elementId,
+                wl: buttonText,
+                wt: clipboardTarget,
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                widget_id: this.elementId,
+                widget_label: buttonText,
+                widget_value: clipboardTarget,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _select() {
+        this.element.classList.add("done");
+        if (this.resultLayer) {
+            this.resultLayer.classList.add("done");
+        }
+        if (this.disableTimer) {
+            // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
+            // смотрим что прозрачный текст - тогда и лоадер прозрачный
+            // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
+            this.showNextSlide();
+        }
+    }
+    copyToClipboard(element) {
+        this._select();
+        var text = this.clipboardTarget ?? "";
+        Clipboard.copy(text);
+        this.completeWidget();
+        this._statEventCopyClick(text);
+    }
+    completeWidget() {
+        this.localData["_cp_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // ответ на вопрос
+        this.localData["_&ts_cp_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        this.setLocalData(this.localData, true);
+    }
+    isDone() {
+        return this.localData["_cp_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (nodeList, localData) {
+            // 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);
+        },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetCopy.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetCopy.getInstance(widgetElement);
+                if (widget) {
+                    if (!widget.getIsPromotionalCode()) {
+                        widget.copyToClipboard(element);
+                    }
+                    else if (widget.getStateValue() === 1) {
+                        widget.copyToClipboard(element);
+                    }
+                    else if (widget.getStateValue() === 3) {
+                        widget.fetchPromoCode();
+                    }
+                }
+            }
+            return false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+/** QUIZ */
+class WidgetDataInput extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-data-input";
+    label;
+    elementRect;
+    inputElement;
+    textElement;
+    inputPlaceholderValue;
+    /**
+     * @throws Error
+     * @param element
+     * @param options
+     */
+    constructor(element, options) {
+        super(element, options);
+        this.label = this.element.querySelector(".label-view .label");
+        this.elementRect = this.element.getBoundingClientRect();
+        this.inputElement = getValueOrException(this.element.querySelector(".input-view .input"), "Empty .input-view .input");
+        this.textElement = getValueOrException(this.inputElement.querySelector(".narrative-element-text-lines"), "Empty .narrative-element-text-lines");
+        this.inputPlaceholderValue = this.textElement.innerHTML;
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+        var text = this.localData["_di_g_" + this.elementId + "_t"];
+        this._fillUserText(text);
+        if (text) {
+            this.element.classList.add("done");
+            if (this.disableTimer) {
+                this.showNextSlide();
+            }
+        }
+    }
+    _statEventFocusIn() {
+        try {
+            var labelText = this.label ? this.label.textContent ?? "" : "";
+            WidgetBase.sendStatisticEventToApp("w-data-input-focus", {
+                i: this.storyId,
+                si: this.slideIndex,
+                wi: this.elementId,
+                wl: labelText,
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                widget_id: this.elementId,
+                widget_label: labelText,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _statEventInputSave(answerText) {
+        try {
+            const labelText = this.label ? this.label.textContent ?? "" : "";
+            WidgetBase.sendStatisticEventToApp("w-data-input-save", {
+                i: this.storyId,
+                si: this.slideIndex,
+                wi: this.elementId,
+                wl: labelText,
+                wv: answerText,
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                widget_id: this.elementId,
+                widget_label: labelText,
+                widget_value: answerText,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    isDone() {
+        return Boolean(this.localData["_di_g_" + this.elementId + "_t"]);
+    }
+    click(element) {
+        if (this.isDone()) {
+            return true;
+        }
+        this.elementRect = this.element.getBoundingClientRect();
+        if (this.sdkApi.isAndroid || this.sdkApi.isWeb) {
+            this.slide.classList.add("blured");
+        }
+        this.slide.classList.add("data-input-editing");
+        const dataString = this.element.dataset["clientdialogwidgetconfig"];
+        if (this.sdkApi.isExistsShowStoryTextInput && dataString) {
+            const data = JSON.parse(dataString);
+            data.size = getElementBounding(this.env, this.elementRect);
+            if (!this.disableTimer) {
+                this.sdkApi.pauseUI();
+            }
+            try {
+                data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                data.configV2.main.question.text.value = data.configV2.main.question.text.value
+                    .replaceAll("\\n", "\n")
+                    .replaceAll("\\r", "\r")
+                    .replaceAll("\\t", "\t");
+                data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
+                    .replaceAll("\\n", "\n")
+                    .replaceAll("\\r", "\r")
+                    .replaceAll("\\t", "\t");
+            }
+            catch (e) {
+                console.error(e);
+            }
+            this.sdkApi.showStoryTextInput(this.id, data);
+            this._statEventFocusIn();
+        }
+        return false;
+    }
+    _fillUserText(text) {
+        if (this.inputElement && this.textElement) {
+            if (text) {
+                this.inputElement.classList.remove("_is-placeholder");
+                text = text.replace(new RegExp("\r?\n", "g"), "<br />");
+                this.textElement.innerHTML = text;
+            }
+            else {
+                this.inputElement.classList.add("_is-placeholder");
+                this.textElement.innerHTML = this.inputPlaceholderValue;
+            }
+        }
+    }
+    setUserText(text) {
+        this.slide.classList.remove("data-input-editing");
+        this.slide.classList.remove("blured");
+        var needResumeUITimer = true;
+        if (text) {
+            this._fillUserText(text);
+            this.localData["_di_g_" + this.elementId + "_t"] = text;
+            // answer to question
+            this.localData["_&ts_di_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+            if (this.widgetDone) {
+                this.widgetDone.classList.add("active", "opacity-active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("active");
+                    setTimeout(() => {
+                        this.widgetDone?.classList.remove("opacity-active");
+                    }, 250);
+                }, 2000);
+            }
+            this.setLocalData(this.localData, true);
+            this._statEventInputSave(text);
+            if (this.disableTimer) {
+                if ("_showNarrativeNextSlide" in window) {
+                    this.showNextSlide();
+                    needResumeUITimer = false;
+                }
+            }
+        }
+        if (needResumeUITimer && !this.disableTimer) {
+            this.sdkApi.resumeUI();
+        }
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (nodeList, localData) {
+            WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
+        },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetDataInput.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetDataInput.getInstance(widgetElement);
+                if (widget) {
+                    return widget.click(element);
+                }
+            }
+            return true;
+        },
+        setUserData: function (id, text) {
+            WidgetDataInput.getInstanceById(id)?.setUserText(text);
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetDateCountdown extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+        layers: [],
+    };
+    static widgetClassName = "narrative-element-date-countdown";
+    label;
+    layers;
+    messages;
+    timestampSeconds;
+    diff;
+    timerInited;
+    pendingUpdate;
+    firstGroup1;
+    firstGroup2;
+    firstGroupCaption;
+    secondGroup1;
+    secondGroup2;
+    secondGroupCaption;
+    thirdGroup1;
+    thirdGroup2;
+    thirdGroupCaption;
+    constructor(element, options) {
+        super(element, options);
+        this.label = this.element.querySelector(".label-view .label");
+        this.messages = {
+            days: getTagData(this.element, "tDays") ?? "",
+            hours: getTagData(this.element, "tHours") ?? "",
+            minutes: getTagData(this.element, "tMinutes") ?? "",
+            seconds: getTagData(this.element, "tSeconds") ?? "",
+        };
+        this.timestampSeconds = getValueOrException(getTagDataAsNumber(this.element, "timestampSeconds"), "Empty timestampSeconds");
+        this.diff = 0;
+        this.timerInited = 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();
+        // }
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    pause() {
+        if (this.timerInited) {
+            this.pendingUpdate = false;
+        }
+    }
+    resume() {
+        if (this.timerInited) {
+            this.pendingUpdate = true;
+            this.updateTimer();
+        }
+    }
+    initTimer() {
+        // 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");
+        this.firstGroupCaption = getValueOrException(this.element.querySelector(".date-item-view-group-1 .date-item-caption"), "Empty firstGroupCaption");
+        this.secondGroup1 = getValueOrException(this.element.querySelector(".date-item-view-group-2 .date-output-label-1"), "Empty secondGroup1");
+        this.secondGroup2 = getValueOrException(this.element.querySelector(".date-item-view-group-2 .date-output-label-2"), "Empty secondGroup2");
+        this.secondGroupCaption = getValueOrException(this.element.querySelector(".date-item-view-group-2 .date-item-caption"), "Empty secondGroupCaption");
+        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.timerInited = true;
+        var value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        if (value > 0) {
+            this._showLayout(this.layers, 0);
+        }
+        this.updateTimer();
+    }
+    updateTimer() {
+        var value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        if (value > 0) {
+            var result = this._asDuration(Math.round(value / 1000));
+            if (result.days) {
+                this.firstGroupCaption.textContent = this.messages.days;
+                this.firstGroup1.textContent = result.day1;
+                this.firstGroup2.textContent = result.day2;
+                this.secondGroupCaption.textContent = this.messages.hours;
+                this.secondGroup1.textContent = result.hour1;
+                this.secondGroup2.textContent = result.hour2;
+                this.thirdGroupCaption.textContent = this.messages.minutes;
+                this.thirdGroup1.textContent = result.minute1;
+                this.thirdGroup2.textContent = result.minute2;
+            }
+            else {
+                this.firstGroupCaption.textContent = this.messages.hours;
+                this.firstGroup1.textContent = result.hour1;
+                this.firstGroup2.textContent = result.hour2;
+                this.secondGroupCaption.textContent = this.messages.minutes;
+                this.secondGroup1.textContent = result.minute1;
+                this.secondGroup2.textContent = result.minute2;
+                this.thirdGroupCaption.textContent = this.messages.seconds;
+                this.thirdGroup1.textContent = result.second1;
+                this.thirdGroup2.textContent = result.second2;
+            }
+            // this.pendingUpdate = true;
+        }
+        else {
+            this.pendingUpdate = false;
+            this._showLayout(this.layers, 1);
+        }
+        if (this.pendingUpdate) {
+            this.env.requestAnimationFrame(() => this.updateTimer());
+        }
+    }
+    _asDuration(value) {
+        var result = {
+            days: false,
+            day1: "0",
+            day2: "0",
+            hour1: "0",
+            hour2: "0",
+            minute1: "0",
+            minute2: "0",
+            second1: "0",
+            second2: "0",
+        };
+        if (value === undefined || value === null) {
+            return result;
+        }
+        if (value < 0) {
+            return result;
+        }
+        value = Math.floor(value);
+        var days = Math.floor((value / 86400) % 365);
+        var hours = Math.floor((value / 3600) % 24);
+        var minutes = Math.floor((value / 60) % 60);
+        var seconds = value % 60;
+        var pair;
+        if (days > 0) {
+            result.days = true;
+            if (days < 10)
+                result.day2 = String(days);
+            else {
+                pair = String(days).split("");
+                result.day1 = pair[0];
+                result.day2 = pair[1];
+            }
+        }
+        if (hours < 10)
+            result.hour2 = String(hours);
+        else {
+            pair = String(hours).split("");
+            result.hour1 = pair[0];
+            result.hour2 = pair[1];
+        }
+        if (minutes < 10)
+            result.minute2 = String(minutes);
+        else {
+            pair = String(minutes).split("");
+            result.minute1 = pair[0];
+            result.minute2 = pair[1];
+        }
+        if (seconds < 10)
+            result.second2 = String(seconds);
+        else {
+            pair = String(seconds).split("");
+            result.second1 = pair[0];
+            result.second2 = pair[1];
+        }
+        return result;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (nodeList, layers, localData) {
+            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), slice.call(nodeList), localData);
+        },
+        pause: function (nodeList) {
+            forEach(slice.call(nodeList), function (el, index) {
+                WidgetDateCountdown.getInstance(el)?.pause();
+            });
+        },
+        resume: function (nodeList) {
+            forEach(slice.call(nodeList), function (el, index) {
+                WidgetDateCountdown.getInstance(el)?.resume();
+            });
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+const displaySlide = function (slides, localData) {
+    const multiSlideItem = slides[0];
+    let storyId = undefined;
+    let slideIndex = undefined;
+    if (multiSlideItem != null) {
+        storyId = getTagDataAsNumber(multiSlideItem, "id");
+        slideIndex = getTagDataAsNumber(multiSlideItem, "index");
+        if (multiSlideItem.querySelectorAll(".narrative-element-share[data-with-layer='1'], .narrative-element-poll-layers, .narrative-element-date-countdown, .narrative-element-game").length > 0) {
+            // skip if exists share/poll_layers
+            return;
+        }
+    }
+    // score
+    var score = null;
+    var selectedIndex = undefined;
+    if (localData["q_score"] !== undefined) {
+        score = parseInt(localData["q_score"]);
+    }
+    else if (localData["t_score"] !== undefined) {
+        score = parseInt(localData["t_score"]);
+    }
+    else if (localData["qg_score"] !== undefined) {
+        score = localData["qg_score"]; // array
+        var tmpScore = score;
+        if (isObject(score)) {
+            tmpScore = Object.values(score);
+        }
+        tmpScore.sort();
+        tmpScore.reverse();
+        if (tmpScore[0] === tmpScore[1]) {
+            forEach(slides, function (slide, index) {
+                var minScore = getTagData(slide, "layerMinScore");
+                if (minScore !== undefined) {
+                    if (minScore === "uncertain") {
+                        selectedIndex = index;
+                    }
+                }
+            });
+        }
+        else {
+            var maxCategoryCnt = 0;
+            // find quiz category (selectedCategoryIndex) - chosen most often
+            var selectedCategoryIndex = undefined;
+            forEach(score, function (value, i) {
+                var item = parseInt(value);
+                if (item > maxCategoryCnt) {
+                    maxCategoryCnt = item;
+                    selectedCategoryIndex = parseInt(i);
+                }
+            });
+            // chose slide with correct result
+            forEach(slides, function (slide, index) {
+                var minScore = getTagData(slide, "layerMinScore");
+                if (minScore !== undefined && isNumeric(minScore) && parseInt(minScore) === selectedCategoryIndex) {
+                    selectedIndex = index;
+                }
+            });
+        }
+    }
+    if (score === null) {
+        if (slides.length > 0) {
+            var slide = slides[0];
+            slide.classList.remove("hidden");
+            WidgetBase.widgetsService.sdkApi.storyAnimation?.start(slide);
+            return;
+        }
+        score = 0;
+    }
+    if (selectedIndex === undefined) {
+        var map = [];
+        forEach(slides, function (slide, index) {
+            var minScore = getTagData(slide, "layerMinScore");
+            if (minScore !== undefined) {
+                map.push([index, parseInt(minScore)]);
+            }
+        });
+        map.sort(function (a, b) {
+            return a[1] - b[1];
+        });
+        for (var i = map.length - 1; i >= 0; i--) {
+            if (score >= map[i][1]) {
+                selectedIndex = map[i][0];
+                break;
+            }
+        }
+    }
+    var undefinedResult = true;
+    if (selectedIndex !== undefined) {
+        forEach(slides, function (slide, index) {
+            if (index === selectedIndex) {
+                slide.classList.remove("hidden");
+                undefinedResult = false;
+                WidgetBase.widgetsService.sdkApi.storyAnimation?.start(slide);
+                _sendStatEvent(storyId, slideIndex, selectedIndex);
+            }
+        });
+    }
+    if (undefinedResult) {
+        console.warn("undefinedResult layer index");
+        WidgetBase.widgetsService.sdkApi.showLayer(0);
+    }
+};
+const _sendStatEvent = function (storyId, slideIndex, layerIndex) {
+    try {
+        WidgetBase.sendStatisticEventToApp("layout-show", {
+            i: storyId,
+            si: slideIndex,
+            li: layerIndex,
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+class WidgetMultiSlide {
+    static api = {
+        init: function (slides, localData) {
+            if (localData != null) {
+                displaySlide(slides, localData);
+            }
+            else {
+                WidgetBase.getLocalData().then(function (localData) {
+                    displaySlide(slides, localData);
+                });
+            }
+        },
+    };
+}
+
+class WidgetPoll extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-poll";
+    elementRect;
+    label;
+    percentFillMask;
+    maskedVariants;
+    variantsViewGroup;
+    variants;
+    variantsTexts;
+    isInvertedPercentFilledMaskDirection;
+    getUseResponseOnFirstButton;
+    getUseResponseOnSecondButton;
+    showClientTotalResult;
+    selectedVariant;
+    nativeDialogueWasOpened = false;
+    answerDuration = 0;
+    /**
+     * @throws Error
+     * @param element
+     * @param options
+     */
+    constructor(element, options) {
+        super(element, options);
+        this.elementRect = this.element.getBoundingClientRect();
+        this.label = this.element.querySelector(".label-view .label");
+        this.percentFillMask = this.element.querySelector(".percent-filled-variants-view-group-mask");
+        this.maskedVariants = slice.call(this.element.querySelectorAll(".variants-box .variants-view-group.percent-filled-variants-view-group .variant-view"));
+        this.variantsViewGroup = getValueOrException(this.element.querySelector(".variants-box .variants-view-group:not(.percent-filled-variants-view-group)"), "Empty variantsViewGroup");
+        this.variants = slice.call(this.variantsViewGroup.querySelectorAll(".variant-view"));
+        this.variantsTexts = [];
+        forEach(this.variants, (element, index) => {
+            const label = element.querySelector(".label");
+            if (label) {
+                this.variantsTexts.push(label.textContent ?? "");
+            }
+        });
+        this.isInvertedPercentFilledMaskDirection =
+            this.element.classList.contains("theme-translucent") || this.element.classList.contains("base-theme-translucent");
+        this.getUseResponseOnFirstButton = Boolean(getTagDataAsNumber(this.element, "getUserResponseOnFirstButton"));
+        this.getUseResponseOnSecondButton = Boolean(getTagDataAsNumber(this.element, "getUserResponseOnSecondButton"));
+        this.showClientTotalResult = Boolean(getTagDataAsNumber(this.element, "showClientTotalResult"));
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+        this.selectedVariant = undefined;
+        if (this.localData) {
+            if (this.localData["_p_g_" + this.elementId + "_sa"] !== undefined) {
+                this._selectVariant(this.localData["_p_g_" + this.elementId + "_sa"], true);
+            }
+            else {
+                this._clearVariantSelection();
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+        this.nativeDialogueWasOpened = false;
+    }
+    _statEventPollAnswer() {
+        this.answerDuration = new Date().getTime() - this.firstOpenTime;
+        try {
+            if (this.selectedVariant !== undefined) {
+                var labelText = this.label?.textContent ?? "";
+                var variantText = this.variantsTexts[this.selectedVariant] ? this.variantsTexts[this.selectedVariant] : "";
+                this.sendStatisticEventToApp("w-poll-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: this.selectedVariant,
+                    wal: variantText,
+                    d: this.answerDuration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_answer: this.selectedVariant,
+                    widget_answer_label: variantText,
+                    duration_ms: this.answerDuration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _statEventInputSave(responseText) {
+        try {
+            if (this.selectedVariant !== undefined) {
+                var labelText = this.label?.textContent ?? "";
+                var variantText = this.variantsTexts[this.selectedVariant] ? this.variantsTexts[this.selectedVariant] : "";
+                this.sendStatisticEventToApp("w-poll-clarification", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: this.selectedVariant,
+                    wal: variantText,
+                    wv: responseText,
+                    d: this.answerDuration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_answer: this.selectedVariant,
+                    widget_answer_label: variantText,
+                    widget_value: responseText,
+                    duration_ms: this.answerDuration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _selectVariant(index, filled = false) {
+        if (this.variants[index]) {
+            this.variants[index].classList.add("selected");
+        }
+        this.selectedVariant = index;
+        this.localData["_p_g_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        this.element.classList.add("selected-" + this.selectedVariant);
+        if (filled) {
+            this.element.classList.add("filled");
+        }
+        if (this.showClientTotalResult) {
+            this.element.classList.add("with-total-result");
+            this.displayPercents(index, filled);
+        }
+        if (this.disableTimer) {
+            this.env.setTimeout(() => {
+                // todo poll - если виджет на первом слайде то при повторном заходе автоматически не стартует таймлайн слайда
+                // только в web sdk такое
+                // если поставить через setTimeout то все ок
+                this.showNextSlide();
+            });
+        }
+    }
+    _clearVariantSelection() {
+        forEach(this.variants, function (variant) {
+            variant.classList.remove("selected");
+        });
+        this.element.classList.remove("done");
+        this.element.classList.remove("selected-" + this.selectedVariant);
+        this.element.classList.remove("filled");
+        this.selectedVariant = undefined;
+        this.element.classList.remove("with-total-result");
+        // this.displayPercents(index, filled);
+    }
+    selectVariant(variantView) {
+        this.nativeDialogueWasOpened = false;
+        if (this.selectedVariant !== undefined) {
+            return true;
+        }
+        var index = this.variants.indexOf(variantView);
+        if (index !== -1) {
+            if (this.getUseResponseOnFirstButton && index === 0) {
+                if (this.sdkApi.isAndroid) {
+                    this.slide.classList.add("blured");
+                }
+                this.slide.classList.add("data-input-editing");
+                const dataString = this.element.dataset["clientdialogwidgetconfig"];
+                this.selectedVariant = index;
+                if (this.sdkApi.isExistsShowStoryTextInput && dataString) {
+                    const data = JSON.parse(dataString);
+                    data.size = getElementBounding(this.env, this.elementRect);
+                    if (!this.disableTimer) {
+                        this.sdkApi.pauseUI();
+                    }
+                    this.nativeDialogueWasOpened = false;
+                    try {
+                        data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                        data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                        data.configV2.main.question.text.value = data.configV2.main.question.text.value
+                            .replaceAll("\\n", "\n")
+                            .replaceAll("\\r", "\r")
+                            .replaceAll("\\t", "\t");
+                        data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
+                            .replaceAll("\\n", "\n")
+                            .replaceAll("\\r", "\r")
+                            .replaceAll("\\t", "\t");
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
+                    this.sdkApi.showStoryTextInput(`${this.id}_first`, data);
+                }
+                this._statEventPollAnswer();
+                return false;
+            }
+            else if (this.getUseResponseOnSecondButton && index === 1) {
+                if (this.sdkApi.isAndroid) {
+                    this.slide.classList.add("blured");
+                }
+                this.slide.classList.add("data-input-editing");
+                const dataString = this.element.dataset["clientdialogwidgetconfig"];
+                this.selectedVariant = index;
+                if (this.sdkApi.isExistsShowStoryTextInput && dataString) {
+                    const data = JSON.parse(dataString);
+                    data.size = getElementBounding(this.env, this.elementRect);
+                    if (!this.disableTimer) {
+                        this.sdkApi.pauseUI();
+                    }
+                    try {
+                        data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                        data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                        data.configV2.main.question.text.value = data.configV2.main.question.text.value
+                            .replaceAll("\\n", "\n")
+                            .replaceAll("\\r", "\r")
+                            .replaceAll("\\t", "\t");
+                        data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
+                            .replaceAll("\\n", "\n")
+                            .replaceAll("\\r", "\r")
+                            .replaceAll("\\t", "\t");
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
+                    this.sdkApi.showStoryTextInput(`${this.id}_second`, data);
+                }
+                this._statEventPollAnswer();
+                return false;
+            }
+            else {
+                this._selectVariant(index);
+                this._statEventPollAnswer();
+            }
+            this.completeWidget();
+        }
+        return false;
+    }
+    _getVariantBoxInPercent(variantIndex) {
+        var box = {
+            sideOffset: 0,
+            width: 0,
+        };
+        if (this.variantsViewGroup != null && variantIndex != null && this.variants[0] != null && this.variants[1] != null) {
+            var viewGroupWidth = this.variantsViewGroup.clientWidth;
+            if (viewGroupWidth > 0) {
+                var offset = 0;
+                var variantViewMinWidth = 0;
+                // get min offset for variantView from variants-view-group
+                var variantView = this.variants[variantIndex];
+                var label = variantView.querySelector(".label");
+                var percentLabel = variantView.querySelector(".percent-label");
+                if (label != null && percentLabel != null) {
+                    var variantViewWidth = variantView.clientWidth;
+                    var labelOffset = (variantViewWidth - label.clientWidth) / 2;
+                    var percentLabelOffset = (variantViewWidth - percentLabel.clientWidth) / 2;
+                    offset = Math.min(labelOffset, percentLabelOffset);
+                    variantViewMinWidth = Math.max(label.clientWidth, percentLabel.clientWidth);
+                }
+                box.sideOffset = (offset / viewGroupWidth) * 100;
+                box.width = (variantViewMinWidth / viewGroupWidth) * 100;
+            }
+        }
+        return box;
+    }
+    displayPercents(selectedVariantIndex, filled = false) {
+        let pollAllocation = [0, 0];
+        let pollAllocationTs = undefined;
+        const sharedData = this.sdkApi.getWidgetsSharedData(this.storyId, "poll" /* Widgets.Poll */);
+        if (sharedData && sharedData[this.elementId] != null && (isObject(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
+            pollAllocation = sharedData[this.elementId];
+            if (isObject(sharedData[this.elementId])) {
+                pollAllocation = slice.call(Object.values(sharedData[this.elementId]));
+            }
+            pollAllocationTs = sharedData.ts;
+        }
+        // todo debug
+        // pollAllocation[0] = 10;
+        // pollAllocation[1] = 20;
+        var pollDoneAt = this.localData["_p_g_" + this.elementId + "_done_at"];
+        if (pollAllocationTs === undefined || pollDoneAt === undefined || pollDoneAt > pollAllocationTs) {
+            forEach(this.variants, (element, index) => {
+                const key = index;
+                if (pollAllocation[key] === undefined || !isNumber(pollAllocation[key])) {
+                    pollAllocation[key] = 0;
+                }
+                if (selectedVariantIndex === key) {
+                    ++pollAllocation[key];
+                }
+            });
+        }
+        // calc percents
+        var percents = [], total = 0;
+        forEach(this.variants, (element, index) => {
+            const key = index;
+            if (pollAllocation[key] !== undefined) {
+                if (!isNumber(pollAllocation[key])) {
+                    percents[key] = parseInt(String(pollAllocation[key]));
+                }
+                else {
+                    percents[key] = pollAllocation[key];
+                }
+                if (!isNumber(percents[key]) || isNaN(percents[key])) {
+                    percents[key] = 0;
+                }
+            }
+            else {
+                percents[key] = 0;
+            }
+            total += percents[key];
+        });
+        for (var i = 0; i < percents.length; i++) {
+            if (total !== 0) {
+                percents[i] = Math.round((percents[i] / total) * 100);
+                if (percents[i] > 100) {
+                    percents[i] = 100;
+                }
+            }
+            else {
+                percents[i] = 0;
+            }
+        }
+        var percentsTotal = function () {
+            var acc = 0;
+            for (var i = 0; i < percents.length; i++) {
+                acc += percents[i];
+            }
+            return acc;
+        };
+        var start = new Date().getTime();
+        while (percentsTotal() > 100) {
+            percents[percents.length - 1]--;
+            if (new Date().getTime() - start >= 1000) {
+                break;
+            }
+        }
+        var variantWithMinPercentsRelativeWidth = 0;
+        var variantWithMinPercentsIndex = null;
+        forEach(this.variants, (element, index) => {
+            const key = index;
+            var percent = percents[key];
+            var variant = element;
+            var maskedVariant = this.maskedVariants[key];
+            if (this.selectedVariant === key) {
+                variant.classList.add("selected");
+                if (maskedVariant != null) {
+                    maskedVariant.classList.add("selected");
+                }
+            }
+            var percentLabel = variant.querySelector(".percent-label");
+            if (percentLabel != null) {
+                percentLabel.innerHTML = percent + "%";
+            }
+            var maskedPercentLabel = maskedVariant?.querySelector(".percent-label");
+            if (maskedPercentLabel != null) {
+                maskedPercentLabel.innerHTML = percent + "%";
+            }
+        });
+        const cb = () => {
+            if (this.percentFillMask != null &&
+                this.variants[0] != null &&
+                this.variants[1] != null &&
+                this.selectedVariant != null &&
+                percents[this.selectedVariant] != null) {
+                var selectedVariantPercent = percents[this.selectedVariant];
+                var limit = 0;
+                var percent = 0;
+                variantWithMinPercentsIndex = 0;
+                if (percents[1] < percents[0]) {
+                    variantWithMinPercentsIndex = 1;
+                }
+                var boxPercents = this._getVariantBoxInPercent(variantWithMinPercentsIndex);
+                variantWithMinPercentsRelativeWidth = boxPercents.width;
+                var offset = 0;
+                if (this.selectedVariant === 0) {
+                    if (this.isInvertedPercentFilledMaskDirection) {
+                        if (variantWithMinPercentsIndex === 1) {
+                            percent = Math.max(variantWithMinPercentsRelativeWidth, 100 - selectedVariantPercent);
+                        }
+                        else {
+                            limit = 100 - variantWithMinPercentsRelativeWidth;
+                            percent = Math.min(limit, 100 - selectedVariantPercent);
+                        }
+                        offset = (50 - percent) / 2;
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-start", String(0));
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-end", String(percent));
+                        this.element.style.setProperty("--variants-view-group-offset", String(offset));
+                    }
+                    else {
+                        if (variantWithMinPercentsIndex === 0) {
+                            // real variant percent or variantView min width
+                            percent = Math.max(selectedVariantPercent, variantWithMinPercentsRelativeWidth);
+                        }
+                        else {
+                            limit = 100 - variantWithMinPercentsRelativeWidth;
+                            percent = Math.min(limit, selectedVariantPercent);
+                        }
+                        offset = (50 - percent) / -2;
+                        // decrease alt color from start to firstVariant percents
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-start", String(percent));
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-end", String(0));
+                        this.element.style.setProperty("--variants-view-group-offset", String(offset));
+                    }
+                }
+                else if (this.selectedVariant === 1) {
+                    if (this.isInvertedPercentFilledMaskDirection) {
+                        if (variantWithMinPercentsIndex === 0) {
+                            percent = Math.max(variantWithMinPercentsRelativeWidth, 100 - selectedVariantPercent);
+                        }
+                        else {
+                            limit = 100 - variantWithMinPercentsRelativeWidth;
+                            percent = Math.min(limit, 100 - selectedVariantPercent);
+                        }
+                        offset = (50 - percent) / -2;
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-start", String(percent));
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-end", String(0));
+                        this.element.style.setProperty("--variants-view-group-offset", String(offset));
+                    }
+                    else {
+                        // decrease alt color from end to secondVariant percents
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-start", String(0));
+                        if (variantWithMinPercentsIndex === 1) {
+                            // real variant percent or variantView min width
+                            percent = Math.max(selectedVariantPercent, variantWithMinPercentsRelativeWidth);
+                        }
+                        else {
+                            limit = 100 - variantWithMinPercentsRelativeWidth;
+                            percent = Math.min(limit, selectedVariantPercent);
+                        }
+                        offset = (50 - percent) / 2;
+                        this.percentFillMask.style.setProperty("--selected-variant-view-clip-area-end", String(percent));
+                        this.element.style.setProperty("--variants-view-group-offset", String(offset));
+                    }
+                }
+            }
+        };
+        // if (filled) {
+        //     cb();
+        // } else {
+        // wait for percent render done (for calc correct variantView width)
+        this.env.requestAnimationFrame(cb);
+        // }
+    }
+    setUserText(text, buttonPosition) {
+        this.slide.classList.remove("data-input-editing");
+        this.slide.classList.remove("blured");
+        if (this.selectedVariant != null) {
+            this._selectVariant(this.selectedVariant);
+        }
+        if (!this.disableTimer && this.nativeDialogueWasOpened) {
+            this.sdkApi.resumeUI();
+            this.nativeDialogueWasOpened = false;
+        }
+        this.localData["_p_g_" + this.elementId + "_user_response_on_" + buttonPosition] = text;
+        this.completeWidget();
+        this._statEventInputSave(text);
+    }
+    completeWidget() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.localData["_p_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // ответ на вопрос
+        this.localData["_&ts_p_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        this.setLocalData(this.localData, true);
+    }
+    isDone() {
+        return this.localData["_p_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    slidePollIsDone() {
+        return this.localData["_p_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
+        },
+        /**
+         * click
+         */
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetPoll.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetPoll.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectVariant(element);
+                }
+            }
+            return false;
+        },
+        slidePollIsDone: function (element) {
+            const widget = WidgetPoll.getInstance(element);
+            if (widget) {
+                return widget.slidePollIsDone();
+            }
+            return true;
+        },
+        setUserData: function (id, text) {
+            // id = widgetId_first || widgetId_second
+            let correctWidgetId = id;
+            let buttonPosition;
+            if (id.endsWith("_first")) {
+                buttonPosition = "first_button";
+                correctWidgetId = id.replace(/_first$/, "");
+            }
+            else if (id.endsWith("_second")) {
+                buttonPosition = "second_button";
+                correctWidgetId = id.replace(/_second$/, "");
+            }
+            const widget = WidgetPoll.getInstanceById(correctWidgetId);
+            if (widget && buttonPosition) {
+                widget.setUserText(text, buttonPosition);
+            }
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetPollLayers extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+        layers: [],
+    };
+    static widgetClassName = "narrative-element-poll-layers";
+    label;
+    variants;
+    variantsTexts;
+    selectedVariant;
+    layers;
+    constructor(element, options) {
+        super(element, options);
+        this.layers = this.options.layers;
+        this.label = this.element.querySelector(".label-view .label");
+        this.variants = slice.call(this.element.querySelectorAll(".variants-box .variant-view"));
+        this.variantsTexts = [];
+        forEach(this.variants, (element, index) => {
+            const label = element.querySelector(".label");
+            if (label) {
+                this.variantsTexts.push(label.textContent ?? "");
+            }
+        });
+        this.selectedVariant = undefined;
+        if (this.slidePollIsDone()) {
+            this._selectVariant(this.localData["_pl_g_" + this.elementId + "_sa"]);
+        }
+        else {
+            this._showLayout(this.layers, 0);
+        }
+        this.firstOpenTime = new Date().getTime();
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    _statEventPollVariant() {
+        try {
+            if (this.selectedVariant != null) {
+                var labelText = this.label?.textContent ?? "";
+                var variantText = this.variants[this.selectedVariant]?.textContent ?? "";
+                var duration = new Date().getTime() - this.firstOpenTime;
+                this.sendStatisticEventToApp("w-poll-layers-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: this.selectedVariant,
+                    wal: variantText,
+                    d: duration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_variant: this.selectedVariant,
+                    widget_answer_label: variantText,
+                    duration_ms: duration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _selectVariant(index, userAction = false) {
+        if (this.variants[index]) {
+            this.variants[index].classList.add("selected");
+        }
+        this.selectedVariant = index;
+        this.localData["_pl_g_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        // main
+        var layerIndex = 0;
+        if (index === 0) {
+            layerIndex = 1;
+        }
+        else if (index === 1) {
+            layerIndex = 2;
+        }
+        this._showLayout(this.layers, layerIndex, userAction);
+        if (this.disableTimer) {
+            this.showNextSlide();
+        }
+    }
+    selectVariant(variant) {
+        if (this.selectedVariant !== undefined) {
+            return true;
+        }
+        var index = this.variants.indexOf(variant);
+        if (index !== -1) {
+            this._selectVariant(index, true);
+            this.completeWidget();
+            this._statEventPollVariant();
+        }
+        return false;
+    }
+    completeWidget() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.localData["_pl_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // ответ на вопрос
+        this.localData["_&ts_pl_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        this.setLocalData(this.localData, true);
+    }
+    isDone() {
+        return this.localData != null && this.localData["_pl_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    slidePollIsDone() {
+        return this.localData != null && this.localData["_pl_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        // signature variants
+        // (widget, layers, undefined) - modern web sdk
+        // (widget, undefined, layers) - old web sdk and rn
+        // (widget, layers, localData) - native sdk
+        initWidget: function (element, layers, localData) {
+            if (layers === undefined && localData !== undefined) {
+                // @ts-ignore
+                layers = localData;
+                localData = undefined;
+            }
+            WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData);
+        },
+        /**
+         * click on poll variant
+         * @param element
+         * @returns {boolean}
+         */
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetPollLayers.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetPollLayers.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectVariant(element);
+                }
+            }
+            return false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetQuest extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-quest";
+    selectedAnswer;
+    label;
+    variants;
+    isWidget;
+    slideCount;
+    nonFinalSlide;
+    finalSlide;
+    constructor(element, options) {
+        const isWidget = !hasClass(element, "narrative-slide");
+        const elementIdGetter = (element) => getValueOrDefault(getTagData(element, "elementId"), "");
+        const slideGetter = (element) => isWidget ? getValueOrException(element.closest(".narrative-slide"), "Empty slide") : element;
+        super(element, options, elementIdGetter, slideGetter);
+        this.isWidget = isWidget;
+        this.slideCount = getTagDataAsNumber(this.slide, "slideCount") ?? 0;
+        this.nonFinalSlide = Boolean(getTagDataAsNumber(this.slide, "nonFinalSlide") ?? 0);
+        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.selectedAnswer = undefined;
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    setStorySessionValue(name, value) {
+        try {
+            var parent = this.element.closest(".stories-item");
+            if (parent) {
+                parent.dataset[name] = value;
+            }
+            else {
+                //@ts-ignore
+                this.env[name] = value;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+    getStorySessionValue(name) {
+        try {
+            var parent = this.element.closest(".stories-item");
+            if (parent) {
+                return parent.dataset[name];
+            }
+            else {
+                // @ts-ignore
+                return this.env[name];
+            }
+        }
+        catch (e) {
+            console.error(e);
+            return undefined;
+        }
+    }
+    init() {
+        if (this.localData) {
+            if (this.localData["_qt_g_" + this.elementId + "_sa"] !== undefined) ;
+            if (this.localData["_qt_fo_at"] === undefined) {
+                this.localData["_qt_fo_at"] = Math.round(new Date().getTime() / 1000);
+                this.setLocalData(this.localData, false);
+            }
+            var lastSlideIdx = this.localData["_qt_last_slide_idx"];
+            if (lastSlideIdx !== undefined) {
+                lastSlideIdx = parseInt(lastSlideIdx);
+                if (lastSlideIdx >= 0 &&
+                    lastSlideIdx < this.slideCount &&
+                    lastSlideIdx !== this.slideIndex /*&& this.slideIndex === this.firstSlideWithQuestIndex()*/) {
+                    if (this.getStorySessionValue("__storyQuestSlideChanged") === undefined) {
+                        // global flag - был сделан переход на нужный слайд, больше не нужно повторять за эту сессию
+                        this.setStorySessionValue("__storyQuestSlideChanged", "1");
+                        if (this.sdkApi.isExistsShowStorySlide) {
+                            this.sdkApi.showStorySlide(lastSlideIdx);
+                            return false;
+                        }
+                    }
+                }
+            }
+            // если этого слайда нет в роутинге (сработал переход по таймеру в app)
+            var routes = this._getRoutes();
+            if (routes[0].indexOf(this.slideIndex) === -1 && this.finalSlide) {
+                if (this.sdkApi.isExistsShowNextStory) {
+                    this.sdkApi.storyShowNext();
+                    return false;
+                }
+            }
+            // сбор роутинга - все же в selectAnswer
+            // + pointer - set in select answer and in simple history back naviation
+            // Общее поле в сторис - latest slide with viewed quest item
+            // только если находимся в диапазоне квеста
+            this.localData["_qt_last_slide_idx"] = this.slideIndex;
+            // global flag - был сделан переход на нужный слайд, больше не нужно повторять за эту сессию
+            this.setStorySessionValue("__storyQuestSlideChanged", "1");
+            // если перешли на слайд (через кнопку - на слайд например) то не будет истории в роутере
+            // добавляем сами
+            if (this.getLastSlideIndexFromRouteHistory() !== this.slideIndex) {
+                this._addNewRouteHistory(this.slideIndex);
+            }
+            this.setLocalData(this.localData, true);
+        }
+        this.firstOpenTime = new Date().getTime();
+        return true;
+    }
+    _selectAnswer(index, slideIndex) {
+        // if (this.answers[index]) {
+        //   this.answers[index].classList.add('selected');
+        // }
+        this.selectedAnswer = index;
+        if (this.localData["_qt_g_" + this.elementId + "_sa"] === undefined || !Array.isArray(this.localData["_qt_g_" + this.elementId + "_sa"])) {
+            this.localData["_qt_g_" + this.elementId + "_sa"] = [];
+        }
+        this.localData["_qt_g_" + this.elementId + "_sa"].push([index, slideIndex, Math.round(new Date().getTime() / 1000)]);
+        // ответ на вопрос
+        this.localData["_&ts_qt_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        this.element.classList.add("done");
+        this._addNewRouteHistory(slideIndex);
+    }
+    selectAnswer(answer) {
+        // if (this.selectedAnswer !== undefined) {
+        //   return true;
+        // }
+        var index = this.variants.indexOf(answer);
+        if (index !== -1) {
+            var slideIndex = getValueOrDefault(getTagDataAsNumber(this.variants[index], "score"), 0) - 1;
+            this._selectAnswer(index, slideIndex);
+            this.setLocalData(this.localData, true);
+            this.env.setTimeout(() => {
+                if (slideIndex >= 0 && slideIndex < this.slideCount && this.sdkApi.isExistsShowStorySlide) {
+                    // global flag - был сделан переход на нужный слайд, больше не нужно повторять за эту сессию
+                    this.setStorySessionValue("__storyQuestSlideChanged", "1");
+                    this.sdkApi.showStorySlide(slideIndex);
+                }
+            }, 100);
+        }
+        return true;
+    }
+    isDone() {
+        return this.localData["_qt_done_at"] !== undefined && this.selectedAnswer !== undefined;
+    }
+    slideQuestIsDone() {
+        return this.localData["_qt_g_" + this.elementId + "_sa"] !== undefined && this.selectedAnswer !== undefined;
+    }
+    firstSlideWithQuestIndex() {
+        return getTagDataAsNumber(this.slide, "firstSlideWithQuest") ?? 0;
+    }
+    lastSlideWithQuestIndex() {
+        return getTagDataAsNumber(this.slide, "lastSlideWithQuest") ?? 0;
+    }
+    _getRoutes() {
+        var routes = this.localData["_qt_routes"];
+        if (!Array.isArray(routes)) {
+            routes = [[0], 0];
+        }
+        return routes;
+    }
+    _addNewRouteHistory(route) {
+        var routes = this._getRoutes();
+        var _routes = routes[0].slice(0, routes[1] + 1);
+        routes[0] = _routes.concat([route]);
+        routes[1] = routes[0].length - 1;
+        this.localData["_qt_routes"] = routes;
+    }
+    _routeMvPtrBack() {
+        var routes = this._getRoutes();
+        var newPtr = routes[1] - 1;
+        if (newPtr >= 0 && routes[0][newPtr] !== undefined) {
+            routes[1] = newPtr;
+            this.localData["_qt_routes"] = routes;
+            this.setLocalData(this.localData, true);
+            return routes[0][newPtr];
+        }
+        return false;
+    }
+    getLastSlideIndexFromRouteHistory() {
+        var routes = this._getRoutes();
+        return routes[0][routes[1]];
+    }
+    handleRouteClick(event) {
+        // event: direction ('backward', 'forward') slideIndex, slideCount
+        var directionForward = event.direction === "forward";
+        event.direction === "backward";
+        if (this.isWidget) {
+            if (directionForward) {
+                return;
+            }
+            else {
+                if (event.slideIndex === 0) {
+                    // can click back
+                    event.click();
+                }
+                else {
+                    // by routing - move back
+                    var moveTo = this._routeMvPtrBack();
+                    if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.sdkApi.isExistsShowStorySlide) {
+                        this.sdkApi.showStorySlide(moveTo);
+                    }
+                    if (moveTo === false && this.sdkApi.isExistsShowStorySlide) {
+                        // allow move to start - for broken route history
+                        this.sdkApi.showStorySlide(0);
+                    }
+                }
+                return;
+            }
+        }
+        else {
+            // slides without quest form
+            // simple slide case
+            if (this.nonFinalSlide || event.slideIndex < this.firstSlideWithQuestIndex()) {
+                if (directionForward) {
+                    var nextSlideIndex = event.slideIndex + 1;
+                    if (nextSlideIndex < this.slideCount) {
+                        this._addNewRouteHistory(nextSlideIndex);
+                        this.setLocalData(this.localData, true);
+                        this.sdkApi.showStorySlide(nextSlideIndex);
+                    }
+                    else {
+                        if (this.sdkApi.isExistsShowNextStory) {
+                            this.sdkApi.storyShowNext();
+                        }
+                    }
+                }
+                else {
+                    if (event.slideIndex === 0) {
+                        // move to prev slide
+                        event.click();
+                    }
+                    else {
+                        // by routing - move back
+                        var moveTo = this._routeMvPtrBack();
+                        if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.sdkApi.isExistsShowStorySlide) {
+                            this.sdkApi.showStorySlide(moveTo);
+                        }
+                        if (moveTo === false && this.sdkApi.isExistsShowStorySlide) {
+                            // allow move to start - for broken route history
+                            this.sdkApi.showStorySlide(0);
+                        }
+                    }
+                }
+            }
+            else {
+                // quest final slide
+                if (directionForward) {
+                    // если клик вперед по финальному слайду из любой ветки - то выходим из сторис
+                    // var nextSlideIndex = this.lastSlideWithQuestIndex() + 1;
+                    // if (nextSlideIndex < this.slideCount) {
+                    //   this._addNewRouteHistory(nextSlideIndex);
+                    //   setLocalData(this.localData, true);
+                    //   window._showNarrativeSlide(nextSlideIndex);
+                    // } else {
+                    if (this.sdkApi.isExistsShowNextStory) {
+                        this.sdkApi.storyShowNext();
+                    }
+                    // }
+                }
+                else {
+                    // by routing - move back
+                    var moveTo = this._routeMvPtrBack();
+                    if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.sdkApi.isExistsShowStorySlide) {
+                        this.sdkApi.showStorySlide(moveTo);
+                    }
+                    if (moveTo === false && this.sdkApi.isExistsShowStorySlide) {
+                        // allow move to start - for broken route history
+                        this.sdkApi.showStorySlide(0);
+                    }
+                }
+            }
+        }
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            return new Promise(function (resolve, reject) {
+                WidgetQuest.initWidgets((element, options) => new WidgetQuest(element, options), [element], localData).then(localData => {
+                    const widget = WidgetQuest.getInstance(element);
+                    if (widget) {
+                        resolve(widget.init());
+                    }
+                    else {
+                        resolve(true);
+                    }
+                });
+            });
+        },
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetQuest.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetQuest.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectAnswer(element);
+                }
+            }
+            return false;
+        },
+        slideTestIsDone: function (element) {
+            const widget = WidgetQuest.getInstance(element);
+            if (widget) {
+                return widget.slideQuestIsDone();
+            }
+            return true;
+        },
+        handleRouteClick: function (element, event) {
+            const widget = WidgetQuest.getInstance(element);
+            if (widget) {
+                widget.handleRouteClick(event);
+            }
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetQuiz extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-quiz";
+    question;
+    answers;
+    questionCount;
+    selectedAnswer;
+    constructor(element, options) {
+        super(element, options);
+        this.question = this.element.querySelector(".label-view .label");
+        this.answers = slice.call(this.element.querySelectorAll(".variants-box .variant-view-group"));
+        this.questionCount = getValueOrException(getTagDataAsNumber(this.slide, "quizCount"), "Empty quizCount");
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+        this.selectedAnswer = undefined;
+        if (this.localData) {
+            if (this.localData["_q_g_" + this.elementId + "_sa"] !== undefined) {
+                this._selectAnswer(this.localData["_q_g_" + this.elementId + "_sa"]);
+                this.constructor.setLocalData(this.localData, false);
+            }
+            else {
+                this._clearAnswerSelection();
+            }
+            if (this.localData["_q_fo_at"] === undefined) {
+                this.localData["_q_fo_at"] = Math.round(new Date().getTime() / 1000);
+                this.constructor.setLocalData(this.localData, false);
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+    }
+    _selectAnswer(index) {
+        // var hintContainer = null;
+        // var hintContainerHeight = null;
+        if (this.answers[index]) {
+            this.answers[index].classList.add("selected");
+            // hintContainer = this.answers[index].nextSibling;
+            // if (hintContainer && hintContainer.classList.contains('narrative-element-quiz-answer-hint-container')) {
+            //   hintContainerHeight = hintContainer.getBoundingClientRect().height;
+            //   hintContainer.style.height = 0;
+            // }
+        }
+        this.selectedAnswer = index;
+        this.localData["_q_g_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
+            }
+        });
+        // if (hintContainer && hintContainerHeight && window.requestAnimationFrame) {
+        //   requestAnimationFrame(function() {
+        //     requestAnimationFrame(function() {
+        //       hintContainer.style.height = hintContainerHeight + 'px';
+        //     })
+        //   })
+        // }
+        if (this.disableTimer) {
+            this.showNextSlide();
+        }
+    }
+    _clearAnswerSelection() {
+        forEach(this.answers, function (answer) {
+            answer.classList.remove("selected");
+        });
+        this.selectedAnswer = undefined;
+        this.element.classList.remove("done");
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = "0px";
+            }
+        });
+    }
+    selectAnswer(answer) {
+        if (this.selectedAnswer !== undefined) {
+            return true;
+        }
+        const selectedAnswerIndex = this.answers.indexOf(answer);
+        if (selectedAnswerIndex !== -1) {
+            this._selectAnswer(selectedAnswerIndex);
+            var isCorrect = this.answers[selectedAnswerIndex].classList.contains("check");
+            this.localData["q_score"] = (this.localData["q_score"] === undefined ? 0 : this.localData["q_score"]) + (isCorrect ? 1 : 0);
+            var answeredQuestion = 0;
+            for (var key in this.localData) {
+                if (this.localData.hasOwnProperty(key)) {
+                    if (/^_q_g_[A-z0-9-_]+_sa$/.test(key)) {
+                        answeredQuestion++;
+                    }
+                }
+            }
+            if (this.localData["_q_fa_at"] === undefined) {
+                this.localData["_q_fa_at"] = Math.round(new Date().getTime() / 1000);
+            }
+            if (answeredQuestion === this.questionCount) {
+                this.localData["_q_done_at"] = Math.round(new Date().getTime() / 1000);
+            }
+            // ответ на вопрос
+            this.localData["_&ts_q_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+            this.setLocalData(this.localData, true);
+            if (this.widgetDone) {
+                this.widgetDone.classList.add("active", "opacity-active");
+                const self = this;
+                setTimeout(function () {
+                    self.widgetDone?.classList.remove("active");
+                    setTimeout(function () {
+                        self.widgetDone?.classList.remove("opacity-active");
+                    }, 250);
+                }, 2000);
+            }
+            try {
+                var questionText = this.question ? this.question.textContent ?? "" : "";
+                let answerText = "";
+                if (this.answers[selectedAnswerIndex]) {
+                    const answerLabel = this.answers[selectedAnswerIndex].querySelector(".variant-view .label");
+                    if (answerLabel != null && answerLabel.textContent != null) {
+                        answerText = answerLabel.textContent;
+                    }
+                }
+                var duration = new Date().getTime() - this.firstOpenTime;
+                WidgetBase.sendStatisticEventToApp("w-quiz-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: questionText,
+                    wa: selectedAnswerIndex,
+                    wal: answerText,
+                    d: duration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: questionText,
+                    widget_answer: selectedAnswerIndex,
+                    widget_answer_label: answerText,
+                    duration_ms: duration,
+                });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        return false;
+    }
+    isDone() {
+        return this.localData["_q_done_at"] !== undefined;
+    }
+    slideQuizIsDone() {
+        return this.localData["_q_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
+        },
+        /**
+         * click on quiz answer
+         */
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetQuiz.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetQuiz.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectAnswer(element);
+                }
+            }
+            return false;
+        },
+        slideQuizIsDone: function (element) {
+            const widget = WidgetQuiz.getInstance(element);
+            if (widget) {
+                return widget.slideQuizIsDone();
+            }
+            return true;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetQuizGrouped extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-quiz-grouped";
+    question;
+    answers;
+    questionCount;
+    selectedAnswer;
+    /**
+     * @throws Error
+     * @param element
+     * @param options
+     */
+    constructor(element, options) {
+        super(element, options);
+        this.question = this.element.querySelector(".label-view .label");
+        this.answers = slice.call(this.element.querySelectorAll(".variants-box .variant-view-group"));
+        this.questionCount = getValueOrException(getTagDataAsNumber(this.slide, "quizCount"), "Empty quizCount");
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+        this.selectedAnswer = undefined;
+        if (this.localData) {
+            if (this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined) {
+                this._selectAnswer(this.localData["_q_gg_" + this.elementId + "_sa"]);
+                // this._updateScore(this.localData['_q_gg_' + this.elementId + '_sa']);
+                this.setLocalData(this.localData, false);
+            }
+            else {
+                this._clearAnswerSelection();
+            }
+            if (this.localData["_qg_fo_at"] === undefined) {
+                this.localData["_qg_fo_at"] = Math.round(new Date().getTime() / 1000);
+                this.setLocalData(this.localData, false);
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+    }
+    _selectAnswer(index) {
+        if (this.answers[index]) {
+            this.answers[index].classList.add("selected");
+        }
+        this.selectedAnswer = index;
+        this.localData["_q_gg_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            }
+        });
+        if (this.disableTimer) {
+            this.showNextSlide();
+        }
+    }
+    _clearAnswerSelection() {
+        forEach(this.answers, function (answer) {
+            answer.classList.remove("selected");
+        });
+        this.selectedAnswer = undefined;
+        this.element.classList.remove("done");
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = "0px";
+            }
+        });
+    }
+    _updateScore(index) {
+        const answerValue = getValueOrDefault(getTagDataAsNumber(this.answers[index], "value"), index);
+        if (this.localData["qg_score"] == null) {
+            this.localData["qg_score"] = {};
+        }
+        var sum = 0;
+        for (var i = 0; i < this.answers.length; i++) {
+            if (this.localData["qg_score"][i] == null) {
+                this.localData["qg_score"][i] = 0;
+            }
+            sum += this.localData["qg_score"][i];
+        }
+        // если еще не ответили на все
+        if (sum < this.questionCount) {
+            this.localData["qg_score"][answerValue] += 1;
+            var answeredQuestion = 0;
+            for (var key in this.localData) {
+                if (this.localData.hasOwnProperty(key)) {
+                    if (/^_q_gg_[A-z0-9-_]+_sa$/.test(key)) {
+                        answeredQuestion++;
+                    }
+                }
+            }
+            if (this.localData["_qg_fa_at"] === undefined) {
+                this.localData["_qg_fa_at"] = Math.round(new Date().getTime() / 1000);
+            }
+            if (this.localData["_qg_done_at"] === undefined) {
+                if (answeredQuestion === this.questionCount) {
+                    this.localData["_qg_done_at"] = Math.round(new Date().getTime() / 1000);
+                }
+            }
+            // ответ на вопрос
+            this.localData["_&ts_qg_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+            this.setLocalData(this.localData, true);
+        }
+    }
+    selectAnswer(answer) {
+        if (this.selectedAnswer != null) {
+            return true;
+        }
+        const selectedAnswerIndex = this.answers.indexOf(answer);
+        if (selectedAnswerIndex !== -1) {
+            this._selectAnswer(selectedAnswerIndex);
+            this._updateScore(selectedAnswerIndex);
+            if (this.widgetDone) {
+                this.widgetDone.classList.add("active", "opacity-active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("active");
+                    setTimeout(() => {
+                        this.widgetDone?.classList.remove("opacity-active");
+                    }, 250);
+                }, 2000);
+            }
+            try {
+                var questionText = this.question ? this.question.textContent ?? "" : "";
+                var answerText = "";
+                if (this.answers[selectedAnswerIndex]) {
+                    var answerLabel = this.answers[selectedAnswerIndex].querySelector(".variant-view .label");
+                    if (answerLabel != null) {
+                        answerText = answerLabel.textContent ?? "";
+                    }
+                }
+                var duration = new Date().getTime() - this.firstOpenTime;
+                WidgetBase.sendStatisticEventToApp("w-quiz-grouped-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: questionText,
+                    wa: selectedAnswerIndex,
+                    wal: answerText,
+                    d: duration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: questionText,
+                    widget_answer: selectedAnswerIndex,
+                    widget_answer_label: answerText,
+                    duration_ms: duration,
+                });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        return false;
+    }
+    isDone() {
+        return this.localData["_qg_done_at"] !== undefined;
+    }
+    slideQuizIsDone() {
+        return this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
+        },
+        /**
+         * click on quiz answer
+         */
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetQuizGrouped.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetQuizGrouped.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectAnswer(element);
+                }
+            }
+            return false;
+        },
+        slideQuizIsDone: function (element) {
+            const widget = WidgetQuizGrouped.getInstance(element);
+            if (widget) {
+                return widget.slideQuizIsDone();
+            }
+            return true;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+// Polyfill Number.isNaN(value)
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
+Number.isNaN =
+    Number.isNaN ||
+        function (value) {
+            return typeof value === "number" && value !== value;
+        };
+const constants = {
+    orientation: {
+        horizontal: {
+            dimension: "width",
+            direction: "left",
+            directionStyle: {
+                ltr: "left",
+                rtl: "right",
+            },
+            coordinate: "x",
+        },
+        vertical: {
+            dimension: "height",
+            direction: "top",
+            directionStyle: {
+                ltr: "bottom",
+                rtl: "bottom",
+            },
+            coordinate: "y",
+        },
+    },
+};
+/**
+ * Check if a `element` is visible in the DOM
+ *
+ * @param  {Element}  element
+ * @return {Boolean}
+ */
+function isHidden(element) {
+    return Boolean(element &&
+        (element.offsetWidth === 0 ||
+            element.offsetHeight === 0 ||
+            // Also Consider native `<details>` elements.
+            element.open === false));
+}
+/**
+ * Get hidden parentNodes of an `element`
+ *
+ * @param  {Element} element
+ * @return {[type]}
+ */
+function getHiddenParentNodes(element) {
+    var parents = [], node = element.parentNode;
+    while (isHidden(node)) {
+        parents.push(node);
+        node = node.parentNode;
+    }
+    return parents;
+}
+/**
+ * Returns dimensions for an element even if it is not visible in the DOM.
+ *
+ * @param  {Element} element
+ * @param  {String}  key     (e.g. offsetWidth …)
+ * @return {Number}
+ */
+function getDimension(element, key) {
+    getHiddenParentNodes(element);
+    // if (hiddenParentNodesLength) {
+    //   for (var i = 0; i < hiddenParentNodesLength; i++) {
+    //
+    //     // Cache style attribute to restore it later.
+    //     inlineStyle[i] = hiddenParentNodes[i].style.cssText;
+    //
+    //     // visually hide
+    //     if (hiddenParentNodes[i].style.setProperty) {
+    //       hiddenParentNodes[i].style.setProperty('display', 'block', 'important');
+    //     } else {
+    //       hiddenParentNodes[i].style.cssText += ';display: block !important';
+    //     }
+    //     hiddenParentNodes[i].style.height     = '0';
+    //     hiddenParentNodes[i].style.overflow   = 'hidden';
+    //     hiddenParentNodes[i].style.visibility = 'hidden';
+    //     toggleOpenProperty(hiddenParentNodes[i]);
+    //   }
+    //
+    //   // Update dimension
+    //   dimension = element[key];
+    //
+    //   for (var j = 0; j < hiddenParentNodesLength; j++) {
+    //
+    //     // Restore the style attribute
+    //     hiddenParentNodes[j].style.cssText = inlineStyle[j];
+    //     toggleOpenProperty(hiddenParentNodes[j]);
+    //   }
+    // }
+    return element[key];
+}
+/**
+ * Returns the parsed float or the default if it failed.
+ *
+ * @param  {String}  str
+ * @param  {Number}  defaultValue
+ * @return {Number}
+ */
+function tryParseFloat(str, defaultValue) {
+    if (str == null) {
+        return defaultValue;
+    }
+    var value = parseFloat(str);
+    return Number.isNaN(value) ? defaultValue : value;
+}
+/**
+ * Capitalize the first letter of string
+ *
+ * @param  {String} str
+ * @return {String}
+ */
+function ucfirst(str) {
+    return str.charAt(0).toUpperCase() + str.substr(1);
+}
+class WidgetRangeSlider extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+        rangeClass: "slider-view",
+        activeClass: "rangeslider--active",
+        horizontalClass: "rangeslider--horizontal",
+        verticalClass: "rangeslider--vertical",
+        fillClass: "slider-fill-view",
+        handleClass: "slider-handle-view",
+    };
+    static widgetClassName = "narrative-element-range-slider";
+    label;
+    topScale;
+    startValue;
+    snapPosition;
+    hasSubmitButton;
+    elementSlider;
+    elementAverageResult;
+    elementAverageResultTooltip;
+    elementAverageResultTooltipLabelView;
+    orientation;
+    min;
+    max;
+    value;
+    step;
+    toFixed;
+    fill;
+    handle;
+    range;
+    DIMENSION;
+    DIRECTION;
+    DIRECTION_STYLE;
+    COORDINATE;
+    isClickCapturedBySlider = false;
+    handleDimension;
+    rangeDimension;
+    maxHandlePos;
+    grabPos;
+    position;
+    prevSnapValue;
+    /**
+     * @throws Error
+     * @param element
+     * @param options
+     */
+    constructor(element, options) {
+        super(element, options);
+        this.hasSubmitButton = Boolean(this.element.querySelector(".submit-button-view"));
+        this.topScale = this.element.querySelector(".top-scale-bar-view-group");
+        this.snapPosition = false;
+        try {
+            this.snapPosition = this.topScale != null && this.topScale.getBoundingClientRect().height > 0;
+        }
+        catch (e) {
+            console.error(e);
+        }
+        this.startValue = tryParseFloat(getTagData(this.element, "startValue"), 0);
+        this.label = this.element.querySelector(".label-view .label");
+        this.elementSlider = getValueOrException(this.element.querySelector('input[type="range"]'), "Empty elementSlider");
+        this.elementAverageResult = this.element.querySelector(".slider-average-result-view");
+        if (this.elementAverageResult != null) {
+            this.elementAverageResultTooltip = this.elementAverageResult.querySelector(".tooltip-view");
+            if (this.elementAverageResultTooltip != null) {
+                this.elementAverageResultTooltipLabelView = this.elementAverageResult.querySelector(".average-result-label-view");
+            }
+        }
+        this.toFixed = (this.step + "").replace(".", "").length - 1;
+        this.fill = getValueOrException(this.element.querySelector(`.${this.options.fillClass}`), `Empty .${this.options.fillClass}`);
+        this.handle = getValueOrException(this.element.querySelector(`.${this.options.handleClass}`), `Empty .${this.options.handleClass}`);
+        this.range = getValueOrException(this.element.querySelector(`.${this.options.rangeClass}`), `Empty .${this.options.rangeClass}`);
+        this.range.id = this.id;
+        // if (this.range.classList.contains(this.options['horizontalClass'])) {
+        this.orientation = "horizontal";
+        // } else if (this.range.classList.contains(this.options['verticalClass'])) {
+        //   this.orientation = 'vertical';
+        // }
+        this.DIMENSION = constants.orientation[this.orientation].dimension;
+        this.DIRECTION = constants.orientation[this.orientation].direction;
+        this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.layoutDirection];
+        this.COORDINATE = constants.orientation[this.orientation].coordinate;
+        // Store context
+        this.handleDown = proxy(this.handleDown, this);
+        this.handleMove = proxy(this.handleMove, this);
+        this.handleEnd = proxy(this.handleEnd, this);
+        this.refreshUserData(this.options.localData);
+        // Attach Events
+        // window.addEventListener('resize.' + this.identifier, debounce(function() {
+        //   // Simulate resizeEnd event.
+        //   delay(function() {
+        //     _this.update(false, false);
+        //   }, 300);
+        // }, 20));
+        this.env.document.addEventListener("touchstart", this.handleDown);
+        this.env.document.addEventListener("mousedown", this.handleDown);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, 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.showNextSlide();
+            }
+        }
+        else {
+            this.elementSlider.value = String(this.startValue);
+            this.element.classList.remove("done");
+            this.element.classList.remove("input-done");
+        }
+        this.init();
+    }
+    _statEventInputSave(val) {
+        try {
+            const labelText = this.label?.textContent ?? "";
+            this.sendStatisticEventToApp("w-range-slider-answer", {
+                i: this.storyId,
+                si: this.slideIndex,
+                wi: this.elementId,
+                wl: labelText,
+                wa: val,
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                widget_id: this.elementId,
+                widget_label: labelText,
+                widget_answer: val,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    click() {
+        if (this.isDone()) {
+            return true;
+        }
+        this.completeWidget();
+        return false;
+    }
+    completeWidget() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.localData["_rs_g_" + this.elementId + "_v"] = tryParseFloat(this.elementSlider.value, 0);
+        this.localData["_rs_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // answer for question
+        this.localData["_&ts_rs_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        // hide submit button
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = "0px";
+                setTimeout(() => {
+                    // important, displayAverageAnswer need .done at element
+                    this.element.classList.add("done");
+                    this.displayAverageAnswer(true);
+                }, 200);
+            }
+            else {
+                // important, displayAverageAnswer need .done at element
+                this.element.classList.add("done");
+                this.displayAverageAnswer(true);
+            }
+        });
+        // if (this.disableTimer) {
+        this.showNextSlide();
+        // }
+        this.setLocalData(this.localData, true);
+        this._statEventInputSave(this.localData["_rs_g_" + this.elementId + "_v"]);
+    }
+    isDone() {
+        return this.localData["_rs_g_" + this.elementId + "_v"] != null;
+    }
+    getIsClickCapturedBySlider() {
+        return this.isClickCapturedBySlider;
+    }
+    displayAverageAnswer(withTooltip = false) {
+        let answerAllocation = {
+            total_value: 0,
+            total_user: 0,
+        };
+        let answerAllocationTs = undefined;
+        const sharedData = this.sdkApi.getWidgetsSharedData(this.storyId, "rangeSlider" /* Widgets.RangeSlider */);
+        if (sharedData && sharedData[this.elementId] != null && (isObject(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
+            answerAllocation = sharedData[this.elementId];
+            answerAllocationTs = sharedData.ts;
+        }
+        const rangeSliderDoneAt = this.localData["_rs_g_" + this.elementId + "_done_at"];
+        if (answerAllocationTs === undefined || rangeSliderDoneAt === undefined || rangeSliderDoneAt > answerAllocationTs) {
+            answerAllocation["total_value"] += this.localData["_rs_g_" + this.elementId + "_v"];
+            ++answerAllocation["total_user"];
+        }
+        let averageValue = null;
+        if (answerAllocation["total_user"] !== undefined &&
+            isNumber(answerAllocation["total_user"]) &&
+            answerAllocation["total_value"] !== undefined &&
+            isNumber(answerAllocation["total_value"])) {
+            averageValue = Math.round((answerAllocation["total_value"] / answerAllocation["total_user"]) * 10) / 10;
+        }
+        if (this.elementAverageResult != null && averageValue !== null) {
+            this.update(true, false);
+            const positionDimension = this.env.document.documentElement.dir === "rtl" ? "right" : "left";
+            const position = this.getPositionFromValue(averageValue) + this.handleDimension / 2;
+            this.elementAverageResult.style[positionDimension] = position + "px";
+            // this.elementAverageResult.style.display = 'block';
+            if (withTooltip && this.elementAverageResultTooltipLabelView != null && this.element != null) {
+                if (!this.elementAverageResultTooltip?.classList.contains("visible")) {
+                    this.elementAverageResultTooltip?.classList.add("visible");
+                    setTimeout(() => {
+                        if (this.elementAverageResultTooltip && this.elementAverageResultTooltip.classList) {
+                            this.elementAverageResultTooltip.classList.remove("visible");
+                        }
+                    }, 3000);
+                }
+                this.env.requestAnimationFrame(() => {
+                    var elementBox = this.element.getBoundingClientRect();
+                    var labelViewBox = this.elementAverageResultTooltipLabelView?.getBoundingClientRect();
+                    var offset = 0;
+                    // console.log({labelViewBox, elementBox})
+                    if (labelViewBox && labelViewBox.width !== 0) {
+                        if (labelViewBox.right > elementBox.right) {
+                            // get -x for translateX with offset to left
+                            offset = elementBox.right - labelViewBox.right;
+                        }
+                        else if (labelViewBox.left < elementBox.left) {
+                            // get +x for translateX with offset to right
+                            offset = elementBox.left - labelViewBox.left;
+                        }
+                    }
+                    if (offset !== 0) {
+                        this.elementAverageResultTooltipLabelView?.style.setProperty("transform", "translateX(" + offset + "px)");
+                    }
+                });
+            }
+        }
+    }
+    init() {
+        if (!this.maxHandlePos) {
+            this.env.setTimeout(() => {
+                this.update(true, false);
+            }, 10);
+        }
+        else {
+            this.update(true, false);
+        }
+    }
+    update(updateAttributes, triggerSlide) {
+        updateAttributes = updateAttributes || false;
+        if (updateAttributes) {
+            this.min = tryParseFloat(this.elementSlider.getAttribute("min"), 0);
+            this.max = tryParseFloat(this.elementSlider.getAttribute("max"), 100);
+            this.value = tryParseFloat(this.elementSlider.value, Math.round(this.min + (this.max - this.min) / 2));
+            this.step = tryParseFloat(this.elementSlider.getAttribute("step"), 1);
+        }
+        this.handleDimension = getDimension(this.handle, ("offset" + ucfirst(this.DIMENSION)));
+        this.rangeDimension = getDimension(this.range, ("offset" + ucfirst(this.DIMENSION)));
+        this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.grabPos = this.handleDimension / 2;
+        this.position = this.getPositionFromValue(this.value);
+        if (updateAttributes) {
+            // Snapping steps
+            this.prevSnapValue = this.getValueFromPosition(this.cap(this.position, 0, this.maxHandlePos));
+        }
+        this.setPosition(this.position, triggerSlide);
+    }
+    handleDown(e) {
+        if (this.isDone()) {
+            return;
+        }
+        let rangeslider = e.target;
+        if (!rangeslider.classList.contains("slider-view")) {
+            rangeslider = rangeslider.closest(".slider-view");
+        }
+        if (!rangeslider) {
+            return;
+        }
+        if (rangeslider.id !== this.id) {
+            return;
+        }
+        e.preventDefault();
+        this.isClickCapturedBySlider = true;
+        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);
+        // add active class because Firefox is ignoring
+        // the handle:active pseudo selector because of `e.preventDefault();`
+        this.range.classList.add(this.options.activeClass);
+        // If we click on the handle don't set the new position
+        if ((" " + e.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1) {
+            return;
+        }
+        var pos = this.getRelativePosition(e), rangePos = this.range.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
+        this.setPosition(setPos);
+        if (pos >= handlePos && pos < handlePos + this.handleDimension) {
+            this.grabPos = pos - handlePos;
+        }
+    }
+    handleMove(e) {
+        e.preventDefault();
+        var pos = this.getRelativePosition(e);
+        var setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
+        this.setPosition(setPos);
+    }
+    handleEnd(e) {
+        this.env.requestAnimationFrame(() => {
+            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.range.classList.remove(this.options.activeClass);
+        this.element.classList.add("input-done");
+        if (!this.hasSubmitButton) {
+            this.completeWidget();
+        }
+        else {
+            this.env.requestAnimationFrame(() => {
+                if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                    this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+                }
+            });
+        }
+        // Ok we're done fire the change event
+        // this.$element.trigger('change', {origin: this.identifier});
+    }
+    cap = function (pos, min, max) {
+        if (pos < min) {
+            return min;
+        }
+        if (pos > max) {
+            return max;
+        }
+        return pos;
+    };
+    setPosition(pos, triggerSlide) {
+        var value, newPos;
+        // Snapping steps
+        value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandlePos));
+        newPos = this.getPositionFromValue(value);
+        // Update ui
+        var uiPos = newPos;
+        // invert pos for rtl
+        if (this.orientation === "horizontal" && this.layoutDirection === "rtl") {
+            uiPos = this.maxHandlePos - uiPos;
+        }
+        // this.rangeDimension - slider width
+        this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
+        // this.fill.style[this.DIMENSION]         = (uiPos + this.grabPos) + 'px';
+        var percentage = this.getPercentageFromValue(value);
+        // 1 + (scale - 1) * percentage
+        this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
+        // this.handle.style[this.DIRECTION_STYLE] = uiPos + 'px';
+        this.setValue(value);
+        // Update globals
+        this.position = newPos;
+        this.value = value;
+        if (this.snapPosition) {
+            const stepItem = String(Math.round(this.value / this.step));
+            this.fill.setAttribute("data-step-item", stepItem);
+            if (this.value !== this.prevSnapValue) {
+                this.prevSnapValue = this.value;
+                try {
+                    this.sdkApi.vibrate(20);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+            }
+        }
+    }
+    // Returns element position relative to the parent
+    getPositionFromNode(node) {
+        var i = 0;
+        while (node !== null) {
+            i += node.offsetLeft;
+            node = node.offsetParent;
+        }
+        return i;
+    }
+    getRelativePosition(e) {
+        // Get the offset DIRECTION relative to the viewport
+        const ucCoordinate = ucfirst(this.COORDINATE);
+        const ucCoordinateClient = `client${ucCoordinate}`;
+        const rangePos = this.range.getBoundingClientRect()[this.DIRECTION];
+        let pageCoordinate = 0;
+        if (typeof e[ucCoordinateClient] !== "undefined") {
+            pageCoordinate = e[ucCoordinateClient];
+        }
+        else if (e.touches && e.touches[0] && typeof e.touches[0][ucCoordinateClient] !== "undefined") {
+            pageCoordinate = e.touches[0][ucCoordinateClient];
+            // @ts-ignore
+        }
+        else if (e.currentPoint && typeof e.currentPoint[this.COORDINATE] !== "undefined") {
+            // @ts-ignore
+            pageCoordinate = e.currentPoint[this.COORDINATE];
+        }
+        return pageCoordinate - rangePos;
+    }
+    getPercentageFromValue(value) {
+        var percentage;
+        percentage = (value - this.min) / (this.max - this.min);
+        // invert pos for rtl
+        if (this.orientation === "horizontal" && this.layoutDirection === "rtl") {
+            percentage = 1 - percentage;
+        }
+        return percentage;
+    }
+    getPositionFromValue(value) {
+        var percentage, pos;
+        percentage = (value - this.min) / (this.max - this.min);
+        // invert pos for rtl
+        if (this.orientation === "horizontal" && this.layoutDirection === "rtl") {
+            percentage = 1 - percentage;
+        }
+        pos = !Number.isNaN(percentage) ? percentage * this.maxHandlePos : 0;
+        return pos;
+    }
+    getValueFromPosition(pos) {
+        var percentage, value;
+        percentage = pos / (this.maxHandlePos || 1);
+        // invert pos for rtl
+        if (this.orientation === "horizontal" && this.layoutDirection === "rtl") {
+            percentage = 1 - percentage;
+        }
+        value = this.step * Math.round((percentage * (this.max - this.min)) / this.step) + this.min;
+        return Number(value.toFixed(this.toFixed));
+    }
+    setValue(value) {
+        if (value === this.value && this.elementSlider.value !== "") {
+            return;
+        }
+        // Set the new value and fire the `input` event
+        this.elementSlider.value = String(value);
+        // .val(value)
+        // .trigger('input', {origin: this.identifier});
+    }
+    destroy() {
+        this.env.document.removeEventListener("touchstart", this.handleDown);
+        this.env.document.removeEventListener("mousedown", this.handleDown);
+        // off resize event
+        // this.$window.off('.' + this.identifier);
+        // this.$element
+        //   .off('.' + this.identifier)
+        //   .removeAttr('style')
+        //   .removeData('plugin_' + pluginName);
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
+        },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetRangeSlider.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetRangeSlider.getInstance(widgetElement);
+                if (widget) {
+                    return widget.click();
+                }
+            }
+            return true;
+        },
+        isClickCapturedBySlider: function (element) {
+            const widgetElement = element.closest(`.${WidgetRangeSlider.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetRangeSlider.getInstance(widgetElement);
+                if (widget) {
+                    return widget.getIsClickCapturedBySlider();
+                }
+            }
+            return false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetRate extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-rate";
+    elementRect;
+    label;
+    nativeDialogueWasOpened = false;
+    stars;
+    submitToStores;
+    submitToStoresMin;
+    submitToStoresMax;
+    showDialogOnLowRate;
+    showDialogueMin;
+    showDialogueMax;
+    selectedStar;
+    answerSelectDuration;
+    constructor(element, options) {
+        super(element, options);
+        this.elementRect = this.element.getBoundingClientRect();
+        this.label = this.element.querySelector(".label-view .label");
+        this.stars = slice.call(this.element.querySelectorAll(".input-view"));
+        this.submitToStores = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "submitToStores"), 0));
+        this.submitToStoresMin = getValueOrDefault(getTagDataAsNumber(this.element, "submitToStoresMin"), 4);
+        this.submitToStoresMax = getValueOrDefault(getTagDataAsNumber(this.element, "submitToStoresMax"), 5);
+        this.showDialogOnLowRate = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "showDialogOnLowRate"), 0));
+        this.showDialogueMin = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMin"), 1);
+        this.showDialogueMax = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMax"), 3);
+        this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+        this.selectedStar = undefined;
+        if (this.localData) {
+            if (this.localData["_r_g_" + this.elementId + "_ss"] !== undefined) {
+                this._selectStar(this.localData["_r_g_" + this.elementId + "_ss"], true);
+            }
+            else {
+                this._clearSelectedStar();
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+        this.answerSelectDuration = 0;
+        this.nativeDialogueWasOpened = false;
+    }
+    _statEventRateUsAnswer(answerText) {
+        try {
+            var labelText = this.label?.textContent ?? "";
+            if (this.selectedStar != null) {
+                var selectedAnswer = this.selectedStar + 1;
+                this.sendStatisticEventToApp("w-rate-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: selectedAnswer,
+                    wv: answerText,
+                    d: this.answerSelectDuration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_answer: selectedAnswer,
+                    widget_value: answerText,
+                    duration_ms: this.answerSelectDuration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _selectStar(value, runTimer) {
+        var list = [];
+        var i;
+        for (i = 0; i < this.stars.length; i++) {
+            list[i] = this.stars[i];
+        }
+        forEach(list, (element, idx) => {
+            const key = idx;
+            if (key <= value) {
+                element.classList.add("fill");
+            }
+        });
+        if (list[value]) {
+            list[value].classList.add("selected");
+        }
+        this.selectedStar = value;
+        this.localData["_r_g_" + this.elementId + "_ss"] = value;
+        this.element.classList.add("done");
+        if (this.disableTimer && runTimer) {
+            this.showNextSlide();
+        }
+    }
+    _clearSelectedStar() {
+        forEach(this.stars, function (element) {
+            element.classList.remove("fill");
+            element.classList.remove("selected");
+        });
+        this.element.classList.remove("done");
+    }
+    selectStar(starElement) {
+        if (this.selectedStar !== undefined) {
+            return true;
+        }
+        var index = this.stars.indexOf(starElement);
+        this.stars.length;
+        var value = index;
+        // if (this.layoutDirection === 'rtl') {
+        //   value = length - index + 1;
+        // }
+        this.nativeDialogueWasOpened = false;
+        if (value !== -1) {
+            this.answerSelectDuration = new Date().getTime() - this.firstOpenTime;
+            // 1-3 stars (default)
+            if (value + 1 >= this.showDialogueMin && value + 1 <= this.showDialogueMax) {
+                this.selectedStar = value;
+                this._selectStar(this.selectedStar, false);
+                if (this.showDialogOnLowRate) {
+                    if (this.sdkApi.isAndroid) {
+                        this.slide.classList.add("blured");
+                    }
+                    this.slide.classList.add("data-input-editing");
+                    const dataString = this.element.dataset["clientdialogwidgetconfig"];
+                    if (this.sdkApi.isExistsShowStoryTextInput && dataString) {
+                        const data = JSON.parse(dataString);
+                        data.size = getElementBounding(this.env, this.elementRect);
+                        if (!this.disableTimer) {
+                            this.sdkApi.pauseUI();
+                        }
+                        this.nativeDialogueWasOpened = true;
+                        try {
+                            data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                            data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                            data.configV2.main.question.text.value = data.configV2.main.question.text.value
+                                .replaceAll("\\n", "\n")
+                                .replaceAll("\\r", "\r")
+                                .replaceAll("\\t", "\t");
+                            data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
+                                .replaceAll("\\n", "\n")
+                                .replaceAll("\\r", "\r")
+                                .replaceAll("\\t", "\t");
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                        this.sdkApi.showStoryTextInput(this.id, data);
+                    }
+                }
+                else {
+                    this.completeWidget();
+                    this._statEventRateUsAnswer("");
+                }
+                return false;
+            }
+            else if (value + 1 >= this.submitToStoresMin && value + 1 <= this.submitToStoresMax) {
+                var target = null;
+                if (this.sdkApi.isAndroid) {
+                    target = getTagData(this.element, "androidLink");
+                }
+                else if (this.sdkApi.isIOS) {
+                    target = getTagData(this.element, "appleLink");
+                }
+                this._selectStar(value, false);
+                this.completeWidget();
+                this._statEventRateUsAnswer("");
+                if (this.submitToStores && target) {
+                    this.sdkApi.openUrl(target);
+                }
+            }
+            else {
+                this._selectStar(value, false);
+                this.completeWidget();
+                this._statEventRateUsAnswer("");
+            }
+        }
+        return false;
+    }
+    setUserText(text) {
+        this.slide.classList.remove("data-input-editing");
+        this.slide.classList.remove("blured");
+        if (this.selectedStar != null) {
+            this._selectStar(this.selectedStar, true);
+        }
+        if (!this.disableTimer && this.nativeDialogueWasOpened) {
+            this.sdkApi.resumeUI();
+            this.nativeDialogueWasOpened = false;
+        }
+        this.localData["_r_g_" + this.elementId + "_user_response"] = text;
+        this.completeWidget();
+        this._statEventRateUsAnswer(text);
+    }
+    completeWidget() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.localData["_r_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // ответ на вопрос
+        this.localData["_&ts_r_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        this.setLocalData(this.localData, true);
+    }
+    isDone() {
+        return this.localData["_r_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    slideRateIsDone() {
+        return this.localData["_r_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (nodeList, localData) {
+            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), slice.call(nodeList), localData);
+        },
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetRate.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetRate.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectStar(element);
+                }
+            }
+            return false;
+        },
+        slidePollIsDone: function (element) {
+            const widget = WidgetRate.getInstance(element);
+            if (widget) {
+                return widget.slideRateIsDone();
+            }
+            return true;
+        },
+        setUserData: function (id, text) {
+            WidgetRate.getInstanceById(id)?.setUserText(text);
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetShare extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+        layers: [],
+    };
+    static widgetClassName = "narrative-element-share";
+    layers;
+    shareType;
+    shareTarget;
+    withLayer;
+    btnDisabled;
+    constructor(element, options) {
+        super(element, options);
+        this.shareType = getTagData(this.element, "shareType");
+        this.shareTarget = getTagData(this.element, "shareTarget");
+        this.layers = this.options.layers;
+        this.withLayer = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "withLayer"), 0));
+        if (this.withLayer) {
+            if (this.isDone()) {
+                this._showLayout(this.layers, 1);
+            }
+            else {
+                this._showLayout(this.layers, 0);
+            }
+        }
+        this.btnDisabled = false;
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    _statEventShare(result, via) {
+        try {
+            var buttonText = this.element.textContent ?? "";
+            this.sendStatisticEventToApp("w-share", {
+                i: this.storyId,
+                si: this.slideIndex,
+                wi: this.elementId,
+                wl: buttonText,
+                wt: this.shareTarget ?? "",
+                wa: result ? 1 : 0,
+                wal: via ?? "",
+            }, {
+                story_id: this.storyId,
+                slide_index: this.slideIndex,
+                widget_id: this.elementId,
+                widget_label: buttonText,
+                widget_value: this.shareTarget ?? "",
+                widget_answer: result ? 1 : 0,
+                widget_answer_label: via ?? "",
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    share() {
+        if (!this.btnDisabled) {
+            if (this.sdkApi.isExistsShare) {
+                if (this.sdkApi.sdkCanSendShareComplete) {
+                    this.btnDisabled = true;
+                }
+                if (this.shareType === "url" || this.shareType === "story") {
+                    this.sdkApi.share(this.id, {
+                        url: this.shareTarget, // sdk old versions
+                        text: this.shareTarget,
+                        title: null,
+                        files: null,
+                    });
+                }
+                else if (this.shareType === "slide") {
+                    this.sdkApi.shareSlideScreenshot(this.id, "[data-element-id='" + this.elementId + "']");
+                }
+            }
+        }
+    }
+    _complete(isSuccess) {
+        if (!this.localData["_s_" + this.elementId + "_ts"] && isSuccess) {
+            this.localData["_s_" + this.elementId + "_ts"] = Math.round(new Date().getTime() / 1000);
+            // `answer_at` time
+            this.localData["_&ts_s_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+            this.setLocalData(this.localData, true);
+        }
+        this._statEventShare(isSuccess, null);
+        if (isSuccess && this.withLayer) {
+            this._showLayout(this.layers, 1, true);
+        }
+        this.btnDisabled = false;
+    }
+    isDone() {
+        return Boolean(this.localData["_s_" + this.elementId + "_ts"]);
+    }
+    static api = {
+        ...WidgetBase.api,
+        // signature variants
+        // (widget, layers, undefined) - modern web sdk
+        // (widget, undefined, layers) - old web sdk and rn
+        // (widget, layers, localData) - native sdk
+        initWidget: function (nodeList, layers, localData) {
+            if (layers === undefined && localData !== undefined) {
+                // @ts-ignore
+                layers = localData;
+                localData = undefined;
+            }
+            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), slice.call(nodeList), localData);
+        },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetShare.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetShare.getInstance(widgetElement);
+                if (widget) {
+                    widget.share();
+                }
+            }
+        },
+        complete: function (id, isSuccess) {
+            WidgetShare.getInstanceById(id)?._complete(isSuccess);
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetTest extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-test";
+    label;
+    variants;
+    testCount;
+    selectedAnswer;
+    withTimeToAnswer;
+    answerTimeout;
+    tick;
+    cancelTick;
+    animationFrameId;
+    startTimerAt;
+    timeLeft;
+    timeLeftDefault;
+    timeline;
+    constructor(element, options) {
+        super(element, options);
+        this.label = this.element.querySelector(".label-view .label");
+        this.variants = slice.call(this.element.querySelectorAll(".variants-box .variant-view"));
+        this.testCount = getValueOrException(getTagDataAsNumber(this.slide, "testCount"), "Empty testCount");
+        this.withTimeToAnswer = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "withTimeToAnswer"), 0));
+        this.answerTimeout = getValueOrDefault(getTagDataAsNumber(this.element, "answerTimeout"), 0);
+        this.selectedAnswer = undefined;
+        if (this.localData) {
+            if (this.localData["_t_g_" + this.elementId + "_sa"] !== undefined) {
+                this._selectAnswer(this.localData["_t_g_" + this.elementId + "_sa"]);
+                this.setLocalData(this.localData, false);
+            }
+            if (this.localData["_t_fo_at"] === undefined) {
+                this.localData["_t_fo_at"] = Math.round(new Date().getTime() / 1000);
+                this.setLocalData(this.localData, false);
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+        this.tick = () => {
+            this.animationFrameId = this.env.requestAnimationFrame(() => {
+                this.tick();
+            });
+            // update timer
+            // update timeline position
+            if (this.startTimerAt) {
+                // if (this.state.timeLeft - this.timeLeft >= 950) {
+                //   this.setState({timeLeft: this.timeLeft});
+                // }
+                var timeNow = new Date().getTime();
+                this.timeLeft -= timeNow - this.startTimerAt;
+                this.startTimerAt = timeNow;
+                if (this.timeLeft <= 0) {
+                    this.timeLeft = 0;
+                    this.cancelTick();
+                    this.doneWithoutAnswer();
+                }
+                if (this.timeline) {
+                    this.timeline.style.transform = "translateX(" + String((1 - this.timeLeft / this.timeLeftDefault) * 100) + "%)";
+                }
+            }
+        };
+        this.cancelTick = () => {
+            if (this.animationFrameId != null) {
+                this.env.cancelAnimationFrame(this.animationFrameId);
+            }
+        };
+        if (this.slideTestWithTimer()) {
+            this.timeline = this.element.querySelector(".timeline");
+            if (this.selectedAnswer === undefined) {
+                // find timer element
+                // start raf
+                // pause raf on pauseUI (actually don`t need)
+                this.timeLeftDefault = (this.answerTimeout ? this.answerTimeout : 0) * 1000;
+                this.timeLeft = this.timeLeftDefault;
+                this.animationFrameId = null;
+                this.startTimerAt = new Date().getTime();
+                this.tick();
+                // set answer - unanswered (for close and run again)
+                this.localData["_t_g_" + this.elementId + "_sa"] = -1;
+                this.setLocalData(this.localData, true);
+            }
+            else {
+                // animate 100%
+                if (this.selectedAnswer === -1) {
+                    if (this.timeline) {
+                        this.timeline.style.transform = "translateX(100%)";
+                    }
+                }
+            }
+        }
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    _statEventVoteAnswer(answerScore) {
+        try {
+            if (this.selectedAnswer != null) {
+                const labelText = this.label?.textContent ?? "";
+                var answerText = "";
+                if (this.variants[this.selectedAnswer]) {
+                    var answerLabel = this.variants[this.selectedAnswer].querySelector(".label");
+                    if (answerLabel != null) {
+                        answerText = answerLabel.textContent ?? "";
+                    }
+                }
+                var duration = new Date().getTime() - this.firstOpenTime;
+                this.sendStatisticEventToApp("w-test-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: this.selectedAnswer,
+                    wal: answerText,
+                    was: answerScore,
+                    d: duration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_answer: this.selectedAnswer,
+                    widget_answer_label: answerText,
+                    widget_answer_score: answerScore,
+                    duration_ms: duration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _selectAnswer(index) {
+        if (this.variants[index]) {
+            this.variants[index].classList.add("selected");
+        }
+        this.selectedAnswer = index;
+        this.localData["_t_g_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            }
+        });
+        if (this.disableTimer) {
+            this.showNextSlide();
+        }
+    }
+    selectAnswer(answer) {
+        if (this.selectedAnswer !== undefined) {
+            return true;
+        }
+        var index = this.variants.indexOf(answer);
+        if (index !== -1) {
+            var answerScore = getValueOrDefault(getTagDataAsNumber(this.variants[index], "score"), 0);
+            this._completeWidget(index, answerScore);
+        }
+        if (Boolean(this.withTimeToAnswer && this.answerTimeout)) {
+            this.cancelTick();
+        }
+        return false;
+    }
+    doneWithoutAnswer() {
+        if (this.selectedAnswer !== undefined) {
+            return;
+        }
+        var index = -1, answerScore = 0;
+        this._completeWidget(index, answerScore);
+    }
+    // complete answer select and save local data + stat event
+    _completeWidget(index, answerScore) {
+        this._selectAnswer(index);
+        this.localData["t_score"] = (this.localData["t_score"] === undefined ? 0 : this.localData["t_score"]) + answerScore;
+        var answeredQuestion = 0;
+        for (var key in this.localData) {
+            if (this.localData.hasOwnProperty(key)) {
+                if (/^_t_g_[A-z0-9-_]+_sa$/.test(key)) {
+                    answeredQuestion++;
+                }
+            }
+        }
+        if (this.localData["_t_fa_at"] === undefined) {
+            this.localData["_t_fa_at"] = Math.round(new Date().getTime() / 1000);
+        }
+        if (answeredQuestion === this.testCount) {
+            this.localData["_t_done_at"] = Math.round(new Date().getTime() / 1000);
+        }
+        // answer on question
+        this.localData["_&ts_t_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.setLocalData(this.localData, true);
+        this._statEventVoteAnswer(answerScore);
+    }
+    isDone() {
+        return this.localData["_t_done_at"] !== undefined && this.selectedAnswer !== undefined;
+    }
+    slideTestIsDone() {
+        return this.localData["_t_g_" + this.elementId + "_sa"] !== undefined && this.selectedAnswer !== undefined;
+    }
+    slideTestWithTimer() {
+        return Boolean(this.withTimeToAnswer && this.answerTimeout);
+    }
+    static api = {
+        ...WidgetBase.api,
+        initWidget: function (element, localData) {
+            WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
+        },
+        /**
+         * click on quiz answer
+         */
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetTest.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetTest.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectAnswer(element);
+                }
+            }
+            return false;
+        },
+        slideTestIsDone: function (element) {
+            const widget = WidgetTest.getInstance(element);
+            if (widget) {
+                return widget.slideTestIsDone();
+            }
+            return true;
+        },
+        slideTestWithTimer: function (element) {
+            const widget = WidgetTest.getInstance(element);
+            if (widget) {
+                return widget.slideTestWithTimer();
+            }
+            return true;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+class WidgetVote extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+    };
+    static widgetClassName = "narrative-element-vote";
+    question = null;
+    answers = null;
+    questionCount = null;
+    selectedAnswer = undefined;
+    label;
+    variants;
+    variantsTexts;
+    selectedVariant;
+    voteAllocation;
+    hideClientTotalResult;
+    /**
+     * @throws Error
+     * @param element
+     * @param options
+     */
+    constructor(element, options) {
+        super(element, options);
+        this.voteAllocation = getTagData(this.slide, "voteAllocation");
+        this.label = this.element.querySelector(".label-view .label");
+        this.variants = slice.call(this.element.querySelectorAll(".variants-box .variant-view-group"));
+        this.variantsTexts = [];
+        forEach(this.variants, (element, index) => {
+            const variantView = element.querySelector(".variant-view .label");
+            if (variantView) {
+                this.variantsTexts.push(variantView.textContent ?? "");
+            }
+        });
+        this.hideClientTotalResult = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "hideClientTotalResult")), false);
+        this.selectedVariant = undefined;
+        if (this.localData) {
+            if (this.localData["_v_g_" + this.elementId + "_sa"] !== undefined) {
+                this._selectVariant(this.localData["_v_g_" + this.elementId + "_sa"], true);
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
+        // this.refreshUserData(this.options.localData);
+    }
+    refreshUserData(localData) { }
+    _statEventVoteVariant() {
+        try {
+            if (this.selectedVariant != null) {
+                var labelText = this.label?.textContent ?? "";
+                var variantText = this.variantsTexts[this.selectedVariant] ? this.variantsTexts[this.selectedVariant] : "";
+                var duration = new Date().getTime() - this.firstOpenTime;
+                this.sendStatisticEventToApp("w-vote-answer", {
+                    i: this.storyId,
+                    si: this.slideIndex,
+                    wi: this.elementId,
+                    wl: labelText,
+                    wa: this.selectedVariant,
+                    wv: variantText,
+                    d: duration,
+                }, {
+                    story_id: this.storyId,
+                    slide_index: this.slideIndex,
+                    widget_id: this.elementId,
+                    widget_label: labelText,
+                    widget_answer: this.selectedVariant,
+                    widget_value: variantText,
+                    duration_ms: duration,
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _selectVariant(index, filled = false) {
+        if (this.variants[index]) {
+            this.variants[index].classList.add("selected");
+        }
+        this.selectedVariant = index;
+        this.localData["_v_g_" + this.elementId + "_sa"] = index;
+        this.element.classList.add("done");
+        if (filled) {
+            this.element.classList.add("filled");
+        }
+        if (this.hideClientTotalResult) {
+            const cb = () => {
+                if (this.variants[index]) {
+                    this.variants[index].style.setProperty("--selected-variant-view-clip-area", String(0));
+                }
+            };
+            if (filled) {
+                cb();
+            }
+            else {
+                this.env.requestAnimationFrame(cb);
+            }
+        }
+        else {
+            this.displayPercents(index, filled);
+        }
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            }
+        });
+        if (this.disableTimer) {
+            this.showNextSlide();
+        }
+    }
+    selectVariant(variant) {
+        if (this.selectedVariant !== undefined) {
+            return true;
+        }
+        var selectedVariantIndex = this.variants.indexOf(variant);
+        if (selectedVariantIndex !== -1) {
+            this._selectVariant(selectedVariantIndex);
+            this.localData["_v_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+            // ответ на вопрос
+            this.localData["_&ts_v_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+            if (this.widgetDone) {
+                this.widgetDone.classList.add("active", "opacity-active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("active");
+                    setTimeout(() => {
+                        this.widgetDone?.classList.remove("opacity-active");
+                    }, 250);
+                }, 2000);
+            }
+            this.setLocalData(this.localData, true);
+            this._statEventVoteVariant();
+        }
+        return false;
+    }
+    displayPercents(selectedVariantIndex, filled = false) {
+        // voteAllocation[0] - variant total count allocation
+        // voteAllocation[1]
+        // ...
+        // voteAllocation[7]
+        let voteAllocation = [];
+        let voteAllocationTs = undefined;
+        const sharedData = this.sdkApi.getWidgetsSharedData(this.storyId, "vote" /* Widgets.Vote */);
+        if (sharedData && sharedData[this.elementId] != null && (isObject(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
+            voteAllocation = sharedData[this.elementId];
+            if (isObject(sharedData[this.elementId])) {
+                voteAllocation = slice.call(Object.values(sharedData[this.elementId]));
+            }
+            voteAllocationTs = sharedData.ts;
+        }
+        var voteDoneAt = this.localData["_v_g_" + this.elementId + "_done_at"];
+        if (voteAllocationTs === undefined || voteDoneAt === undefined || voteDoneAt > voteAllocationTs) {
+            forEach(this.variants, function (element, index) {
+                const key = index;
+                if (voteAllocation[key] === undefined || !isNumber(voteAllocation[key])) {
+                    voteAllocation[key] = 0;
+                }
+                if (selectedVariantIndex === key) {
+                    ++voteAllocation[key];
+                }
+            });
+        }
+        // calc percents
+        var percents = [], total = 0;
+        forEach(this.variants, (element, index) => {
+            const key = index;
+            if (voteAllocation[key] !== undefined) {
+                percents[key] = isNumber(voteAllocation[key]) ? voteAllocation[key] : parseInt(String(voteAllocation[key]));
+                if (!isNumber(percents[key]) || isNaN(percents[key])) {
+                    percents[key] = 0;
+                }
+            }
+            else {
+                percents[key] = 0;
+            }
+            total += percents[key];
+        });
+        for (let i = 0; i < percents.length; ++i) {
+            if (total !== 0) {
+                percents[i] = Math.round((percents[i] / total) * 100 * 10) / 10;
+                if (percents[i] > 100) {
+                    percents[i] = 100;
+                }
+                // percents[i] += '%';
+            }
+        }
+        var self = this;
+        forEach(this.variants, (element, index) => {
+            const key = index;
+            var percentLabels = slice.call(element.querySelectorAll(".percent-label"));
+            forEach(percentLabels, label => {
+                if (percents[key] != null) {
+                    label.textContent = percents[key] + "%";
+                }
+            });
+            element.classList.add("selected");
+        });
+        var cb = function () {
+            forEach(self.variants, function (element, index) {
+                const key = index;
+                if (percents[key] != null) {
+                    element.style.setProperty("--selected-variant-view-clip-area", String(100 - percents[key]));
+                }
+            });
+        };
+        if (filled) {
+            cb();
+        }
+        else {
+            this.env.requestAnimationFrame(cb);
+        }
+    }
+    isDone() {
+        return this.localData["_v_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    slideVoteIsDone() {
+        return this.localData["_v_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    static api = {
+        ...WidgetBase.api,
+        // fix for WidgetVote on every layer of multilayers story
+        fallbackInitOnMultiSlide: function (element, localData) {
+            if (element.dataset.fallbackInitOnMultiSlide) {
+                return;
+            }
+            var multiSlide = element.closest(".narrative-multi-slide");
+            if (multiSlide != null) {
+                var container = multiSlide.parentElement;
+                var widgetElements = container?.querySelectorAll(`.${WidgetVote.widgetClassName}`);
+                if (widgetElements != null) {
+                    for (var i = 0; i < widgetElements.length; ++i) {
+                        var widgetElement = widgetElements[i];
+                        const widget = WidgetVote.getInstance(widgetElement);
+                        if (!widget) {
+                            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [widgetElement], localData);
+                        }
+                    }
+                }
+            }
+            element.dataset.fallbackInitOnMultiSlide = "1";
+        },
+        initWidget: function (element, localData) {
+            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData).then(localData => {
+                WidgetVote.api.fallbackInitOnMultiSlide(element, localData);
+            });
+        },
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetVote.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetVote.getInstance(widgetElement);
+                if (widget) {
+                    return widget.selectVariant(element);
+                }
+            }
+            return false;
+        },
+        slideVoteIsDone: function (element) {
+            const widget = WidgetVote.getInstance(element);
+            if (widget) {
+                return widget.slideVoteIsDone();
+            }
+            return true;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`]; }
+}
+
+let sdkInterface;
+const getSlideApi = (_sdkInterface) => {
+    sdkInterface = _sdkInterface;
+    return {
+        Animation: animationApi,
+        WidgetCopy: WidgetCopy.api,
+        WidgetDataInput: WidgetDataInput.api,
+        WidgetDateCountdown: WidgetDateCountdown.api,
+        WidgetMultiSlide: WidgetMultiSlide.api,
+        WidgetPoll: WidgetPoll.api,
+        WidgetPollLayers: WidgetPollLayers.api,
+        WidgetQuest: WidgetQuest.api,
+        WidgetQuiz: WidgetQuiz.api,
+        WidgetQuizGrouped: WidgetQuizGrouped.api,
+        WidgetRangeSlider: WidgetRangeSlider.api,
+        WidgetRate: WidgetRate.api,
+        WidgetShare: WidgetShare.api,
+        WidgetTest: WidgetTest.api,
+        WidgetVote: WidgetVote.api,
+    };
+};
+
+export { getSlideApi, sdkInterface };