@inappstory/slide-api 0.1.24 → 0.1.26

package/dist/index.js

@@ -561,8 +561,8 @@ const getWinWidth = function (env) {
 const getWinHeight = function (env) {
     return env.innerHeight || env.document.documentElement.clientHeight || env.document.body.clientHeight;
 };
-const sendStatisticEventToApp = function (sdkApi, name, data, devPayload, options) {
-    sdkApi.sendStatisticEvent(name, data, devPayload, options?.forceEnableStatisticV2 ?? false);
+const sendStatisticEventToApp = function (slideApiDeps, name, data, devPayload, options) {
+    slideApiDeps.sendStatisticEvent(name, data, devPayload, options?.forceEnableStatisticV2 ?? false);
 };
 const getValueOrException = function (value, message) {
     if (value == null) {
@@ -1133,6 +1133,9 @@ class EsModuleSdkApi {
     getCardSessionValue(element, key) {
         return this.sdkBinding.getCardSessionValue(key);
     }
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
     updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
         this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
@@ -1173,9 +1176,79 @@ class EsModuleSdkApi {
     isSdkSupportCorrectPauseResumeLifecycle() {
         return true;
     }
+    emitEvent(name, event) {
+        this.sdkBinding.onEvent(name, event);
+    }
+    onCardLoadingStateChange(state, reason) {
+        // console.log("onCardLoadingStateChange", { state });
+        this.sdkBinding.onCardLoadingStateChange(state, reason);
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`]; }
 }
 
+class CardLoadingStateController {
+    onCardLoadingStateChange;
+    constructor(onCardLoadingStateChange) {
+        this.onCardLoadingStateChange = onCardLoadingStateChange;
+    }
+    timeout = 300;
+    onSetLoadStartState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        if (this.currentState === 1 /* CARD_LOADING_STATE.LOADED */) {
+            this.deferredDataWaitingStateTimerId = window.setTimeout(() => {
+                this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+                this.dataWaitingStartedAt = Date.now();
+            }, this.timeout);
+        }
+        else {
+            this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+            this.dataWaitingStartedAt = Date.now();
+        }
+        this.currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    }
+    onSetLoadEndState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        const delay = this.timeout;
+        let dataWaitingLoaderSpent = delay;
+        if (this.dataWaitingStartedAt != null) {
+            dataWaitingLoaderSpent = Date.now() - this.dataWaitingStartedAt;
+        }
+        if (dataWaitingLoaderSpent < delay) {
+            this.deferredResumeStateTimerId = window.setTimeout(() => this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */), dataWaitingLoaderSpent - delay);
+        }
+        else {
+            this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+        }
+        this.currentState = 1 /* CARD_LOADING_STATE.LOADED */;
+    }
+    onSetLoadErrorState(reason) {
+        this.onBeforeStateChanged();
+        this.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+        this.currentState = 2 /* CARD_LOADING_STATE.LOADING_ERROR */;
+    }
+    currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    deferredDataWaitingStateTimerId = null;
+    deferredResumeStateTimerId = null;
+    dataWaitingStartedAt = null;
+    clearDeferredDataWaitingStateTimerId() {
+        if (this.deferredDataWaitingStateTimerId != null) {
+            window.clearTimeout(this.deferredDataWaitingStateTimerId);
+        }
+    }
+    clearDeferredResumeStateTimerId() {
+        if (this.deferredResumeStateTimerId != null) {
+            window.clearTimeout(this.deferredResumeStateTimerId);
+        }
+    }
+    onBeforeStateChanged() {
+        this.clearDeferredDataWaitingStateTimerId();
+        this.clearDeferredResumeStateTimerId();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(state: CARD_LOADING_STATE, reason?: string) => void`]; }
+}
+
 const DEFAULT_SLIDE_DURATION = 10000;
 
 class DataInput {
@@ -1199,6 +1272,9 @@ class DataInput {
         return element instanceof DataInput;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1249,6 +1325,9 @@ class Barcode {
         this._widgetDeps = _widgetDeps;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1286,36 +1365,311 @@ class ClickableBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`]; }
 }
 
+class PromocodeNetworkError extends Error {
+}
+class PromocodeServiceError extends Error {
+}
+class PromocodeNoMoreCodes extends Error {
+}
+class PromocodeApi {
+    sdkApi;
+    messages;
+    constructor(sdkApi, messages) {
+        this.sdkApi = sdkApi;
+        this.messages = messages;
+    }
+    async fetchPromoCode(params) {
+        const path = this.getPromotionalCodeFetchPath(params);
+        const headers = {
+            accept: "application/json",
+            "Content-Type": "application/json",
+        };
+        const [response] = await Promise.all([
+            this.sdkApi.sendApiRequest(path, "POST", null, headers, null, "fetch-promo-code"),
+            new Promise(resolve => setTimeout(resolve, 300)),
+        ]);
+        const { status, data } = response;
+        if (status === 200 || status === 201) {
+            const promocode = data?.code;
+            if (promocode) {
+                return { promocode, status };
+            }
+            throw new PromocodeNoMoreCodes(this.messages.noMoreCodes);
+        }
+        if (status === 12163 || status === 12002) {
+            throw new PromocodeNetworkError(this.messages.networkError);
+        }
+        throw new PromocodeServiceError(this.messages.serviceError);
+    }
+    getPromotionalCodeFetchPath(params) {
+        switch (params.card.type) {
+            case 4 /* CARD_TYPE.IN_APP_MESSAGING */:
+                return `inappmessaging/message/${params.card.id}/widget/${params.elementId}/promo-code/${params.promocodeId}`;
+            default:
+                return `story/${params.card.id}/widget/${params.elementId}/promo-code/${params.promocodeId}`;
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Pick`, `{
+            noMoreCodes?: string;
+            networkError?: string;
+            serviceError?: string;
+        }`]; }
+}
+
+class PromocodeLocalRepository {
+    elementId;
+    sdkApi;
+    localData = {};
+    constructor(elementId, sdkApi) {
+        this.elementId = elementId;
+        this.sdkApi = sdkApi;
+    }
+    init({ localData, cardId }) {
+        const savedData = this.sdkApi.getCardServerData(cardId) ?? {};
+        this.localData = extend({}, savedData, localData ?? {});
+    }
+    getPromocode() {
+        return this.localData["_pcl_g_" + this.elementId + "_pc"];
+    }
+    savePromocodeByStatus(promocode, status) {
+        if (status === 201)
+            this.savePromocodeWithTime(promocode);
+        else
+            this.savePromocode(promocode);
+    }
+    savePromocodeWithTime(promocode) {
+        this.localData["_pcl_g_" + this.elementId + "_pc_fetched_at"] = Math.round(new Date().getTime() / 1000);
+        this.localData["_&ts_pcl_g_" + this.elementId + "_pc_fetched_at"] = Math.round(new Date().getTime() / 1000);
+        this.savePromocode(promocode);
+    }
+    savePromocode(promocode) {
+        this.localData["_pcl_g_" + this.elementId + "_pc"] = promocode;
+        this.setCardLocalData(this.localData);
+    }
+    async setCardLocalData(newLocalData) {
+        const localData = await this.sdkApi.getCardLocalData();
+        const mergedData = extend({}, localData, newLocalData);
+        await this.sdkApi.setCardLocalData(mergedData, true);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`string`, `ISlideApiDeps`]; }
+}
+
+var PromocodeLinkState;
+(function (PromocodeLinkState) {
+    PromocodeLinkState[PromocodeLinkState["Idle"] = 0] = "Idle";
+    PromocodeLinkState[PromocodeLinkState["Fetched"] = 1] = "Fetched";
+    PromocodeLinkState[PromocodeLinkState["Error"] = 2] = "Error";
+})(PromocodeLinkState || (PromocodeLinkState = {}));
+const PROMOCODE_PLACEHOLDER = "%__ias_pc%";
+class PromocodeLink {
+    element;
+    layer;
+    widgetDeps;
+    state = PromocodeLinkState.Idle;
+    promocode = null;
+    promocodeId;
+    linkTemplate;
+    textContent;
+    button;
+    elementId;
+    card;
+    api;
+    localRepository;
+    constructor(element, layer, widgetDeps) {
+        this.element = element;
+        this.layer = layer;
+        this.widgetDeps = widgetDeps;
+        this.elementId = getValueOrException(getTagData(this.element, "elementId"), "Empty elementId");
+        this.promocodeId = getTagData(this.element, "linkTarget") ?? "";
+        this.linkTemplate = getTagData(this.element, "linkTemplate") ?? "";
+        this.button = this.element.querySelector(".narrative-element-text-lines");
+        this.textContent = this.button?.textContent ?? "";
+        this.card = this.getCard();
+        this.api = new PromocodeApi(this.widgetDeps.slideApiDeps, {
+            networkError: getTagData(this.element, "msgNetworkError") ?? "",
+            serviceError: getTagData(this.element, "msgServiceError") ?? "",
+            noMoreCodes: getTagData(this.element, "msgNoMoreCodes") ?? "",
+        });
+        this.localRepository = new PromocodeLocalRepository(this.elementId, this.widgetDeps.slideApiDeps);
+    }
+    get nodeRef() {
+        return this.element;
+    }
+    mediaElementsLoadingPromises = [];
+    init(localData) {
+        this.localRepository.init({ localData: localData ?? {}, cardId: this.card.id });
+        this.state = PromocodeLinkState.Idle;
+        const promocode = this.localRepository.getPromocode();
+        if (promocode) {
+            this.state = PromocodeLinkState.Fetched;
+            this.showPromocode(promocode);
+            this.promocode = promocode;
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStop() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
+    handleClick() {
+        switch (this.state) {
+            case PromocodeLinkState.Idle:
+                return false;
+            case PromocodeLinkState.Fetched:
+                this.openPromocodeUrl();
+                return true;
+            case PromocodeLinkState.Error:
+                this.loadPromocode(this.promocodeId).catch(() => { });
+                break;
+        }
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    onStart() {
+        this.element.classList.add("active");
+        this.loadPromocode(this.promocodeId).catch(() => { });
+    }
+    openPromocodeUrl() {
+        if (!this.promocode)
+            return;
+        const target = this.linkTemplate.replaceAll(PROMOCODE_PLACEHOLDER, this.promocode);
+        this.layer.layoutService.env.setTimeout(() => {
+            this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target } });
+        });
+    }
+    async loadPromocode(promocodeId) {
+        try {
+            this.state = PromocodeLinkState.Idle;
+            this.showLoader();
+            const promocode = await this.getPromocode({
+                promocodeId,
+                card: this.card,
+                elementId: this.elementId,
+            });
+            this.state = PromocodeLinkState.Fetched;
+            this.promocode = promocode;
+            this.showPromocode(promocode);
+            return promocode;
+        }
+        catch (error) {
+            this.handleLoadPromocodeError(error);
+            throw error;
+        }
+        finally {
+            this.hideLoader();
+        }
+    }
+    async getPromocode(params) {
+        if (this.promocode)
+            return this.promocode;
+        let promocode = this.localRepository.getPromocode();
+        if (!promocode) {
+            const result = await this.api.fetchPromoCode(params);
+            promocode = result.promocode;
+            this.localRepository.savePromocodeByStatus(promocode, result.status);
+        }
+        this.promocode = promocode;
+        return promocode;
+    }
+    handleLoadPromocodeError(error) {
+        this.state = PromocodeLinkState.Error;
+        this.showErrorMessage(getTagData(this.element, "msgTryAgain") ?? "");
+        if (error.message.length) {
+            this.widgetDeps.slideApiDeps.showToast(error.message);
+        }
+    }
+    showPromocode(promocode) {
+        if (!this.button)
+            return;
+        this.button.textContent = this.textContent.replaceAll(PROMOCODE_PLACEHOLDER, promocode);
+    }
+    showErrorMessage(message) {
+        if (!this.button)
+            return;
+        this.button.textContent = message;
+    }
+    getCard() {
+        const slide = getValueOrException(this.element.closest(".narrative-slide"), "Empty slide");
+        return {
+            id: getValueOrException(getTagDataAsNumber(slide, "id"), "Empty cardId"),
+            type: getValueOrException(getTagDataAsNumber(slide, "cardType"), "Empty card type"),
+        };
+    }
+    showLoader() {
+        if (!this.isTransparentElement())
+            addClass(this.element, "loader");
+    }
+    hideLoader() {
+        removeClass(this.element, "loader");
+    }
+    isTransparentElement() {
+        if (this.element) {
+            try {
+                const color = window.getComputedStyle(this.element).color;
+                if (color === "transparent" || color === "rgba(0, 0, 0, 0)" || color === "rgba(0,0,0,0)") {
+                    return true;
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `WidgetDeps`]; }
+}
+
 class Button extends ClickableBase {
     _elementNodeRef;
-    _layer;
+    layer;
+    widgetDeps;
     static _className = "narrative-element-link";
+    isPromotionalCode;
+    promocodeLink = null;
     static className() {
         return Button._className;
     }
-    constructor(_elementNodeRef, _layer) {
+    static isTypeOf(element) {
+        return element instanceof Button;
+    }
+    constructor(_elementNodeRef, layer, widgetDeps) {
         super(_elementNodeRef);
         this._elementNodeRef = _elementNodeRef;
-        this._layer = _layer;
+        this.layer = layer;
+        this.widgetDeps = widgetDeps;
+        this.isPromotionalCode = getTagData(_elementNodeRef, "linkType") === "promocode";
+        if (this.isPromotionalCode) {
+            this.promocodeLink = new PromocodeLink(_elementNodeRef, layer, widgetDeps);
+        }
+    }
+    get nodeRef() {
+        return this._elementNodeRef;
     }
     mediaElementsLoadingPromises = [];
-    init(localData) {
-        return Promise.resolve(true);
+    async init(localData) {
+        await this.promocodeLink?.init(localData);
+        return true;
     }
     onPause() { }
     onResume() { }
-    onStart() { }
+    onStart() {
+        this.promocodeLink?.onStart();
+    }
     onStop() { }
     onBeforeUnmount() {
         return Promise.resolve();
     }
     handleClick() {
-        return false;
+        return this.promocodeLink?.handleClick() ?? true;
     }
     get isLayerForcePaused() {
         return false;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `WidgetDeps`]; }
 }
 
 class Copy {
@@ -1336,6 +1690,9 @@ class Copy {
         this._widgetDeps = _widgetDeps;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1385,6 +1742,9 @@ class DateCountdown {
         this._widgetDeps = _widgetDeps;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1439,6 +1799,9 @@ class Poll {
         return element instanceof Poll;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1494,6 +1857,9 @@ class PollLayers {
         return element instanceof PollLayers;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1544,6 +1910,9 @@ class Products {
         return element instanceof Products;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1603,6 +1972,9 @@ class Quest {
         return element instanceof Quest;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
     }
@@ -1651,6 +2023,9 @@ class Quiz {
         return element instanceof Quiz;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1704,6 +2079,9 @@ class QuizGrouped {
         return element instanceof QuizGrouped;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1757,6 +2135,9 @@ class RangeSlider {
         return element instanceof RangeSlider;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1810,6 +2191,9 @@ class Rate {
         return element instanceof Rate;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1866,6 +2250,9 @@ class Share {
         return element instanceof Share;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
@@ -1913,6 +2300,9 @@ class SwipeUpItems {
         return element instanceof SwipeUpItems;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -1956,6 +2346,9 @@ class Test {
         return element instanceof Test;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -2009,6 +2402,9 @@ class Tooltip {
         this._widgetDeps = _widgetDeps;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -2056,6 +2452,9 @@ class Vote {
         this._widgetDeps = _widgetDeps;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         try {
             this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
@@ -2097,6 +2496,9 @@ class Text {
         this._layer = _layer;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2220,6 +2622,9 @@ class Image extends ClickableBase {
         this.mediaElementsLoadingPromises = mediaElements.map(waitForImageHtmlElementLoad);
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2254,6 +2659,9 @@ class SwipeUp {
         return element instanceof SwipeUp;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2280,7 +2688,7 @@ class Video {
     _elementNodeRef;
     _layer;
     _VideoPlayer;
-    _sdkApi;
+    _slideApiDeps;
     static _className = "narrative-element-video";
     static className() {
         return Video._className;
@@ -2290,11 +2698,11 @@ class Video {
     _vodData;
     _vodPlayerInstance = null;
     _videoStateAdapter = null;
-    constructor(_elementNodeRef, _layer, _VideoPlayer, _sdkApi) {
+    constructor(_elementNodeRef, _layer, _VideoPlayer, _slideApiDeps) {
         this._elementNodeRef = _elementNodeRef;
         this._layer = _layer;
         this._VideoPlayer = _VideoPlayer;
-        this._sdkApi = _sdkApi;
+        this._slideApiDeps = _slideApiDeps;
         const _video = this._elementNodeRef.querySelector("video");
         if (!_video) {
             return;
@@ -2350,6 +2758,9 @@ class Video {
         return element instanceof Video;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2369,6 +2780,9 @@ class Video {
         // console.log("onBeforeUnmount")
         return await this._destroyVODPlayer();
     }
+    get durationMs() {
+        return this._video.duration * 1000;
+    }
     _initVOD(vodData) {
         const onWaiting = () => {
             /**
@@ -2394,7 +2808,7 @@ class Video {
             // 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);
+                this._layer.timeline.slideResumed(() => this._video.currentTime * 1000);
                 // @ts-ignore
                 //                     _log(`playing: ${this._video.currentTime}`, true);
                 // clearTimeout(window.synthErrorId);
@@ -2478,13 +2892,13 @@ class Video {
         });
     }
     _convertMpdUrls(mpd_) {
-        if (this._sdkApi.isWeb) {
+        if (this._slideApiDeps.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}`;
+                mpd.adaptiveFormats[i].url = `${this._slideApiDeps.isAndroid ? `http://vod-asset/` : `vod-asset://`}${mpd.adaptiveFormats[i].cacheName}`;
             }
             return mpd;
         }
@@ -2519,7 +2933,13 @@ class Video {
     get videoStartedPromise() {
         return this._videoStartedPromise;
     }
-    start(muted = true, loop = true) {
+    get isLooped() {
+        if (this._video != null) {
+            return this._video?.loop;
+        }
+        return false;
+    }
+    start(muted = true, getIsLooped) {
         this._videoStartedPromise = new Promise(async (resolve) => {
             // invariant - always wait for mediaElementsLoadingPromises
             // else call of _initVOD can start and onAllMediaLoaded failed
@@ -2533,7 +2953,7 @@ class Video {
                     // console.log("Video:start => this._video.pause()");
                     this._video.pause();
                     this._video.currentTime = 0;
-                    this._video.loop = loop;
+                    this._video.loop = getIsLooped();
                     // remove init class
                     // if vod - create VoD player
                     if (this._video.getAttribute("data-default-muted") !== "1") {
@@ -2546,13 +2966,13 @@ class Video {
                             this._video.currentTime = 0;
                             this._elementNodeRef.classList.remove("init");
                             resolve({
-                                currentTime: this._video.currentTime,
+                                getVideoCurrentTime: () => this._video.currentTime,
                             });
                         })
                             .catch(error => {
                             console.error(error);
                             resolve({
-                                currentTime: this._video.currentTime,
+                                getVideoCurrentTime: () => this._video.currentTime,
                             });
                         });
                     }
@@ -2561,14 +2981,14 @@ class Video {
                             this._video.currentTime = 0;
                             this._elementNodeRef.classList.remove("init");
                             resolve({
-                                currentTime: this._video.currentTime,
+                                getVideoCurrentTime: () => this._video.currentTime,
                             });
                         }, 0);
                     }
                 }
                 else {
                     resolve({
-                        currentTime: 0,
+                        getVideoCurrentTime: () => 0,
                     });
                 }
             });
@@ -2604,7 +3024,7 @@ class Video {
                         // console.log("resolve 1.1", { ts });
                         this._video.currentTime = ts;
                     }
-                    resolve({ currentTime: this._video.currentTime });
+                    resolve({ getVideoCurrentTime: () => this._video.currentTime });
                 })
                     .catch(error => {
                     console.error(error);
@@ -2612,7 +3032,7 @@ class Video {
                     if (this._video.currentTime < ts) {
                         this._video.currentTime = ts;
                     }
-                    resolve({ currentTime: this._video.currentTime });
+                    resolve({ getVideoCurrentTime: () => this._video.currentTime });
                 });
             }
             else {
@@ -2621,7 +3041,7 @@ class Video {
                     if (this._video.currentTime < ts) {
                         this._video.currentTime = ts;
                     }
-                    resolve({ currentTime: this._video.currentTime });
+                    resolve({ getVideoCurrentTime: () => this._video.currentTime });
                 }, 0);
             }
         });
@@ -2675,7 +3095,7 @@ class Video {
             this._video.muted = true;
         }
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof VideoPlayer | undefined`, `SDKApi`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof VideoPlayer | undefined`, `ISlideApiDeps`]; }
 }
 // class VideoStateAdapter {
 //
@@ -2769,7 +3189,12 @@ class VideoStateAdapter {
         }
         // todo - add debounce
         this._playingCheckerId = window.setTimeout(() => {
+            // console.log({now: Date.now(), _timeupdate: this._timeupdate, currentTime: this._video.currentTime, duration: this._video.duration});
             if (Date.now() - this._timeupdate >= this._maxDiff / 2) {
+                // prevent onWaiting triggering if the video has ended
+                if (Math.round(this._video.currentTime) >= Math.round(this._video.duration)) {
+                    return;
+                }
                 this._state = 2 /* VIDEO_STATE.WAITING */;
                 this._triggerUpdate();
             }
@@ -2852,7 +3277,7 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
             case Text.className():
                 return new Text(nodeRef, layer);
             case Button.className():
-                return new Button(nodeRef, layer);
+                return new Button(nodeRef, layer, widgetDeps);
             case Image.className():
                 return new Image(nodeRef, layer);
             case SwipeUp.className():
@@ -2860,7 +3285,7 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
             case SwipeUpItems.className():
                 return new SwipeUpItems(nodeRef, layer);
             case Video.className():
-                return new Video(nodeRef, layer, layoutApi.VideoPlayer, layer.sdkApi);
+                return new Video(nodeRef, layer, layoutApi.VideoPlayer, layer.slideApiDeps);
             //////// widgets ///////
             case Copy.className():
                 return layoutApi.widgetCopyApi ? new Copy(nodeRef, layer, layoutApi.widgetCopyApi, widgetCallbacks, widgetDeps) : null;
@@ -2918,20 +3343,23 @@ class SlideTimeline {
     slideDisabledTimer;
     slideReady;
     _afterAppResumeQueuePush;
-    sdkApi;
-    constructor(slideIndex, slideDuration, slideDisabledTimer, slideReady, _afterAppResumeQueuePush, sdkApi) {
+    slideApiDeps;
+    constructor(slideIndex, slideDuration, slideDisabledTimer, slideReady, _afterAppResumeQueuePush, slideApiDeps) {
         this.slideIndex = slideIndex;
         this.slideDuration = slideDuration;
         this.slideDisabledTimer = slideDisabledTimer;
         this.slideReady = slideReady;
         this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
-        this.sdkApi = sdkApi;
+        this.slideApiDeps = slideApiDeps;
         this.timelineDisabledState = this.slideDisabledTimer ? TimelineDisabledState.disabled : TimelineDisabledState.enabled;
     }
     resumedAt = new Date().getTime();
     timeSpent = 0;
     timelineDisabledState;
     currentState = "stop" /* TIMELINE_ACTION.STOP */;
+    deferredDataWaitingStateTimerId = null;
+    deferredResumeStateTimerId = null;
+    dataWaitingStartedAt = null;
     static get layoutService() {
         return container.get({ identifier: "LayoutService" });
     }
@@ -2939,22 +3367,10 @@ class SlideTimeline {
         return SlideTimeline.layoutService;
     }
     get isSDKSupportUpdateTimeline() {
-        if (this.sdkApi.isAndroid) {
-            return Boolean(SlideTimeline.layoutService.env.Android && "updateTimeline" in SlideTimeline.layoutService.env.Android);
-        }
-        else if (this.sdkApi.isIOS) {
-            const mh = SlideTimeline.layoutService.env?.webkit?.messageHandlers ?? {};
-            return "updateTimeline" in mh;
-        }
-        else if (this.sdkApi.isWeb) {
-            return true;
-        }
-        else {
-            return false;
-        }
+        return this.slideApiDeps.isSdkSupportUpdateTimeline();
     }
     get isSdkSupportTimelineOnBeforeStart() {
-        return this.sdkApi.isSdkSupportTimelineOnBeforeStart();
+        return this.slideApiDeps.isSdkSupportTimelineOnBeforeStart();
     }
     get index() {
         return this.slideIndex;
@@ -2962,6 +3378,9 @@ class SlideTimeline {
     get isTimelineDisabled() {
         return this.timelineDisabledState === TimelineDisabledState.disabled;
     }
+    get durationMs() {
+        return this.slideDuration;
+    }
     async updateTimeline(action, showLoader = false, showError = false) {
         // два кейса
         // когда есть слои и у слоя вызываем showLayer который вызывает startTimer до старта слайда, потом start от sdk
@@ -2990,13 +3409,15 @@ class SlideTimeline {
         //@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}`);
-        this.sdkApi.updateTimeline(this.slideIndex, action, currentTime, duration, showLoader, showError);
+        // console.trace(`updateTimeline ${action} slideIndex: ${this.slideIndex} currentTime:${currentTime} duration:${duration} tds: ${this.timelineDisabledState} showLoader: ${showLoader} showError: ${showError}`);
+        this.slideApiDeps.updateTimeline(this.slideIndex, action, currentTime, duration, showLoader, showError);
+        if (action === "pause" /* TIMELINE_ACTION.PAUSE */ && showLoader) {
+            this.dataWaitingStartedAt = Date.now();
+        }
     }
     /**
-     * trigger timeline update for new slide in sdk, before slide strat event (prevent timeout in timeline while we wait for video start)
+     * trigger timeline update for new slide in sdk, before slide start event (prevent timeout in timeline while we wait for video start)
      */
     triggerSlideLoadState() {
         if (this.isSDKSupportUpdateTimeline && this.isSdkSupportTimelineOnBeforeStart) {
@@ -3009,7 +3430,7 @@ class SlideTimeline {
             if (this.timelineDisabledState === TimelineDisabledState.disabled) {
                 duration = 0;
             }
-            this.sdkApi.updateTimeline(this.slideIndex, "before_start" /* TIMELINE_ACTION.BEFORE_START */, 0, duration, false, false);
+            this.slideApiDeps.updateTimeline(this.slideIndex, "before_start" /* TIMELINE_ACTION.BEFORE_START */, 0, duration, false, false);
         }
     }
     /**
@@ -3018,6 +3439,7 @@ class SlideTimeline {
      */
     slideStarted() {
         // console.trace("slideStarted");
+        this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.resumedAt = new Date().getTime();
             this.timeSpent = 0; // for case when instance exists, but we return to slide again
@@ -3026,6 +3448,7 @@ class SlideTimeline {
     }
     slideRestarted() {
         // console.trace("slideRestarted");
+        this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.resumedAt = new Date().getTime();
             this.timeSpent = 0;
@@ -3035,11 +3458,12 @@ class SlideTimeline {
     /**
      *
      */
-    slidePaused(videoCurrentTime) {
+    slidePaused(currentTime) {
         // console.trace("slidePaused");
+        this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
-            if (videoCurrentTime != null) {
-                this.timeSpent = Math.round(videoCurrentTime);
+            if (currentTime != null) {
+                this.timeSpent = Math.round(currentTime);
             }
             else {
                 const globalCurrentTime = new Date().getTime();
@@ -3049,28 +3473,46 @@ class SlideTimeline {
             this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */);
         }
         else {
-            this.sdkApi.cardPausedCallback(videoCurrentTime);
+            this.slideApiDeps.cardPausedCallback(currentTime);
         }
     }
-    slideResumed(videoCurrentTime) {
+    slideResumed(getVideoCurrentTime) {
         // console.trace("slideResumed");
+        this.onBeforeStateChanged();
         // @ts-ignore
         // window._log(`updateTimeline slideResumed ${videoCurrentTime}`, true);
-        if (this.isSDKSupportUpdateTimeline) {
-            if (videoCurrentTime != null) {
-                this.timeSpent = Math.round(videoCurrentTime);
+        // dataWaitingStartedAt
+        const slideResume = () => {
+            if (this.isSDKSupportUpdateTimeline) {
+                if (getVideoCurrentTime != null) {
+                    this.timeSpent = Math.round(getVideoCurrentTime());
+                }
+                this.resumedAt = new Date().getTime();
+                this.updateTimeline("start" /* TIMELINE_ACTION.START */);
             }
-            this.resumedAt = new Date().getTime();
-            this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+            else {
+                this.slideApiDeps.cardResumedCallback(getVideoCurrentTime != null ? getVideoCurrentTime() : null);
+            }
+        };
+        // prevent micro loaders in UI
+        const delay = 300;
+        let dataWaitingLoaderSpent = delay;
+        if (this.dataWaitingStartedAt != null) {
+            dataWaitingLoaderSpent = Date.now() - this.dataWaitingStartedAt;
+        }
+        if (dataWaitingLoaderSpent < delay) {
+            this.deferredResumeStateTimerId = window.setTimeout(slideResume, dataWaitingLoaderSpent - delay);
         }
         else {
-            this.sdkApi.cardResumedCallback(videoCurrentTime);
+            slideResume();
         }
     }
     slideStopped() {
         // console.trace("slideStopped");
+        this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */);
+            // console.log(`TIMELINE_ACTION -> slideStopped, index: ${this.slideIndex}`);
         }
     }
     /**
@@ -3078,6 +3520,7 @@ class SlideTimeline {
      * used by widgets
      */
     startDisabledTimeline(fallback) {
+        this.onBeforeStateChanged();
         // 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);
@@ -3097,6 +3540,7 @@ class SlideTimeline {
     }
     onSlideDataWaiting(videoCurrentTime) {
         // console.trace("onSlideDataWaiting");
+        this.onBeforeStateChanged();
         // @ts-ignore
         // window._log(`updateTimeline onSlideDataWaiting ${videoCurrentTime}`, true);
         if (videoCurrentTime != null) {
@@ -3107,10 +3551,20 @@ class SlideTimeline {
             let spent = globalCurrentTime - this.resumedAt;
             this.timeSpent += spent;
         }
-        this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */, true, false);
+        // prevent micro loaders in UI
+        if (this.currentState === "start" /* TIMELINE_ACTION.START */) {
+            this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */, false, false);
+            this.deferredDataWaitingStateTimerId = window.setTimeout(() => {
+                this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */, true, false);
+            }, 300);
+        }
+        else {
+            this.updateTimeline("pause" /* TIMELINE_ACTION.PAUSE */, true, false);
+        }
     }
     onSlideError(videoCurrentTime) {
         // console.trace("onSlideError");
+        this.onBeforeStateChanged();
         if (videoCurrentTime != null) {
             this.timeSpent = Math.round(videoCurrentTime);
         }
@@ -3121,7 +3575,21 @@ class SlideTimeline {
         }
         this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */, false, true);
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `boolean`, `Promise`, `(cb: () => void) => void`, `SDKApi`]; }
+    clearDeferredDataWaitingStateTimerId() {
+        if (this.deferredDataWaitingStateTimerId != null) {
+            window.clearTimeout(this.deferredDataWaitingStateTimerId);
+        }
+    }
+    clearDeferredResumeStateTimerId() {
+        if (this.deferredResumeStateTimerId != null) {
+            window.clearTimeout(this.deferredResumeStateTimerId);
+        }
+    }
+    onBeforeStateChanged() {
+        this.clearDeferredDataWaitingStateTimerId();
+        this.clearDeferredResumeStateTimerId();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `boolean`, `Promise`, `(cb: () => void) => void`, `ISlideApiDeps`]; }
 }
 
 class Layer {
@@ -3130,8 +3598,7 @@ class Layer {
     _slideReadyPromise;
     _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
-    _showNextSlide;
-    sdkApi;
+    slideApiDeps;
     _slideRoot;
     _getLayoutDirection;
     _slidePauseUI;
@@ -3147,14 +3614,13 @@ class Layer {
     _elements = [];
     _timeline;
     _widgetDeps;
-    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
+    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
         this._nodeRef = _nodeRef;
         this._slide = _slide;
         this._slideReadyPromise = _slideReadyPromise;
         this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this._afterStartInitQueuePush = _afterStartInitQueuePush;
-        this._showNextSlide = _showNextSlide;
-        this.sdkApi = sdkApi;
+        this.slideApiDeps = slideApiDeps;
         this._slideRoot = _slideRoot;
         this._getLayoutDirection = _getLayoutDirection;
         this._slidePauseUI = _slidePauseUI;
@@ -3167,16 +3633,16 @@ class Layer {
         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._afterAppResumeQueuePush, this.sdkApi);
+        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
         this._widgetDeps = {
-            sdkApi: this.sdkApi,
+            slideApiDeps: this.slideApiDeps,
             slideRoot: this._slideRoot,
             getLayoutDirection: this._getLayoutDirection,
             getSdkClientVariables: this._getSdkClientVariables,
         };
         const onWidgetComplete = (cardId, slideIndex) => {
             // todo if nothing more widgets with disabled timers - we can start layer timeline
-            const fallback = () => this._showNextSlide(DEFAULT_SLIDE_DURATION);
+            const fallback = () => this.slideApiDeps.showNextSlide(DEFAULT_SLIDE_DURATION);
             // для android sdk важно чтобы этот метод вызывался только после slide_start
             this._afterStartInitQueuePush(() => {
                 this._timeline.startDisabledTimeline(fallback);
@@ -3218,17 +3684,17 @@ class Layer {
         }
     }
     init(localData) {
-        if (this.sdkApi.isIOS || this.sdkApi.isAndroid) {
+        if (this.slideApiDeps.isIOS || this.slideApiDeps.isAndroid) {
             this._nodeRef.classList.add("_app");
-            this.sdkApi.isIOS && this._nodeRef.classList.add("_isIos");
-            this.sdkApi.isAndroid && this._nodeRef.classList.add("_isAndroid");
+            this.slideApiDeps.isIOS && this._nodeRef.classList.add("_isIos");
+            this.slideApiDeps.isAndroid && this._nodeRef.classList.add("_isAndroid");
         }
-        this.sdkApi.cardAnimation?.init(this._nodeRef);
+        this.slideApiDeps.cardAnimation?.init(this._nodeRef);
         const promises = this._elements.map(element => element.init(localData));
         return promises;
     }
     onAfterAllMediaResourcesLoaded() {
-        if (this.sdkApi.isIOS) ;
+        if (this.slideApiDeps.isIOS) ;
         this._initTextFit();
     }
     get nodeRef() {
@@ -3247,7 +3713,10 @@ class Layer {
         return container.get({ identifier: "LayoutService" });
     }
     getLocalData() {
-        return this.sdkApi.getCardLocalData();
+        return this.slideApiDeps.getCardLocalData();
+    }
+    findElementByNodeRef(nodeRef) {
+        return this._elements.find(element => element.nodeRef === nodeRef);
     }
     get isQuest() {
         return this._nodeRef.getAttribute("data-quest-count") != null;
@@ -3400,14 +3869,19 @@ class Layer {
         const videoElement = this.videoElement;
         let currentTime = 0;
         if (videoElement != null) {
-            let videoLoop = false;
-            if (this.timeline.isTimelineDisabled) {
-                videoLoop = true;
-            }
-            currentTime = (await videoElement.start(muted, videoLoop)).currentTime;
+            const getVideoIsLooped = () => {
+                let videoLoop = false;
+                if (this.timeline.isTimelineDisabled || this.timeline.durationMs > videoElement.durationMs) {
+                    videoLoop = true;
+                }
+                // console.log({videoLoop, isTimelineDisabled: this.timeline.isTimelineDisabled, timelineDurationMs: this.timeline.durationMs, videoElementDurationMs: videoElement.durationMs});
+                return videoLoop;
+            };
+            // todo - need to convert to ms ?
+            currentTime = (await videoElement.start(muted, getVideoIsLooped)).getVideoCurrentTime();
         }
-        if (this.sdkApi.cardAnimation) {
-            this._animationPauseCb = this.sdkApi.cardAnimation.start(this._nodeRef);
+        if (this.slideApiDeps.cardAnimation) {
+            this._animationPauseCb = this.slideApiDeps.cardAnimation.start(this._nodeRef);
         }
         for (const element of this._elements) {
             element.onStart();
@@ -3423,7 +3897,7 @@ class Layer {
     }
     async stop(options) {
         this.videoElement?.stop(options);
-        this.sdkApi.cardAnimation?.stop(this._nodeRef);
+        this.slideApiDeps.cardAnimation?.stop(this._nodeRef);
         for (const element of this._elements) {
             element.onPause();
         }
@@ -3434,7 +3908,7 @@ class Layer {
     }
     stopInternal(options) {
         this.videoElement?.stop(options);
-        this.sdkApi.cardAnimation?.stop(this._nodeRef);
+        this.slideApiDeps.cardAnimation?.stop(this._nodeRef);
         for (const element of this._elements) {
             element.onPause();
         }
@@ -3446,17 +3920,21 @@ class Layer {
         return new Promise(resolve => {
             const cb = () => {
                 let currentTime = this.videoElement?.pause(resetVideoTime) ?? null;
+                if (this.videoElement?.isLooped) {
+                    // skip currentTime from looped video (bcz in that case video time does not associated with timeline)
+                    currentTime = null;
+                }
+                if (currentTime != null) {
+                    currentTime *= 1000;
+                }
                 if (stopAnimation) {
-                    this.sdkApi.cardAnimation?.stop(this._nodeRef);
+                    this.slideApiDeps.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();
                 }
@@ -3476,26 +3954,23 @@ class Layer {
     }
     async resume() {
         return new Promise(resolve => {
-            const cb = ({ currentTime }) => {
+            const cb = ({ getVideoCurrentTime }) => {
                 // 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 });
+                this.timeline.slideResumed(getVideoCurrentTime != null ? () => getVideoCurrentTime() * 1000 : undefined);
+                resolve({ currentTime: getVideoCurrentTime != null ? getVideoCurrentTime() : null });
             };
             const videoStartedPromise = this.videoElement?.resume();
             if (videoStartedPromise != null && videoStartedPromise.then != null) {
                 videoStartedPromise.then(cb);
             }
             else {
-                cb({ currentTime: null });
+                cb({ getVideoCurrentTime: undefined });
             }
         });
     }
@@ -3511,7 +3986,7 @@ class Layer {
     get isLayerForcePaused() {
         return this.elements.some(element => element.isLayerForcePaused);
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Slide`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `(duration: number) => void`, `SDKApi`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Slide`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `ISlideApiDeps`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
 }
 const TextFit = (function () {
     const defaultSettings = {
@@ -3702,8 +4177,7 @@ class Slide {
     _slideReadyPromise;
     _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
-    _showNextSlide;
-    sdkApi;
+    slideApiDeps;
     _slideRoot;
     _getLayoutDirection;
     _slidePauseUI;
@@ -3711,13 +4185,12 @@ class Slide {
     _getSdkClientVariables;
     _layers;
     _start;
-    constructor(_slidesNodesRefs, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
+    constructor(_slidesNodesRefs, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
         this._slidesNodesRefs = _slidesNodesRefs;
         this._slideReadyPromise = _slideReadyPromise;
         this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this._afterStartInitQueuePush = _afterStartInitQueuePush;
-        this._showNextSlide = _showNextSlide;
-        this.sdkApi = sdkApi;
+        this.slideApiDeps = slideApiDeps;
         this._slideRoot = _slideRoot;
         this._getLayoutDirection = _getLayoutDirection;
         this._slidePauseUI = _slidePauseUI;
@@ -3727,7 +4200,7 @@ class Slide {
         if (!this._slidesNodesRefs.length) {
             throw new Error("No slides found.");
         }
-        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this._showNextSlide, this.sdkApi, this._slideRoot, this._getLayoutDirection, this._slidePauseUI, this._slideResumeUI, this._getSdkClientVariables));
+        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this.slideApiDeps, this._slideRoot, this._getLayoutDirection, this._slidePauseUI, this._slideResumeUI, this._getSdkClientVariables));
         this._activeLayer = this._layers[0];
     }
     _activeLayer;
@@ -3747,7 +4220,7 @@ class Slide {
         if (multiSlideApi != null && this.layers.length > 1) {
             try {
                 multiSlideApi.init(this.layersNodesRefs, localData, {
-                    sdkApi: this.sdkApi,
+                    slideApiDeps: this.slideApiDeps,
                     slideRoot: this._slideRoot,
                     getLayoutDirection: this._getLayoutDirection,
                     getSdkClientVariables: this._getSdkClientVariables,
@@ -3824,7 +4297,7 @@ class Slide {
     get disabledNavigation() {
         return this._activeLayer.disabledNavigation;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `(duration: number) => void`, `SDKApi`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `ISlideApiDeps`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
 }
 
 let SlideApi$1 = class SlideApi {
@@ -3841,20 +4314,29 @@ let SlideApi$1 = class SlideApi {
     _getViewportHeight;
     _overlappingActionBarHeight;
     _separateUserAndAppPause;
-    sdkApi;
+    _index;
+    slideApiDeps;
     constructor(config) {
         this.config = config;
-        this.sdkApi = config.sdkApi;
+        this.slideApiDeps = config.slideApiDeps;
         this._slideWrapper = config.slideWrapper;
         this._viewport = config.viewport;
         this._getViewportWidth = config.getViewportWidth;
         this._getViewportHeight = config.getViewportHeight;
         this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
         this._separateUserAndAppPause = config.separateUserAndAppPause;
-        this.refreshSizes = proxy(this.refreshSizes, this);
-        this.getSdkClientVariables = proxy(this.getSdkClientVariables, this);
-        this.initListeners();
-        this.refreshSizes();
+        this._index = config.index;
+    }
+    static checkPreloadedInLayoutSlide() {
+        // for sdk backward compatibility
+        const slideBox = document.getElementById("narrative-slide-box");
+        if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
+            return true;
+        }
+        return false;
+    }
+    initPreloadedInLayoutSlide(slideLoadedCb) {
+        // for sdk backward compatibility
         const slideBox = document.getElementById("narrative-slide-box");
         // todo via first child and its innerText - faster variant
         if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
@@ -3862,117 +4344,42 @@ let SlideApi$1 = class SlideApi {
             this._slideInRender = true;
             this._init(() => this._slideBoxRenderComplete(null)).then(({ slide, result, reason }) => {
                 this._slide = slide;
-                if (config.slideLoadedCb != null) {
-                    config.slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
+                if (slideLoadedCb != null) {
+                    slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
                 }
             });
         }
     }
-    async destroy() {
-        if (this.slide != null) {
-            await this.slide.onBeforeUnmount();
-        }
-        this.destroyListeners();
-        this._state = 13 /* STATE.DESTROYED */;
-    }
-    initListeners() {
-        this._viewport.addEventListener("resize", this.refreshSizes);
-    }
-    destroyListeners() {
-        this._viewport.removeEventListener("resize", this.refreshSizes);
-    }
-    _savedViewportWidth = null;
-    _savedViewportHeight = null;
-    refreshSizes() {
-        const viewportWidth = this._getViewportWidth();
-        const viewportHeight = this._getViewportHeight();
-        if (this._savedViewportWidth === viewportWidth && this._savedViewportHeight === viewportHeight) {
-            return;
-        }
-        this._savedViewportWidth = viewportWidth;
-        this._savedViewportHeight = viewportHeight;
-        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);
-        // todo - mobile only (or isIos or isAndroid)
-        if (this.sdkApi.isAndroid || this.sdkApi.isIOS) {
-            if (viewportRatio > _ratio) {
-                // disable _isFullscreen if viewport small
-                _isFullscreen = false;
-            }
-        }
-        if (_isFullscreen) {
-            // более квадратное чем надо (desktop)
-            if (viewportRatio > _ratio) {
-                // fit by height
-                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";
-            }
-            else {
-                // 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 + this._overlappingActionBarHeight}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 + this._overlappingActionBarHeight + "px";
+    onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen, slideOffsetMargin }) {
+        // todo CSP violation
+        this._slideWrapper.style.fontSize = fontSize;
+        if (this.slideOffsetElement != null) {
+            // todo CSP violation
+            this.slideOffsetElement.style.setProperty("--y-offset", yOffset);
+            this.slideOffsetElement.style.setProperty("--x-offset", xOffset);
+            if (isFullscreen) {
+                this.slideOffsetElement.classList.add("narrative-slide-offset-fullscreen");
             }
             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";
+                this.slideOffsetElement.classList.remove("narrative-slide-offset-fullscreen");
             }
+            this.slideOffsetElement.style.margin = slideOffsetMargin;
         }
-        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 });
+    }
+    get slideWrapperElement() {
+        return this._slideWrapper;
+    }
+    get slideOffsetElement() {
+        return this._slideWrapper.querySelector(".narrative-slide-offset");
+    }
+    get index() {
+        return this._index;
+    }
+    async destroy() {
+        if (this.slide != null) {
+            await this.slide.onBeforeUnmount();
         }
+        this._state = 13 /* STATE.DESTROYED */;
     }
     async showSlide(html) {
         const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
@@ -3985,7 +4392,9 @@ let SlideApi$1 = class SlideApi {
             }
             this._slideInInit = null;
             this._slideInRender = true;
-            slideBoxPrerender.innerHTML = html;
+            if (html != null) {
+                slideBoxPrerender.innerHTML = html;
+            }
             const prevSlide = this.slide ? Object.assign(Object.create(Object.getPrototypeOf(this.slide)), this.slide) : null;
             const { slide, result, reason } = await this._init(() => this._slideBoxRenderComplete(prevSlide));
             this._slide = slide;
@@ -4007,7 +4416,7 @@ let SlideApi$1 = class SlideApi {
         return container.get({ identifier: "LayoutService" });
     }
     getLocalData() {
-        return this.sdkApi.getCardLocalData();
+        return this.slideApiDeps.getCardLocalData();
     }
     _fontsInit = false;
     _initAndLoadFonts(fonts) {
@@ -4099,7 +4508,7 @@ let SlideApi$1 = class SlideApi {
         /**
          * For case when SlideApi instance was created before root was attached to DOM
          */
-        this.refreshSizes();
+        // this.config.refreshSizes(this);
         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) {
@@ -4112,17 +4521,18 @@ let SlideApi$1 = class SlideApi {
         const slideReadyPromise = new Promise(resolve => {
             slideReadyResolve = resolve;
         });
-        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterAppResumeQueuePush.bind(this), this.afterStartInitQueuePush.bind(this), this.sdkApi.showNextSlide.bind(this), this.sdkApi, this._slideWrapper, () => this.layoutDirection, this.slidePauseUI.bind(this), this.slideResumeUI.bind(this), this.getSdkClientVariables);
+        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterAppResumeQueuePush.bind(this), this.afterStartInitQueuePush.bind(this), this.slideApiDeps, this._slideWrapper, () => this.layoutDirection, this.slidePauseUI.bind(this), this.slideResumeUI.bind(this), this.config.getSdkClientVariables);
         this._slideInInit = slide;
+        // todo - call via DI
         slide.activeLayer.timeline.triggerSlideLoadState();
-        if (this.sdkApi.isAndroid) {
+        if (this.slideApiDeps.isAndroid) {
             this._afterStartInitQueue = [];
         }
         this._afterAppResumeQueue = [];
         const result = { slide, result: false, reason: "" };
         try {
             const onAllMediaLoaded = this._onAllMediaLoaded(slide);
-            const fontsPromise = this._initAndLoadFonts(this.sdkApi.getCardFonts());
+            const fontsPromise = this._initAndLoadFonts(this.slideApiDeps.getCardFonts());
             const mediaAndFontsPromise = Promise.all([onAllMediaLoaded, fontsPromise]).then(() => {
                 this.layoutService.env.clearTimeout(mediaResourcesTimeoutId);
             });
@@ -4221,7 +4631,7 @@ let SlideApi$1 = class SlideApi {
         this._slideConfig = config;
         // start deferred fncs from widgets
         // important - Android only
-        if (this.sdkApi.isAndroid && this._afterStartInitQueue && Array.isArray(this._afterStartInitQueue)) {
+        if (this.slideApiDeps.isAndroid && this._afterStartInitQueue && Array.isArray(this._afterStartInitQueue)) {
             for (const job of this._afterStartInitQueue) {
                 if (isFunction(job)) {
                     job();
@@ -4275,7 +4685,7 @@ let SlideApi$1 = class SlideApi {
             this._state = 9 /* STATE.USER_PAUSED */;
         };
         // todo move to Android adapter
-        if (this.sdkApi.isAndroid && !this.sdkApi.isSdkSupportCorrectPauseResumeLifecycle()) {
+        if (this.slideApiDeps.isAndroid && !this.slideApiDeps.isSdkSupportCorrectPauseResumeLifecycle()) {
             this._pauseCbTimer = this.layoutService.env.setTimeout(pauseCb, 300);
         }
         else {
@@ -4334,7 +4744,9 @@ let SlideApi$1 = class SlideApi {
         this._state = 5 /* STATE.RESUMED */;
     }
     async slideStop(options) {
-        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
+        // console.log(`TIMELINE_ACTION -> STOP, index: ${this.slide.slideIndex}, state: ${this._state}`);
+        // из состояния START (слайд (например с видео) еще не стартовал) тоже позволяем прерывать - чтобы был правильный LC при быстром пролистывании слайдера
+        if (!(this._state === 2 /* STATE.START */ || this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
             return;
         }
         this._state = 11 /* STATE.STOP */;
@@ -4349,10 +4761,10 @@ let SlideApi$1 = class SlideApi {
         const defaultAction = () => {
             const nextSlideIndex = this.slide.slideIndex + 1;
             if (nextSlideIndex >= 0 && nextSlideIndex < this.slide.slideCount) {
-                this.sdkApi.showCardSlide(nextSlideIndex);
+                this.slideApiDeps.showCardSlide(nextSlideIndex);
             }
             else {
-                this.sdkApi.cardShowNext();
+                this.slideApiDeps.cardShowNext();
             }
         };
         if (this.activeLayer.questElement) {
@@ -4399,7 +4811,7 @@ let SlideApi$1 = class SlideApi {
         if (!isFunction(cb)) {
             return false;
         }
-        if (this.sdkApi.isAndroid && this._state === 0 /* STATE.INIT */) {
+        if (this.slideApiDeps.isAndroid && this._state === 0 /* STATE.INIT */) {
             this._afterStartInitQueue.push(cb);
         }
         else {
@@ -4528,7 +4940,7 @@ let SlideApi$1 = class SlideApi {
             if (this.layoutService.layoutApi.widgetVoteApi) {
                 if (this.layoutService.layoutApi.widgetVoteApi.click(element)) {
                     this.layoutService.env.setTimeout(() => {
-                        this.sdkApi.showNextSlide(0);
+                        this.slideApiDeps.showNextSlide(0);
                     });
                 }
                 result.canClickNext = false;
@@ -4552,7 +4964,7 @@ let SlideApi$1 = class SlideApi {
         }
         if (element) {
             this.layoutService.env.setTimeout(() => {
-                this.sdkApi.showNextSlide(0);
+                this.slideApiDeps.showNextSlide(0);
             });
             result.canClickNext = false;
             return result;
@@ -4580,7 +4992,7 @@ let SlideApi$1 = class SlideApi {
             if (this.layoutService.layoutApi.widgetRangeSliderApi) {
                 if (this.layoutService.layoutApi.widgetRangeSliderApi.click(element)) {
                     this.layoutService.env.setTimeout(() => {
-                        this.sdkApi.showNextSlide(0);
+                        this.slideApiDeps.showNextSlide(0);
                     });
                 }
                 result.canClickNext = false;
@@ -4787,18 +5199,18 @@ let SlideApi$1 = class SlideApi {
         }
         if (element) {
             propagation = false;
-            this.sdkApi.setCardLocalData({}, true);
-            this.sdkApi.updateCardServerDataLocally(this.slide.cardId, {});
+            this.slideApiDeps.setCardLocalData({}, true);
+            this.slideApiDeps.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);
+                this.slideApiDeps.showLayer(0);
             }
             else {
-                this.sdkApi.showCardSlide(0); // сделать ее async
+                this.slideApiDeps.showCardSlide(0); // сделать ее async
             }
         }
         // todo в каждом виджете делать выход через
@@ -4886,44 +5298,44 @@ let SlideApi$1 = class SlideApi {
             // this.activeLayer.timeline.slidePaused(0);
             // return {handled: true};
         }
-        if (this.sdkApi.isAndroid && linkTargetAndroid) {
+        if (this.slideApiDeps.isAndroid && linkTargetAndroid) {
             linkTarget = linkTargetAndroid;
         }
-        if (this.sdkApi.isIOS && linkTargetIos) {
+        if (this.slideApiDeps.isIOS && linkTargetIos) {
             linkTarget = linkTargetIos;
         }
-        if (this.sdkApi.isWeb && linkTargetWeb) {
+        if (this.slideApiDeps.isWeb && linkTargetWeb) {
             linkTarget = linkTargetWeb;
         }
         // for btn(link) without url (openGame, openStory, closeCard, products, goods, etc)
         let statisticWidgetValue = linkType;
         let statisticWidgetEventType = "w-link";
         if (linkType === "closeStory" || linkType === "closeIAM") {
-            this.layoutService.env.setTimeout(() => this.sdkApi.closeCard("click"));
+            this.layoutService.env.setTimeout(() => this.slideApiDeps.closeCard("click"));
             handled = true;
         }
         else if (linkType && linkTarget) {
             if (linkType === "story") {
                 // storyId: number, slideIndex: number
-                this.layoutService.env.setTimeout(() => this.sdkApi.openStory(parseInt(linkTarget), 0));
+                this.layoutService.env.setTimeout(() => this.slideApiDeps.openStory(parseInt(linkTarget), 0));
                 handled = true;
             }
             else 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));
+                    this.layoutService.env.setTimeout(() => this.slideApiDeps.showCardSlide(__slideIndex));
                     handled = true;
                 }
             }
             else if (linkType === "game") {
-                this.layoutService.env.setTimeout(() => this.sdkApi.openGame(linkTarget));
+                this.layoutService.env.setTimeout(() => this.slideApiDeps.openGame(linkTarget));
                 handled = true;
             }
             else if (linkType === "layer") {
                 const layerIndex = parseInt(linkTarget);
                 if (layerIndex >= 0) {
-                    this.layoutService.env.setTimeout(() => this.sdkApi.showLayer(layerIndex));
+                    this.layoutService.env.setTimeout(() => this.slideApiDeps.showLayer(layerIndex));
                     handled = true;
                 }
             }
@@ -4931,7 +5343,7 @@ let SlideApi$1 = class SlideApi {
                 // traditional link, with url
                 statisticWidgetValue = linkTarget;
                 this.layoutService.env.setTimeout(() => {
-                    this.sdkApi.openUrl({
+                    this.slideApiDeps.openUrl({
                         type: isSwipeUpAction ? "swipeUpLink" : "link",
                         link: {
                             type: "url",
@@ -4941,6 +5353,12 @@ let SlideApi$1 = class SlideApi {
                 });
                 handled = true;
             }
+            else if (linkType === "promocode") {
+                handled = this.activeLayer.findElementByNodeRef(element)?.handleClick() ?? true;
+                if (!handled) {
+                    return { handled: true };
+                }
+            }
             else if (linkType === "products") {
                 if (this.layoutService.layoutApi.widgetProductsApi) {
                     this.layoutService.layoutApi.widgetProductsApi.click(element);
@@ -4950,7 +5368,7 @@ let SlideApi$1 = class SlideApi {
             else if (linkType === "swipe-up-items") {
                 const target = linkTarget;
                 this.layoutService.env.setTimeout(() => {
-                    this.sdkApi.openUrl({
+                    this.slideApiDeps.openUrl({
                         type: "swipeUpItems",
                         link: {
                             type: "json",
@@ -4986,7 +5404,7 @@ let SlideApi$1 = class SlideApi {
                         baseFields.message_id = cardId;
                         break;
                 }
-                this.sdkApi.sendStatisticEvent(statisticWidgetEventType, {
+                this.slideApiDeps.sendStatisticEvent(statisticWidgetEventType, {
                     i: cardId,
                     si: slideIndex,
                     wi: elementId,
@@ -5042,28 +5460,1403 @@ let SlideApi$1 = class SlideApi {
             }
         }
     }
-    _sdkClientVariables = {};
-    getSdkClientVariables() {
-        return this._sdkClientVariables;
-    }
-    setSdkClientVariables(variables) {
-        this._sdkClientVariables = variables;
-    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
-            sdkApi: SDKApi;
+            slideApiDeps: ISlideApiDeps;
             slideWrapper: HTMLElement;
             viewport: Window;
             userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
             slideRatio: number;
             isFullscreen: boolean;
-            slideLoadedCb?: (data: { cardId: number; slideIndex: number; result: boolean; reason?: string }) => void;
             getViewportWidth: () => number;
             getViewportHeight: () => number;
             overlappingActionBarHeight?: number;
             separateUserAndAppPause: boolean;
+            root: HTMLElement;
+            nonce?: string;
+            // refreshSizes: (slide: SlideApi) => void;
+            index: number;
+            getSdkClientVariables: GetSdkClientVariables;
         }`]; }
 };
 
+class SlideApiDepsMultiSlideMode {
+    sdkApi;
+    slider;
+    constructor(sdkApi, slider) {
+        this.sdkApi = sdkApi;
+        this.slider = slider;
+    }
+    getWidgetsSharedData(cardId, widget) {
+        return this.sdkApi.getWidgetsSharedData(cardId, widget);
+    }
+    showToast(text) {
+        return this.sdkApi.showToast(text);
+    }
+    writeToClipboard(data) {
+        return this.sdkApi.writeToClipboard(data);
+    }
+    get isExistsShare() {
+        return this.sdkApi.isExistsShare;
+    }
+    share(id, config) {
+        this.sdkApi.share(id, config);
+    }
+    get sdkCanSendShareComplete() {
+        return this.sdkApi.sdkCanSendShareComplete;
+    }
+    shareSlideScreenshot(shareId, hideElementsSelector, shareText) {
+        this.sdkApi.shareSlideScreenshot(shareId, hideElementsSelector, shareText);
+    }
+    setCardSessionValue(element, key, value) {
+        this.sdkApi.setCardSessionValue(element, key, value);
+    }
+    getCardSessionValue(element, key) {
+        return this.sdkApi.getCardSessionValue(element, key);
+    }
+    getCardFonts() {
+        return this.sdkApi.getCardFonts();
+    }
+    disableVerticalSwipeGesture() {
+        this.sdkApi.disableVerticalSwipeGesture();
+    }
+    enableVerticalSwipeGesture() {
+        this.sdkApi.enableVerticalSwipeGesture();
+    }
+    disableBackpress() {
+        this.sdkApi.disableBackpress();
+    }
+    enableBackpress() {
+        this.sdkApi.enableBackpress();
+    }
+    closeCard(reason) {
+        this.sdkApi.closeCard(reason);
+    }
+    openStory(id, index) {
+        // TODO rewrite with Promise - for usage story loading states in Button
+        this.sdkApi.openStory(id, index);
+    }
+    openGame(gameInstanceId) {
+        // TODO rewrite with Promise - for usage game loading states in Button
+        this.sdkApi.openGame(gameInstanceId);
+    }
+    openUrl(data) {
+        this.sdkApi.openUrl(data);
+    }
+    get isAndroid() {
+        return this.sdkApi.isAndroid;
+    }
+    get isWeb() {
+        return this.sdkApi.isWeb;
+    }
+    get isIOS() {
+        return this.sdkApi.isIOS;
+    }
+    get isExistsShowCardTextInput() {
+        return this.sdkApi.isExistsShowCardTextInput;
+    }
+    showCardTextInput(id, data) {
+        this.sdkApi.showCardTextInput(id, data);
+    }
+    vibrate(pattern) {
+        this.sdkApi.vibrate(pattern);
+    }
+    sendApiRequest(url, method, params, headers, data, profilingKey) {
+        return this.sdkApi.sendApiRequest(url, method, params, headers, data, profilingKey);
+    }
+    sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2) {
+        this.sdkApi.sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2);
+    }
+    setCardLocalData(keyValue, sendToServer) {
+        this.sdkApi.setCardLocalData(keyValue, sendToServer);
+    }
+    getCardLocalData() {
+        return this.sdkApi.getCardLocalData();
+    }
+    getCardServerData(cardId) {
+        return this.sdkApi.getCardServerData(cardId);
+    }
+    get cardAnimation() {
+        return this.sdkApi.cardAnimation;
+    }
+    updateCardServerDataLocally(cardId, data) {
+        this.sdkApi.updateCardServerDataLocally(cardId, data);
+    }
+    get isExistsShowNextCard() {
+        return this.sdkApi.isExistsShowNextCard;
+    }
+    cardShowNext() {
+        return;
+        // skip action in multislide mode (business logic)
+        // this.sdkApi.cardShowNext();
+    }
+    /** @deprecated, used only in native sdk **/
+    cardPausedCallback(currentTime) {
+        this.sdkApi.cardPausedCallback(currentTime);
+    }
+    /** @deprecated, used only in native sdk **/
+    cardResumedCallback(currentTime) {
+        this.sdkApi.cardResumedCallback(currentTime);
+    }
+    disableHorizontalSwipeGesture() {
+        this.sdkApi.disableHorizontalSwipeGesture();
+    }
+    enableHorizontalSwipeGesture() {
+        this.sdkApi.enableHorizontalSwipeGesture();
+    }
+    isExistsShowLayer() {
+        return this.sdkApi.isExistsShowLayer();
+    }
+    showLayer(index) {
+        this.sdkApi.showLayer(index);
+    }
+    /**
+     * For single slide mode - proxy these methods via SDKApi
+     * =================================================================================================================
+     */
+    get isExistsShowCardSlide() {
+        return true;
+    }
+    showCardSlide(index) {
+        this.slider.showByIndex(index);
+    }
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
+    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    }
+    isSdkSupportTimelineOnBeforeStart() {
+        return true;
+    }
+    isSdkSupportCorrectPauseResumeLifecycle() {
+        return true;
+    }
+    showNextSlide(duration) {
+        this.slider.showNextSlide();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKApi`, `ISlider`]; }
+}
+
+class SlideApiDepsSingleSlideMode {
+    sdkApi;
+    constructor(sdkApi) {
+        this.sdkApi = sdkApi;
+    }
+    getWidgetsSharedData(cardId, widget) {
+        return this.sdkApi.getWidgetsSharedData(cardId, widget);
+    }
+    showToast(text) {
+        return this.sdkApi.showToast(text);
+    }
+    writeToClipboard(data) {
+        return this.sdkApi.writeToClipboard(data);
+    }
+    get isExistsShare() {
+        return this.sdkApi.isExistsShare;
+    }
+    share(id, config) {
+        this.sdkApi.share(id, config);
+    }
+    get sdkCanSendShareComplete() {
+        return this.sdkApi.sdkCanSendShareComplete;
+    }
+    shareSlideScreenshot(shareId, hideElementsSelector, shareText) {
+        this.sdkApi.shareSlideScreenshot(shareId, hideElementsSelector, shareText);
+    }
+    setCardSessionValue(element, key, value) {
+        this.sdkApi.setCardSessionValue(element, key, value);
+    }
+    getCardSessionValue(element, key) {
+        return this.sdkApi.getCardSessionValue(element, key);
+    }
+    getCardFonts() {
+        return this.sdkApi.getCardFonts();
+    }
+    disableVerticalSwipeGesture() {
+        this.sdkApi.disableVerticalSwipeGesture();
+    }
+    enableVerticalSwipeGesture() {
+        this.sdkApi.enableVerticalSwipeGesture();
+    }
+    disableBackpress() {
+        this.sdkApi.disableBackpress();
+    }
+    enableBackpress() {
+        this.sdkApi.enableBackpress();
+    }
+    closeCard(reason) {
+        this.sdkApi.closeCard(reason);
+    }
+    openStory(id, index) {
+        // TODO rewrite with Promise - for usage story loading states in Button
+        this.sdkApi.openStory(id, index);
+    }
+    openGame(gameInstanceId) {
+        // TODO rewrite with Promise - for usage game loading states in Button
+        this.sdkApi.openGame(gameInstanceId);
+    }
+    openUrl(data) {
+        this.sdkApi.openUrl(data);
+    }
+    get isAndroid() {
+        return this.sdkApi.isAndroid;
+    }
+    get isWeb() {
+        return this.sdkApi.isWeb;
+    }
+    get isIOS() {
+        return this.sdkApi.isIOS;
+    }
+    get isExistsShowCardTextInput() {
+        return this.sdkApi.isExistsShowCardTextInput;
+    }
+    showCardTextInput(id, data) {
+        this.sdkApi.showCardTextInput(id, data);
+    }
+    vibrate(pattern) {
+        this.sdkApi.vibrate(pattern);
+    }
+    sendApiRequest(url, method, params, headers, data, profilingKey) {
+        return this.sdkApi.sendApiRequest(url, method, params, headers, data, profilingKey);
+    }
+    sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2) {
+        this.sdkApi.sendStatisticEvent(name, data, devPayload, forceEnableStatisticV2);
+    }
+    setCardLocalData(keyValue, sendToServer) {
+        this.sdkApi.setCardLocalData(keyValue, sendToServer);
+    }
+    getCardLocalData() {
+        return this.sdkApi.getCardLocalData();
+    }
+    getCardServerData(cardId) {
+        return this.sdkApi.getCardServerData(cardId);
+    }
+    get cardAnimation() {
+        return this.sdkApi.cardAnimation;
+    }
+    updateCardServerDataLocally(cardId, data) {
+        this.sdkApi.updateCardServerDataLocally(cardId, data);
+    }
+    get isExistsShowNextCard() {
+        return this.sdkApi.isExistsShowNextCard;
+    }
+    cardShowNext() {
+        this.sdkApi.cardShowNext();
+    }
+    /** @deprecated, used only in native sdk **/
+    cardPausedCallback(currentTime) {
+        this.sdkApi.cardPausedCallback(currentTime);
+    }
+    /** @deprecated, used only in native sdk **/
+    cardResumedCallback(currentTime) {
+        this.sdkApi.cardResumedCallback(currentTime);
+    }
+    disableHorizontalSwipeGesture() {
+        this.sdkApi.disableHorizontalSwipeGesture();
+    }
+    enableHorizontalSwipeGesture() {
+        this.sdkApi.enableHorizontalSwipeGesture();
+    }
+    isExistsShowLayer() {
+        return this.sdkApi.isExistsShowLayer();
+    }
+    showLayer(index) {
+        this.sdkApi.showLayer(index);
+    }
+    /**
+     * For single slide mode - proxy these methods via SDKApi
+     */
+    get isExistsShowCardSlide() {
+        return this.sdkApi.isExistsShowCardSlide;
+    }
+    showCardSlide(index) {
+        this.sdkApi.showCardSlide(index);
+    }
+    isSdkSupportUpdateTimeline() {
+        return this.sdkApi.isSdkSupportUpdateTimeline();
+    }
+    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    }
+    isSdkSupportTimelineOnBeforeStart() {
+        return this.sdkApi.isSdkSupportTimelineOnBeforeStart();
+    }
+    isSdkSupportCorrectPauseResumeLifecycle() {
+        return this.sdkApi.isSdkSupportCorrectPauseResumeLifecycle();
+    }
+    showNextSlide(duration) {
+        this.sdkApi.showNextSlide(duration);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKApi`]; }
+}
+
+class SlideTimer {
+    requestStartTimer;
+    requestCancelTimer;
+    updateCb;
+    doneCb;
+    constructor(requestStartTimer, requestCancelTimer, updateCb, doneCb) {
+        this.requestStartTimer = requestStartTimer;
+        this.requestCancelTimer = requestCancelTimer;
+        this.updateCb = updateCb;
+        this.doneCb = doneCb;
+    }
+    duration;
+    timeLeft;
+    _pause = true;
+    _stop = true;
+    _started = false;
+    start(duration) {
+        this.duration = duration;
+        this.stop();
+        this.timeLeft = this.duration;
+        this._pause = false;
+        this._stop = false;
+        this._started = true;
+        this.tick();
+    }
+    stop() {
+        this._stop = true;
+        this._started = false;
+        if (this.timerId != null) {
+            this.requestCancelTimer(this.timerId);
+            this.timerId = null;
+        }
+        // this.updateCb(0);
+    }
+    pause() {
+        this._pause = true;
+        if (this.timerId != null) {
+            this.requestCancelTimer(this.timerId);
+            this.timerId = null;
+        }
+    }
+    resume(currentTime = undefined, duration = 0) {
+        this._pause = false;
+        if (!this._started) {
+            this.start(duration);
+        }
+        else {
+            if (currentTime != null) {
+                // timeLeft correction
+                this.timeLeft = this.duration - currentTime;
+            }
+            this.tick();
+        }
+    }
+    timerId;
+    tick() {
+        if (this._stop) {
+            return;
+        }
+        const rafStartTime = new Date().getTime();
+        this.timerId = this.requestStartTimer(() => {
+            if (this._stop) {
+                return;
+            }
+            const dtDiff = new Date().getTime() - rafStartTime;
+            this.timeLeft -= dtDiff;
+            let progressPercent = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
+            if (progressPercent > 100) {
+                progressPercent = 100;
+            }
+            this.updateCb(progressPercent);
+            if (progressPercent < 100) {
+                if (this._pause !== true) {
+                    this.tick();
+                }
+            }
+            else {
+                this.doneCb();
+            }
+        });
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progressPercent: number) => void`, `() => void`]; }
+}
+
+/**
+ * usage TS interface with ctor
+ * https://blog.logrocket.com/writing-constructor-typescript/
+ *
+ * @param ctor
+ * @param slides
+ * @param getLayoutDirection
+ */
+function createTimelineController(ctor, slides, getLayoutDirection) {
+    return new ctor(slides, getLayoutDirection);
+}
+class TimelineController {
+    slides;
+    getLayoutDirection;
+    constructor(slides, getLayoutDirection) {
+        this.slides = slides;
+        this.getLayoutDirection = getLayoutDirection;
+    }
+    onSlideTimerUpdate(index, progressPercent) {
+        this.slides[index]?.updateTimelineProgress(progressPercent, true);
+    }
+    onSlideBeforeStart(index) {
+        // fill to 100% all previous slides
+        for (let i = 0; i < index; ++i) {
+            this.slides[i]?.updateTimelineProgress(100, false);
+        }
+        // fill to 0% all next slides (for user revert direction)
+        for (let i = index + 1; i < this.slides.length; ++i) {
+            this.slides[i]?.updateTimelineProgress(0, false);
+        }
+        // activate current slide
+        this.slides[index]?.updateTimelineProgress(0, true);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `GetLayoutDirection`]; }
+}
+
+class Slider {
+    config;
+    constructor(config) {
+        this.config = config;
+        for (let i = 0; i < config.slides.length; ++i) {
+            const item = {
+                called: false,
+                firstRenderCall: null,
+                firstRenderCallPromise: null,
+            };
+            item.firstRenderCallPromise = new Promise(resolver => {
+                item.firstRenderCall = resolver;
+            });
+            this.slidesFirstRenders[i] = item;
+        }
+        const slideWrapper = this.createSliderElement({
+            slides: config.slides,
+            nonce: config.nonce,
+            slideRender: config.slideRender,
+            navbarAppearance: config.navbarAppearance,
+        });
+        config.root.appendChild(slideWrapper);
+        this.slideWrapperElement = slideWrapper;
+        this.timelineController = createTimelineController(TimelineController, this.slides, this.config.getLayoutDirection.bind(this));
+        // cardMounted: (card: HTMLElement) => Promise<void>
+        requestAnimationFrame(async () => {
+            await Promise.all(this.slides.map((slide, index) => config.onSlideMounted(slide.element, index)));
+        });
+    }
+    isAnimating = false;
+    activeIndex = -1;
+    get activeSlide() {
+        return this.slides[this.activeIndex];
+    }
+    slides = [];
+    sliderTrack = null;
+    bulletsContainer = null;
+    slidesFirstRenders = [];
+    slideWrapperElement;
+    timelineController;
+    assembleNavbarCssVariables(navbarAppearance) {
+        let css = "";
+        if (navbarAppearance.edge_offset != null) {
+            css += `--navbar-edge-offset: ${navbarAppearance.edge_offset};`;
+        }
+        if (navbarAppearance.active_timeline_width != null) {
+            css += `--navbar-active-timeline_width: ${navbarAppearance.active_timeline_width};`;
+        }
+        if (navbarAppearance.background_color != null) {
+            css += `--navbar-background-color: ${navbarAppearance.background_color};`;
+        }
+        if (navbarAppearance.border_radius != null) {
+            css += `--navbar-border-radius: ${navbarAppearance.border_radius};`;
+        }
+        if (navbarAppearance.drop_shadow_blur != null) {
+            css += `--navbar-drop-shadow-blur: ${navbarAppearance.drop_shadow_blur};`;
+        }
+        if (navbarAppearance.drop_shadow_color != null) {
+            css += `--navbar-drop-shadow-color: ${navbarAppearance.drop_shadow_color};`;
+        }
+        if (navbarAppearance.drop_shadow_x_offset != null) {
+            css += `--navbar-drop-shadow-x-offset: ${navbarAppearance.drop_shadow_x_offset};`;
+        }
+        if (navbarAppearance.drop_shadow_y_offset != null) {
+            css += `--navbar-drop-shadow-y-offset: ${navbarAppearance.drop_shadow_y_offset};`;
+        }
+        if (navbarAppearance.timeline_background_color != null) {
+            css += `--navbar-timeline-background-color: ${navbarAppearance.timeline_background_color};`;
+        }
+        if (navbarAppearance.timeline_fill_color != null) {
+            css += `--navbar-timeline-fill-color: ${navbarAppearance.timeline_fill_color};`;
+        }
+        if (navbarAppearance.timeline_size != null) {
+            css += `--navbar-timeline-size: ${navbarAppearance.timeline_size};`;
+        }
+        if (navbarAppearance.timelines_gap != null) {
+            css += `--navbar-timelines-gap: ${navbarAppearance.timelines_gap};`;
+        }
+        if (navbarAppearance.vertical_padding != null) {
+            css += `--navbar-vertical-padding: ${navbarAppearance.vertical_padding};`;
+        }
+        if (navbarAppearance.horizontal_padding != null) {
+            css += `--navbar-horizontal-padding: ${navbarAppearance.horizontal_padding};`;
+        }
+        return `.cards-slider {${css}`;
+    }
+    createSliderElement = ({ slides, nonce, slideRender, navbarAppearance, }) => {
+        const style = document.createElement("style");
+        if (nonce != null) {
+            style.nonce = nonce;
+        }
+        style.innerText = this.assembleNavbarCssVariables(navbarAppearance);
+        const slider = document.createElement("div");
+        slider.classList.add("cards-slider");
+        const track = document.createElement("div");
+        track.classList.add("cards-slider__track");
+        this.sliderTrack = track;
+        const [bullets, updateTimelineProgress] = this.createBulletPoints(slides.length, this.config.getLayoutDirection.bind(this), navbarAppearance.position);
+        this.bulletsContainer = bullets;
+        this.slides = slides.map((slide, i) => ({
+            element: slideRender(slide, i, this.slidesFirstRenders[i].firstRenderCallPromise),
+            timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), progressPercent => this.timelineController.onSlideTimerUpdate(i, progressPercent), this.onSlideTimerEnd.bind(this)),
+            updateTimelineProgress: (progressPercent, isActive) => updateTimelineProgress(i, progressPercent, isActive),
+        }));
+        for (let i = 0; i < this.slides.length; ++i) {
+            const slideElement = document.createElement("div");
+            slideElement.classList.add("cards-slider__slide");
+            slideElement.setAttribute("data-index", String(i));
+            slideElement.appendChild(this.slides[i].element);
+            track.appendChild(slideElement);
+        }
+        slider.appendChild(track);
+        const safeAreaView = document.createElement("div");
+        safeAreaView.classList.add("safe-area-view", "inset-0", "non-touchable");
+        const safeAreaRelativeZoneView = document.createElement("div");
+        safeAreaRelativeZoneView.classList.add("safe-area-relative-zone-view");
+        safeAreaRelativeZoneView.appendChild(bullets);
+        safeAreaView.appendChild(safeAreaRelativeZoneView);
+        slider.appendChild(safeAreaView);
+        slider.appendChild(style);
+        return slider;
+    };
+    createBulletPoints(count, getLayoutDirection, position) {
+        const bullets = document.createElement("div");
+        bullets.classList.add("cards-slider__navbar");
+        if (position === 0) {
+            bullets.classList.add("cards-slider__navbar--position-none");
+        }
+        else if (position === 1) {
+            bullets.classList.add("cards-slider__navbar--position-top");
+        }
+        else if (position === 2) {
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        else {
+            // default
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        bullets.dir = getLayoutDirection();
+        for (let i = 0; i < count; ++i) {
+            const bullet = document.createElement("div");
+            bullet.classList.add("cards-slider__timeline", "touchable");
+            bullet.setAttribute("data-index", String(i));
+            bullet.onclick = (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                const bullet = e.target;
+                if (bullet != null) {
+                    const index = bullet.dataset.index;
+                    if (index != null) {
+                        this.showByIndex(parseInt(index));
+                    }
+                }
+            };
+            const bulletFill = document.createElement("div");
+            bulletFill.classList.add("cards-slider__timeline-fill");
+            bullet.append(bulletFill);
+            bullets.appendChild(bullet);
+        }
+        // const onUpdateActiveIndex = (activeIndex: number) => {
+        //     if (activeIndex >= 0 && activeIndex < count) {
+        //         for (const bullet of bullets.querySelectorAll(".cards-slider__bullet--active")) {
+        //             bullet.classList.toggle("cards-slider__bullet--active");
+        //         }
+        //         bullets.querySelector(`.cards-slider__bullet[data-index="${activeIndex}"]`)?.classList.toggle("cards-slider__bullet--active");
+        //     }
+        // };
+        const onUpdateTimelineProgress = (index, progress, isActive) => {
+            if (index >= 0 && index < count) {
+                const bullet = bullets.querySelector(`.cards-slider__timeline:nth-child(${index + 1})`);
+                const bulletFill = bullet?.querySelector(".cards-slider__timeline-fill");
+                bullet?.classList[isActive ? "add" : "remove"]("cards-slider__timeline--active");
+                if (bulletFill != null) {
+                    // todo remove progress after slide changed?
+                    if (this.config.getLayoutDirection() === "rtl") {
+                        progress = -1 * progress;
+                    }
+                    bulletFill.style.setProperty("transform", `translateX(${progress}%)`);
+                }
+            }
+        };
+        return [bullets, onUpdateTimelineProgress];
+    }
+    async showByIndex(newIndex) {
+        const prevIndex = this.activeIndex;
+        if (this.isAnimating)
+            return prevIndex;
+        if (newIndex === prevIndex)
+            return prevIndex;
+        if (prevIndex !== -1) {
+            // skip for slider start
+            this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
+            await this.config.onSlideStop();
+        }
+        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
+        if (loadingError) {
+            // todo via updateTimeline ????
+            this.config.onSlideLoadingError(index, loadingError);
+        }
+        if (!loadingError) {
+            this.onShowSlide(index);
+        }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.config.onSlideStart();
+        }
+        return newIndex;
+    }
+    async showNextSlide() {
+        const prevIndex = this.activeIndex;
+        if (this.isAnimating)
+            return prevIndex;
+        const newIndex = prevIndex + 1;
+        if (newIndex < 0 || newIndex >= this.slides.length) {
+            return null;
+        }
+        if (prevIndex !== -1) {
+            // skip for slider start
+            this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
+            await this.config.onSlideStop();
+        }
+        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
+        if (loadingError) {
+            // todo via updateTimeline ????
+            this.config.onSlideLoadingError(index, loadingError);
+        }
+        if (!loadingError) {
+            this.onShowSlide(index);
+        }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.config.onSlideStart();
+        }
+        return newIndex;
+    }
+    async initAndRenderSlide(index) {
+        this.config.onBeforeLoadSlide(index);
+        let showSlidePromise;
+        if (!this.slidesFirstRenders[index].called) {
+            // first render call
+            this.slidesFirstRenders[index].called = true;
+            showSlidePromise = new Promise(resolve => {
+                this.slidesFirstRenders[index].firstRenderCall(resolve);
+            }).then(_ => _);
+        }
+        else {
+            showSlidePromise = this.config.onBeforeShowSlide(this.slides[index].element, index);
+        }
+        try {
+            const { moveToIndex } = await showSlidePromise;
+            if (moveToIndex !== index) {
+                index = moveToIndex;
+                // jump to necessary slide (from WidgetQuest for instance)
+                return this.initAndRenderSlide(index);
+            }
+            else {
+                return { index, loadingError: undefined };
+            }
+        }
+        catch (loadingError) {
+            // catch loading error
+            // this.config.onSlideLoadingError(index, e as string);
+            console.error(loadingError);
+            return { index, loadingError: loadingError };
+        }
+    }
+    onShowSlide(index) {
+        // this.updateBulletActiveIndex(index);
+        this.config.onShowSlide(this.slides[index].element, index);
+        // this.config.onSlideStart();
+    }
+    onUpdateSizeMetrics(metrics) {
+        // this.slideTo(this.activeIndex, 0);
+    }
+    getSlideOffset(index) {
+        if (!this.slides.length)
+            return 0;
+        const k = this.config.getLayoutDirection() === "ltr" ? -1 : 1;
+        const cardWidth = this.slides[0].element.clientWidth;
+        return k * index * cardWidth;
+    }
+    async slideTo(index, speed = 300) {
+        if (index < 0 || index > this.slides.length - 1 || this.isAnimating)
+            return;
+        const cardOffset = this.getSlideOffset(index);
+        await this.translateTo(cardOffset, speed);
+        this.activeIndex = index;
+    }
+    setTranslate(value) {
+        this.sliderTrack?.style.setProperty("transform", `translateX(${value}px)`);
+    }
+    setTransition(duration = 300) {
+        this.sliderTrack?.style.setProperty("transition", `transform ${duration}ms`);
+    }
+    async translateTo(translate, speed) {
+        if (this.isAnimating)
+            return;
+        this.setTransition(speed);
+        this.setTranslate(translate);
+        if (speed > 0) {
+            this.isAnimating = true;
+            await this.waitTransitionEnd();
+            this.isAnimating = false;
+        }
+    }
+    waitTransitionEnd() {
+        const sliderTrack = this.sliderTrack;
+        if (!sliderTrack)
+            return Promise.resolve();
+        return new Promise(resolve => {
+            const handler = (e) => {
+                if (e.propertyName === "transform") {
+                    sliderTrack.style.transitionDuration = "0ms";
+                    resolve();
+                }
+            };
+            sliderTrack.addEventListener("transitionend", handler, { once: true });
+        });
+    }
+    destroy() {
+        this.activeSlide?.timer.stop();
+        if (this.slideWrapperElement != null && this.config.root != null) {
+            this.config.root.removeChild(this.slideWrapperElement);
+        }
+    }
+    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        switch (action) {
+            case "before_start" /* TIMELINE_ACTION.BEFORE_START */: {
+                // switch timeline to active slide and wait for start (wait VOD loading)
+                // console.log("TIMELINE_ACTION.BEFORE_START", { activeSlide: this.activeSlide, duration });
+                this.timelineController.onSlideBeforeStart(slideIndex);
+                break;
+            }
+            case "start" /* TIMELINE_ACTION.START */: {
+                this.config.onSlideDataResume();
+                // also start after data waiting or pause
+                // destroy on IAM closing
+                // console.log("TIMELINE_ACTION.START", {
+                //     activeSlide: this.activeSlide,
+                //     index: this.activeIndex,
+                //     duration,
+                // });
+                let resumeTimer = false;
+                if (duration > 0) {
+                    // skip timer start for slide/layer with disabled timeline
+                    resumeTimer = true;
+                }
+                if (currentTime === duration) {
+                    // skip timer start for already ended layer timeline
+                    // skip timer start for already ended layer timeline
+                    resumeTimer = false;
+                }
+                if (resumeTimer) {
+                    this.activeSlide?.timer.resume(currentTime, duration);
+                }
+                break;
+            }
+            case "pause" /* TIMELINE_ACTION.PAUSE */: {
+                if (showLoader) {
+                    this.config.onSlideDataWaiting();
+                }
+                this.activeSlide?.timer.pause();
+                // console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
+                break;
+            }
+            case "stop" /* TIMELINE_ACTION.STOP */: {
+                // loading error
+                if (showError) {
+                    this.config.onSlideDataError();
+                }
+                this.activeSlide?.timer.stop();
+                // todo нужен STOP когда вручную переключаем слайд на другой
+                // console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
+                break;
+            }
+        }
+    }
+    // private onSlideTimerUpdate(progress: number) {
+    // this.updateTimelineProgress(this.activeIndex, progress);
+    // }
+    async onSlideTimerEnd() {
+        await this.config.onSlideStop();
+        this.config.onSlideTimerEnd();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+            slides: Array<T>;
+            root: HTMLElement;
+            nonce?: string;
+            navbarAppearance: NavbarAppearance;
+            slideRender: SlideRender<T>;
+            onSlideMounted: OnSlideMounted;
+            onBeforeShowSlide: OnBeforeShowSlide;
+            onBeforeLoadSlide: OnBeforeLoadSlide;
+            onSlideLoadingError: OnSlideLoadingError;
+            onShowSlide: OnShowSlide;
+            onSlideLeft: OnSlideLeft;
+            getLayoutDirection: GetLayoutDirection;
+
+            onSlideTimerEnd: OnSlideTimerEnd;
+            onSlideStart: OnSlideStart;
+            onSlideStop: OnSlideStop;
+            onSlideDataWaiting: OnSlideDataWaiting;
+            onSlideDataResume: OnSlideDataResume;
+            onSlideDataError: OnSlideDataError;
+        }`]; }
+}
+
+class CardApi {
+    config;
+    get layoutDirection() {
+        return this.activeSlide.layoutDirection;
+    }
+    static renderedBoxClassName = "narrative-slide-box-rendered";
+    static prerenderBoxClassName = "narrative-slide-box-prerender";
+    _singleCardSlideWrapper;
+    _viewport;
+    _getViewportWidth;
+    _getViewportHeight;
+    _overlappingActionBarHeight;
+    _separateUserAndAppPause;
+    _useSdkCacheForMultislideMode;
+    sdkApi;
+    activeSlide = null;
+    slides = [];
+    slidesMode = 0 /* SLIDES_MODE.SINGLE */;
+    cardLoadingStateController = null;
+    sizeMetrics = {
+        fontSize: "0px",
+        isFullscreen: false,
+        slideOffsetMargin: "0px",
+        xOffset: "0px",
+        yOffset: "0px",
+    };
+    constructor(config) {
+        this.config = config;
+        this.sdkApi = config.sdkApi;
+        this._singleCardSlideWrapper = config.slideWrapper;
+        this._viewport = config.viewport;
+        this._getViewportWidth = config.getViewportWidth;
+        this._getViewportHeight = config.getViewportHeight;
+        this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
+        this._separateUserAndAppPause = config.separateUserAndAppPause;
+        this._useSdkCacheForMultislideMode = config.useSdkCacheForMultislideMode;
+        this.refreshSizes = proxy(this.refreshSizes, this);
+        this.getSdkClientVariables = proxy(this.getSdkClientVariables, this);
+        this.refreshSizes();
+        // todo - возможность не создавать slideApi в ctor (это не нужно для multislide mode)
+        // но тогда все методы должны обходить случай когда activeSlide undefined
+        this.activeSlide = new SlideApi$1({
+            slideApiDeps: new SlideApiDepsSingleSlideMode(this.config.sdkApi),
+            slideWrapper: this.config.slideWrapper,
+            viewport: this.config.viewport,
+            userResizeHandler: this.config.userResizeHandler,
+            slideRatio: this.config.slideRatio,
+            isFullscreen: this.config.isFullscreen,
+            getViewportWidth: this.config.getViewportWidth,
+            getViewportHeight: this.config.getViewportHeight,
+            overlappingActionBarHeight: this.config.overlappingActionBarHeight,
+            separateUserAndAppPause: this.config.separateUserAndAppPause,
+            root: this.config.root,
+            index: 0,
+            getSdkClientVariables: this.getSdkClientVariables,
+        });
+        this.activeSlide.onUpdateSizeMetrics(this.sizeMetrics);
+        if (SlideApi$1.checkPreloadedInLayoutSlide()) {
+            this.activeSlide.initPreloadedInLayoutSlide(this.config.slideLoadedCb);
+        }
+        this.initListeners();
+    }
+    get state() {
+        // TODO remove usage from web-sdk
+        return this.activeSlide.state;
+    }
+    async destroy() {
+        await this.activeSlide.destroy();
+        await Promise.all(this.slides.map(({ slide }) => {
+            if (slide !== this.activeSlide) {
+                return slide?.destroy();
+            }
+        }));
+        this.destroyListeners();
+    }
+    initListeners() {
+        // @ts-ignore
+        this._viewport.addEventListener("resize", this.refreshSizes);
+    }
+    destroyListeners() {
+        // @ts-ignore
+        this._viewport.removeEventListener("resize", this.refreshSizes);
+        // todo call via activeSlide.refreshSizes
+    }
+    _savedViewportWidth = null;
+    _savedViewportHeight = null;
+    refreshSizes() {
+        const viewportWidth = this._getViewportWidth();
+        const viewportHeight = this._getViewportHeight();
+        if (this._savedViewportWidth === viewportWidth && this._savedViewportHeight === viewportHeight) {
+            return;
+        }
+        this._savedViewportWidth = viewportWidth;
+        this._savedViewportHeight = viewportHeight;
+        const viewportRatio = viewportWidth / viewportHeight;
+        let slideWidth = 0;
+        let slideHeight = 0;
+        // _ratio = 310 / 480,
+        const _ratio = this.config.slideRatio;
+        let _isFullscreen = this.config.isFullscreen;
+        let offset = 0;
+        let xOffset = "0px";
+        // for elements with bottom anchor (absolute position)
+        let yOffset = "0px";
+        // todo - mobile only (or isIos or isAndroid)
+        if (this.sdkApi.isAndroid || this.sdkApi.isIOS) {
+            if (viewportRatio > _ratio) {
+                // disable _isFullscreen if viewport small
+                _isFullscreen = false;
+            }
+        }
+        let slideOffsetMargin = "";
+        if (_isFullscreen) {
+            // более квадратное чем надо (desktop)
+            if (viewportRatio > _ratio) {
+                // fit by height
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                slideOffsetMargin = "0 " + -offset + "px"; // -8.5
+                xOffset = offset + "px";
+            }
+            else {
+                // 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;
+                slideOffsetMargin = -1 * offset + "px" + " 0 ";
+                // offset from viewport bottom to StoryBottom plus safe area offset bottom
+                yOffset = `calc(${offset + this._overlappingActionBarHeight}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;
+                slideOffsetMargin = -offset + "px" + " 0 ";
+                yOffset = offset + this._overlappingActionBarHeight + "px";
+            }
+            else {
+                // вьюпорт более вытянутый чем надо
+                // fit by height, sides - to offscreen
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                slideOffsetMargin = "0 " + -offset + "px"; // -8.5
+                xOffset = offset + "px";
+            }
+        }
+        const fontSizeNumber = slideWidth / 20;
+        const fontSize = `${fontSizeNumber}px`;
+        const sizeMetrics = { fontSize, xOffset, yOffset, isFullscreen: _isFullscreen, slideOffsetMargin };
+        this.sizeMetrics = sizeMetrics;
+        this.activeSlide?.onUpdateSizeMetrics(sizeMetrics);
+        this.slides.forEach(({ slide }) => {
+            if (slide !== this.activeSlide) {
+                slide?.onUpdateSizeMetrics(sizeMetrics);
+            }
+        });
+        this.slider?.onUpdateSizeMetrics(sizeMetrics);
+        if (this.config.userResizeHandler != null) {
+            this.config.userResizeHandler({ viewportWidth, viewportHeight, fontSize: fontSizeNumber });
+        }
+    }
+    async showSlide(html) {
+        this.slidesMode = 0 /* SLIDES_MODE.SINGLE */;
+        if (this.activeSlide == null) {
+            this.activeSlide = new SlideApi$1({
+                slideApiDeps: new SlideApiDepsSingleSlideMode(this.config.sdkApi),
+                slideWrapper: this.config.slideWrapper,
+                viewport: this.config.viewport,
+                userResizeHandler: this.config.userResizeHandler,
+                slideRatio: this.config.slideRatio,
+                isFullscreen: this.config.isFullscreen,
+                getViewportWidth: this.config.getViewportWidth,
+                getViewportHeight: this.config.getViewportHeight,
+                overlappingActionBarHeight: this.config.overlappingActionBarHeight,
+                separateUserAndAppPause: this.config.separateUserAndAppPause,
+                root: this.config.root,
+                // refreshSizes: this.refreshSizes,
+                index: 0,
+                getSdkClientVariables: this.getSdkClientVariables,
+            });
+            this.activeSlide.onUpdateSizeMetrics(this.sizeMetrics);
+        }
+        return this.activeSlide.showSlide(html);
+    }
+    slider = null;
+    async showSlides(slides, cardAppearance, index = 0) {
+        this.slidesMode = 1 /* SLIDES_MODE.MULTIPLE */;
+        if (this.cardLoadingStateController === null) {
+            this.cardLoadingStateController = new CardLoadingStateController(this.sdkApi.onCardLoadingStateChange.bind(this.sdkApi));
+        }
+        this.cardLoadingStateController.onSetLoadStartState();
+        slides.forEach((content, index) => {
+            if (this.slides[index] == null) {
+                const item = { content, resourcesReadyPromise: null };
+                if (this._useSdkCacheForMultislideMode) {
+                    item.resourcesReadyPromise = new Promise((resolve, reject) => {
+                        item.resourcesReadyPromisesResolver = { resolve, reject };
+                    });
+                }
+                else {
+                    item.resourcesReadyPromise = Promise.resolve();
+                }
+                this.slides[index] = item;
+            }
+            else {
+                // for case when sdk call setSlideInCacheStatus before showSlides and for slideReloading (after loading error)
+                this.slides[index].content = content;
+                if (this.slides[index].resourcesReadyPromise == null) {
+                    if (this._useSdkCacheForMultislideMode) {
+                        this.slides[index].resourcesReadyPromise = new Promise((resolve, reject) => {
+                            this.slides[index].resourcesReadyPromisesResolver = { resolve, reject };
+                        });
+                    }
+                    else {
+                        this.slides[index].resourcesReadyPromise = Promise.resolve();
+                    }
+                }
+            }
+        });
+        const onBeforeShowSlide = (slideElement, index) => {
+            if (this.slides[index].slide == null) {
+                const slideApi = new SlideApi$1({
+                    slideApiDeps: new SlideApiDepsMultiSlideMode(this.config.sdkApi, this.slider),
+                    slideWrapper: slideElement,
+                    viewport: this.config.viewport,
+                    userResizeHandler: this.config.userResizeHandler,
+                    slideRatio: this.config.slideRatio,
+                    isFullscreen: this.config.isFullscreen,
+                    getViewportWidth: this.config.getViewportWidth,
+                    getViewportHeight: this.config.getViewportHeight,
+                    overlappingActionBarHeight: this.config.overlappingActionBarHeight,
+                    separateUserAndAppPause: this.config.separateUserAndAppPause,
+                    root: this.config.root,
+                    index,
+                    getSdkClientVariables: this.getSdkClientVariables,
+                });
+                slideApi.onUpdateSizeMetrics(this.sizeMetrics);
+                this.slides[index].slide = slideApi;
+                // TODO для виджета квест нужно при каждом показе слайда инициализировать виджет???
+                // пока вызов убран из за того что init жестко завязан на single slide mode
+                this.activeSlide = this.slides[index].slide;
+                return this.slides[index].slide.showSlide().then(_ => ({ moveToIndex: index }));
+            }
+            else {
+                // quot -                 // TODO для виджета квест нужно при каждом показе слайда инициализировать виджет???
+                //                 // пока вызов убран из за того что init жестко завязан на single slide mode
+                // из-за того что перед показом нет приватного вызова SlideApi::_init пока что нужно руками вызывать
+                // slide.activeLayer.timeline.triggerSlideLoadState();
+                // для того чтобы запустить TIMELINE_ACTION.BEFORE_START что нужно для таймлайна слайдера
+                // todo убрать в случае если будем вызывать new SlideApi перед каждым показом слайда
+                this.slides[index].slide.activeLayer.timeline.triggerSlideLoadState();
+            }
+            this.activeSlide = this.slides[index].slide;
+            // TODO handle moveToIndex
+            // return resolve or reject with reason
+            // TODO для виджета квест нужно при каждом показе слайда инициализировать виджет???
+            // пока вызов убран из за того что init жестко завязан на single slide mode
+            // return this.slides[index].slide.showSlide().then(_ => ({ moveToIndex: index }));
+            return Promise.resolve({ moveToIndex: index });
+            // вызываем здесь cardLoadingState - loading
+            // новый cb - onSlideShowError - там вызов cardLoadingState error - через cardLoadingStateManager
+            // в onShowSlide- cardLoadingState load done
+            // внутри слайдера - обрабатываем moveToIndex
+        };
+        const onBeforeLoadSlide = index => {
+            this.cardLoadingStateController.onSetLoadStartState();
+        };
+        const onSlideLoadingError = (index, reason) => {
+            this.cardLoadingStateController.onSetLoadErrorState(reason);
+        };
+        const onShowSlide = (slide, index) => {
+            this.cardLoadingStateController.onSetLoadEndState();
+            this.sdkApi.emitEvent("showSlide", { cardId: this.slides[index]?.slide?.slide.cardId ?? 0, index });
+            // if (index === 0) {
+            //     this.activeSlide = slideApi;
+            // }
+            // const { result, cardId, slideIndex, reason } = await slideApi.showSlide();
+            // if (index === 0) {
+            //     if (result) {
+            //         this.sdkApi.onCardLoadingStateChange(CARD_LOADING_STATE.LOADED);
+            //         this.sdkApi.emitEvent("showSlide", { cardId: this.activeSlide.slide.cardId, index });
+            //     } else {
+            //         this.sdkApi.onCardLoadingStateChange(CARD_LOADING_STATE.LOADING, reason);
+            //     }
+            // }
+            //
+            // onShowActiveCardResolver({ cardId, slideIndex });
+        };
+        const onSlideLeft = (slide, index) => {
+            this.sdkApi.emitEvent("slideLeft", { cardId: this.slides[index]?.slide?.slide.cardId ?? 0, index });
+        };
+        const slideRender = ({ content, canMediaMount }, index, onBeforeShowSlideDuringMounting) => {
+            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 (this.config.nonce != null) {
+                style.nonce = this.config.nonce;
+            }
+            const paddingTop = `${String(100 / this.config.slideRatio)}%`;
+            //         .narrative-slide-box {
+            //             padding: <?= $slideRatioPadding ?> 0 0 0;
+            //         }
+            // style.sheet?.insertRule(`.narrative-slide-box {padding: ${paddingTop} 0 0 0;`);
+            slideBoxRendered.style.padding = `${paddingTop} 0 0 0`;
+            slideBoxPrerender.style.padding = `${paddingTop} 0 0 0`;
+            // slideBoxPrerender.innerHTML = card;
+            // extract and mount solid or gradient bg color (w/o bg image)
+            onBeforeShowSlideDuringMounting.then(callback => {
+                callback(canMediaMount.then(() => {
+                    // mount slide media content (after cache is ready event)
+                    slideBoxPrerender.innerHTML = content;
+                    // create slideApi
+                    // call init, init should return moveToIndex
+                    return onBeforeShowSlide(slideWrapper, index);
+                }));
+            });
+            slideOffset.appendChild(slideBoxPrerender);
+            slideOffset.appendChild(slideBoxRendered);
+            slideWrapper.appendChild(slideOffset);
+            slideWrapper.appendChild(style);
+            return slideWrapper;
+        };
+        new Promise(resolve => {
+        });
+        // onContentMounted
+        const onSlideMounted = async (slideElement, index) => {
+            // if (index === 0) {
+            //     this.activeSlide = slideApi;
+            // }
+            //
+            // const { result, cardId, slideIndex, reason } = await slideApi.showSlide();
+            //
+            //
+            // if (index === 0) {
+            //     if (result) {
+            //         this.sdkApi.onCardLoadingStateChange(CARD_LOADING_STATE.LOADED);
+            //         this.sdkApi.emitEvent("showSlide", { cardId: this.activeSlide.slide.cardId, index });
+            //     } else {
+            //         this.sdkApi.onCardLoadingStateChange(CARD_LOADING_STATE.LOADING, reason);
+            //     }
+            // }
+            //
+            // onShowActiveCardResolver({ cardId, slideIndex });
+        };
+        if (this.slider != null) {
+            this.slider.destroy();
+        }
+        this.slider = new Slider({
+            root: this.config.root,
+            slides: this.slides.map(({ content, resourcesReadyPromise }) => ({
+                content,
+                canMediaMount: resourcesReadyPromise,
+            })),
+            nonce: this.config.nonce,
+            navbarAppearance: cardAppearance.navbar ?? {},
+            slideRender,
+            onSlideMounted,
+            onBeforeShowSlide,
+            onBeforeLoadSlide,
+            onSlideLoadingError,
+            onShowSlide,
+            onSlideLeft,
+            getLayoutDirection: () => this.layoutDirection,
+            onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
+            onSlideStart: () => {
+                // return Promise.resolve({currentTime: 0});
+                this.cardLoadingStateController.onSetLoadEndState();
+                return this.activeSlide.slideStart({ muted: true });
+            },
+            onSlideStop: () => this.activeSlide.slideStop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ }),
+            onSlideDataWaiting: () => this.cardLoadingStateController.onSetLoadStartState(),
+            onSlideDataResume: () => this.cardLoadingStateController.onSetLoadEndState(),
+            onSlideDataError: () => this.cardLoadingStateController.onSetLoadEndState(),
+        });
+        await this.slider.showByIndex(index);
+        // return await onShowActiveCard;
+    }
+    handleBackpress() {
+        this.activeSlide.handleBackpress();
+    }
+    get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    getLocalData() {
+        return this.sdkApi.getCardLocalData();
+    }
+    async slideStart(config) {
+        return this.activeSlide.slideStart(config);
+    }
+    async slideRestart(config) {
+        return this.activeSlide.slideRestart(config);
+    }
+    async slideUserPause() {
+        return this.activeSlide.slideUserPause();
+    }
+    async slideUserResume() {
+        return this.activeSlide.slideUserResume();
+    }
+    /**
+     * Call on app gone background
+     */
+    async slideAppPause() {
+        return this.activeSlide.slideAppPause();
+    }
+    /**
+     * Call on app gone foreground after a background
+     */
+    async slideAppResume() {
+        return this.activeSlide.slideAppResume();
+    }
+    async slideStop(options) {
+        return this.activeSlide.slideStop(options);
+    }
+    slideTimerEnd() {
+        this.activeSlide.slideTimerEnd();
+    }
+    enableAudio() {
+        this.activeSlide.enableAudio();
+    }
+    disableAudio() {
+        this.activeSlide.disableAudio();
+    }
+    get isStopped() {
+        return this.activeSlide.isStopped;
+    }
+    afterStartInitQueuePush(cb) {
+        return this.activeSlide.afterStartInitQueuePush(cb);
+    }
+    afterAppResumeQueuePush(cb) {
+        return this.activeSlide.afterAppResumeQueuePush(cb);
+    }
+    get activeLayer() {
+        return this.activeSlide.slide.activeLayer;
+    }
+    get slide() {
+        return this.activeSlide.slide;
+    }
+    showLayer(index) {
+        this.activeSlide.showLayer(index);
+    }
+    slideClickHandler(targetElement, navigationDirection) {
+        const result = this.activeSlide.slideClickHandler(targetElement, navigationDirection);
+        // todo make via strategy pattern, singleSlide and multiSlide impl
+        if (this.slidesMode === 1 /* SLIDES_MODE.MULTIPLE */ && result.canClickNext) {
+            result.canClickNext = false; // handle nav click via CardsSlider, not via SDK
+            const currentIndex = this.activeSlide.index;
+            /**
+             * business logic - avoid action on side slides click
+             */
+            if (currentIndex === 0 && navigationDirection === "backward") {
+                return result;
+            }
+            if (currentIndex === this.slides.length - 1 && navigationDirection === "forward") {
+                return result;
+            }
+            let index = navigationDirection === "forward" ? currentIndex + 1 : currentIndex - 1;
+            if (index >= this.slides.length) {
+                index = 0;
+            }
+            else if (index < 0) {
+                index = this.slides.length - 1;
+            }
+            this.slider.showByIndex(index).then(index => {
+                if (currentIndex === index)
+                    return;
+                this.activeSlide = this.slides[index].slide;
+            });
+        }
+        return result;
+    }
+    slideSwipeUpHandler() {
+        return this.activeSlide.slideSwipeUpHandler();
+    }
+    setTextInputResult(id, text) {
+        this.activeSlide.setTextInputResult(id, text);
+    }
+    setShareComplete(id, isSuccess) {
+        this.activeSlide.setShareComplete(id, isSuccess);
+    }
+    setWidgetGoodsComplete(elementId) {
+        this.activeSlide.setWidgetGoodsComplete(elementId);
+    }
+    _sdkClientVariables = {};
+    getSdkClientVariables() {
+        return this._sdkClientVariables;
+    }
+    setSdkClientVariables(variables) {
+        this._sdkClientVariables = variables;
+    }
+    setSlideInCacheStatus(index, status) {
+        if (this.slides[index] != null && this.slides[index].resourcesReadyPromisesResolver != null) {
+            if (status === 1 /* SLIDE_IN_CACHE_STATUS.SUCCESS */) {
+                this.slides[index].resourcesReadyPromisesResolver.resolve();
+            }
+            else {
+                this.slides[index].resourcesReadyPromisesResolver.reject();
+            }
+        }
+        else {
+            // for call setSlideInCacheStatus before showSlides
+            this.slides[index] = {
+                content: "",
+                resourcesReadyPromise: Promise.resolve(),
+            };
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+            sdkApi: SDKApi;
+            slideWrapper: HTMLElement;
+            viewport: Window;
+            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
+            slideRatio: number;
+            isFullscreen: boolean;
+            slideLoadedCb?: (data: { cardId: number; slideIndex: number; result: boolean; reason?: string }) => void;
+            getViewportWidth: () => number;
+            getViewportHeight: () => number;
+            overlappingActionBarHeight?: number;
+            separateUserAndAppPause: boolean;
+            root: HTMLElement;
+            nonce?: string;
+            useSdkCacheForMultislideMode: boolean;
+        }`]; }
+}
+
 const slideApiPeerDeps = {};
 const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
     const slideWrapper = document.createElement("div");
@@ -5094,7 +6887,7 @@ const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
     slideWrapper.appendChild(style);
     return slideWrapper;
 };
-class SlideApi extends SlideApi$1 {
+class SlideApi extends CardApi {
     root;
     slideWrapper;
     constructor(_sdkInterface, config) {
@@ -5112,6 +6905,9 @@ class SlideApi extends SlideApi$1 {
             getViewportHeight: () => slideWrapper.clientHeight,
             overlappingActionBarHeight: config.overlappingActionBarHeight,
             separateUserAndAppPause: true,
+            root: config.root,
+            nonce: config.nonce,
+            useSdkCacheForMultislideMode: config.useSdkCacheForMultislideMode,
         });
         this.root = config.root;
         this.slideWrapper = slideWrapper;
@@ -5132,6 +6928,7 @@ class SlideApi extends SlideApi$1 {
             userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
             VODPlayer?: typeof VODPlayer;
             overlappingActionBarHeight?: number;
+            useSdkCacheForMultislideMode: boolean;
         }`]; }
 }
 
@@ -14561,7 +16358,7 @@ class WidgetBase {
                 this.submitButtonView = this.submitButtonAnimatedView.querySelector(".submit-button-view");
             }
         }
-        this.savedData = this.widgetDeps.sdkApi.getCardServerData(this.cardId);
+        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData(this.cardId);
         this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
         this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
         ++WidgetBase.widgetIndex;
@@ -14583,7 +16380,7 @@ class WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.widgetDeps.sdkApi.getCardServerData(this.cardId);
+        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData(this.cardId);
         this.localData = extend({}, this.savedData ?? {}, localData);
     }
     onStart() {
@@ -14633,13 +16430,13 @@ class WidgetBase {
     static get widgetsService() {
         return container.get({ identifier: "WidgetsService" });
     }
-    static getLocalData(sdkApi) {
-        return sdkApi.getCardLocalData();
+    static getLocalData(slideApiDeps) {
+        return slideApiDeps.getCardLocalData();
     }
     getLocalData() {
-        return this.constructor.getLocalData(this.widgetDeps.sdkApi);
+        return this.constructor.getLocalData(this.widgetDeps.slideApiDeps);
     }
-    static setLocalData(sdkApi, keyValue, sendToServer, syncWithRuntimeLocalData) {
+    static setLocalData(slideApiDeps, keyValue, sendToServer, syncWithRuntimeLocalData) {
         // push json object as string
         if (sendToServer === undefined) {
             sendToServer = true;
@@ -14654,20 +16451,20 @@ class WidgetBase {
             syncWithRuntimeLocalData = Boolean(syncWithRuntimeLocalData);
         }
         if (syncWithRuntimeLocalData) {
-            this.getLocalData(sdkApi).then(localData => {
+            this.getLocalData(slideApiDeps).then(localData => {
                 // 1 - old values, 2 - new values
                 keyValue = extend({}, localData, keyValue);
                 // todo make async via promise or async
-                sdkApi.setCardLocalData(keyValue, sendToServer);
+                slideApiDeps.setCardLocalData(keyValue, sendToServer);
             });
         }
         else {
             // todo make async via promise or async
-            sdkApi.setCardLocalData(keyValue, sendToServer);
+            slideApiDeps.setCardLocalData(keyValue, sendToServer);
         }
     }
     setLocalData(keyValue, sendToServer, syncWithRuntimeLocalData) {
-        return this.constructor.setLocalData(this.widgetDeps.sdkApi, keyValue, sendToServer, syncWithRuntimeLocalData);
+        return this.constructor.setLocalData(this.widgetDeps.slideApiDeps, keyValue, sendToServer, syncWithRuntimeLocalData);
     }
     get statisticEventBaseFieldsShortForm() {
         return WidgetBase.getStatisticEventBaseFieldsShortForm(this.cardId, this.cardType, this.slideIndex);
@@ -14698,11 +16495,11 @@ class WidgetBase {
         }
         return data;
     }
-    static sendStatisticEventToApp(sdkApi, name, data, devPayload, options) {
-        sendStatisticEventToApp(sdkApi, name, data, devPayload, options);
+    static sendStatisticEventToApp(slideApiDeps, name, data, devPayload, options) {
+        sendStatisticEventToApp(slideApiDeps, name, data, devPayload, options);
     }
     sendStatisticEventToApp(name, data, devPayload, options) {
-        this.constructor.sendStatisticEventToApp(this.widgetDeps.sdkApi, name, data, devPayload, options);
+        this.constructor.sendStatisticEventToApp(this.widgetDeps.slideApiDeps, name, data, devPayload, options);
     }
     onWidgetComplete() {
         this._widgetCallbacks.onWidgetComplete(this.cardId, this.slideIndex);
@@ -14714,14 +16511,14 @@ class WidgetBase {
         this._widgetCallbacks.onWidgetRequireResumeUI(this.cardId, this.slideIndex);
     }
     _showLayer(layers, selectIndex, withStatEvent = false) {
-        if (this.widgetDeps.sdkApi.isExistsShowLayer()) {
-            this.widgetDeps.sdkApi.showLayer(selectIndex);
+        if (this.widgetDeps.slideApiDeps.isExistsShowLayer()) {
+            this.widgetDeps.slideApiDeps.showLayer(selectIndex);
         }
         else {
             forEach(layers, (layer, index) => {
                 if (index === selectIndex) {
                     layer.classList.remove("hidden");
-                    this.widgetDeps.sdkApi.cardAnimation?.start(layer);
+                    this.widgetDeps.slideApiDeps.cardAnimation?.start(layer);
                 }
                 else {
                     layer.classList.add("hidden");
@@ -14871,7 +16668,7 @@ class WidgetBarcode extends WidgetBase {
         }
         catch (e) {
             if (this.msgBarcodeRenderError) {
-                this.widgetDeps.sdkApi.showToast(this.msgBarcodeRenderError);
+                this.widgetDeps.slideApiDeps.showToast(this.msgBarcodeRenderError);
             }
             console.error(e);
         }
@@ -14934,7 +16731,7 @@ class WidgetBarcode extends WidgetBase {
             };
             const profileKey = "fetch-promo-code";
             Promise.all([
-                this.widgetDeps.sdkApi.sendApiRequest(path, "POST", null, headers, null, profileKey),
+                this.widgetDeps.slideApiDeps.sendApiRequest(path, "POST", null, headers, null, profileKey),
                 new Promise(function (t, e) {
                     return setTimeout(t, 300);
                 }),
@@ -14962,14 +16759,14 @@ class WidgetBarcode extends WidgetBase {
                         this.setLocalData(this.localData, true);
                     }
                     else {
-                        this.msgNoMoreCodes && this.widgetDeps.sdkApi.showToast(this.msgNoMoreCodes);
+                        this.msgNoMoreCodes && this.widgetDeps.slideApiDeps.showToast(this.msgNoMoreCodes);
                     }
                 }
                 else if (status === 12163 || status === 12002) {
-                    this.msgNetworkError && this.widgetDeps.sdkApi.showToast(this.msgNetworkError);
+                    this.msgNetworkError && this.widgetDeps.slideApiDeps.showToast(this.msgNetworkError);
                 }
                 else {
-                    this.msgServiceError && this.widgetDeps.sdkApi.showToast(this.msgServiceError);
+                    this.msgServiceError && this.widgetDeps.slideApiDeps.showToast(this.msgServiceError);
                 }
                 if (!success) {
                     this.state = 3;
@@ -15015,13 +16812,13 @@ class WidgetBarcode extends WidgetBase {
             }
         });
         if (this.copiedText) {
-            this.widgetDeps.sdkApi.showToast(this.copiedText);
+            this.widgetDeps.slideApiDeps.showToast(this.copiedText);
         }
     }
     copyToClipboard(element) {
         this._select();
         const textValue = this.clipboardTarget ?? "";
-        this.widgetDeps.sdkApi.writeToClipboard({ type: "text", textValue });
+        this.widgetDeps.slideApiDeps.writeToClipboard({ type: "text", textValue });
         this.completeWidget();
         this._statEventCopyClick(textValue);
     }
@@ -15193,7 +16990,7 @@ class WidgetCopy extends WidgetBase {
             };
             const profileKey = "fetch-promo-code";
             Promise.all([
-                this.widgetDeps.sdkApi.sendApiRequest(path, "POST", null, headers, null, profileKey),
+                this.widgetDeps.slideApiDeps.sendApiRequest(path, "POST", null, headers, null, profileKey),
                 new Promise(function (t, e) {
                     return setTimeout(t, 300);
                 }),
@@ -15220,14 +17017,14 @@ class WidgetCopy extends WidgetBase {
                         this.setLocalData(this.localData, true);
                     }
                     else {
-                        this.msgNoMoreCodes && this.widgetDeps.sdkApi.showToast(this.msgNoMoreCodes);
+                        this.msgNoMoreCodes && this.widgetDeps.slideApiDeps.showToast(this.msgNoMoreCodes);
                     }
                 }
                 else if (status === 12163 || status === 12002) {
-                    this.msgNetworkError && this.widgetDeps.sdkApi.showToast(this.msgNetworkError);
+                    this.msgNetworkError && this.widgetDeps.slideApiDeps.showToast(this.msgNetworkError);
                 }
                 else {
-                    this.msgServiceError && this.widgetDeps.sdkApi.showToast(this.msgServiceError);
+                    this.msgServiceError && this.widgetDeps.slideApiDeps.showToast(this.msgServiceError);
                 }
                 if (!success) {
                     this.state = 3;
@@ -15279,7 +17076,7 @@ class WidgetCopy extends WidgetBase {
     copyToClipboard(element) {
         this._select();
         const textValue = this.clipboardTarget ?? "";
-        this.widgetDeps.sdkApi.writeToClipboard({ type: "text", textValue });
+        this.widgetDeps.slideApiDeps.writeToClipboard({ type: "text", textValue });
         this.completeWidget();
         this._statEventCopyClick(textValue);
     }
@@ -15421,12 +17218,12 @@ class WidgetDataInput extends WidgetBase {
             return true;
         }
         this.elementRect = this.element.getBoundingClientRect();
-        if (this.widgetDeps.sdkApi.isAndroid || this.widgetDeps.sdkApi.isWeb) {
+        if (this.widgetDeps.slideApiDeps.isAndroid || this.widgetDeps.slideApiDeps.isWeb) {
             this.slide.classList.add("blured");
         }
         this.slide.classList.add("data-input-editing");
         const dataString = this.element.dataset["clientdialogwidgetconfig"];
-        if (this.widgetDeps.sdkApi.isExistsShowCardTextInput && dataString) {
+        if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
             const data = JSON.parse(dataString);
             data.size = getElementBounding(this.env, this.elementRect);
             if (!this.disableTimer) {
@@ -15447,7 +17244,7 @@ class WidgetDataInput extends WidgetBase {
             catch (e) {
                 console.error(e);
             }
-            this.widgetDeps.sdkApi.showCardTextInput(this.id, data);
+            this.widgetDeps.slideApiDeps.showCardTextInput(this.id, data);
             this._statEventFocusIn();
         }
         return false;
@@ -15746,7 +17543,7 @@ class WidgetDateCountdown extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
-const displaySlide = function (slides, localData, sdkApi) {
+const displaySlide = function (slides, localData, slideApiDeps) {
     const multiSlideItem = slides[0];
     let cardId = undefined;
     let cardType = 1 /* CARD_TYPE.STORY */;
@@ -15811,7 +17608,7 @@ const displaySlide = function (slides, localData, sdkApi) {
         if (slides.length > 0) {
             var slide = slides[0];
             slide.classList.remove("hidden");
-            sdkApi.cardAnimation?.start(slide);
+            slideApiDeps.cardAnimation?.start(slide);
             return;
         }
         score = 0;
@@ -15840,19 +17637,19 @@ const displaySlide = function (slides, localData, sdkApi) {
             if (index === selectedIndex) {
                 slide.classList.remove("hidden");
                 undefinedResult = false;
-                sdkApi.cardAnimation?.start(slide);
-                _sendStatEvent(sdkApi, cardId, cardType, slideIndex, selectedIndex);
+                slideApiDeps.cardAnimation?.start(slide);
+                _sendStatEvent(slideApiDeps, cardId, cardType, slideIndex, selectedIndex);
             }
         });
     }
     if (undefinedResult) {
         console.warn("undefinedResult layer index");
-        sdkApi.showLayer(0);
+        slideApiDeps.showLayer(0);
     }
 };
-const _sendStatEvent = function (sdkApi, cardId, cardType, slideIndex, layerIndex) {
+const _sendStatEvent = function (slideApiDeps, cardId, cardType, slideIndex, layerIndex) {
     try {
-        WidgetBase.sendStatisticEventToApp(sdkApi, "layout-show", {
+        WidgetBase.sendStatisticEventToApp(slideApiDeps, "layout-show", {
             ...WidgetBase.getStatisticEventBaseFieldsShortForm(cardId, cardType, slideIndex),
             li: layerIndex,
         }, {
@@ -15867,7 +17664,7 @@ const _sendStatEvent = function (sdkApi, cardId, cardType, slideIndex, layerInde
 class WidgetMultiSlide {
     static api = {
         init: function (slides, localData, widgetDeps) {
-            displaySlide(slides, localData, widgetDeps.sdkApi);
+            displaySlide(slides, localData, widgetDeps.slideApiDeps);
         },
     };
 }
@@ -16035,13 +17832,13 @@ class WidgetPoll extends WidgetBase {
         if (index !== -1) {
             this.elementRect = this.element.getBoundingClientRect();
             if (this.getUseResponseOnFirstButton && index === 0) {
-                if (this.widgetDeps.sdkApi.isAndroid) {
+                if (this.widgetDeps.slideApiDeps.isAndroid) {
                     this.slide.classList.add("blured");
                 }
                 this.slide.classList.add("data-input-editing");
                 const dataString = this.element.dataset["clientdialogwidgetconfig"];
                 this.selectedVariant = index;
-                if (this.widgetDeps.sdkApi.isExistsShowCardTextInput && dataString) {
+                if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
                     const data = JSON.parse(dataString);
                     data.size = getElementBounding(this.env, this.elementRect);
                     if (!this.disableTimer) {
@@ -16063,19 +17860,19 @@ class WidgetPoll extends WidgetBase {
                     catch (e) {
                         console.error(e);
                     }
-                    this.widgetDeps.sdkApi.showCardTextInput(`${this.id}_first`, data);
+                    this.widgetDeps.slideApiDeps.showCardTextInput(`${this.id}_first`, data);
                 }
                 this._statEventPollAnswer();
                 return false;
             }
             else if (this.getUseResponseOnSecondButton && index === 1) {
-                if (this.widgetDeps.sdkApi.isAndroid) {
+                if (this.widgetDeps.slideApiDeps.isAndroid) {
                     this.slide.classList.add("blured");
                 }
                 this.slide.classList.add("data-input-editing");
                 const dataString = this.element.dataset["clientdialogwidgetconfig"];
                 this.selectedVariant = index;
-                if (this.widgetDeps.sdkApi.isExistsShowCardTextInput && dataString) {
+                if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
                     const data = JSON.parse(dataString);
                     data.size = getElementBounding(this.env, this.elementRect);
                     if (!this.disableTimer) {
@@ -16096,7 +17893,7 @@ class WidgetPoll extends WidgetBase {
                     catch (e) {
                         console.error(e);
                     }
-                    this.widgetDeps.sdkApi.showCardTextInput(`${this.id}_second`, data);
+                    this.widgetDeps.slideApiDeps.showCardTextInput(`${this.id}_second`, data);
                 }
                 this._statEventPollAnswer();
                 return false;
@@ -16139,7 +17936,7 @@ class WidgetPoll extends WidgetBase {
     displayPercents(selectedVariantIndex, filled = false) {
         let pollAllocation = [0, 0];
         let pollAllocationTs = undefined;
-        const sharedData = this.widgetDeps.sdkApi.getWidgetsSharedData(this.cardId, "poll" /* Widgets.Poll */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "poll" /* Widgets.Poll */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             pollAllocation = sharedData[this.elementId];
             if (isObject$1(sharedData[this.elementId])) {
@@ -17320,7 +19117,7 @@ class WidgetProducts extends WidgetBase {
             };
             const profileKey = "fetch-products";
             try {
-                const response = await this.widgetDeps.sdkApi.sendApiRequest(path, "GET", null, headers, null, profileKey);
+                const response = await this.widgetDeps.slideApiDeps.sendApiRequest(path, "GET", null, headers, null, profileKey);
                 // console.log({response});
                 const status = response.status;
                 if (status === 200 || status === 201) {
@@ -17446,15 +19243,15 @@ class WidgetProducts extends WidgetBase {
             this.isOpen = true;
             // prevent next slide navigation gesture
             this.isClickCapturedByWidget = true;
-            this.widgetDeps.sdkApi.disableHorizontalSwipeGesture();
-            this.widgetDeps.sdkApi.disableVerticalSwipeGesture();
-            this.widgetDeps.sdkApi.disableBackpress();
+            this.widgetDeps.slideApiDeps.disableHorizontalSwipeGesture();
+            this.widgetDeps.slideApiDeps.disableVerticalSwipeGesture();
+            this.widgetDeps.slideApiDeps.disableBackpress();
             this._statEventWidgetOpen(this.currentModels);
             this.initSwipeGestureDetector();
         }
         else {
             if (result.message) {
-                this.widgetDeps.sdkApi.showToast(result.message);
+                this.widgetDeps.slideApiDeps.showToast(result.message);
             }
         }
         this.element.classList.remove("loader");
@@ -17466,13 +19263,13 @@ class WidgetProducts extends WidgetBase {
         this.productsView?.classList.add("ias-products-container-view--hidden");
         this.element.classList.remove("hidden");
         this.isClickCapturedByWidget = false;
-        this.widgetDeps.sdkApi.enableHorizontalSwipeGesture();
+        this.widgetDeps.slideApiDeps.enableHorizontalSwipeGesture();
         if (this.swipeGestureDetector != null) {
             this.swipeGestureDetector.destroy();
             this.swipeGestureDetector = null;
         }
-        this.widgetDeps.sdkApi.enableVerticalSwipeGesture();
-        this.widgetDeps.sdkApi.enableBackpress();
+        this.widgetDeps.slideApiDeps.enableVerticalSwipeGesture();
+        this.widgetDeps.slideApiDeps.enableBackpress();
         const onClosed = () => {
             this.productsView?.removeEventListener("animationend", onClosed);
             this.productsView?.parentElement?.removeChild(this.productsView);
@@ -17532,7 +19329,7 @@ class WidgetProducts extends WidgetBase {
             e.preventDefault();
             this._statEventWidgetCardClick(offer);
             if (offer.url) {
-                this.widgetDeps.sdkApi.openUrl({ type: "link", link: { type: "url", target: offer.url } });
+                this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: offer.url } });
             }
         };
         card.appendChild(figure);
@@ -17763,10 +19560,10 @@ class WidgetQuest extends WidgetBase {
         super.onRefreshUserData(localData);
     }
     setCardSessionValue(name, value) {
-        this.widgetDeps.sdkApi.setCardSessionValue(this.element, name, value);
+        this.widgetDeps.slideApiDeps.setCardSessionValue(this.element, name, value);
     }
     getCardSessionValue(name) {
-        return this.widgetDeps.sdkApi.getCardSessionValue(this.element, name);
+        return this.widgetDeps.slideApiDeps.getCardSessionValue(this.element, name);
     }
     init() {
         if (this.localData) {
@@ -17785,8 +19582,8 @@ class WidgetQuest extends WidgetBase {
                         // global flag - был сделан переход на нужный слайд, больше не нужно повторять за эту сессию
                         // perform showStorySlide with lastSlideIdx only on story open first time (not on second slide, etc)
                         this.setCardSessionValue("__storyQuestSlideChanged", "1");
-                        if (this.widgetDeps.sdkApi.isExistsShowCardSlide) {
-                            this.widgetDeps.sdkApi.showCardSlide(lastSlideIdx);
+                        if (this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
+                            this.widgetDeps.slideApiDeps.showCardSlide(lastSlideIdx);
                             return false;
                         }
                     }
@@ -17797,8 +19594,8 @@ class WidgetQuest extends WidgetBase {
                 // если этого слайда нет в роутинге (сработал переход по таймеру в app)
                 const routes = this._getRoutes();
                 if (routes[0].indexOf(this.slideIndex) === -1 && this.finalSlide) {
-                    if (this.widgetDeps.sdkApi.isExistsShowNextCard) {
-                        this.widgetDeps.sdkApi.cardShowNext();
+                    if (this.widgetDeps.slideApiDeps.isExistsShowNextCard) {
+                        this.widgetDeps.slideApiDeps.cardShowNext();
                         return false;
                     }
                 }
@@ -17844,10 +19641,10 @@ class WidgetQuest extends WidgetBase {
             this._selectAnswer(index, slideIndex);
             this.setLocalData(this.localData, true);
             this.env.setTimeout(() => {
-                if (slideIndex >= 0 && slideIndex < this.slideCount && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
+                if (slideIndex >= 0 && slideIndex < this.slideCount && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
                     // global flag - был сделан переход на нужный слайд, больше не нужно повторять за эту сессию
                     this.setCardSessionValue("__storyQuestSlideChanged", "1");
-                    this.widgetDeps.sdkApi.showCardSlide(slideIndex);
+                    this.widgetDeps.slideApiDeps.showCardSlide(slideIndex);
                 }
             }, 100);
         }
@@ -17919,12 +19716,12 @@ class WidgetQuest extends WidgetBase {
                 else {
                     // by routing - move back
                     moveTo = this._routeMvPtrBack();
-                    if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
-                        this.widgetDeps.sdkApi.showCardSlide(moveTo);
+                    if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
+                        this.widgetDeps.slideApiDeps.showCardSlide(moveTo);
                     }
-                    if (moveTo === false && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
+                    if (moveTo === false && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
                         // allow move to start - for broken route history
-                        this.widgetDeps.sdkApi.showCardSlide(0);
+                        this.widgetDeps.slideApiDeps.showCardSlide(0);
                     }
                 }
                 return result;
@@ -17940,8 +19737,8 @@ class WidgetQuest extends WidgetBase {
                 if (directionForward) {
                     if (this.navigationNextSlide === -1) {
                         // this is the final slide - exit from this quest
-                        if (this.widgetDeps.sdkApi.isExistsShowNextCard) {
-                            this.widgetDeps.sdkApi.cardShowNext();
+                        if (this.widgetDeps.slideApiDeps.isExistsShowNextCard) {
+                            this.widgetDeps.slideApiDeps.cardShowNext();
                         }
                         result.continueDefaultNavigation = false;
                         return result;
@@ -17950,11 +19747,11 @@ class WidgetQuest extends WidgetBase {
                     if (nextSlideIndex < this.slideCount) {
                         this._addNewRouteHistory(nextSlideIndex);
                         this.setLocalData(this.localData, true);
-                        this.widgetDeps.sdkApi.showCardSlide(nextSlideIndex);
+                        this.widgetDeps.slideApiDeps.showCardSlide(nextSlideIndex);
                     }
                     else {
-                        if (this.widgetDeps.sdkApi.isExistsShowNextCard) {
-                            this.widgetDeps.sdkApi.cardShowNext();
+                        if (this.widgetDeps.slideApiDeps.isExistsShowNextCard) {
+                            this.widgetDeps.slideApiDeps.cardShowNext();
                         }
                     }
                 }
@@ -17967,12 +19764,12 @@ class WidgetQuest extends WidgetBase {
                     else {
                         // by routing - move back
                         moveTo = this._routeMvPtrBack();
-                        if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
-                            this.widgetDeps.sdkApi.showCardSlide(moveTo);
+                        if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
+                            this.widgetDeps.slideApiDeps.showCardSlide(moveTo);
                         }
-                        if (moveTo === false && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
+                        if (moveTo === false && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
                             // allow move to start - for broken route history
-                            this.widgetDeps.sdkApi.showCardSlide(0);
+                            this.widgetDeps.slideApiDeps.showCardSlide(0);
                         }
                     }
                 }
@@ -17987,11 +19784,11 @@ class WidgetQuest extends WidgetBase {
                         if (nextSlideIndex < this.slideCount) {
                             this._addNewRouteHistory(nextSlideIndex);
                             this.setLocalData(this.localData, true);
-                            this.widgetDeps.sdkApi.showCardSlide(nextSlideIndex);
+                            this.widgetDeps.slideApiDeps.showCardSlide(nextSlideIndex);
                         }
                         else {
-                            if (this.widgetDeps.sdkApi.isExistsShowNextCard) {
-                                this.widgetDeps.sdkApi.cardShowNext();
+                            if (this.widgetDeps.slideApiDeps.isExistsShowNextCard) {
+                                this.widgetDeps.slideApiDeps.cardShowNext();
                             }
                         }
                     }
@@ -18004,12 +19801,12 @@ class WidgetQuest extends WidgetBase {
                         else {
                             // by routing - move back
                             moveTo = this._routeMvPtrBack();
-                            if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
-                                this.widgetDeps.sdkApi.showCardSlide(moveTo);
+                            if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
+                                this.widgetDeps.slideApiDeps.showCardSlide(moveTo);
                             }
-                            if (moveTo === false && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
+                            if (moveTo === false && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
                                 // allow move to start - for broken route history
-                                this.widgetDeps.sdkApi.showCardSlide(0);
+                                this.widgetDeps.slideApiDeps.showCardSlide(0);
                             }
                         }
                     }
@@ -18024,20 +19821,20 @@ class WidgetQuest extends WidgetBase {
                         //   setLocalData(this.localData, true);
                         //   window._showNarrativeSlide(nextSlideIndex);
                         // } else {
-                        if (this.widgetDeps.sdkApi.isExistsShowNextCard) {
-                            this.widgetDeps.sdkApi.cardShowNext();
+                        if (this.widgetDeps.slideApiDeps.isExistsShowNextCard) {
+                            this.widgetDeps.slideApiDeps.cardShowNext();
                         }
                         // }
                     }
                     else {
                         // by routing - move back
                         moveTo = this._routeMvPtrBack();
-                        if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
-                            this.widgetDeps.sdkApi.showCardSlide(moveTo);
+                        if (moveTo !== false && moveTo >= 0 && moveTo < event.slideCount && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
+                            this.widgetDeps.slideApiDeps.showCardSlide(moveTo);
                         }
-                        if (moveTo === false && this.widgetDeps.sdkApi.isExistsShowCardSlide) {
+                        if (moveTo === false && this.widgetDeps.slideApiDeps.isExistsShowCardSlide) {
                             // allow move to start - for broken route history
-                            this.widgetDeps.sdkApi.showCardSlide(0);
+                            this.widgetDeps.slideApiDeps.showCardSlide(0);
                         }
                     }
                 }
@@ -18827,7 +20624,7 @@ class WidgetRangeSlider extends WidgetBase {
             total_user: 0,
         };
         let answerAllocationTs = undefined;
-        const sharedData = this.widgetDeps.sdkApi.getWidgetsSharedData(this.cardId, "rangeSlider" /* Widgets.RangeSlider */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "rangeSlider" /* Widgets.RangeSlider */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             answerAllocation = sharedData[this.elementId];
             answerAllocationTs = sharedData.ts;
@@ -18927,7 +20724,7 @@ class WidgetRangeSlider extends WidgetBase {
         }
         e.preventDefault();
         this.isClickCapturedBySlider = true;
-        this.widgetDeps.sdkApi.disableHorizontalSwipeGesture();
+        this.widgetDeps.slideApiDeps.disableHorizontalSwipeGesture();
         if (!this.maxHandlePos) {
             this.update(true, false);
         }
@@ -18957,7 +20754,7 @@ class WidgetRangeSlider extends WidgetBase {
     handleEnd(e) {
         this.env.requestAnimationFrame(() => {
             this.isClickCapturedBySlider = false;
-            this.widgetDeps.sdkApi.enableHorizontalSwipeGesture();
+            this.widgetDeps.slideApiDeps.enableHorizontalSwipeGesture();
         });
         // e.preventDefault();
         this.widgetDeps.slideRoot.removeEventListener("touchmove", this.handleMove);
@@ -19022,7 +20819,7 @@ class WidgetRangeSlider extends WidgetBase {
             if (this.value !== this.prevSnapValue) {
                 this.prevSnapValue = this.value;
                 try {
-                    this.widgetDeps.sdkApi.vibrate(20);
+                    this.widgetDeps.slideApiDeps.vibrate(20);
                 }
                 catch (e) {
                     console.error(e);
@@ -19269,12 +21066,12 @@ class WidgetRate extends WidgetBase {
                 if (this.showDialogOnLowRate) {
                     this.elementRect = this.element.getBoundingClientRect();
                     this._selectStar(this.selectedStar, false);
-                    if (this.widgetDeps.sdkApi.isAndroid) {
+                    if (this.widgetDeps.slideApiDeps.isAndroid) {
                         this.slide.classList.add("blured");
                     }
                     this.slide.classList.add("data-input-editing");
                     const dataString = this.element.dataset["clientdialogwidgetconfig"];
-                    if (this.widgetDeps.sdkApi.isExistsShowCardTextInput && dataString) {
+                    if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
                         const data = JSON.parse(dataString);
                         data.size = getElementBounding(this.env, this.elementRect);
                         if (!this.disableTimer) {
@@ -19296,7 +21093,7 @@ class WidgetRate extends WidgetBase {
                         catch (e) {
                             console.error(e);
                         }
-                        this.widgetDeps.sdkApi.showCardTextInput(this.id, data);
+                        this.widgetDeps.slideApiDeps.showCardTextInput(this.id, data);
                     }
                 }
                 else {
@@ -19308,17 +21105,17 @@ class WidgetRate extends WidgetBase {
             }
             else if (value + 1 >= this.submitToStoresMin && value + 1 <= this.submitToStoresMax) {
                 let target = null;
-                if (this.widgetDeps.sdkApi.isAndroid) {
+                if (this.widgetDeps.slideApiDeps.isAndroid) {
                     target = getTagData(this.element, "androidLink");
                 }
-                else if (this.widgetDeps.sdkApi.isIOS) {
+                else if (this.widgetDeps.slideApiDeps.isIOS) {
                     target = getTagData(this.element, "appleLink");
                 }
                 this._selectStar(value, true);
                 this.completeWidget();
                 this._statEventRateUsAnswer("");
                 if (this.submitToStores && target) {
-                    this.widgetDeps.sdkApi.openUrl({ type: "link", link: { type: "url", target } });
+                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target } });
                 }
             }
             else {
@@ -19467,12 +21264,12 @@ class WidgetShare extends WidgetBase {
     }
     share() {
         if (!this.btnDisabled) {
-            if (this.widgetDeps.sdkApi.isExistsShare) {
-                if (this.widgetDeps.sdkApi.sdkCanSendShareComplete) {
+            if (this.widgetDeps.slideApiDeps.isExistsShare) {
+                if (this.widgetDeps.slideApiDeps.sdkCanSendShareComplete) {
                     this.btnDisabled = true;
                 }
                 if (this.shareType === "url" || this.shareType === "story") {
-                    this.widgetDeps.sdkApi.share(this.id, {
+                    this.widgetDeps.slideApiDeps.share(this.id, {
                         url: this.shareTarget, // sdk old versions
                         text: this.shareTarget,
                         title: null,
@@ -19480,7 +21277,7 @@ class WidgetShare extends WidgetBase {
                     });
                 }
                 else if (this.shareType === "slide") {
-                    this.widgetDeps.sdkApi.shareSlideScreenshot(this.id, "[data-element-id='" + this.elementId + "']", this.shareTarget ? this.shareTarget : undefined);
+                    this.widgetDeps.slideApiDeps.shareSlideScreenshot(this.id, "[data-element-id='" + this.elementId + "']", this.shareTarget ? this.shareTarget : undefined);
                 }
             }
         }
@@ -20086,9 +21883,9 @@ class WidgetTooltip extends WidgetBase {
     copyToClipboard(element) {
         const textValue = this.template1ClipboardTarget ?? "";
         if (textValue) {
-            this.widgetDeps.sdkApi.writeToClipboard({ type: "text", textValue });
+            this.widgetDeps.slideApiDeps.writeToClipboard({ type: "text", textValue });
             if (this.template1CopiedText) {
-                this.widgetDeps.sdkApi.showToast(this.template1CopiedText);
+                this.widgetDeps.slideApiDeps.showToast(this.template1CopiedText);
             }
         }
         this._statEventWidgetCopyClick(textValue);
@@ -20467,7 +22264,7 @@ class WidgetVote extends WidgetBase {
         // voteAllocation[7]
         let voteAllocation = [];
         let voteAllocationTs = undefined;
-        const sharedData = this.widgetDeps.sdkApi.getWidgetsSharedData(this.cardId, "vote" /* Widgets.Vote */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "vote" /* Widgets.Vote */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             voteAllocation = sharedData[this.elementId];
             if (isObject$1(sharedData[this.elementId])) {