@inappstory/slide-api 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -283,6 +283,19 @@ const expando = function () {
 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);
+    };
+};
 var rnotwhite = /\S+/g;
 class Data {
     static uid = 1;
@@ -991,13 +1004,3418 @@ class EsModuleSdkApi {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`() => SDKInterface`]; }
 }
 
-var TimelineDisabledState;
-(function (TimelineDisabledState) {
-    TimelineDisabledState[TimelineDisabledState["disabled"] = 0] = "disabled";
-    TimelineDisabledState[TimelineDisabledState["enabled"] = 1] = "enabled";
-})(TimelineDisabledState || (TimelineDisabledState = {}));
+class DataInput {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-data-input";
+    static className() {
+        return DataInput._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof DataInput;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    setUserData(id, text) {
+        this._widgetApi.setUserData(id, text);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetDataInput.api`]; }
+}
 
-let sdkInterface;
+class Barcode {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-barcode";
+    static className() {
+        return Barcode._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetBarcode.api`]; }
+}
 
-container.registerSingleton(() => new EsModuleSdkApi(() => sdkInterface), { identifier: `SDKApi` });
+class ClickableBase {
+    _element;
+    constructor(_element) {
+        this._element = _element;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`]; }
+}
+
+class Button extends ClickableBase {
+    _elementNodeRef;
+    _layer;
+    static _className = "narrative-element-link";
+    static className() {
+        return Button._className;
+    }
+    constructor(_elementNodeRef, _layer) {
+        super(_elementNodeRef);
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() { }
+    onStop() { }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+}
+
+class Copy {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-copy";
+    static className() {
+        return Copy._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetCopy.api`]; }
+}
+
+class DateCountdown {
+    _elementNodeRef;
+    _layer;
+    _layersNodesRefs;
+    _widgetApi;
+    static _className = "narrative-element-date-countdown";
+    static className() {
+        return DateCountdown._className;
+    }
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
+        this._widgetApi = _widgetApi;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() {
+        this._widgetApi.onPause(this._elementNodeRef);
+    }
+    onResume() {
+        this._widgetApi.onResume(this._elementNodeRef);
+    }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetDateCountdown.api`]; }
+}
+
+class Poll {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-poll";
+    static className() {
+        return Poll._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Poll;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    setUserData(id, text) {
+        this._widgetApi.setUserData(id, text);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetPoll.api`]; }
+}
+
+class PollLayers {
+    _elementNodeRef;
+    _layer;
+    _layersNodesRefs;
+    _widgetApi;
+    static _className = "narrative-element-poll-layers";
+    static className() {
+        return PollLayers._className;
+    }
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof PollLayers;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetPollLayers.api`]; }
+}
+
+class Products {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-products";
+    static className() {
+        return Products._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Products;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    handleBackpress() {
+        this._widgetApi.onHandleBackpress(this._elementNodeRef);
+    }
+    get elementNodeRef() {
+        return this._elementNodeRef;
+    }
+    get isClickCapturedByWidget() {
+        return this._widgetApi.isClickCapturedByWidget(this._elementNodeRef);
+    }
+    get isLayerForcePaused() {
+        return this._widgetApi.isForcePaused(this._elementNodeRef);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetProducts.api`]; }
+}
+
+class Quest {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-quest";
+    static className() {
+        return Quest._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Quest;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return this._widgetApi.init(this._elementNodeRef, localData);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    handleRouteClick(options) {
+        return this._widgetApi.handleRouteClick(this._elementNodeRef, options);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetQuest.api`]; }
+}
+
+class Quiz {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-quiz";
+    static className() {
+        return Quiz._className;
+    }
+    // widgetApi in ctor
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Quiz;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get slideQuizIsDone() {
+        return this._widgetApi.slideQuizIsDone(this._elementNodeRef);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetQuiz.api`]; }
+}
+
+class QuizGrouped {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-quiz-grouped";
+    static className() {
+        return QuizGrouped._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof QuizGrouped;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get slideQuizGroupedIsDone() {
+        return this._widgetApi.slideQuizIsDone(this._elementNodeRef);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetQuizGrouped.api`]; }
+}
+
+class RangeSlider {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-range-slider";
+    static className() {
+        return RangeSlider._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof RangeSlider;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    get isClickCapturedBySlider() {
+        return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetRangeSlider.api`]; }
+}
+
+class Rate {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-rate";
+    static className() {
+        return Rate._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Rate;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    setUserData(id, text) {
+        this._widgetApi.setUserData(id, text);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetRate.api`]; }
+}
+
+class Share {
+    _elementNodeRef;
+    _layer;
+    _layersNodesRefs;
+    _widgetApi;
+    static _className = "narrative-element-share";
+    static _widgetApiName = "_narrative_share";
+    static className() {
+        return Share._className;
+    }
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Share;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    complete(id, isSuccess) {
+        this._widgetApi.complete(id, isSuccess);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetShare.api`]; }
+}
+
+class SwipeUpItems {
+    _elementNodeRef;
+    _layer;
+    static _className = "narrative-element-swipe-up-items";
+    static className() {
+        return SwipeUpItems._className;
+    }
+    constructor(_elementNodeRef, _layer) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+    }
+    static isTypeOf(element) {
+        return element instanceof SwipeUpItems;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() { }
+    onStop() { }
+    handleClick() {
+        return false;
+    }
+    get elementNodeRef() {
+        return this._elementNodeRef;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+}
+
+class Test {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-test";
+    static className() {
+        return Test._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    static isTypeOf(element) {
+        return element instanceof Test;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get slideTestIsDone() {
+        return this._widgetApi.slideTestIsDone(this._elementNodeRef);
+    }
+    get slideTestWithTimer() {
+        return this._widgetApi.slideTestWithTimer(this._elementNodeRef);
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetTest.api`]; }
+}
+
+class Vote {
+    _elementNodeRef;
+    _layer;
+    _widgetApi;
+    static _className = "narrative-element-vote";
+    static className() {
+        return Vote._className;
+    }
+    constructor(_elementNodeRef, _layer, _widgetApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._widgetApi = _widgetApi;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetVote.api`]; }
+}
+
+class Text {
+    _elementNodeRef;
+    _layer;
+    static _className = "narrative-element-text";
+    static className() {
+        return Text._className;
+    }
+    constructor(_elementNodeRef, _layer) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() { }
+    onStop() { }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+}
+
+const waitForImageHtmlElementLoad = async (nodeRef) => {
+    return new Promise((resolve, reject) => {
+        const onLoad = function () {
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                resolve(nodeRef);
+                nodeRef.removeEventListener("load", onLoad);
+            }));
+        };
+        nodeRef.addEventListener("load", onLoad);
+        if (nodeRef.complete && 0 !== nodeRef.naturalHeight) {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    resolve(nodeRef);
+                });
+            });
+        }
+        nodeRef.addEventListener("error", err => reject(err));
+    });
+};
+const waitForVideoHtmlElementLoad = async (nodeRef) => {
+    return new Promise((resolve, reject) => {
+        if (void 0 !== nodeRef.oncanplaythrough) {
+            const onCanplaythrough = () => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        resolve(nodeRef);
+                        nodeRef.removeEventListener("canplaythrough", onCanplaythrough);
+                    });
+                });
+            };
+            nodeRef.addEventListener("canplaythrough", onCanplaythrough);
+            nodeRef.load();
+        }
+        else {
+            var onCanPlay = function () {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        resolve(nodeRef);
+                        nodeRef.removeEventListener("canplay", onCanPlay);
+                    });
+                });
+            };
+            nodeRef.addEventListener("canplay", onCanPlay);
+            nodeRef.load();
+        }
+    });
+};
+function isObject(value) {
+    let type = typeof value;
+    return value != null && (type === "object" || type === "function");
+}
+function isFunction(functionToCheck) {
+    let getType = {};
+    return functionToCheck && getType.toString.call(functionToCheck) === "[object Function]";
+}
+
+class Image extends ClickableBase {
+    _elementNodeRef;
+    _layer;
+    static _className = "narrative-element-image";
+    static className() {
+        return Image._className;
+    }
+    constructor(_elementNodeRef, _layer) {
+        super(_elementNodeRef);
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        const mediaElements = Array.from(this._elementNodeRef.querySelectorAll("img"));
+        this.mediaElementsLoadingPromises = mediaElements.map(waitForImageHtmlElementLoad);
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() { }
+    onStop() { }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+}
+
+class SwipeUp {
+    _elementNodeRef;
+    _layer;
+    static _className = "narrative-element-swipe-up";
+    static className() {
+        return SwipeUp._className;
+    }
+    constructor(_elementNodeRef, _layer) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+    }
+    static isTypeOf(element) {
+        return element instanceof SwipeUp;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() { }
+    onStop() { }
+    handleClick() {
+        return false;
+    }
+    get elementNodeRef() {
+        return this._elementNodeRef;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+}
+
+class Video {
+    _elementNodeRef;
+    _layer;
+    _VideoPlayer;
+    _sdkApi;
+    static _className = "narrative-element-video";
+    static className() {
+        return Video._className;
+    }
+    _video;
+    _isVOD = false;
+    _vodData;
+    _vodPlayerInstance = null;
+    _videoStateAdapter = null;
+    constructor(_elementNodeRef, _layer, _VideoPlayer, _sdkApi) {
+        this._elementNodeRef = _elementNodeRef;
+        this._layer = _layer;
+        this._VideoPlayer = _VideoPlayer;
+        this._sdkApi = _sdkApi;
+        const _video = this._elementNodeRef.querySelector("video");
+        if (!_video) {
+            return;
+        }
+        this._video = _video;
+        // _video.addEventListener("canplay", () => console.log("canplay", true));
+        // _video.addEventListener("complete", () => console.log("complete", true));
+        // _video.addEventListener("emptied", () => console.log("emptied", true));
+        // _video.addEventListener("ended", () => console.log("ended", true));
+        // _video.addEventListener("pause", () => console.log("pause", true));
+        // _video.addEventListener("play", () => console.log("play", true));
+        // _video.addEventListener("playing", () => console.log("playing", true));
+        // _video.addEventListener("progress", () => console.log("progress", true));
+        // _video.addEventListener("seeked", () => console.log("seeked", true));
+        // _video.addEventListener("seeking", () => console.log("seeking", true));
+        // _video.addEventListener("stalled", () => console.log("stalled", true));
+        // _video.addEventListener("suspend", () => console.log("suspend", true));
+        // _video.addEventListener("waiting", () => console.log("waiting", true));
+        // _video.addEventListener("timeupdate", (e) => console.log(`timeupdate: ${e.timeStamp}`, true));
+        // _video.addEventListener("timeupdate", (e) =>_log(`timeupdate: ${e.timeStamp}`, true));
+        const mediaImageElements = Array.from(this._elementNodeRef.querySelectorAll("img"));
+        this.mediaElementsLoadingPromises = mediaImageElements.map(waitForImageHtmlElementLoad);
+        this._elementNodeRef.classList.add("init");
+        if (this._video.getAttribute("data-default-muted") == null) {
+            this._video.setAttribute("data-default-muted", this._video.muted ? "1" : "0");
+        }
+        const vodData_ = this._video.getAttribute("data-vod");
+        if (vodData_ != null) {
+            try {
+                this._vodData = this._convertMpdUrls(JSON.parse(vodData_));
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+        this._isVOD = Boolean(this._vodData != null && this._VideoPlayer != null);
+        if (this._isVOD) {
+            this.mediaElementsLoadingPromises.push(this._initVOD(this._vodData));
+        }
+        else {
+            this.mediaElementsLoadingPromises.push(waitForVideoHtmlElementLoad(this._video));
+        }
+        // console.log({mediaElementsLoadingPromises: this.mediaElementsLoadingPromises})
+    }
+    static isTypeOf(element) {
+        return element instanceof Video;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        return Promise.resolve(true);
+    }
+    _isScreenOnPause = false;
+    onPause() {
+        this._isScreenOnPause = true;
+    }
+    onResume() {
+        this._isScreenOnPause = false;
+    }
+    onStart() { }
+    onStop() { }
+    _initVOD(vodData) {
+        const onWaiting = () => {
+            /**
+             * When screen on pause - ignore onWaiting
+             * (triggered when video paused, not only when canplay = false)
+             */
+            if (this._isScreenOnPause) {
+                return;
+            }
+            // console.log("onWaiting")
+            // @ts-ignore
+            // _log("waiting", true);
+            this._video.setAttribute("data-waiting", "1");
+            // @ts-ignore
+            // _log(`waiting: ${this._video.currentTime}`, true);
+            this._layer.timeline.onSlideDataWaiting(this._video.currentTime * 1000);
+            // window.synthErrorId = setTimeout(synthError, 15000);
+        };
+        // this._video.addEventListener("waiting", onWaiting);
+        const onPlaying = () => {
+            // console.log("onPlaying");
+            // _log("playing", true);
+            // TODO via class instead of data attr
+            if (this._video.getAttribute("data-waiting") === "1") {
+                this._video.setAttribute("data-waiting", "0");
+                this._layer.timeline.slideResumed(this._video.currentTime * 1000);
+                // @ts-ignore
+                //                     _log(`playing: ${this._video.currentTime}`, true);
+                // clearTimeout(window.synthErrorId);
+            }
+        };
+        // this._video.addEventListener("playing", onPlaying);
+        this._videoStateAdapter = new VideoStateAdapter(this._video, onWaiting, onPlaying);
+        // @ts-ignore
+        // this._video.addEventListener("timeupdate", (e) =>_log(`timeupdate: ${e.timeStamp}`, true));
+        // this._video.addEventListener("timeupdate", (e) =>console.log(`timeupdate: ${e.timeStamp}: ${this._video.currentTime}`));
+        return new Promise((resolve, reject) => {
+            // console.log(`initVoD slide idx: ${this._layer.slideIndex}`);
+            // console.log("_initVOD 1");
+            // @ts-ignore
+            if (this._VideoPlayer != null && this._VideoPlayer.isBrowserSupported() && ("MediaSource" in window || "ManagedMediaSource" in window)) {
+                const player = new this._VideoPlayer();
+                // console.log("_initVOD 2");
+                // @ts-ignore
+                const onErrorEvent = event => {
+                    // Extract the PlayerError object from the event.
+                    onError(event.detail);
+                };
+                // @ts-ignore
+                player.addEventListener("error", onErrorEvent);
+                // @ts-ignore
+                const onError = error => {
+                    // Log the error.
+                    console.error("Error code", error.code, "object", error);
+                    // _log(`video error: ${video.currentTime} code: ${error.code}`, true);
+                    if (this._video.paused) {
+                        this._layer.stopInternal();
+                        this._layer.timeline.onSlideError(this._video.currentTime * 1000);
+                    }
+                };
+                // console.log("_initVOD 3");
+                player.attach(this._video).then(() => {
+                    // console.log("_initVOD 4");
+                    try {
+                        player
+                            // @ts-ignore
+                            .load(this._VideoPlayer.convertJsonToUri(vodData), 0, "application/json")
+                            .then(() => {
+                            // console.log("_initVOD 5");
+                            this._vodPlayerInstance = player;
+                            // This runs if the asynchronous load is successful.
+                            resolve(this._video);
+                        })
+                            .catch(reason => {
+                            // console.log("_initVOD 6", reason);
+                            // onError is executed if the asynchronous load fails.
+                            reject(reason);
+                            onError(reason);
+                        });
+                    }
+                    catch (e) {
+                        // onError is executed if the asynchronous load fails.
+                        reject(e);
+                        onError(e);
+                    }
+                });
+            }
+            else {
+                // use default (not mpd) video stream
+                // console.error("Browser not supported!");
+                // get std video stream
+                let src = "";
+                if (vodData && vodData.formats != null && Array.isArray(vodData.formats) && vodData.formats.length > 0) {
+                    src = vodData.formats[0].url;
+                    this._video.src = src;
+                    resolve(this._video);
+                }
+                else {
+                    reject("Empty formats list");
+                }
+            }
+        });
+    }
+    _convertMpdUrls(mpd_) {
+        if (this._sdkApi.isWeb) {
+            return mpd_;
+        }
+        if (isObject(mpd_) && mpd_.adaptiveFormats != null && Array.isArray(mpd_.adaptiveFormats)) {
+            const mpd = { ...mpd_ };
+            for (let i = 0; i < mpd.adaptiveFormats.length; ++i) {
+                mpd.adaptiveFormats[i].url = `${this._sdkApi.isAndroid ? `http://vod-asset/` : `vod-asset://`}${mpd.adaptiveFormats[i].cacheName}`;
+            }
+            return mpd;
+        }
+        return mpd_;
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    _videoStartedPromise = null;
+    get videoStartedPromise() {
+        return this._videoStartedPromise;
+    }
+    start(muted = true) {
+        this._videoStartedPromise = new Promise(async (resolve) => {
+            // invariant - always wait for mediaElementsLoadingPromises
+            // else call of _initVOD can start and onAllMediaLoaded failed
+            // TODO - add for all Elements state invariant protection
+            Promise.all(this.mediaElementsLoadingPromises).finally(async () => {
+                if (this._video) {
+                    if (this._isVOD && this._vodPlayerInstance === null) {
+                        // console.log("_initVOD 5.1");
+                        await this._initVOD(this._vodData);
+                    }
+                    // console.log("Video:start => this._video.pause()");
+                    this._video.pause();
+                    this._video.currentTime = 0;
+                    // remove init class
+                    // if vod - create VoD player
+                    if (this._video.getAttribute("data-default-muted") !== "1") {
+                        this._video.muted = muted;
+                    }
+                    const playPromise = this._video.play();
+                    if (playPromise != null) {
+                        playPromise
+                            .then(() => {
+                            this._video.currentTime = 0;
+                            this._elementNodeRef.classList.remove("init");
+                            resolve({
+                                currentTime: this._video.currentTime,
+                            });
+                        })
+                            .catch(error => {
+                            console.error(error);
+                            resolve({
+                                currentTime: this._video.currentTime,
+                            });
+                        });
+                    }
+                    else {
+                        setTimeout(() => {
+                            this._video.currentTime = 0;
+                            this._elementNodeRef.classList.remove("init");
+                            resolve({
+                                currentTime: this._video.currentTime,
+                            });
+                        }, 0);
+                    }
+                }
+                else {
+                    resolve({
+                        currentTime: 0,
+                    });
+                }
+            });
+        });
+        return this._videoStartedPromise;
+    }
+    pause(resetVideoTime = false) {
+        if (this._video) {
+            // console.trace("Video pause");
+            this._video.pause();
+            if (resetVideoTime) {
+                this._video.currentTime = 0;
+            }
+            return this._video.currentTime;
+        }
+        return null;
+    }
+    async resume() {
+        this._videoStartedPromise = new Promise((resolve, reject) => {
+            // _log("video before resume: " + video.currentTime);
+            const ts = this._video.currentTime;
+            if (!this._video.paused) {
+                // console.log("Video:resume => this._video.pause()");
+                this._video.pause();
+            }
+            const playPromise = this._video.play();
+            // console.log({ playPromise });
+            if (playPromise != null) {
+                playPromise
+                    .then(() => {
+                    // console.log("resolve 1");
+                    if (this._video.currentTime < ts) {
+                        // console.log("resolve 1.1", { ts });
+                        this._video.currentTime = ts;
+                    }
+                    resolve({ currentTime: this._video.currentTime });
+                })
+                    .catch(error => {
+                    console.error(error);
+                    // console.log("error 1");
+                    if (this._video.currentTime < ts) {
+                        this._video.currentTime = ts;
+                    }
+                    resolve({ currentTime: this._video.currentTime });
+                });
+            }
+            else {
+                setTimeout(() => {
+                    // console.log("resolve 2");
+                    if (this._video.currentTime < ts) {
+                        this._video.currentTime = ts;
+                    }
+                    resolve({ currentTime: this._video.currentTime });
+                }, 0);
+            }
+        });
+        return this._videoStartedPromise;
+    }
+    async stop() {
+        if (this._video) {
+            // console.log("Video:stop => this._video.pause()");
+            this._video.pause();
+        }
+        if (this._vodPlayerInstance) {
+            setTimeout(async () => {
+                // destroy VOD on slideStop with timeout, bcz on Android flashes white screen on several frames (if destroy without timeout)
+                if (this._vodPlayerInstance) {
+                    try {
+                        // show poster
+                        this._elementNodeRef.classList.add("init");
+                        if (this._videoStateAdapter) {
+                            this._videoStateAdapter.destroy();
+                            this._videoStateAdapter = null;
+                        }
+                        await this._vodPlayerInstance.detach();
+                        await this._vodPlayerInstance.destroy();
+                        // clean up - so we can reinit on slide start, id need it
+                        this._vodPlayerInstance = null;
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
+                }
+            }, 100);
+        }
+    }
+    enableAudio() {
+        if (this._video.getAttribute("data-default-muted") !== "1") {
+            this._video.muted = false;
+        }
+    }
+    disableAudio() {
+        if (this._video.getAttribute("data-default-muted") !== "1") {
+            this._video.muted = true;
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof VideoPlayer | undefined`, `SDKApi`]; }
+}
+// class VideoStateAdapter {
+//
+//     // все же следить по timeupdate
+//
+//     constructor(private readonly _video: HTMLVideoElement, private readonly _onWaitingCb: () => void, private readonly _onPlayingCb: () => void) {
+//         this._video.addEventListener("playing", () => this._onPlaying());
+//         this._video.addEventListener("waiting", () => this._onWaiting());
+//     }
+//
+//     private _state = VIDEO_STATE.WAITING;
+//
+//     private _onWaiting() {
+//         if (this._playingCheckerId != null) {
+//             window.clearTimeout(this._playingCheckerId);
+//         }
+//         this._state = VIDEO_STATE.WAITING;
+//         this._triggerUpdate();
+//     }
+//
+//     // in ms
+//     private _latestPlayingStamp: number = 0;
+//     private _latestPlayingDateStamp: number = new Date().getTime();
+//     private _playingCheckerId: number = null!;
+//
+//     private _onPlaying() {
+//         this._state = VIDEO_STATE.PLAYING;
+//         if (this._playingCheckerId != null) {
+//             window.clearTimeout(this._playingCheckerId);
+//         }
+//         this._latestPlayingStamp = this._video.currentTime * 1000;
+//         this._latestPlayingDateStamp = new Date().getTime();
+//         this._triggerUpdate();
+//
+//         // если через 100ms не время не изменится - встаем на паузу
+//         // если до исполнения таймера были другие события - то отменять таймер
+//         this._playingCheckerId = window.setTimeout(() => {
+//             const currentTime = this._video.currentTime * 1000;
+//             const diff = currentTime - this._latestPlayingStamp;
+//
+//             const timeSpent = new Date().getTime() - this._latestPlayingDateStamp;
+//
+//             // @ts-ignore
+//             _log(`check, currentTime: ${currentTime}, latestPlayingStamp: ${this._latestPlayingStamp}, diff: ${diff}, timeSpent: ${timeSpent}`, true);
+//             if (diff <= (timeSpent / 2)) {
+//                 this._state = VIDEO_STATE.WAITING;
+//                 this._triggerUpdate();
+//             }
+//         }, 100);
+//     }
+//
+//     private _triggerUpdate() {
+//         if (this._state === VIDEO_STATE.PLAYING) {
+//             this._onPlayingCb();
+//         } else if (this._state === VIDEO_STATE.WAITING) {
+//             this._onWaitingCb();
+//         }
+//     }
+// }
+class VideoStateAdapter {
+    _video;
+    _onWaitingCb;
+    _onPlayingCb;
+    // все же следить по timeupdate
+    constructor(_video, _onWaitingCb, _onPlayingCb) {
+        this._video = _video;
+        this._onWaitingCb = _onWaitingCb;
+        this._onPlayingCb = _onPlayingCb;
+        // this._video.addEventListener("playing", () => this._onPlaying());
+        // this._video.addEventListener("waiting", () => this._onWaiting());
+        this._video.addEventListener("timeupdate", this._onTimeupdateHandler);
+    }
+    destroy() {
+        this._video.removeEventListener("timeupdate", this._onTimeupdateHandler);
+    }
+    _onTimeupdateHandler = this._onTimeupdate.bind(this);
+    _timeupdate = Date.now();
+    _state = 0 /* VIDEO_STATE.UNKNOWN */;
+    // The event frequency is dependent on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run).
+    _maxDiff = 300;
+    _waitingCheckerId = null;
+    _playingCheckerId = null;
+    _onTimeupdate() {
+        this._timeupdate = Date.now();
+        if (this._playingCheckerId != null) {
+            window.clearTimeout(this._playingCheckerId);
+        }
+        if (this._state !== 1 /* VIDEO_STATE.PLAYING */) {
+            this._state = 1 /* VIDEO_STATE.PLAYING */;
+            this._triggerUpdate();
+        }
+        // todo - add debounce
+        this._playingCheckerId = window.setTimeout(() => {
+            if (Date.now() - this._timeupdate >= this._maxDiff / 2) {
+                this._state = 2 /* VIDEO_STATE.WAITING */;
+                this._triggerUpdate();
+            }
+        }, this._maxDiff);
+        // if (this._state !== VIDEO_STATE.PLAYING) {
+        //     this._onPlaying();
+        // }
+    }
+    _onWaiting() {
+        if (this._playingCheckerId != null) {
+            window.clearTimeout(this._playingCheckerId);
+        }
+        // @ts-ignore
+        // _log(`_onWaiting, _timeupdate: ${this._timeupdate}`, true);
+        this._state = 2 /* VIDEO_STATE.WAITING */;
+        this._triggerUpdate();
+    }
+    _onPlaying() {
+        if (this._playingCheckerId != null) {
+            window.clearTimeout(this._playingCheckerId);
+        }
+        // @ts-ignore
+        // _log(`_onPlaying, _timeupdate: ${this._timeupdate}`, true);
+        this._playingCheckerId = window.setTimeout(() => {
+            // @ts-ignore
+            _log(`_onPlaying cb, _timeupdate: ${this._timeupdate}, now: ${Date.now()}, diff: ${Date.now() - this._timeupdate}`, true);
+            if (Date.now() - this._timeupdate <= this._maxDiff / 2) {
+                // @ts-ignore
+                // _log(`_onPlaying if`, true);
+                this._state = 1 /* VIDEO_STATE.PLAYING */;
+                this._triggerUpdate();
+            }
+        }, this._maxDiff);
+        // this._state = VIDEO_STATE.PLAYING;
+        // if (this._playingCheckerId != null) {
+        //     window.clearTimeout(this._playingCheckerId);
+        // }
+        // this._latestPlayingStamp = this._video.currentTime * 1000;
+        // this._latestPlayingDateStamp = new Date().getTime();
+        // this._triggerUpdate();
+        //
+        // // если через 100ms не время не изменится - встаем на паузу
+        // // если до исполнения таймера были другие события - то отменять таймер
+        // this._playingCheckerId = window.setTimeout(() => {
+        //     const currentTime = this._video.currentTime * 1000;
+        //     const diff = currentTime - this._latestPlayingStamp;
+        //
+        //     const timeSpent = new Date().getTime() - this._latestPlayingDateStamp;
+        //
+        //     // @ts-ignore
+        //     _log(`check, currentTime: ${currentTime}, latestPlayingStamp: ${this._latestPlayingStamp}, diff: ${diff}, timeSpent: ${timeSpent}`, true);
+        //     if (diff <= (timeSpent / 2)) {
+        //         this._state = VIDEO_STATE.WAITING;
+        //         this._triggerUpdate();
+        //     }
+        // }, 100);
+    }
+    _triggerUpdate() {
+        if (this._state === 1 /* VIDEO_STATE.PLAYING */) {
+            this._onPlayingCb();
+        }
+        else if (this._state === 2 /* VIDEO_STATE.WAITING */) {
+            this._onWaitingCb();
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLVideoElement`, `() => void`, `() => void`]; }
+}
+
+// export const tryCreateAtLayer = (layerNodeRef: HTMLElement): IElement {
+//     const
+// }
+//  args nodeRef, elementClassName
+const tryCreateFromHtmlElement = (nodeRef, layer) => {
+    const layoutApi = layer.layoutService.layoutApi;
+    const layersNodesRefs = layer.slide.layersNodesRefs;
+    for (let elementClassName of nodeRef.classList.values()) {
+        // console.log({ elementClassName });
+        switch (elementClassName) {
+            //////// base elements ///////
+            case Text.className():
+                return new Text(nodeRef, layer);
+            case Button.className():
+                return new Button(nodeRef, layer);
+            case Image.className():
+                return new Image(nodeRef, layer);
+            case SwipeUp.className():
+                return new SwipeUp(nodeRef, layer);
+            case SwipeUpItems.className():
+                return new SwipeUpItems(nodeRef, layer);
+            case Video.className():
+                return new Video(nodeRef, layer, layoutApi.VideoPlayer, layer.layoutService.sdkApi);
+            //////// widgets ///////
+            case Copy.className():
+                return layoutApi.widgetCopyApi ? new Copy(nodeRef, layer, layoutApi.widgetCopyApi) : null;
+            case Barcode.className():
+                return layoutApi.widgetBarcodeApi ? new Barcode(nodeRef, layer, layoutApi.widgetBarcodeApi) : null;
+            case DataInput.className():
+                return layoutApi.widgetDataInputApi ? new DataInput(nodeRef, layer, layoutApi.widgetDataInputApi) : null;
+            case DateCountdown.className():
+                return layoutApi.widgetDateCountdownApi ? new DateCountdown(nodeRef, layer, layersNodesRefs, layoutApi.widgetDateCountdownApi) : null;
+            case Poll.className():
+                return layoutApi.widgetPollApi ? new Poll(nodeRef, layer, layoutApi.widgetPollApi) : null;
+            case PollLayers.className():
+                return layoutApi.widgetPollLayersApi ? new PollLayers(nodeRef, layer, layersNodesRefs, layoutApi.widgetPollLayersApi) : null;
+            case Quest.className():
+                return layoutApi.widgetQuestApi ? new Quest(nodeRef, layer, layoutApi.widgetQuestApi) : null;
+            case Quiz.className():
+                return layoutApi.widgetQuizApi ? new Quiz(nodeRef, layer, layoutApi.widgetQuizApi) : null;
+            case QuizGrouped.className():
+                return layoutApi.widgetQuizGroupedApi ? new QuizGrouped(nodeRef, layer, layoutApi.widgetQuizGroupedApi) : null;
+            case RangeSlider.className():
+                return layoutApi.widgetRangeSliderApi ? new RangeSlider(nodeRef, layer, layoutApi.widgetRangeSliderApi) : null;
+            case Rate.className():
+                return layoutApi.widgetRateApi ? new Rate(nodeRef, layer, layoutApi.widgetRateApi) : null;
+            case Share.className():
+                return layoutApi.widgetShareApi ? new Share(nodeRef, layer, layersNodesRefs, layoutApi.widgetShareApi) : null;
+            case Test.className():
+                return layoutApi.widgetTestApi ? new Test(nodeRef, layer, layoutApi.widgetTestApi) : null;
+            case Vote.className():
+                return layoutApi.widgetVoteApi ? new Vote(nodeRef, layer, layoutApi.widgetVoteApi) : null;
+            case Products.className():
+                return layoutApi.widgetProductsApi ? new Products(nodeRef, layer, layoutApi.widgetProductsApi) : null;
+        }
+    }
+    return null;
+};
+
+var TimelineDisabledState;
+(function (TimelineDisabledState) {
+    TimelineDisabledState[TimelineDisabledState["disabled"] = 0] = "disabled";
+    TimelineDisabledState[TimelineDisabledState["enabled"] = 1] = "enabled";
+})(TimelineDisabledState || (TimelineDisabledState = {}));
+class SlideTimeline {
+    slideIndex;
+    slideDuration;
+    slideDisabledTimer;
+    slideReady;
+    _afterResumeQueuePush;
+    constructor(slideIndex, slideDuration, slideDisabledTimer, slideReady, _afterResumeQueuePush) {
+        this.slideIndex = slideIndex;
+        this.slideDuration = slideDuration;
+        this.slideDisabledTimer = slideDisabledTimer;
+        this.slideReady = slideReady;
+        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this.timelineDisabledState = this.slideDisabledTimer ? TimelineDisabledState.disabled : TimelineDisabledState.enabled;
+    }
+    resumedAt = new Date().getTime();
+    timeSpent = 0;
+    timelineDisabledState;
+    currentState = "stop" /* TIMELINE_ACTION.STOP */;
+    static get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    get layoutService() {
+        return SlideTimeline.layoutService;
+    }
+    get isSDKSupportUpdateTimeline() {
+        if (SlideTimeline.layoutService.sdkApi.isAndroid) {
+            return SlideTimeline.layoutService.env.Android && "updateTimeline" in SlideTimeline.layoutService.env.Android;
+        }
+        else if (SlideTimeline.layoutService.sdkApi.isIOS) {
+            const mh = SlideTimeline.layoutService.env?.webkit?.messageHandlers ?? {};
+            return "updateTimeline" in mh;
+        }
+        else {
+            return false;
+        }
+    }
+    get index() {
+        return this.slideIndex;
+    }
+    async updateTimeline(action, showLoader = false, showError = false) {
+        // два кейса
+        // когда есть слои и у слоя вызываем showLayer который вызывает startTimer до старта слайда, потом start от sdk
+        // в итоге два события вместо одного (баг)
+        // второй кейс - когда заполнили виджет и он вызвал startDisabledTimer
+        // в этом случае проверка стейта action === this.currentState не выполнит startTimer (баг)
+        // можно сделать action_start_timer_disabeld и timer_enabled чтобы это было два разных состояния
+        // if (action === this.currentState) {
+        //     return;
+        // }
+        this.currentState = action;
+        let currentTime = this.timeSpent;
+        let duration = this.slideDuration;
+        // tmp
+        // todo брать из модели
+        if (!duration) {
+            duration = DEFAULT_SLIDE_DURATION;
+        }
+        if (this.timelineDisabledState === TimelineDisabledState.disabled) {
+            currentTime = 0;
+            duration = 0;
+        }
+        if (currentTime > duration) {
+            currentTime = duration;
+        }
+        //@ts-ignore
+        // window._log(`updateTimeline 1, a: ${action} ct: ${currentTime} d: ${duration} tds: ${this.timelineDisabledState}`, true);
+        await this.slideReady.then();
+        //@ts-ignore
+        // window._log(`updateTimeline, a: ${action} ct: ${currentTime} d: ${duration} tds: ${this.timelineDisabledState}`, true);
+        // console.trace(`updateTimeline ${action} slideIndex: ${this.slideIndex} currentTime:${currentTime} duration:${duration} tds: ${this.timelineDisabledState}`);
+        SlideTimeline.layoutService.sdkApi.updateTimeline(this.slideIndex, action, currentTime, duration, showLoader, showError);
+    }
+    /**
+     * Start timeline after slide started
+     * Nothing do if old sdk
+     */
+    slideStarted() {
+        // console.trace("slideStarted");
+        if (this.isSDKSupportUpdateTimeline) {
+            this.resumedAt = new Date().getTime();
+            this.timeSpent = 0; // for case when instance exists, but we return to slide again
+            this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+        }
+    }
+    slideRestarted() {
+        // console.trace("slideRestarted");
+        if (this.isSDKSupportUpdateTimeline) {
+            this.resumedAt = new Date().getTime();
+            this.timeSpent = 0;
+            this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+        }
+    }
+    /**
+     *
+     */
+    slidePaused(videoCurrentTime) {
+        // console.trace("slidePaused");
+        if (this.isSDKSupportUpdateTimeline) {
+            if (videoCurrentTime != null) {
+                this.timeSpent = Math.round(videoCurrentTime);
+            }
+            else {
+                const globalCurrentTime = new Date().getTime();
+                let spent = globalCurrentTime - this.resumedAt;
+                this.timeSpent += spent;
+            }
+            this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */);
+        }
+        else {
+            this.layoutService.sdkApi.cardPausedCallback(videoCurrentTime);
+        }
+    }
+    slideResumed(videoCurrentTime) {
+        // console.trace("slideResumed");
+        // @ts-ignore
+        // window._log(`updateTimeline slideResumed ${videoCurrentTime}`, true);
+        if (this.isSDKSupportUpdateTimeline) {
+            if (videoCurrentTime != null) {
+                this.timeSpent = Math.round(videoCurrentTime);
+            }
+            this.resumedAt = new Date().getTime();
+            this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+        }
+        else {
+            this.layoutService.sdkApi.cardResumedCallback(videoCurrentTime);
+        }
+    }
+    slideStopped() {
+        // console.trace("slideStopped");
+        if (this.isSDKSupportUpdateTimeline) {
+            this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */);
+        }
+    }
+    /**
+     * Update timer state (duration from 0 to actual value) and start timeline
+     * used by widgets
+     */
+    startDisabledTimeline(fallback) {
+        // if app is paused (in background) - don't call start timeline (Android issues)
+        // @ts-ignore
+        // window._log(`Push startDisabledTimeline to queue at state: ${window.slideApi.state}, time: ${new Date().getTime()}`, true);
+        this._afterResumeQueuePush(() => {
+            // @ts-ignore
+            // window._log(`Call startDisabledTimeline at state: ${window.slideApi.state}, time: ${new Date().getTime()}`, true);
+            if (this.isSDKSupportUpdateTimeline) {
+                this.timelineDisabledState = TimelineDisabledState.enabled;
+                this.timeSpent = 0;
+                this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+            }
+            else {
+                // OLD SDK
+                fallback();
+            }
+        });
+    }
+    onSlideDataWaiting(videoCurrentTime) {
+        // console.trace("onSlideDataWaiting");
+        // @ts-ignore
+        // window._log(`updateTimeline onSlideDataWaiting ${videoCurrentTime}`, true);
+        if (videoCurrentTime != null) {
+            this.timeSpent = Math.round(videoCurrentTime);
+        }
+        else {
+            const globalCurrentTime = new Date().getTime();
+            let spent = globalCurrentTime - this.resumedAt;
+            this.timeSpent += spent;
+        }
+        this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */, true, false);
+    }
+    onSlideError(videoCurrentTime) {
+        // console.trace("onSlideError");
+        if (videoCurrentTime != null) {
+            this.timeSpent = Math.round(videoCurrentTime);
+        }
+        else {
+            const globalCurrentTime = new Date().getTime();
+            let spent = globalCurrentTime - this.resumedAt;
+            this.timeSpent += spent;
+        }
+        this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */, false, true);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `boolean`, `Promise`, `(cb: () => void) => void`]; }
+}
+
+class Layer {
+    _nodeRef;
+    _slide;
+    _slideReadyPromise;
+    _afterResumeQueuePush;
+    _slideIndex;
+    _cardId;
+    _cardType;
+    _slideCount;
+    _duration;
+    _disabledTimer;
+    _disabledNavigation;
+    _elements = [];
+    _timeline;
+    constructor(_nodeRef, _slide, _slideReadyPromise, _afterResumeQueuePush) {
+        this._nodeRef = _nodeRef;
+        this._slide = _slide;
+        this._slideReadyPromise = _slideReadyPromise;
+        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this._slideIndex = parseInt(this._nodeRef.getAttribute("data-index") ?? "0");
+        this._cardId = parseInt(this._nodeRef.getAttribute("data-id") ?? "0");
+        this._cardType = parseInt(this._nodeRef.getAttribute("data-card-type") ?? "1") || 1 /* CARD_TYPE.STORY */;
+        this._slideCount = parseInt(this._nodeRef.getAttribute("data-slide-count") ?? "0");
+        this._duration = parseInt(this._nodeRef.getAttribute("data-duration") ?? "") || DEFAULT_SLIDE_DURATION;
+        this._disabledTimer = this._nodeRef.getAttribute("data-disable-timer") === "1";
+        this._disabledNavigation = this._nodeRef.getAttribute("data-disable-navigation") === "1";
+        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterResumeQueuePush);
+        const _elementsNodes = this._nodeRef.querySelectorAll(".narrative-slide-elements .narrative-element");
+        let layerWithWidgetQuest = false;
+        _elementsNodes.forEach(item => {
+            let element = tryCreateFromHtmlElement(item, this);
+            if (element) {
+                this._elements.push(element);
+                if (element instanceof Quest) {
+                    layerWithWidgetQuest = true;
+                }
+            }
+        });
+        // console.log({ _elementsNodes }, this._elements);
+        /**
+         * Special behaviour for widget Quest
+         * if current slide/layer without WidgetQuest element explicit but story has type Quest
+         * - then init WidgetQuest with layer instead of WidgetQuest element (required for WidgetQuest slides navigation)
+         */
+        if (this.isQuest && !layerWithWidgetQuest && this.layoutService.layoutApi.widgetQuestApi != null) {
+            this._elements.push(new Quest(this._nodeRef, this, this.layoutService.layoutApi.widgetQuestApi));
+        }
+    }
+    init(localData) {
+        if (this.sdkApi.isIOS || this.sdkApi.isAndroid) {
+            this._nodeRef.classList.add("_app");
+            this.sdkApi.isIOS && this._nodeRef.classList.add("_isIos");
+            this.sdkApi.isAndroid && this._nodeRef.classList.add("_isAndroid");
+        }
+        const promises = this._elements.map(element => element.init(localData));
+        this._initTextElementAutoWidthCorrection();
+        this._initTextFit();
+        return promises;
+    }
+    get nodeRef() {
+        return this._nodeRef;
+    }
+    get elements() {
+        return this._elements;
+    }
+    get slide() {
+        return this._slide;
+    }
+    get timeline() {
+        return this._timeline;
+    }
+    get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    get sdkApi() {
+        return container.get({ identifier: "SDKApi" });
+    }
+    getLocalData() {
+        return this.layoutService.sdkApi.getCardLocalData();
+    }
+    get isQuest() {
+        return this._nodeRef.getAttribute("data-quest-count") != null;
+    }
+    _initTextFit() {
+        const textLines = Array.prototype.slice.call(this._nodeRef.querySelectorAll(".narrative-element-text-wrapper>.narrative-element-text-lines"));
+        TextFit(textLines, {});
+    }
+    _initTextElementAutoWidthCorrection() {
+        const textLines = this._nodeRef.querySelectorAll(".narrative-element-text-wrapper>.narrative-element-text-lines");
+        for (const item of textLines) {
+            if (item.parentElement) {
+                new TextElementAutoWidthCorrection(item.parentElement);
+            }
+        }
+    }
+    get slideIndex() {
+        return this._slideIndex;
+    }
+    get cardId() {
+        return this._cardId;
+    }
+    get cardType() {
+        return this._cardType;
+    }
+    get slideCount() {
+        return this._slideCount;
+    }
+    get disabledNavigation() {
+        return this._disabledNavigation;
+    }
+    get videoElement() {
+        for (const element of this._elements) {
+            if (Video.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get rangeSliderElement() {
+        for (const element of this._elements) {
+            if (RangeSlider.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get quizElement() {
+        for (const element of this._elements) {
+            if (Quiz.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get quizGroupedElement() {
+        for (const element of this._elements) {
+            if (QuizGrouped.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get questElement() {
+        for (const element of this._elements) {
+            if (Quest.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get testElement() {
+        for (const element of this._elements) {
+            if (Test.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get dataInputElement() {
+        for (const element of this._elements) {
+            if (DataInput.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get pollElement() {
+        for (const element of this._elements) {
+            if (Poll.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get pollLayersElement() {
+        for (const element of this._elements) {
+            if (PollLayers.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get rateElement() {
+        for (const element of this._elements) {
+            if (Rate.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get shareElement() {
+        for (const element of this._elements) {
+            if (Share.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get swipeUpElement() {
+        for (const element of this._elements) {
+            if (SwipeUp.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get swipeUpItemsElement() {
+        for (const element of this._elements) {
+            if (SwipeUpItems.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    get productsElement() {
+        for (const element of this._elements) {
+            if (Products.isTypeOf(element)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    isClickCapturedBySlider() {
+        return (this.rangeSliderElement?.isClickCapturedBySlider ?? false) || (this.productsElement?.isClickCapturedByWidget ?? false);
+    }
+    _animationPauseCb;
+    _animationResumeCb;
+    async start(muted = true) {
+        const videoElement = this.videoElement;
+        let currentTime = 0;
+        if (videoElement != null) {
+            currentTime = (await videoElement.start(muted)).currentTime;
+        }
+        if (this.sdkApi.cardAnimation) {
+            this._animationPauseCb = this.sdkApi.cardAnimation.start(this._nodeRef);
+        }
+        for (const element of this._elements) {
+            element.onStart();
+        }
+        for (const element of this._elements) {
+            element.onResume();
+        }
+        // skip start timeline if we returned to slide with enabled timer and opened WidgetProducts modal
+        if (!this.isLayerForcePaused) {
+            this.timeline.slideStarted();
+        }
+        return { currentTime };
+    }
+    async stop() {
+        this.videoElement?.stop();
+        this.sdkApi.cardAnimation?.stop(this._nodeRef);
+        for (const element of this._elements) {
+            element.onPause();
+        }
+        for (const element of this._elements) {
+            element.onStop();
+        }
+        this._timeline.slideStopped();
+    }
+    stopInternal() {
+        this.videoElement?.stop();
+        this.sdkApi.cardAnimation?.stop(this._nodeRef);
+        for (const element of this._elements) {
+            element.onPause();
+        }
+        for (const element of this._elements) {
+            element.onStop();
+        }
+    }
+    async pause(resetVideoTime = false, stopAnimation = false) {
+        return new Promise(resolve => {
+            const cb = () => {
+                let currentTime = this.videoElement?.pause(resetVideoTime) ?? null;
+                if (stopAnimation) {
+                    this.sdkApi.cardAnimation?.stop(this._nodeRef);
+                }
+                else {
+                    if (this._animationPauseCb != null && isFunction(this._animationPauseCb)) {
+                        this._animationResumeCb = this._animationPauseCb(false);
+                    }
+                }
+                if (currentTime != null) {
+                    currentTime *= 1000;
+                }
+                for (const element of this._elements) {
+                    element.onPause();
+                }
+                this.timeline.slidePaused(currentTime);
+                resolve({ currentTime });
+            };
+            const videoStartedPromise = this.videoElement?.videoStartedPromise;
+            if (videoStartedPromise != null && videoStartedPromise.then != null) {
+                videoStartedPromise.then(cb);
+            }
+            else {
+                cb();
+            }
+        });
+    }
+    async resume() {
+        return new Promise(resolve => {
+            const cb = ({ currentTime }) => {
+                // console.log("resumed cb with currentTime", { currentTime });
+                if (currentTime != null) {
+                    currentTime *= 1000;
+                }
+                if (isFunction(this._animationResumeCb)) {
+                    this._animationResumeCb();
+                }
+                for (const element of this._elements) {
+                    element.onResume();
+                }
+                this.timeline.slideResumed(currentTime);
+                resolve({ currentTime });
+            };
+            const videoStartedPromise = this.videoElement?.resume();
+            if (videoStartedPromise != null && videoStartedPromise.then != null) {
+                videoStartedPromise.then(cb);
+            }
+            else {
+                cb({ currentTime: null });
+            }
+        });
+    }
+    enableAudio() {
+        this.videoElement?.enableAudio();
+    }
+    disableAudio() {
+        this.videoElement?.disableAudio();
+    }
+    get isLayerForcePaused() {
+        return this.elements.some(element => element.isLayerForcePaused);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Slide`, `Promise`, `(cb: () => void) => void`]; }
+}
+const TextFit = (function () {
+    const defaultSettings = {
+        step: 1,
+        maxSteps: 100,
+    };
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+    return function textFit(els, options) {
+        if (!options)
+            options = {};
+        // Extend options.
+        let settings = {};
+        for (let key in defaultSettings) {
+            if (hasOwnProperty.call(options, key)) {
+                // @ts-ignore
+                settings[key] = options[key];
+            }
+            else {
+                // @ts-ignore
+                settings[key] = defaultSettings[key];
+            }
+        }
+        // Support passing a single el
+        let elType = Object.prototype.toString.call(els);
+        if (elType !== "[object Array]" && elType !== "[object NodeList]" && elType !== "[object HTMLCollection]") {
+            // @ts-ignore
+            els = [els];
+        }
+        // Process each el we've passed.
+        for (let i = 0; i < els.length; i++) {
+            processItem(els[i], settings);
+        }
+    };
+    function processItem(el, settings) {
+        if (!isElement(el) || el.getAttribute("textFitted")) {
+            return false;
+        }
+        let parentHeight, parent;
+        let low, high;
+        parent = el.parentElement;
+        if (!isElement(parent)) {
+            return false;
+        }
+        // Get element data.
+        parentHeight = innerHeight(parent);
+        // Don't process if we can't find box dimensions
+        if (parentHeight <= 0) {
+            console.warn(`Set a static height and width on the target element ${el.outerHTML} before using textFit!`, el);
+            return;
+        }
+        // Set textFitted attribute so we know this was processed.
+        el.setAttribute("textFitted", "1");
+        let step = settings.step;
+        high = parseFloat(window.getComputedStyle(el).fontSize);
+        low = high - step * settings.maxSteps;
+        let size = high;
+        if (size < low)
+            return;
+        while (size >= low) {
+            let elBoundingClientRect = el.getBoundingClientRect();
+            if (elBoundingClientRect.height > parentHeight) {
+                size -= step;
+                el.style.fontSize = size + "px";
+            }
+            else {
+                break;
+            }
+        }
+    }
+    // Calculate height without padding.
+    // @ts-ignore
+    function innerHeight(el) {
+        let style = window.getComputedStyle(el, null);
+        return el.getBoundingClientRect().height - parseInt(style.getPropertyValue("padding-top"), 10) - parseInt(style.getPropertyValue("padding-bottom"), 10);
+    }
+    //Returns true if it is a DOM element
+    // @ts-ignore
+    function isElement(o) {
+        return typeof HTMLElement === "object"
+            ? o instanceof HTMLElement //DOM2
+            : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string";
+    }
+})();
+class TextElementAutoWidthCorrection {
+    textWrapperRef;
+    //       wrapper (flex row)
+    // lead | text | tail //
+    //       wrapper (flex row)
+    // text - can be multiline, use overflow-wrap: anywhere - for overflow prevent
+    // iOS 17.5 break text on second line despite on enough space
+    // fix it - detect and set min-width + max-width for text element
+    leadWidth = null;
+    tailWidth = null;
+    columnGap = null;
+    wrapperInnerWidth = null;
+    //Returns true if it is a DOM element
+    // @ts-ignore
+    isElement(o) {
+        return typeof HTMLElement === "object"
+            ? o instanceof HTMLElement //DOM2
+            : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string";
+    }
+    computeWrapperSize() {
+        const { columnGap, width, paddingLeft, paddingRight } = window.getComputedStyle(this.textWrapperRef, null);
+        this.columnGap = parseFloat(columnGap);
+        this.wrapperInnerWidth = parseFloat(width) - parseFloat(paddingLeft) - parseFloat(paddingRight);
+    }
+    measureTextWidth(text, { fontSize, fontWeight, fontStyle, fontFamily, }) {
+        let textRef = document.createElement("div");
+        textRef.style.setProperty("font-size", fontSize);
+        textRef.style.setProperty("font-weight", fontWeight);
+        textRef.style.setProperty("font-style", fontStyle);
+        textRef.style.setProperty("font-family", fontFamily);
+        textRef.style.setProperty("position", "absolute");
+        textRef.style.setProperty("left", "-1000px");
+        textRef.style.setProperty("top", "-1000px");
+        textRef.style.setProperty("white-space", "nowrap");
+        // textRef.style.setProperty("visibility", "hidden");
+        textRef.textContent = text;
+        document.body.appendChild(textRef);
+        const textWidth = parseFloat(window.getComputedStyle(textRef, null).width);
+        document.body.removeChild(textRef);
+        // @ts-ignore
+        textRef = null;
+        return textWidth;
+    }
+    constructor(textWrapperRef) {
+        this.textWrapperRef = textWrapperRef;
+        const leadRef = textWrapperRef.querySelector(".narrative-element-text-lines-lead");
+        const tailRef = textWrapperRef.querySelector(".narrative-element-text-lines-tail");
+        const textRef = textWrapperRef.querySelector(".narrative-element-text-lines");
+        if (leadRef && tailRef && textRef) {
+            if (!this.isElement(textRef) || textRef.getAttribute("textWidthCorrected")) {
+                return;
+            }
+            // Set textFitted attribute so we know this was processed.
+            textRef.setAttribute("textWidthCorrected", "1");
+            this.computeWrapperSize();
+            this.leadWidth = leadRef.clientWidth;
+            this.tailWidth = tailRef.clientWidth;
+            const textMaxWidth = this.wrapperInnerWidth -
+                this.leadWidth -
+                this.columnGap * (this.leadWidth ? 1 : 0) -
+                this.tailWidth -
+                this.columnGap * (this.tailWidth ? 1 : 0);
+            const { fontSize, fontFamily, fontWeight, fontStyle } = window.getComputedStyle(textRef, null);
+            const textMinWidth = Math.min(this.measureTextWidth(textRef.textContent ?? "", {
+                fontSize,
+                fontFamily,
+                fontWeight,
+                fontStyle,
+            }), textMaxWidth);
+            // setTimeout(() => {
+            //     console.log({
+            //         textMaxWidth,
+            //         textMinWidth,
+            //         columnGap: this.columnGap,
+            //         leadWidth: this.leadWidth,
+            //         tailWidth: this.tailWidth,
+            //         wrapperInnerWidth: this.wrapperInnerWidth,
+            //     });
+            // }, 10 * 1000);
+            textRef.style.setProperty("min-width", `${textMinWidth}px`);
+            textRef.style.setProperty("max-width", `${textMaxWidth}px`);
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`]; }
+}
+
+class Slide {
+    _slidesNodesRefs;
+    _slideReadyPromise;
+    _afterResumeQueuePush;
+    _layers;
+    _start;
+    constructor(_slidesNodesRefs, _slideReadyPromise, _afterResumeQueuePush) {
+        this._slidesNodesRefs = _slidesNodesRefs;
+        this._slideReadyPromise = _slideReadyPromise;
+        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this._start = window.performance.now();
+        if (!this._slidesNodesRefs.length) {
+            throw new Error("No slides found.");
+        }
+        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterResumeQueuePush));
+        this._activeLayer = this._layers[0];
+    }
+    _activeLayer;
+    get activeLayer() {
+        return this._activeLayer;
+    }
+    get layers() {
+        return this._layers;
+    }
+    get layersNodesRefs() {
+        return this._slidesNodesRefs;
+        // call from Slide CTOR -> exception, bcz this._layers is empty
+        // return this._layers.map(layer => layer.nodeRef);
+    }
+    _initMultiSlide(localData) {
+        const multiSlideApi = this.layoutService.layoutApi.widgetMultiSlideApi;
+        if (multiSlideApi != null && this.layers.length > 1) {
+            try {
+                multiSlideApi.init(this.layersNodesRefs, localData);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+    async init(localData) {
+        this._initMultiSlide(localData);
+        const promises = this.layers.flatMap(layer => layer.init(localData));
+        const res = await Promise.all(promises);
+        // rescan current slide
+        this.refreshActiveLayer();
+        // if not all true - return false
+        // if not all Widgets return finishRender: true - return false
+        return !res.some(item => item === false);
+    }
+    refreshActiveLayer() {
+        this.layers.forEach(layer => {
+            if (!layer.nodeRef.classList.contains("hidden")) {
+                this._activeLayer = layer;
+            }
+        });
+    }
+    showLayer(showIndex, muted) {
+        // todo allow to call only if Layer in state LAYER_STATE::STARTED
+        // hotfix (VOD and showLayer issue) - just skip showLayer for already visible layer
+        // if (this.layers[showIndex] != null && this.layers[showIndex].nodeRef != null && !this.layers[showIndex].nodeRef.classList.contains("hidden")) {
+        //     console.log("hotfix (VOD and showLayer issue) - just skip showLayer for already visible layer");
+        //     return;
+        // }
+        // console.log(`showLayer: ${showIndex}`);
+        // first - stop (for correct timeline calls)
+        this.layers.forEach((layer, index) => {
+            // const isHidden = layer.nodeRef.classList.contains("hidden");
+            if (index !== showIndex) {
+                layer.nodeRef.classList.add("hidden");
+                layer.stop();
+            }
+        });
+        this.layers.forEach((layer, index) => {
+            // const isHidden = layer.nodeRef.classList.contains("hidden");
+            if (index === showIndex) {
+                this._activeLayer = layer;
+                layer.nodeRef.classList.remove("hidden");
+                layer.start(muted);
+            }
+        });
+    }
+    get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    get slideIndex() {
+        return this._activeLayer.slideIndex;
+    }
+    get cardId() {
+        return this._activeLayer.cardId;
+    }
+    get cardType() {
+        return this._activeLayer.cardType;
+    }
+    get slideCount() {
+        return this._activeLayer.slideCount;
+    }
+    get disabledNavigation() {
+        return this._activeLayer.disabledNavigation;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `Promise`, `(cb: () => void) => void`]; }
+}
+
+function getViewportWidth(viewport) {
+    return viewport.innerWidth || viewport.document.documentElement.clientWidth || viewport.document.body.clientWidth;
+}
+function getViewportHeight(viewport) {
+    return viewport.innerHeight || viewport.document.documentElement.clientHeight || viewport.document.body.clientHeight;
+}
+let SlideApi$1 = class SlideApi {
+    config;
+    get layoutDirection() {
+        // warning, detection in ctor not working, bcz sdk changes layout later
+        return this.layoutService.env.getComputedStyle(this._slideWrapper).direction === "rtl" ? "rtl" : "ltr";
+    }
+    static renderedBoxClassName = "narrative-slide-box-rendered";
+    static prerenderBoxClassName = "narrative-slide-box-prerender";
+    _slideWrapper;
+    _viewport;
+    constructor(config) {
+        this.config = config;
+        this._slideWrapper = config.slideWrapper;
+        this._viewport = config.viewport;
+        this.refreshSizes = proxy(this.refreshSizes, this);
+        this.initListeners();
+        this.refreshSizes();
+        const slideBox = document.getElementById("narrative-slide-box");
+        // todo via first child and its innerText - faster variant
+        if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
+            this._slideInInit = null;
+            this._slideInRender = true;
+            this._init(() => this._slideBoxRenderComplete(), () => this._slideBoxRenderError()).then(({ slide, result, reason }) => {
+                this._slide = slide;
+                if (config.slideLoadedCb != null) {
+                    config.slideLoadedCb({ slide, result, reason });
+                }
+            });
+        }
+    }
+    destroy() {
+        this.destroyListeners();
+    }
+    initListeners() {
+        this._viewport.addEventListener("resize", this.refreshSizes);
+    }
+    destroyListeners() {
+        this._viewport.removeEventListener("resize", this.refreshSizes);
+    }
+    refreshSizes() {
+        const viewportWidth = getViewportWidth(this._viewport);
+        const viewportHeight = getViewportHeight(this._viewport);
+        const viewportRatio = viewportWidth / viewportHeight;
+        let slideWidth = 0;
+        let slideHeight = 0;
+        // _ratio = 310 / 480,
+        const _ratio = this.config.slideRatio;
+        let _isFullscreen = this.config.isFullscreen;
+        const slideOffset = this._slideWrapper.querySelector(".narrative-slide-offset");
+        let offset = 0;
+        let xOffset = "0px";
+        // for elements with bottom anchor (absolute position)
+        let yOffset = "0px";
+        // alert(viewportHeight);
+        if (viewportRatio > _ratio) {
+            // disable _isFullscreen if viewport small
+            _isFullscreen = false;
+        }
+        if (_isFullscreen) {
+            // fit by width, top and bottom - to offscreen or fill with bg image
+            slideWidth = viewportWidth;
+            slideHeight = Math.ceil(viewportWidth / _ratio);
+            offset = Math.ceil(slideHeight - viewportHeight) / 2;
+            if (slideOffset != null) {
+                slideOffset.style.margin = -1 * offset + "px" + " 0 ";
+            }
+            // offset from viewport bottom to StoryBottom plus safe area offset bottom
+            yOffset = `calc(${offset}px + env(safe-area-inset-bottom))`;
+            // detect safe area offset
+        }
+        else {
+            // более квадратное чем надо
+            if (viewportRatio > _ratio) {
+                // fit by width, top and bottom - to offscreen
+                slideWidth = viewportWidth;
+                slideHeight = Math.ceil(viewportWidth / _ratio);
+                offset = Math.ceil(slideHeight - viewportHeight) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = -offset + "px" + " 0 ";
+                }
+                yOffset = offset + "px";
+            }
+            else {
+                // вьюпорт более вытянутый чем надо
+                // fit by height, sides - to offscreen
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
+                }
+                xOffset = offset + "px";
+            }
+        }
+        const fontSize = slideWidth / 20;
+        // todo CSP violation
+        this._slideWrapper.style.fontSize = fontSize + "px";
+        if (slideOffset != null) {
+            // todo CSP violation
+            slideOffset.style.setProperty("--y-offset", yOffset);
+            slideOffset.style.setProperty("--x-offset", xOffset);
+        }
+        if (_isFullscreen) {
+            slideOffset?.classList.add("narrative-slide-offset-fullscreen");
+        }
+        if (this.config.userResizeHandler != null) {
+            this.config.userResizeHandler({ viewportWidth, viewportHeight, fontSize });
+        }
+    }
+    async showSlide(html) {
+        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+        const _result = { slide: this.slide, result: false, reason: "" };
+        if (slideBox && slideBoxPrerender) {
+            if (this._slideInRender) {
+                this._slideInRender = false;
+                this._slideBoxRenderComplete();
+            }
+            this._slideInInit = null;
+            this._slideInRender = true;
+            slideBoxPrerender.innerHTML = html;
+            const { slide, result, reason } = await this._init(() => this._slideBoxRenderComplete(), () => this._slideBoxRenderError());
+            this._slide = slide;
+            _result.result = result;
+            _result.reason = reason;
+        }
+        _result.slide = this.slide;
+        return _result;
+    }
+    handleBackpress() {
+        this.activeLayer.productsElement?.handleBackpress();
+    }
+    get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    getLocalData() {
+        return this.layoutService.sdkApi.getCardLocalData();
+    }
+    get sdkApi() {
+        return container.get({ identifier: "SDKApi" });
+    }
+    _fontsInit = false;
+    _initAndLoadFonts(fonts) {
+        if (this._fontsInit) {
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            if ("fonts" in document) {
+                // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
+                const promises = [];
+                try {
+                    if (fonts != null && Array.isArray(fonts)) {
+                        for (let i = 0; i < fonts.length; i++) {
+                            const src = fonts[i];
+                            if (src && src.family && src.style && src.weight && src.url) {
+                                // var font = new FontFace(fonts[i].family, "url(" + src.url + "&s=css_font_face)", {
+                                const font = new FontFace(fonts[i].family, "url(" + src.url + ")", {
+                                    style: src.style,
+                                    weight: src.weight,
+                                    // display: "block"
+                                });
+                                document.fonts.add && document.fonts.add(font);
+                                promises.push(font.load());
+                            }
+                        }
+                    }
+                    this._fontsInit = true;
+                    Promise.all(promises)
+                        .then(_ => {
+                        resolve();
+                    })
+                        .catch(reason => {
+                        console.error(reason);
+                        resolve();
+                    });
+                }
+                catch (e) {
+                    console.error(e);
+                    resolve();
+                }
+            }
+        });
+    }
+    _slide;
+    _slideInInit;
+    _state;
+    _afterStartInitQueue = [];
+    _afterResumeQueue = [];
+    get state() {
+        return this._state;
+    }
+    async _onAllMediaLoaded(slide) {
+        return new Promise((resolve, reject) => {
+            const promises = slide.layers.flatMap(layer => layer.elements.flatMap(element => element.mediaElementsLoadingPromises));
+            let checkerTimerId = undefined;
+            let timeOutFired = false;
+            if (promises.length > 0) {
+                checkerTimerId = this.layoutService.env.setTimeout(() => {
+                    timeOutFired = true;
+                    reject("onAllMediaLoaded timeout");
+                }, 3000);
+            }
+            else {
+                resolve();
+                return;
+            }
+            Promise.all(promises).then(_ => {
+                checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
+                if (!timeOutFired) {
+                    resolve();
+                }
+            }, reason => {
+                checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
+                if (!timeOutFired) {
+                    reject(reason);
+                }
+            });
+        });
+    }
+    async _init(slideBoxCb, slideBoxFailedCb) {
+        this._state = 0 /* STATE.INIT */;
+        const slideNodeRef = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName} .narrative-slide`);
+        const slidesNodesRefs = Array.prototype.slice.call(this._slideWrapper.querySelectorAll(`.${SlideApi.prerenderBoxClassName} .narrative-slide.narrative-multi-slide`));
+        if (!slidesNodesRefs.length && slideNodeRef != null) {
+            slidesNodesRefs.push(slideNodeRef);
+        }
+        if (!slidesNodesRefs.length) {
+            throw new Error("No slides found.");
+        }
+        let slideReadyResolve = null;
+        let slideReadyReject = null;
+        const slideReadyPromise = new Promise((resolve, reject) => {
+            slideReadyResolve = resolve;
+            slideReadyReject = reject;
+        });
+        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterResumeQueuePush.bind(this));
+        this._slideInInit = slide;
+        const onAllMediaLoaded = this._onAllMediaLoaded(slide);
+        if (this.sdkApi.isAndroid) {
+            this._afterStartInitQueue = [];
+        }
+        this._afterResumeQueue = [];
+        const result = { slide, result: false, reason: "" };
+        await this._initAndLoadFonts(this.layoutService.sdkApi.getCardFonts());
+        const localData = await this.getLocalData();
+        const finishRender = await slide.init(localData);
+        /**
+         * если есть виджеты, которых надо ждать - то не завершаем рендеринг текущего слайда
+         * пример - квест, если зашли в сторис а виджету нужно показать другой слайд вместо первого
+         */
+        if (finishRender) {
+            this._state = 1 /* STATE.INITED */;
+            try {
+                await onAllMediaLoaded;
+                result.result = true;
+                slideBoxCb();
+                this.layoutService.env.setTimeout(() => {
+                    slideReadyResolve();
+                });
+            }
+            catch (reason) {
+                console.log("SlideInit, onAllMediaLoaded reject", reason);
+                slideBoxFailedCb();
+                this.layoutService.env.setTimeout(() => {
+                    slideReadyReject();
+                });
+                result.result = false;
+                result.reason = String(reason);
+            }
+        }
+        else {
+            this._state = 10 /* STATE.STOPPED */;
+            this.layoutService.env.setTimeout(() => {
+                slideReadyResolve();
+            });
+            result.result = true;
+        }
+        return result;
+    }
+    _slideInRender = false;
+    _slideBoxRenderComplete() {
+        if (!this._slideInRender) {
+            this._slideInRender = true;
+            return;
+        }
+        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+        if (slideBox && slideBoxPrerender) {
+            slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
+            slideBox.classList.remove(SlideApi.renderedBoxClassName);
+            slideBox.classList.add(SlideApi.prerenderBoxClassName);
+            slideBox.innerHTML = "";
+            slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
+        }
+        this._slideInRender = false;
+    }
+    _slideBoxRenderError() {
+        // if (!slideInRender) {
+        //     slideInRender = true;
+        //     return;
+        // }
+        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+        if (slideBox && slideBoxPrerender) {
+            const slides = Array.prototype.slice.call(slideBoxPrerender.querySelectorAll(".narrative-slide"));
+            for (let i = 0; i < slides.length; ++i) {
+                const slide = slides[i];
+                if (slide) {
+                    slide.innerHTML = "";
+                }
+            }
+            slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
+            slideBox.classList.remove(SlideApi.renderedBoxClassName);
+            slideBox.classList.add(SlideApi.prerenderBoxClassName);
+            slideBox.innerHTML = "";
+            slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
+        }
+        // slideInRender = false;
+    }
+    async _startVideo(cb) {
+        const videoElement = this.slide?.activeLayer?.videoElement;
+        const videoStartedPromise = videoElement?.start(this._slideConfig.muted);
+        if (videoStartedPromise) {
+            videoStartedPromise.then(({ currentTime }) => {
+                cb({ currentTime, slideIndex: this.slide?.slideIndex || 0 });
+            });
+        }
+        else {
+            cb({ currentTime: 0, slideIndex: this.slide?.slideIndex || 0 });
+        }
+    }
+    _slideConfig = {};
+    async slideStart(config) {
+        // console.log(`slideStart slideIdx: ${this.activeLayer.slideIndex} state: ${this._state}`);
+        if (!(this._state === 10 /* STATE.STOPPED */ || this._state === 1 /* STATE.INITED */)) {
+            return { currentTime: 0 };
+        }
+        this._state = 2 /* STATE.START */;
+        this._slideConfig = config;
+        // start deferred fncs from widgets
+        // important - Android only
+        if (this.sdkApi.isAndroid && this._afterStartInitQueue && Array.isArray(this._afterStartInitQueue)) {
+            for (const job of this._afterStartInitQueue) {
+                if (isFunction(job)) {
+                    job();
+                }
+            }
+            this._afterStartInitQueue = [];
+        }
+        if (this._afterResumeQueue && Array.isArray(this._afterResumeQueue)) {
+            for (const job of this._afterResumeQueue) {
+                if (isFunction(job)) {
+                    job();
+                }
+            }
+            this._afterResumeQueue = [];
+        }
+        const { currentTime } = await this.slide.activeLayer.start(this._slideConfig.muted);
+        this._state = 3 /* STATE.STARTED */;
+        if (this.slide.activeLayer.isLayerForcePaused) {
+            this._state = 7 /* STATE.PAUSED */;
+        }
+        return { currentTime };
+    }
+    async slideRestart(config) {
+        this._state = 10 /* STATE.STOPPED */;
+        return this.slideStart(config);
+    }
+    _pauseCbTimer = null;
+    async slidePause() {
+        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */)) {
+            return;
+        }
+        // обход бага на андроиде (вызывает pause/resume при любом нажатии на экран, даже если это клик - для перехода по слайдам)
+        // поэтому делаем отложенный вызов (300мс) а если следом приходит stop - то отменяем таймер
+        const pauseCb = () => {
+            if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */)) {
+                return;
+            }
+            if (this.slide.activeLayer.isClickCapturedBySlider()) {
+                // stop pause event (from sdk) if _narrative_range_slider is active
+                return;
+            }
+            this._state = 6 /* STATE.PAUSE */;
+            // _log("pause: " + (performance.now() - window.start));
+            this.slide.activeLayer.pause(false, false);
+            // clean up
+            if (this._pauseCbTimer != null) {
+                clearTimeout(this._pauseCbTimer);
+            }
+            this._state = 7 /* STATE.PAUSED */;
+        };
+        if (this.sdkApi.isAndroid) {
+            this._pauseCbTimer = this.layoutService.env.setTimeout(pauseCb, 300);
+        }
+        else {
+            pauseCb();
+        }
+    }
+    async slideResume() {
+        if (this._pauseCbTimer != null) {
+            // отменяем pause если есть (баг андроида - шлет pause/resume на простой клик)
+            clearTimeout(this._pauseCbTimer);
+        }
+        if (this._state !== 7 /* STATE.PAUSED */) {
+            return;
+        }
+        this._state = 4 /* STATE.RESUME */;
+        // _log("resume: " + (performance.now() - window.start));
+        if (this._afterResumeQueue && Array.isArray(this._afterResumeQueue)) {
+            for (const job of this._afterResumeQueue) {
+                if (isFunction(job)) {
+                    job();
+                }
+            }
+            this._afterResumeQueue = [];
+        }
+        this.slide.activeLayer.resume();
+        this._state = 5 /* STATE.RESUMED */;
+    }
+    async slideStop() {
+        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 7 /* STATE.PAUSED */)) {
+            return;
+        }
+        this._state = 9 /* STATE.STOP */;
+        if (this._pauseCbTimer != null) {
+            // отменяем pause если есть (баг андроида - шлет pause/resume на простой клик)
+            clearTimeout(this._pauseCbTimer);
+        }
+        await this.slide.activeLayer.stop();
+        this._state = 10 /* STATE.STOPPED */;
+    }
+    slideTimerEnd() {
+        const defaultAction = () => {
+            const nextSlideIndex = this.slide.slideIndex + 1;
+            if (nextSlideIndex >= 0 && nextSlideIndex < this.slide.slideCount) {
+                this.sdkApi.showCardSlide(nextSlideIndex);
+            }
+            else {
+                this.sdkApi.cardShowNext();
+            }
+        };
+        if (this.activeLayer.questElement) {
+            const slideIndex = this.slide.slideIndex;
+            const slideCount = this.slide.slideCount;
+            const { continueDefaultNavigation } = this.activeLayer.questElement.handleRouteClick({
+                // handleRouteTrigger
+                direction: "forward",
+                slideIndex: slideIndex,
+                slideCount: slideCount,
+            });
+            if (continueDefaultNavigation) {
+                // default action
+                defaultAction();
+            }
+            return;
+        }
+        defaultAction();
+    }
+    // for call from SlideApi internals (from widgets)
+    // skip state checking and sdk issues
+    async slidePauseUI() {
+        await this.slide.activeLayer.pause(false, false);
+        this._state = 8 /* STATE.FORCE_PAUSED */;
+    }
+    // for call from SlideApi internals (from widgets)
+    // skip state checking and sdk issues
+    async slideResumeUI() {
+        await this.slide.activeLayer.resume();
+        this._state = 5 /* STATE.RESUMED */;
+    }
+    enableAudio() {
+        this.slide.activeLayer.enableAudio();
+        this._slideConfig.muted = false;
+    }
+    disableAudio() {
+        this.slide.activeLayer.disableAudio();
+        this._slideConfig.muted = true;
+    }
+    get isStopped() {
+        return this._state === 10 /* STATE.STOPPED */;
+    }
+    afterStartInitQueuePush(cb) {
+        if (!isFunction(cb)) {
+            return false;
+        }
+        if (this.sdkApi.isAndroid && this._state === 0 /* STATE.INIT */) {
+            this._afterStartInitQueue.push(cb);
+        }
+        else {
+            cb();
+        }
+    }
+    afterResumeQueuePush(cb) {
+        if (!isFunction(cb)) {
+            return false;
+        }
+        if ([4 /* STATE.RESUME */, 5 /* STATE.RESUMED */, 1 /* STATE.INITED */, 2 /* STATE.START */, 3 /* STATE.STARTED */].includes(this._state)) {
+            cb();
+        }
+        else {
+            this._afterResumeQueue.push(cb);
+        }
+    }
+    get activeLayer() {
+        return this.slide.activeLayer;
+    }
+    get slide() {
+        // todo - call showLayer with arg slide: Slide - where slide is widget parent (prevent mismatch)
+        // when widget in init state, it can call showLayer
+        // then we must call showLayer not on this._slide but on this._slideInInit (on slide contains widget itself)
+        return this._slideInInit || this._slide;
+    }
+    showLayer(index) {
+        // todo - call showLayer with arg slide: Slide - where slide is widget parent (prevent mismatch)
+        // when widget in init state, it can call showLayer
+        // then we must call showLayer not on this._slide but on this._slideInInit (on slide contains widget itself)
+        this.slide.showLayer(index, this._slideConfig.muted);
+    }
+    slideClickHandler(targetElement, navigationDirection) {
+        const result = { canClickNext: true };
+        let target = targetElement;
+        let element;
+        let propagation = true;
+        // prevent click on geometry
+        if (target?.classList.contains("narrative-element-geometry")) {
+            target = target?.querySelector(".narrative-element");
+        }
+        if (target?.classList.contains("narrative-element-link")) {
+            element = target;
+        }
+        else {
+            element = target?.closest(".narrative-element-link");
+        }
+        if (element) {
+            this._performLinkTarget(element);
+            result.canClickNext = false;
+            return result;
+        }
+        else {
+            /** Image */
+            if (target?.classList.contains("narrative-element-image")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-image");
+            }
+            if (element) {
+                this._performLinkTarget(element);
+                result.canClickNext = false;
+                return result;
+            }
+            /** Swipe Up */
+            if (target?.classList.contains("narrative-element-swipe-up")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-swipe-up");
+            }
+            if (element) {
+                if (this.slideSwipeUpHandler(element)) {
+                    result.canClickNext = false;
+                    return result;
+                }
+            }
+            /** Swipe Up Items */
+            if (target?.classList.contains("narrative-element-swipe-up-items")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-swipe-up-items");
+            }
+            if (element) {
+                if (this.slideSwipeUpHandler(element)) {
+                    result.canClickNext = false;
+                    return result;
+                }
+            }
+            /** Products */
+            if (target?.classList.contains("narrative-element-products")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-products");
+            }
+            if (element) {
+                if (this.slideSwipeUpHandler(element)) {
+                    result.canClickNext = false;
+                    return result;
+                }
+            }
+            /** Vote complete button (multiple choice) */
+            if (target?.classList.contains("narrative-element-vote-next-button")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-vote-next-button");
+            }
+            if (element) {
+                // if is widget file connected to Window
+                if (this.layoutService.layoutApi.widgetVoteApi) {
+                    result.canClickNext = this.layoutService.layoutApi.widgetVoteApi.click(element);
+                    return result;
+                }
+            }
+            /** Next button */
+            if (target?.classList.contains("narrative-element-quiz-next-button")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-quiz-next-button");
+            }
+            if (!element) {
+                if (target?.classList.contains("narrative-element-test-next-button")) {
+                    element = target;
+                }
+                else {
+                    element = target?.closest(".narrative-element-test-next-button");
+                }
+            }
+            if (element) {
+                this.layoutService.env.setTimeout(() => {
+                    this.sdkApi.showNextSlide(0);
+                });
+                result.canClickNext = false;
+                return result;
+            }
+            /** Range slider */
+            let rangeSliderBorderBoxView = target;
+            if (target?.classList.contains("border-box-view") || (rangeSliderBorderBoxView = target?.closest(".border-box-view"))) {
+                if (rangeSliderBorderBoxView?.parentElement && rangeSliderBorderBoxView.parentElement.classList.contains("narrative-element-range-slider")) {
+                    // skip click on .border-box-view inside .narrative-element-range-slider - prevent navigation trigger at click inside widget body (expect NextButton)
+                    result.canClickNext = false;
+                    return result;
+                }
+            }
+            // if (_hasClass(target, "rangeslider") || target.closest(".rangeslider")) {
+            //     return;
+            // }
+            /** Range slider complete button */
+            if (target?.classList.contains("narrative-element-range-slider-next-button")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-range-slider-next-button");
+            }
+            if (element) {
+                if (this.layoutService.layoutApi.widgetRangeSliderApi) {
+                    result.canClickNext = this.layoutService.layoutApi.widgetRangeSliderApi.click(element);
+                    return result;
+                }
+            }
+            /** Data input widget расширенный охват на весь виджет */
+            if (target?.classList.contains("narrative-element-data-input")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-data-input");
+            }
+            if (element) {
+                if (this.layoutService.layoutApi.widgetDataInputApi) {
+                    result.canClickNext = this.layoutService.layoutApi.widgetDataInputApi.click(element);
+                    return result;
+                }
+            }
+            /** quiz */
+            if (target?.classList.contains("narrative-element-quiz-answer")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-quiz-answer");
+            }
+            if (element) {
+                if (element.closest(".narrative-element-quiz")) {
+                    /* quiz */
+                    if (this.layoutService.layoutApi.widgetQuizApi) {
+                        propagation = this.layoutService.layoutApi.widgetQuizApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+                else if (element.closest(".narrative-element-quiz-grouped")) {
+                    /* quiz-grouped */
+                    if (this.layoutService.layoutApi.widgetQuizGroupedApi) {
+                        propagation = this.layoutService.layoutApi.widgetQuizGroupedApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+            }
+            /** poll or poll layers */
+            if (target?.classList.contains("narrative-element-poll-button")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-poll-button");
+            }
+            if (element) {
+                if (this.activeLayer.pollElement) {
+                    if (this.layoutService.layoutApi.widgetPollApi) {
+                        this.layoutService.layoutApi.widgetPollApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+                if (this.activeLayer.pollLayersElement) {
+                    if (this.layoutService.layoutApi.widgetPollLayersApi) {
+                        this.layoutService.layoutApi.widgetPollLayersApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+            }
+            /** vote */
+            if (target?.classList.contains("narrative-element-vote-answer")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-vote-answer");
+            }
+            if (element) {
+                if (this.layoutService.layoutApi.widgetVoteApi) {
+                    propagation = this.layoutService.layoutApi.widgetVoteApi.select(element);
+                    propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                }
+            }
+            /** rate */
+            if (target?.classList.contains("narrative-element-rate-input")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-rate-input");
+            }
+            if (element) {
+                if (this.layoutService.layoutApi.widgetRateApi) {
+                    propagation = this.layoutService.layoutApi.widgetRateApi.select(element);
+                    propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                }
+            }
+            /** test */
+            if (target?.classList.contains("narrative-element-test-answer")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-test-answer");
+            }
+            if (element) {
+                if (element.closest(".narrative-element-test")) {
+                    /* test */
+                    if (this.layoutService.layoutApi.widgetTestApi) {
+                        propagation = this.layoutService.layoutApi.widgetTestApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+                else if (element.closest(".narrative-element-quest")) {
+                    /* quest */
+                    if (this.layoutService.layoutApi.widgetQuestApi) {
+                        propagation = this.layoutService.layoutApi.widgetQuestApi.select(element);
+                        propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                    }
+                }
+            }
+            /** copy */
+            if (target?.classList.contains("narrative-element-copy")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-copy");
+            }
+            if (element) {
+                // if ("_narrative_test" in window) {
+                //   propagation = window._narrative_test.select(element);
+                //   propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                // }
+                if (this.layoutService.layoutApi.widgetCopyApi) {
+                    propagation = this.layoutService.layoutApi.widgetCopyApi.click(element);
+                    propagation = false; // по клику на Копировать не делаем клик на слайде
+                }
+                // copyToClipboard(element.getAttribute('data-clipboard-target'));
+                // propagation = false;
+            }
+            /** barcode */
+            if (target?.classList.contains("narrative-element-barcode")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-barcode");
+            }
+            if (element) {
+                // if ("_narrative_test" in window) {
+                //   propagation = window._narrative_test.select(element);
+                //   propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
+                // }
+                if (this.layoutService.layoutApi.widgetBarcodeApi) {
+                    propagation = this.layoutService.layoutApi.widgetBarcodeApi.click(element);
+                    propagation = false; // по клику на Копировать не делаем клик на слайде
+                }
+                // copyToClipboard(element.getAttribute('data-clipboard-target'));
+                // propagation = false;
+            }
+            /** share */
+            if (target?.classList.contains("narrative-element-share")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-share");
+            }
+            if (element) {
+                if (this.layoutService.layoutApi.widgetShareApi) {
+                    this.layoutService.layoutApi.widgetShareApi.click(element);
+                    propagation = false;
+                }
+            }
+            /** story-repeat */
+            if (target?.classList.contains("narrative-element-story-repeat")) {
+                element = target;
+            }
+            else {
+                element = target?.closest(".narrative-element-story-repeat");
+            }
+            if (element) {
+                propagation = false;
+                this.sdkApi.setCardLocalData({}, true);
+                this.sdkApi.updateCardServerDataLocally(this.slide.cardId, {});
+                // window._resetTimers();
+                // сделать async в ios
+                let slideIndex = this.slide.slideIndex;
+                // prevent simultaneous call _showNarrativeSlide and _showLayer - prevent 2 calls of initAfterLoad (break video start on iOS)
+                if (slideIndex === 0) {
+                    // for story repeat on the first slide with layers
+                    this.sdkApi.showLayer(0);
+                }
+                else {
+                    this.sdkApi.showCardSlide(0); // сделать ее async
+                }
+            }
+            if (!propagation) {
+                result.canClickNext = false;
+                return result;
+            }
+        }
+        /** can tap to next slide */
+        if (this.activeLayer.quizElement) {
+            result.canClickNext = this.activeLayer.quizElement.slideQuizIsDone;
+        }
+        if (this.activeLayer.quizGroupedElement) {
+            result.canClickNext = this.activeLayer.quizGroupedElement.slideQuizGroupedIsDone;
+        }
+        if (this.activeLayer.testElement) {
+            result.canClickNext = this.activeLayer.testElement.slideTestIsDone;
+            if (this.activeLayer.testElement.slideTestWithTimer && !result.canClickNext) {
+                result.canClickNext = false;
+                return result; // disable all clicks
+            }
+        }
+        if (this.activeLayer.rangeSliderElement) {
+            if (this.activeLayer.rangeSliderElement.isClickCapturedBySlider) {
+                result.canClickNext = false;
+                return result; // disable all clicks if event captured by slider
+            }
+        }
+        if (this.activeLayer.productsElement) {
+            if (this.activeLayer.productsElement.isClickCapturedByWidget) {
+                result.canClickNext = false;
+                return result; // disable all clicks if event captured by products widget (slider or swipe down)
+            }
+        }
+        if (this.activeLayer.questElement) {
+            const slideIndex = this.slide.slideIndex;
+            const slideCount = this.slide.slideCount;
+            const { continueDefaultNavigation } = this.activeLayer.questElement.handleRouteClick({
+                direction: navigationDirection,
+                slideIndex: slideIndex,
+                slideCount: slideCount,
+            });
+            result.canClickNext = continueDefaultNavigation;
+            return result;
+        }
+        const disableNavigation = this.slide.disabledNavigation;
+        if (disableNavigation) {
+            result.canClickNext = false;
+            return result; // disable slide tap navigation
+        }
+        // _clickNext(canClickNext, xPercent);
+        return result;
+    }
+    _performLinkSpecialAndReturnTarget(element) {
+        const linkType = element.getAttribute("data-link-type");
+        let linkTarget = element.getAttribute("data-link-target");
+        const linkTargetIos = element.getAttribute("data-link-target-ios");
+        const linkTargetAndroid = element.getAttribute("data-link-target-android");
+        const linkTargetWeb = element.getAttribute("data-link-target-web");
+        let emitClick = false;
+        if (this.sdkApi.isAndroid && linkTargetAndroid) {
+            linkTarget = linkTargetAndroid;
+        }
+        if (this.sdkApi.isIOS && linkTargetIos) {
+            linkTarget = linkTargetIos;
+        }
+        if (this.sdkApi.isWeb && linkTargetWeb) {
+            linkTarget = linkTargetWeb;
+        }
+        if (linkType === "closeStory" || linkType === "closeIAM") {
+            this.layoutService.env.setTimeout(() => this.sdkApi.closeCard("click"));
+            emitClick = false;
+        }
+        if (linkType && linkTarget) {
+            emitClick = true;
+            if (linkType === "story") {
+                // storyId: number, slideIndex: number
+                this.layoutService.env.setTimeout(() => this.sdkApi.openStory(parseInt(linkTarget), 0));
+                emitClick = false;
+            }
+            if (linkType === "slide") {
+                const __slideIndex = parseInt(linkTarget);
+                const __slideCount = this.slide.slideCount;
+                if (__slideIndex >= 0 && __slideIndex < __slideCount) {
+                    this.layoutService.env.setTimeout(() => this.sdkApi.showCardSlide(__slideIndex));
+                    emitClick = false;
+                }
+            }
+            if (linkType === "game") {
+                this.layoutService.env.setTimeout(() => this.sdkApi.openGame(linkTarget));
+                emitClick = false;
+            }
+            if (linkType === "layer") {
+                const layerIndex = parseInt(linkTarget);
+                if (layerIndex >= 0) {
+                    this.layoutService.env.setTimeout(() => this.sdkApi.showLayer(layerIndex));
+                    emitClick = false;
+                }
+            }
+        }
+        return { linkType, linkTarget, emitClick };
+    }
+    _performLinkTarget(element) {
+        const { linkType, linkTarget, emitClick } = this._performLinkSpecialAndReturnTarget(element);
+        // for btn(link) without url (openGame, openStory, closeCard, etc)
+        let statisticWidgetValue = linkType;
+        if (emitClick && linkTarget && (linkType === "url" || linkType === "json")) {
+            const obj = {
+                type: "link",
+                link: {
+                    type: linkType,
+                    target: linkTarget,
+                },
+            };
+            // traditional link, with url
+            statisticWidgetValue = linkTarget;
+            this.layoutService.env.setTimeout(() => {
+                this.sdkApi.openUrl(obj);
+            });
+        }
+        try {
+            const cardId = this.slide.cardId;
+            const cardType = this.slide.cardType;
+            const slideIndex = this.slide.slideIndex;
+            let baseFields = {};
+            switch (cardType) {
+                case 1 /* CARD_TYPE.STORY */:
+                case 2 /* CARD_TYPE.UGC_STORY */:
+                    baseFields.story_id = cardId;
+                    break;
+                case 4 /* CARD_TYPE.IN_APP_MESSAGING */:
+                    baseFields.message_id = cardId;
+                    break;
+            }
+            const elementId = element.getAttribute("data-element-id");
+            this.sdkApi.sendStatisticEvent("w-link", {
+                i: cardId,
+                si: slideIndex,
+                wi: elementId ?? "",
+                wl: element.textContent ?? "",
+                wv: statisticWidgetValue ?? "",
+            }, {
+                ...baseFields,
+                slide_index: slideIndex,
+                widget_id: elementId ?? "",
+                widget_label: element.textContent ?? "",
+                widget_value: statisticWidgetValue ?? "",
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    // получать событие swipeUp от sdk, в том числе и от web sdk
+    slideSwipeUpHandler(target) {
+        if (target == null) {
+            const targetElement = this.activeLayer.swipeUpElement || this.activeLayer.swipeUpItemsElement || this.activeLayer.productsElement;
+            target = targetElement?.elementNodeRef;
+        }
+        if (!target) {
+            return false;
+        }
+        const elementId = target.getAttribute("data-element-id") || "";
+        const { linkType, linkTarget: _linkTarget, emitClick } = this._performLinkSpecialAndReturnTarget(target);
+        if (emitClick) {
+            const linkTarget = decodeURIComponent(_linkTarget ?? "");
+            if (linkType === "products") {
+                if (this.layoutService.layoutApi.widgetProductsApi) {
+                    this.layoutService.layoutApi.widgetProductsApi.click(target);
+                }
+                return true;
+            }
+            let swipeUpLinkObj = {
+                type: "swipeUpLink",
+                link: {
+                    type: "url",
+                    target: linkTarget,
+                },
+                elementId,
+            };
+            if (linkType === "swipe-up-items") {
+                swipeUpLinkObj = {
+                    type: "swipeUpItems",
+                    link: {
+                        type: "json",
+                        target: linkTarget,
+                    },
+                    elementId,
+                };
+                try {
+                    // TODO CSP violation
+                    target.style.setProperty("opacity", "0");
+                }
+                catch (e) {
+                    console.error(e);
+                }
+            }
+            this.layoutService.env.setTimeout(() => {
+                this.sdkApi.openUrl(swipeUpLinkObj);
+            });
+            let eventType = "";
+            if (linkType === "url") {
+                eventType = "w-link";
+            }
+            else if (linkType === "swipe-up-items") {
+                eventType = "w-goods-open";
+            }
+            if (eventType) {
+                try {
+                    const cardId = this.slide.cardId;
+                    const cardType = this.slide.cardType;
+                    const slideIndex = this.slide.slideIndex;
+                    let baseFields = {};
+                    switch (cardType) {
+                        case 1 /* CARD_TYPE.STORY */:
+                        case 2 /* CARD_TYPE.UGC_STORY */:
+                            baseFields.story_id = cardId;
+                            break;
+                        case 4 /* CARD_TYPE.IN_APP_MESSAGING */:
+                            baseFields.message_id = cardId;
+                            break;
+                    }
+                    this.sdkApi.sendStatisticEvent(eventType, {
+                        i: cardId,
+                        si: slideIndex,
+                        wi: elementId,
+                        wl: target.textContent ?? "",
+                        wv: linkTarget,
+                    }, {
+                        ...baseFields,
+                        slide_index: slideIndex,
+                        widget_id: elementId,
+                        widget_label: target.textContent ?? "",
+                        widget_value: linkTarget,
+                    });
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    setTextInputResult(id, text) {
+        if (this.activeLayer.dataInputElement) {
+            this.activeLayer.dataInputElement.setUserData(id, text);
+        }
+        if (this.activeLayer.pollElement) {
+            this.activeLayer.pollElement.setUserData(id, text);
+        }
+        if (this.activeLayer.rateElement) {
+            this.activeLayer.rateElement.setUserData(id, text);
+        }
+    }
+    setShareComplete(id, isSuccess) {
+        if (this.activeLayer.shareElement) {
+            this.activeLayer.shareElement.complete(id, isSuccess);
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n            slideWrapper: HTMLElement;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            slideRatio: number;\n            isFullscreen: boolean;\n            slideLoadedCb?: (data: { slide: Slide; result: boolean; reason?: string }) => void;\n        }`]; }
+};
+
+let sdkInterface;
+const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
+    const slideWrapper = document.createElement("div");
+    slideWrapper.classList.add("narrative-slide-wrapper");
+    slideWrapper.classList.add("stories-viewer");
+    const slideOffset = document.createElement("div");
+    slideOffset.classList.add("narrative-slide-offset");
+    const slideBoxPrerender = document.createElement("div");
+    slideBoxPrerender.classList.add("narrative-slide-box");
+    slideBoxPrerender.classList.add("narrative-slide-box-prerender");
+    const slideBoxRendered = document.createElement("div");
+    slideBoxRendered.classList.add("narrative-slide-box");
+    slideBoxRendered.classList.add("narrative-slide-box-rendered");
+    const style = document.createElement("style");
+    if (nonce != null) {
+        style.nonce = nonce;
+    }
+    const paddingTop = `${String(100 / slideBoxRatio)}%`;
+    //         .narrative-slide-box {
+    //             padding: <?= $slideRatioPadding ?> 0 0 0;
+    //         }
+    style.sheet?.insertRule(`.narrative-slide-box {padding: ${paddingTop} 0 0 0;`);
+    slideOffset.appendChild(slideBoxPrerender);
+    slideOffset.appendChild(slideBoxRendered);
+    slideWrapper.appendChild(slideOffset);
+    slideWrapper.appendChild(style);
+    return slideWrapper;
+};
+class SlideApi extends SlideApi$1 {
+    constructor(_sdkInterface, config) {
+        sdkInterface = _sdkInterface;
+        config.VODPlayer;
+        const slideWrapper = createSlideWrapper({ slideBoxRatio: config.slideRatio, nonce: config.nonce });
+        // todo need to clear root node before append slideWrapper?
+        config.root.appendChild(slideWrapper);
+        super({
+            slideWrapper,
+            viewport: config.viewport,
+            slideRatio: config.slideRatio,
+            isFullscreen: config.isFullscreen,
+            userResizeHandler: config.userResizeHandler,
+        });
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`, `{\n            root: HTMLElement;\n            slideRatio: number;\n            isFullscreen: boolean;\n            nonce?: string;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            VODPlayer?: typeof VODPlayer;\n        }`]; }
+}
+
+container.registerSingleton(() => new EsModuleSdkApi(() => sdkInterface), { identifier: `SDKApi` });
+
+exports.SlideApi = SlideApi;
 //# sourceMappingURL=index.cjs.map