@inappstory/slide-api 0.1.23 → 0.1.25

package/dist/index.cjs

@@ -563,8 +563,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) {
@@ -821,13 +821,18 @@ var getAnimationFunction = function (element) {
     return function () { };
 };
 const animationApi = {
+    init: function (slide, animate = false) {
+        if (supportAnimate && animate)
+            return;
+        addClass(slide, "animation-fallback");
+    },
     start: function (slide, animate = false) {
         if (supportAnimate && animate) {
+            const elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
             // for editor, todo add .reset-animation to narrative-editor-slide && clear that
             if (!hasClass(slide, "narrative-slide")) {
                 addClass(slide, "reset-animation");
             }
-            const elements = toArray(slide.querySelectorAll(".narrative-element-animation"));
             elements.forEach(element => {
                 var width = element.offsetWidth;
                 var height = element.offsetHeight;
@@ -913,7 +918,6 @@ const animationApi = {
             }
         }
         else {
-            addClass(slide, "animation-fallback");
             const animations = [];
             // просто Array
             var elements = slide.querySelectorAll(".narrative-element-animation");
@@ -1171,6 +1175,13 @@ 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`]; }
 }
 
@@ -1197,6 +1208,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);
@@ -1247,6 +1261,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);
@@ -1284,36 +1301,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 {
@@ -1334,6 +1626,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);
@@ -1383,6 +1678,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);
@@ -1437,6 +1735,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);
@@ -1492,6 +1793,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);
@@ -1542,6 +1846,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);
@@ -1601,6 +1908,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);
     }
@@ -1649,6 +1959,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);
@@ -1702,6 +2015,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);
@@ -1755,6 +2071,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);
@@ -1808,6 +2127,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);
@@ -1864,6 +2186,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);
@@ -1911,6 +2236,9 @@ class SwipeUpItems {
         return element instanceof SwipeUpItems;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -1954,6 +2282,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);
@@ -2007,6 +2338,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);
@@ -2054,6 +2388,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);
@@ -2095,6 +2432,9 @@ class Text {
         this._layer = _layer;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2218,6 +2558,9 @@ class Image extends ClickableBase {
         this.mediaElementsLoadingPromises = mediaElements.map(waitForImageHtmlElementLoad);
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2252,6 +2595,9 @@ class SwipeUp {
         return element instanceof SwipeUp;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2278,7 +2624,7 @@ class Video {
     _elementNodeRef;
     _layer;
     _VideoPlayer;
-    _sdkApi;
+    _slideApiDeps;
     static _className = "narrative-element-video";
     static className() {
         return Video._className;
@@ -2288,11 +2634,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;
@@ -2348,6 +2694,9 @@ class Video {
         return element instanceof Video;
     }
     mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
     init(localData) {
         return Promise.resolve(true);
     }
@@ -2367,6 +2716,9 @@ class Video {
         // console.log("onBeforeUnmount")
         return await this._destroyVODPlayer();
     }
+    get durationMs() {
+        return this._video.duration * 1000;
+    }
     _initVOD(vodData) {
         const onWaiting = () => {
             /**
@@ -2392,7 +2744,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);
@@ -2476,13 +2828,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;
         }
@@ -2517,7 +2869,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
@@ -2531,7 +2889,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") {
@@ -2544,13 +2902,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,
                             });
                         });
                     }
@@ -2559,14 +2917,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,
                     });
                 }
             });
@@ -2602,7 +2960,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);
@@ -2610,7 +2968,7 @@ class Video {
                     if (this._video.currentTime < ts) {
                         this._video.currentTime = ts;
                     }
-                    resolve({ currentTime: this._video.currentTime });
+                    resolve({ getVideoCurrentTime: () => this._video.currentTime });
                 });
             }
             else {
@@ -2619,7 +2977,7 @@ class Video {
                     if (this._video.currentTime < ts) {
                         this._video.currentTime = ts;
                     }
-                    resolve({ currentTime: this._video.currentTime });
+                    resolve({ getVideoCurrentTime: () => this._video.currentTime });
                 }, 0);
             }
         });
@@ -2673,7 +3031,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 {
 //
@@ -2767,7 +3125,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();
             }
@@ -2850,7 +3213,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():
@@ -2858,7 +3221,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;
@@ -2916,20 +3279,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" });
     }
@@ -2937,14 +3303,14 @@ class SlideTimeline {
         return SlideTimeline.layoutService;
     }
     get isSDKSupportUpdateTimeline() {
-        if (this.sdkApi.isAndroid) {
+        if (this.slideApiDeps.isAndroid) {
             return Boolean(SlideTimeline.layoutService.env.Android && "updateTimeline" in SlideTimeline.layoutService.env.Android);
         }
-        else if (this.sdkApi.isIOS) {
+        else if (this.slideApiDeps.isIOS) {
             const mh = SlideTimeline.layoutService.env?.webkit?.messageHandlers ?? {};
             return "updateTimeline" in mh;
         }
-        else if (this.sdkApi.isWeb) {
+        else if (this.slideApiDeps.isWeb) {
             return true;
         }
         else {
@@ -2952,7 +3318,7 @@ class SlideTimeline {
         }
     }
     get isSdkSupportTimelineOnBeforeStart() {
-        return this.sdkApi.isSdkSupportTimelineOnBeforeStart();
+        return this.slideApiDeps.isSdkSupportTimelineOnBeforeStart();
     }
     get index() {
         return this.slideIndex;
@@ -2960,6 +3326,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
@@ -2988,13 +3357,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) {
@@ -3007,7 +3378,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);
         }
     }
     /**
@@ -3016,6 +3387,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
@@ -3024,6 +3396,7 @@ class SlideTimeline {
     }
     slideRestarted() {
         // console.trace("slideRestarted");
+        this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.resumedAt = new Date().getTime();
             this.timeSpent = 0;
@@ -3033,11 +3406,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();
@@ -3047,26 +3421,43 @@ 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 */);
         }
@@ -3076,6 +3467,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);
@@ -3095,6 +3487,7 @@ class SlideTimeline {
     }
     onSlideDataWaiting(videoCurrentTime) {
         // console.trace("onSlideDataWaiting");
+        this.onBeforeStateChanged();
         // @ts-ignore
         // window._log(`updateTimeline onSlideDataWaiting ${videoCurrentTime}`, true);
         if (videoCurrentTime != null) {
@@ -3105,10 +3498,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);
         }
@@ -3119,7 +3522,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 {
@@ -3128,8 +3545,7 @@ class Layer {
     _slideReadyPromise;
     _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
-    _showNextSlide;
-    sdkApi;
+    slideApiDeps;
     _slideRoot;
     _getLayoutDirection;
     _slidePauseUI;
@@ -3145,14 +3561,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;
@@ -3165,16 +3580,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);
@@ -3216,16 +3631,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.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() {
@@ -3244,7 +3660,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;
@@ -3397,14 +3816,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();
@@ -3420,7 +3844,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();
         }
@@ -3431,7 +3855,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();
         }
@@ -3443,17 +3867,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();
                 }
@@ -3473,26 +3901,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 });
             }
         });
     }
@@ -3508,7 +3933,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 = {
@@ -3699,8 +4124,7 @@ class Slide {
     _slideReadyPromise;
     _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
-    _showNextSlide;
-    sdkApi;
+    slideApiDeps;
     _slideRoot;
     _getLayoutDirection;
     _slidePauseUI;
@@ -3708,13 +4132,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;
@@ -3724,7 +4147,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;
@@ -3744,7 +4167,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,
@@ -3821,10 +4244,10 @@ 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`]; }
 }
 
-class CardApi {
+let SlideApi$1 = class SlideApi {
     config;
     get layoutDirection() {
         // warning, detection in ctor not working, bcz sdk changes layout later
@@ -3839,10 +4262,10 @@ class CardApi {
     _overlappingActionBarHeight;
     _separateUserAndAppPause;
     _index;
-    sdkApi;
+    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;
@@ -3851,7 +4274,15 @@ class CardApi {
         this._separateUserAndAppPause = config.separateUserAndAppPause;
         this._index = config.index;
     }
-    checkAndInitPreloadedInLayoutSlide(slideLoadedCb) {
+    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
@@ -3866,7 +4297,7 @@ class CardApi {
             });
         }
     }
-    onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen, }) {
+    onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen, slideOffsetMargin }) {
         // todo CSP violation
         this._slideWrapper.style.fontSize = fontSize;
         if (this.slideOffsetElement != null) {
@@ -3879,6 +4310,7 @@ class CardApi {
             else {
                 this.slideOffsetElement.classList.remove("narrative-slide-offset-fullscreen");
             }
+            this.slideOffsetElement.style.margin = slideOffsetMargin;
         }
     }
     get slideWrapperElement() {
@@ -3897,8 +4329,8 @@ class CardApi {
         this._state = 13 /* STATE.DESTROYED */;
     }
     async showSlide(html) {
-        const slideBox = this._slideWrapper.querySelector(`.${CardApi.renderedBoxClassName}`);
-        const slideBoxPrerender = this._slideWrapper.querySelector(`.${CardApi.prerenderBoxClassName}`);
+        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
         const _result = { cardId: this.slide?.cardId ?? 0, slideIndex: this.slide?.slideIndex ?? 0, result: false, reason: "" };
         if (slideBox && slideBoxPrerender) {
             if (this._slideInRender) {
@@ -3918,7 +4350,7 @@ class CardApi {
         }
         else {
             _result.result = false;
-            _result.reason = `Element .${CardApi.renderedBoxClassName} or .${CardApi.prerenderBoxClassName} does not found in DOM`;
+            _result.reason = `Element .${SlideApi.renderedBoxClassName} or .${SlideApi.prerenderBoxClassName} does not found in DOM`;
         }
         _result.cardId = this.slide.cardId;
         _result.slideIndex = this.slide.slideIndex;
@@ -3931,7 +4363,7 @@ class CardApi {
         return container.get({ identifier: "LayoutService" });
     }
     getLocalData() {
-        return this.sdkApi.getCardLocalData();
+        return this.slideApiDeps.getCardLocalData();
     }
     _fontsInit = false;
     _initAndLoadFonts(fonts) {
@@ -4023,9 +4455,9 @@ class CardApi {
         /**
          * For case when SlideApi instance was created before root was attached to DOM
          */
-        this.config.refreshSizes();
-        const slideNodeRef = this._slideWrapper.querySelector(`.${CardApi.prerenderBoxClassName} .narrative-slide`);
-        const slidesNodesRefs = Array.prototype.slice.call(this._slideWrapper.querySelectorAll(`.${CardApi.prerenderBoxClassName} .narrative-slide.narrative-multi-slide`));
+        // 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) {
             slidesNodesRefs.push(slideNodeRef);
         }
@@ -4036,17 +4468,18 @@ class CardApi {
         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.config.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);
             });
@@ -4098,12 +4531,12 @@ class CardApi {
             return;
         }
         return new Promise(resolve => {
-            const slideBox = this._slideWrapper.querySelector(`.${CardApi.renderedBoxClassName}`);
-            const slideBoxPrerender = this._slideWrapper.querySelector(`.${CardApi.prerenderBoxClassName}`);
+            const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+            const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
             if (slideBox && slideBoxPrerender) {
-                slideBoxPrerender.classList.remove(CardApi.prerenderBoxClassName);
-                slideBox.classList.remove(CardApi.renderedBoxClassName);
-                slideBox.classList.add(CardApi.prerenderBoxClassName);
+                slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
+                slideBox.classList.remove(SlideApi.renderedBoxClassName);
+                slideBox.classList.add(SlideApi.prerenderBoxClassName);
                 // pause Video - prevent triggering onDataWaiting from VODPlayer
                 prevSlide?.activeLayer.pause(false, true, false);
                 // 2 RAF - wait for browser render complete (CSS changes, etc.)
@@ -4127,7 +4560,7 @@ class CardApi {
                 else {
                     resolve();
                 }
-                slideBoxPrerender.classList.add(CardApi.renderedBoxClassName);
+                slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
             }
             else {
                 resolve();
@@ -4145,7 +4578,7 @@ class CardApi {
         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();
@@ -4199,7 +4632,7 @@ class CardApi {
             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 {
@@ -4273,10 +4706,10 @@ class CardApi {
         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) {
@@ -4323,7 +4756,7 @@ class CardApi {
         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 {
@@ -4452,7 +4885,7 @@ class CardApi {
             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;
@@ -4476,7 +4909,7 @@ class CardApi {
         }
         if (element) {
             this.layoutService.env.setTimeout(() => {
-                this.sdkApi.showNextSlide(0);
+                this.slideApiDeps.showNextSlide(0);
             });
             result.canClickNext = false;
             return result;
@@ -4504,7 +4937,7 @@ class CardApi {
             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;
@@ -4711,18 +5144,18 @@ class CardApi {
         }
         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 в каждом виджете делать выход через
@@ -4810,44 +5243,44 @@ class CardApi {
             // 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;
                 }
             }
@@ -4855,7 +5288,7 @@ class CardApi {
                 // traditional link, with url
                 statisticWidgetValue = linkTarget;
                 this.layoutService.env.setTimeout(() => {
-                    this.sdkApi.openUrl({
+                    this.slideApiDeps.openUrl({
                         type: isSwipeUpAction ? "swipeUpLink" : "link",
                         link: {
                             type: "url",
@@ -4865,6 +5298,12 @@ class CardApi {
                 });
                 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);
@@ -4874,7 +5313,7 @@ class CardApi {
             else if (linkType === "swipe-up-items") {
                 const target = linkTarget;
                 this.layoutService.env.setTimeout(() => {
-                    this.sdkApi.openUrl({
+                    this.slideApiDeps.openUrl({
                         type: "swipeUpItems",
                         link: {
                             type: "json",
@@ -4910,7 +5349,7 @@ class CardApi {
                         baseFields.message_id = cardId;
                         break;
                 }
-                this.sdkApi.sendStatisticEvent(statisticWidgetEventType, {
+                this.slideApiDeps.sendStatisticEvent(statisticWidgetEventType, {
                     i: cardId,
                     si: slideIndex,
                     wi: elementId,
@@ -4967,7 +5406,7 @@ class CardApi {
         }
     }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
-            sdkApi: SDKApi;
+            slideApiDeps: ISlideApiDeps;
             slideWrapper: HTMLElement;
             viewport: Window;
             userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
@@ -4979,29 +5418,435 @@ class CardApi {
             separateUserAndAppPause: boolean;
             root: HTMLElement;
             nonce?: string;
-            refreshSizes: () => void;
+            // 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() {
+        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);
+    }
+    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 CardsSlider {
+class SlideApiDepsSingleSlideMode {
     sdkApi;
-    constructor(sdkApi, config) {
+    constructor(sdkApi) {
         this.sdkApi = sdkApi;
-        const slideWrapper = this.createSliderElement({ slides: config.cards, nonce: config.nonce, cardRender: config.cardRender });
-        // todo need to clear root node before append slideWrapper?
+    }
+    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);
+    }
+    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(duration = 0) {
+        this._pause = false;
+        if (!this._started) {
+            this.start(duration);
+        }
+        else {
+            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 progress = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
+            if (progress > 100) {
+                progress = 100;
+            }
+            this.updateCb(progress);
+            if (progress < 100) {
+                if (this._pause !== true) {
+                    this.tick();
+                }
+            }
+            else {
+                this.doneCb();
+            }
+        });
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progress: number) => void`, `() => void`]; }
+}
+
+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,
+        });
         config.root.appendChild(slideWrapper);
+        this.slideWrapperElement = slideWrapper;
         // cardMounted: (card: HTMLElement) => Promise<void>
         requestAnimationFrame(async () => {
-            for (let i = 0; i < this.cardsElements.length; ++i) {
-                await config.onCardMounted(this.cardsElements[i], i);
-            }
+            await Promise.all(this.slides.map((slide, index) => config.onSlideMounted(slide.element, index)));
         });
     }
-    cardsElements = [];
+    isAnimating = false;
+    activeIndex = -1;
+    get activeSlide() {
+        return this.slides[this.activeIndex];
+    }
+    slides = [];
     sliderTrack = null;
-    createSliderElement = ({ slides, nonce, cardRender }) => {
+    bulletsContainer = null;
+    slidesFirstRenders = [];
+    slideWrapperElement;
+    updateBulletActiveIndex;
+    updateTimelineProgress;
+    createSliderElement = ({ slides, nonce, slideRender }) => {
         const style = document.createElement("style");
         if (nonce != null) {
             style.nonce = nonce;
@@ -5015,35 +5860,255 @@ class CardsSlider {
             const slide = document.createElement("div");
             slide.classList.add("cards-slider__slide");
             slide.setAttribute("data-index", String(i));
-            this.cardsElements[i] = cardRender(slides[i]);
-            slide.appendChild(this.cardsElements[i]);
+            this.slides[i] = {
+                element: slideRender(slides[i], i, this.slidesFirstRenders[i].firstRenderCallPromise),
+                timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), this.onSlideTimerUpdate.bind(this), this.onSlideTimerEnd.bind(this)),
+            };
+            slide.appendChild(this.slides[i].element);
             track.appendChild(slide);
         }
-        const bullets = document.createElement("div");
-        bullets.classList.add("cards-slider__bullets");
+        const [bullets, updateBulletActiveIndex, updateTimelineProgress] = this.createBulletPoints(slides.length);
+        this.bulletsContainer = bullets;
+        this.updateBulletActiveIndex = updateBulletActiveIndex.bind(this);
+        this.updateTimelineProgress = updateTimelineProgress.bind(this);
         slider.appendChild(track);
         slider.appendChild(bullets);
         slider.appendChild(style);
         return slider;
     };
-    showByIndex(prevIndex, newIndex) {
-        const width = this.cardsElements[0].clientWidth;
-        let offset = 0;
-        // todo rtl ltr
-        // if (newIndex > prevIndex) {
-        offset = -1 * newIndex * width;
-        // } else {
-        //     offset = newIndex * width;
-        // }
-        console.log({ prevIndex, newIndex, offset, width });
-        this.sliderTrack?.style.setProperty("transition", "transform 300ms");
-        setTimeout(() => {
-            this.sliderTrack?.style.setProperty("transition", "none");
-        }, 300);
-        this.sliderTrack?.style.setProperty("transform", `translateX(${offset}px)`);
+    createBulletPoints(count) {
+        const bullets = document.createElement("div");
+        bullets.classList.toggle("cards-slider__bullets");
+        for (let i = 0; i < count; ++i) {
+            const bullet = document.createElement("div");
+            bullet.classList.add("cards-slider__bullet");
+            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__bullet-fill");
+            bullet.append(bulletFill);
+            bullets.appendChild(bullet);
+        }
+        const onUpdateActiveIndex = (activeIndex) => {
+            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) => {
+            if (index >= 0 && index < count) {
+                const bullet = bullets.querySelector(`.cards-slider__bullet:nth-child(${index + 1}) .cards-slider__bullet-fill`);
+                if (bullet != null) {
+                    // todo RTL
+                    //need (in css) right: 100% instead of left -100%;
+                    // todo remove progress after slide changed?
+                    bullet.style.setProperty("transform", `translateX(${progress}%)`);
+                    // transform: `translateZ(0) translateX(${
+                    //     index < this.$props.index
+                    //         ? "100%"
+                    //         : index === this.$props.index
+                    //             ? `${this.$props.timePercent}%`
+                    //             : "0%"
+                    // })`,
+                }
+            }
+        };
+        return [bullets, onUpdateActiveIndex, onUpdateTimelineProgress];
+    }
+    async showByIndex(newIndex) {
+        const prevIndex = this.activeIndex;
+        if (this.isAnimating)
+            return prevIndex;
+        if (prevIndex !== -1) {
+            // skip for slider start
+            this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
+            this.config.onSlideStop();
+        }
+        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
+        if (loadingError) {
+            // todo via updateTimeline ????
+            this.config.onSlideLoadingError(index, loadingError);
+        }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.onShowSlide(index);
+        }
+        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);
+            this.config.onSlideStop();
+        }
+        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
+        if (loadingError) {
+            // todo via updateTimeline ????
+            this.config.onSlideLoadingError(index, loadingError);
+        }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.onShowSlide(index);
+        }
+        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();
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKApi`, `{
-            cards: Array<string>;
+    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 });
+                break;
+            }
+            case "start" /* TIMELINE_ACTION.START */: {
+                this.config.onSlideDataResume();
+                // also start after data waiting or pause
+                // window.setTimeout(() => {
+                //     this.config.onSlideStop();
+                //     this.config.onSlideTimerEnd();
+                // }, 10000);
+                // destroy on IAM closing
+                console.log("TIMELINE_ACTION.START", { activeSlide: this.activeSlide, index: this.activeIndex, duration });
+                this.activeSlide?.timer.resume(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;
+            }
+        }
+    }
+    onSlideTimerUpdate(progress) {
+        this.updateTimelineProgress(this.activeIndex, progress);
+    }
+    onSlideTimerEnd() {
+        this.config.onSlideStop();
+        this.config.onSlideTimerEnd();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+            slides: Array<T>;
             root: HTMLElement;
             // isFullscreen: boolean;
             nonce?: string;
@@ -5051,15 +6116,28 @@ class CardsSlider {
             // userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
             // VODPlayer?: typeof VODPlayer;
             // overlappingActionBarHeight?: number;
-            cardRender: (card: string) => HTMLElement;
-            onCardMounted: (card: HTMLElement, index: number) => Promise<void>;
+            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;
         }`]; }
 }
 
-let SlideApi$1 = class SlideApi {
+class CardApi {
     config;
     get layoutDirection() {
-        return this.activeCard.layoutDirection;
+        return this.activeSlide.layoutDirection;
     }
     static renderedBoxClassName = "narrative-slide-box-rendered";
     static prerenderBoxClassName = "narrative-slide-box-prerender";
@@ -5069,10 +6147,18 @@ let SlideApi$1 = class SlideApi {
     _getViewportHeight;
     _overlappingActionBarHeight;
     _separateUserAndAppPause;
+    _useSdkCacheForMultislideMode;
     sdkApi;
-    activeCard = null;
-    cards = [];
-    multiCardsMode = 0 /* MULTI_CARDS_MODE.SINGLE */;
+    activeSlide = null;
+    slides = [];
+    slidesMode = 0 /* SLIDES_MODE.SINGLE */;
+    sizeMetrics = {
+        fontSize: "0px",
+        isFullscreen: false,
+        slideOffsetMargin: "0px",
+        xOffset: "0px",
+        yOffset: "0px",
+    };
     constructor(config) {
         this.config = config;
         this.sdkApi = config.sdkApi;
@@ -5082,12 +6168,14 @@ let SlideApi$1 = class SlideApi {
         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);
-        // create card api instance, need for refreshSizes
-        // default mode - single slide
-        this.activeCard = new CardApi({
-            sdkApi: this.config.sdkApi,
+        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,
@@ -5098,32 +6186,36 @@ let SlideApi$1 = class SlideApi {
             overlappingActionBarHeight: this.config.overlappingActionBarHeight,
             separateUserAndAppPause: this.config.separateUserAndAppPause,
             root: this.config.root,
-            refreshSizes: this.refreshSizes,
             index: 0,
             getSdkClientVariables: this.getSdkClientVariables,
         });
-        this.activeCard.checkAndInitPreloadedInLayoutSlide(this.config.slideLoadedCb);
+        this.activeSlide.onUpdateSizeMetrics(this.sizeMetrics);
+        if (SlideApi$1.checkPreloadedInLayoutSlide()) {
+            this.activeSlide.initPreloadedInLayoutSlide(this.config.slideLoadedCb);
+        }
         this.initListeners();
-        this.refreshSizes();
     }
     get state() {
         // TODO remove usage from web-sdk
-        return this.activeCard.state;
+        return this.activeSlide.state;
     }
     async destroy() {
-        await this.activeCard.destroy();
-        await Promise.all(this.cards.map(card => {
-            if (card !== this.activeCard) {
-                return card.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;
@@ -5141,12 +6233,10 @@ let SlideApi$1 = class SlideApi {
         // _ratio = 310 / 480,
         const _ratio = this.config.slideRatio;
         let _isFullscreen = this.config.isFullscreen;
-        const slideOffset = this.activeCard.slideOffsetElement;
         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) {
@@ -5154,6 +6244,7 @@ let SlideApi$1 = class SlideApi {
                 _isFullscreen = false;
             }
         }
+        let slideOffsetMargin = "";
         if (_isFullscreen) {
             // более квадратное чем надо (desktop)
             if (viewportRatio > _ratio) {
@@ -5161,9 +6252,7 @@ let SlideApi$1 = class SlideApi {
                 slideHeight = viewportHeight;
                 slideWidth = Math.ceil(slideHeight * _ratio);
                 offset = Math.ceil(slideWidth - viewportWidth) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
-                }
+                slideOffsetMargin = "0 " + -offset + "px"; // -8.5
                 xOffset = offset + "px";
             }
             else {
@@ -5171,9 +6260,7 @@ let SlideApi$1 = class SlideApi {
                 slideWidth = viewportWidth;
                 slideHeight = Math.ceil(viewportWidth / _ratio);
                 offset = Math.ceil(slideHeight - viewportHeight) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = -1 * offset + "px" + " 0 ";
-                }
+                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
@@ -5186,9 +6273,7 @@ let SlideApi$1 = class SlideApi {
                 slideWidth = viewportWidth;
                 slideHeight = Math.ceil(viewportWidth / _ratio);
                 offset = Math.ceil(slideHeight - viewportHeight) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = -offset + "px" + " 0 ";
-                }
+                slideOffsetMargin = -offset + "px" + " 0 ";
                 yOffset = offset + this._overlappingActionBarHeight + "px";
             }
             else {
@@ -5197,32 +6282,144 @@ let SlideApi$1 = class SlideApi {
                 slideHeight = viewportHeight;
                 slideWidth = Math.ceil(slideHeight * _ratio);
                 offset = Math.ceil(slideWidth - viewportWidth) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
-                }
+                slideOffsetMargin = "0 " + -offset + "px"; // -8.5
                 xOffset = offset + "px";
             }
         }
         const fontSizeNumber = slideWidth / 20;
         const fontSize = `${fontSizeNumber}px`;
-        this.activeCard.onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen: _isFullscreen });
-        this.cards.forEach(card => {
-            if (card !== this.activeCard) {
-                card.onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen: _isFullscreen });
+        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.multiCardsMode = 0 /* MULTI_CARDS_MODE.SINGLE */;
-        return this.activeCard.showSlide(html);
-    }
-    cardsSlider = null;
-    async showSlides(cards, cardAppearance) {
-        this.multiCardsMode = 1 /* MULTI_CARDS_MODE.MULTIPLE */;
-        const cardRender = (card) => {
+        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 */;
+        this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+        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 }));
+            }
+            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.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+        };
+        const onSlideLoadingError = (index, reason) => {
+            this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+        };
+        const onShowSlide = (slide, index) => {
+            this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+            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");
@@ -5245,53 +6442,78 @@ let SlideApi$1 = class SlideApi {
             // 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;
+            // 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;
         };
-        let onShowActiveCardResolver = null;
-        const onShowActiveCard = new Promise(resolve => {
-            onShowActiveCardResolver = resolve;
+        new Promise(resolve => {
         });
-        const onCardMounted = async (card, index) => {
-            const cardApi = new CardApi({
-                sdkApi: this.config.sdkApi,
-                slideWrapper: card,
-                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,
-                getSdkClientVariables: this.getSdkClientVariables,
-            });
-            this.cards[index] = cardApi;
-            if (index === 0) {
-                this.activeCard = cardApi;
-            }
-            const result = await cardApi.showSlide();
-            onShowActiveCardResolver(result);
-            // console.log({ result, index });
+        // 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 });
         };
-        this.cardsSlider = new CardsSlider(this.sdkApi, {
+        if (this.slider != null) {
+            this.slider.destroy();
+        }
+        this.slider = new Slider({
             root: this.config.root,
-            cards,
+            slides: this.slides.map(({ content, resourcesReadyPromise }) => ({
+                content,
+                canMediaMount: resourcesReadyPromise,
+            })),
             nonce: this.config.nonce,
-            cardRender,
-            onCardMounted,
+            slideRender,
+            onSlideMounted,
+            onBeforeShowSlide,
+            onBeforeLoadSlide,
+            onSlideLoadingError,
+            onShowSlide,
+            onSlideLeft,
+            getLayoutDirection: () => this.layoutDirection,
+            onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
+            onSlideStart: () => {
+                this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+                return this.activeSlide.slideStart({ muted: true });
+            },
+            onSlideStop: () => this.activeSlide.slideStop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ }),
+            onSlideDataWaiting: () => this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */),
+            onSlideDataResume: () => this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */),
+            onSlideDataError: () => this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */),
         });
-        return await onShowActiveCard;
+        await this.slider.showByIndex(index);
+        // return await onShowActiveCard;
     }
     handleBackpress() {
-        this.activeCard.handleBackpress();
+        this.activeSlide.handleBackpress();
     }
     get layoutService() {
         return container.get({ identifier: "LayoutService" });
@@ -5300,89 +6522,91 @@ let SlideApi$1 = class SlideApi {
         return this.sdkApi.getCardLocalData();
     }
     async slideStart(config) {
-        return this.activeCard.slideStart(config);
+        return this.activeSlide.slideStart(config);
     }
     async slideRestart(config) {
-        return this.activeCard.slideRestart(config);
+        return this.activeSlide.slideRestart(config);
     }
     async slideUserPause() {
-        return this.activeCard.slideUserPause();
+        return this.activeSlide.slideUserPause();
     }
     async slideUserResume() {
-        return this.activeCard.slideUserResume();
+        return this.activeSlide.slideUserResume();
     }
     /**
      * Call on app gone background
      */
     async slideAppPause() {
-        return this.activeCard.slideAppPause();
+        return this.activeSlide.slideAppPause();
     }
     /**
      * Call on app gone foreground after a background
      */
     async slideAppResume() {
-        return this.activeCard.slideAppResume();
+        return this.activeSlide.slideAppResume();
     }
     async slideStop(options) {
-        return this.activeCard.slideStop(options);
+        return this.activeSlide.slideStop(options);
     }
     slideTimerEnd() {
-        this.activeCard.slideTimerEnd();
+        this.activeSlide.slideTimerEnd();
     }
     enableAudio() {
-        this.activeCard.enableAudio();
+        this.activeSlide.enableAudio();
     }
     disableAudio() {
-        this.activeCard.disableAudio();
+        this.activeSlide.disableAudio();
     }
     get isStopped() {
-        return this.activeCard.isStopped;
+        return this.activeSlide.isStopped;
     }
     afterStartInitQueuePush(cb) {
-        return this.activeCard.afterStartInitQueuePush(cb);
+        return this.activeSlide.afterStartInitQueuePush(cb);
     }
     afterAppResumeQueuePush(cb) {
-        return this.activeCard.afterAppResumeQueuePush(cb);
+        return this.activeSlide.afterAppResumeQueuePush(cb);
     }
     get activeLayer() {
-        return this.activeCard.slide.activeLayer;
+        return this.activeSlide.slide.activeLayer;
     }
     get slide() {
-        return this.activeCard.slide;
+        return this.activeSlide.slide;
     }
     showLayer(index) {
-        this.activeCard.showLayer(index);
+        this.activeSlide.showLayer(index);
     }
     slideClickHandler(targetElement, navigationDirection) {
-        const result = this.activeCard.slideClickHandler(targetElement, navigationDirection);
-        if (this.multiCardsMode === 1 /* MULTI_CARDS_MODE.MULTIPLE */) {
-            // handle nav click via CardsSlider, not via SDK
-            result.canClickNext = false;
-            const currentIndex = this.activeCard.index;
+        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;
             let index = navigationDirection === "forward" ? currentIndex + 1 : currentIndex - 1;
-            if (index >= this.cards.length) {
+            if (index >= this.slides.length) {
                 index = 0;
             }
             else if (index < 0) {
-                index = this.cards.length - 1;
+                index = this.slides.length - 1;
             }
-            // todo async
-            this.cardsSlider.showByIndex(currentIndex, index);
-            this.activeCard = this.cards[index];
+            this.slider.showByIndex(index).then(index => {
+                if (currentIndex === index)
+                    return;
+                this.activeSlide = this.slides[index].slide;
+            });
         }
         return result;
     }
     slideSwipeUpHandler() {
-        return this.activeCard.slideSwipeUpHandler();
+        return this.activeSlide.slideSwipeUpHandler();
     }
     setTextInputResult(id, text) {
-        this.activeCard.setTextInputResult(id, text);
+        this.activeSlide.setTextInputResult(id, text);
     }
     setShareComplete(id, isSuccess) {
-        this.activeCard.setShareComplete(id, isSuccess);
+        this.activeSlide.setShareComplete(id, isSuccess);
     }
     setWidgetGoodsComplete(elementId) {
-        this.activeCard.setWidgetGoodsComplete(elementId);
+        this.activeSlide.setWidgetGoodsComplete(elementId);
     }
     _sdkClientVariables = {};
     getSdkClientVariables() {
@@ -5391,6 +6615,23 @@ let SlideApi$1 = class SlideApi {
     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;
@@ -5405,8 +6646,9 @@ let SlideApi$1 = class SlideApi {
             separateUserAndAppPause: boolean;
             root: HTMLElement;
             nonce?: string;
+            useSdkCacheForMultislideMode: boolean;
         }`]; }
-};
+}
 
 const slideApiPeerDeps = {};
 const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
@@ -5438,7 +6680,7 @@ const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
     slideWrapper.appendChild(style);
     return slideWrapper;
 };
-class SlideApi extends SlideApi$1 {
+class SlideApi extends CardApi {
     root;
     slideWrapper;
     constructor(_sdkInterface, config) {
@@ -5458,6 +6700,7 @@ class SlideApi extends SlideApi$1 {
             separateUserAndAppPause: true,
             root: config.root,
             nonce: config.nonce,
+            useSdkCacheForMultislideMode: config.useSdkCacheForMultislideMode,
         });
         this.root = config.root;
         this.slideWrapper = slideWrapper;
@@ -5478,6 +6721,7 @@ class SlideApi extends SlideApi$1 {
             userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
             VODPlayer?: typeof VODPlayer;
             overlappingActionBarHeight?: number;
+            useSdkCacheForMultislideMode: boolean;
         }`]; }
 }
 
@@ -14907,7 +16151,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;
@@ -14929,7 +16173,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() {
@@ -14979,13 +16223,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;
@@ -15000,20 +16244,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);
@@ -15044,11 +16288,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);
@@ -15060,14 +16304,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");
@@ -15217,7 +16461,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);
         }
@@ -15280,7 +16524,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);
                 }),
@@ -15308,14 +16552,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;
@@ -15361,13 +16605,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);
     }
@@ -15539,7 +16783,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);
                 }),
@@ -15566,14 +16810,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;
@@ -15625,7 +16869,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);
     }
@@ -15767,12 +17011,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) {
@@ -15793,7 +17037,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;
@@ -16092,7 +17336,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 */;
@@ -16157,7 +17401,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;
@@ -16186,19 +17430,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,
         }, {
@@ -16213,7 +17457,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);
         },
     };
 }
@@ -16381,13 +17625,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) {
@@ -16409,19 +17653,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) {
@@ -16442,7 +17686,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;
@@ -16485,7 +17729,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])) {
@@ -17654,20 +18898,19 @@ class WidgetProducts extends WidgetBase {
             if (!this.linkTarget.length) {
                 return { message: this.msgServiceError ?? "", models: [] };
             }
-            const searchParams = new URLSearchParams();
-            searchParams.set("id", this.linkTarget.join(","));
+            let qs = `id=${this.linkTarget.join(",")}`;
             const sdkClientVariables = this.widgetDeps.getSdkClientVariables();
             if (sdkClientVariables != null && sdkClientVariables.pos != null) {
-                searchParams.set("pos", String(sdkClientVariables.pos));
+                qs += `&pos=${String(sdkClientVariables.pos)}`;
             }
-            const path = `product/offer?${searchParams.toString()}`;
+            const path = `product/offer?${qs}`;
             const headers = {
                 accept: "application/json",
                 "Content-Type": "application/json",
             };
             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) {
@@ -17793,15 +19036,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");
@@ -17813,13 +19056,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);
@@ -17879,7 +19122,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);
@@ -18110,10 +19353,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) {
@@ -18132,8 +19375,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;
                         }
                     }
@@ -18144,8 +19387,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;
                     }
                 }
@@ -18191,10 +19434,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);
         }
@@ -18266,12 +19509,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;
@@ -18287,8 +19530,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;
@@ -18297,11 +19540,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();
                         }
                     }
                 }
@@ -18314,12 +19557,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);
                         }
                     }
                 }
@@ -18334,11 +19577,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();
                             }
                         }
                     }
@@ -18351,12 +19594,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);
                             }
                         }
                     }
@@ -18371,20 +19614,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);
                         }
                     }
                 }
@@ -19174,7 +20417,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;
@@ -19274,7 +20517,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);
         }
@@ -19304,7 +20547,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);
@@ -19369,7 +20612,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);
@@ -19616,12 +20859,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) {
@@ -19643,7 +20886,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 {
@@ -19655,17 +20898,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 {
@@ -19814,12 +21057,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,
@@ -19827,7 +21070,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);
                 }
             }
         }
@@ -20433,9 +21676,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);
@@ -20814,7 +22057,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])) {