@inappstory/slide-api 0.1.21 → 0.1.23

package/dist/index.cjs

@@ -3134,6 +3134,7 @@ class Layer {
     _getLayoutDirection;
     _slidePauseUI;
     _slideResumeUI;
+    _getSdkClientVariables;
     _slideIndex;
     _cardId;
     _cardType;
@@ -3144,7 +3145,7 @@ class Layer {
     _elements = [];
     _timeline;
     _widgetDeps;
-    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI) {
+    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
         this._nodeRef = _nodeRef;
         this._slide = _slide;
         this._slideReadyPromise = _slideReadyPromise;
@@ -3156,6 +3157,7 @@ class Layer {
         this._getLayoutDirection = _getLayoutDirection;
         this._slidePauseUI = _slidePauseUI;
         this._slideResumeUI = _slideResumeUI;
+        this._getSdkClientVariables = _getSdkClientVariables;
         this._slideIndex = parseInt(this._nodeRef.getAttribute("data-index") ?? "0");
         this._cardId = parseInt(this._nodeRef.getAttribute("data-id") ?? "0");
         this._cardType = parseInt(this._nodeRef.getAttribute("data-card-type") ?? "1") || 1 /* CARD_TYPE.STORY */;
@@ -3164,7 +3166,12 @@ class Layer {
         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._widgetDeps = { sdkApi: this.sdkApi, slideRoot: this._slideRoot, getLayoutDirection: this._getLayoutDirection };
+        this._widgetDeps = {
+            sdkApi: this.sdkApi,
+            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);
@@ -3501,7 +3508,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>`]; }
+    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`]; }
 }
 const TextFit = (function () {
     const defaultSettings = {
@@ -3698,9 +3705,10 @@ class Slide {
     _getLayoutDirection;
     _slidePauseUI;
     _slideResumeUI;
+    _getSdkClientVariables;
     _layers;
     _start;
-    constructor(_slidesNodesRefs, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI) {
+    constructor(_slidesNodesRefs, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
         this._slidesNodesRefs = _slidesNodesRefs;
         this._slideReadyPromise = _slideReadyPromise;
         this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
@@ -3711,11 +3719,12 @@ class Slide {
         this._getLayoutDirection = _getLayoutDirection;
         this._slidePauseUI = _slidePauseUI;
         this._slideResumeUI = _slideResumeUI;
+        this._getSdkClientVariables = _getSdkClientVariables;
         this._start = window.performance.now();
         if (!this._slidesNodesRefs.length) {
             throw new Error("No slides found.");
         }
-        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this._showNextSlide, this.sdkApi, this._slideRoot, this._getLayoutDirection, this._slidePauseUI, this._slideResumeUI));
+        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._activeLayer = this._layers[0];
     }
     _activeLayer;
@@ -3738,6 +3747,7 @@ class Slide {
                     sdkApi: this.sdkApi,
                     slideRoot: this._slideRoot,
                     getLayoutDirection: this._getLayoutDirection,
+                    getSdkClientVariables: this._getSdkClientVariables,
                 });
             }
             catch (e) {
@@ -3811,10 +3821,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>`]; }
+    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`]; }
 }
 
-let SlideApi$1 = class SlideApi {
+class CardApi {
     config;
     get layoutDirection() {
         // warning, detection in ctor not working, bcz sdk changes layout later
@@ -3828,6 +3838,7 @@ let SlideApi$1 = class SlideApi {
     _getViewportHeight;
     _overlappingActionBarHeight;
     _separateUserAndAppPause;
+    _index;
     sdkApi;
     constructor(config) {
         this.config = config;
@@ -3838,9 +3849,10 @@ let SlideApi$1 = class SlideApi {
         this._getViewportHeight = config.getViewportHeight;
         this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
         this._separateUserAndAppPause = config.separateUserAndAppPause;
-        this.refreshSizes = proxy(this.refreshSizes, this);
-        this.initListeners();
-        this.refreshSizes();
+        this._index = config.index;
+    }
+    checkAndInitPreloadedInLayoutSlide(slideLoadedCb) {
+        // for sdk backward compatibility
         const slideBox = document.getElementById("narrative-slide-box");
         // todo via first child and its innerText - faster variant
         if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
@@ -3848,121 +3860,45 @@ let SlideApi$1 = class SlideApi {
             this._slideInRender = true;
             this._init(() => this._slideBoxRenderComplete(null)).then(({ slide, result, reason }) => {
                 this._slide = slide;
-                if (config.slideLoadedCb != null) {
-                    config.slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
+                if (slideLoadedCb != null) {
+                    slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
                 }
             });
         }
     }
-    async destroy() {
-        if (this.slide != null) {
-            await this.slide.onBeforeUnmount();
-        }
-        this.destroyListeners();
-        this._state = 13 /* STATE.DESTROYED */;
-    }
-    initListeners() {
-        this._viewport.addEventListener("resize", this.refreshSizes);
-    }
-    destroyListeners() {
-        this._viewport.removeEventListener("resize", this.refreshSizes);
-    }
-    _savedViewportWidth = null;
-    _savedViewportHeight = null;
-    refreshSizes() {
-        const viewportWidth = this._getViewportWidth();
-        const viewportHeight = this._getViewportHeight();
-        if (this._savedViewportWidth === viewportWidth && this._savedViewportHeight === viewportHeight) {
-            return;
-        }
-        this._savedViewportWidth = viewportWidth;
-        this._savedViewportHeight = viewportHeight;
-        const viewportRatio = viewportWidth / viewportHeight;
-        let slideWidth = 0;
-        let slideHeight = 0;
-        // _ratio = 310 / 480,
-        const _ratio = this.config.slideRatio;
-        let _isFullscreen = this.config.isFullscreen;
-        const slideOffset = this._slideWrapper.querySelector(".narrative-slide-offset");
-        let offset = 0;
-        let xOffset = "0px";
-        // for elements with bottom anchor (absolute position)
-        let yOffset = "0px";
-        // alert(viewportHeight);
-        // todo - mobile only (or isIos or isAndroid)
-        if (this.sdkApi.isAndroid || this.sdkApi.isIOS) {
-            if (viewportRatio > _ratio) {
-                // disable _isFullscreen if viewport small
-                _isFullscreen = false;
-            }
-        }
-        if (_isFullscreen) {
-            // более квадратное чем надо (desktop)
-            if (viewportRatio > _ratio) {
-                // fit by height
-                slideHeight = viewportHeight;
-                slideWidth = Math.ceil(slideHeight * _ratio);
-                offset = Math.ceil(slideWidth - viewportWidth) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
-                }
-                xOffset = offset + "px";
-            }
-            else {
-                // fit by width, top and bottom - to offscreen or fill with bg image
-                slideWidth = viewportWidth;
-                slideHeight = Math.ceil(viewportWidth / _ratio);
-                offset = Math.ceil(slideHeight - viewportHeight) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = -1 * offset + "px" + " 0 ";
-                }
-                // offset from viewport bottom to StoryBottom plus safe area offset bottom
-                yOffset = `calc(${offset + this._overlappingActionBarHeight}px + env(safe-area-inset-bottom))`;
-                // detect safe area offset
-            }
-        }
-        else {
-            // более квадратное чем надо
-            if (viewportRatio > _ratio) {
-                // fit by width, top and bottom - to offscreen
-                slideWidth = viewportWidth;
-                slideHeight = Math.ceil(viewportWidth / _ratio);
-                offset = Math.ceil(slideHeight - viewportHeight) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = -offset + "px" + " 0 ";
-                }
-                yOffset = offset + this._overlappingActionBarHeight + "px";
+    onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen, }) {
+        // todo CSP violation
+        this._slideWrapper.style.fontSize = fontSize;
+        if (this.slideOffsetElement != null) {
+            // todo CSP violation
+            this.slideOffsetElement.style.setProperty("--y-offset", yOffset);
+            this.slideOffsetElement.style.setProperty("--x-offset", xOffset);
+            if (isFullscreen) {
+                this.slideOffsetElement.classList.add("narrative-slide-offset-fullscreen");
             }
             else {
-                // вьюпорт более вытянутый чем надо
-                // fit by height, sides - to offscreen
-                slideHeight = viewportHeight;
-                slideWidth = Math.ceil(slideHeight * _ratio);
-                offset = Math.ceil(slideWidth - viewportWidth) / 2;
-                if (slideOffset != null) {
-                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
-                }
-                xOffset = offset + "px";
+                this.slideOffsetElement.classList.remove("narrative-slide-offset-fullscreen");
             }
         }
-        const fontSize = slideWidth / 20;
-        // todo CSP violation
-        this._slideWrapper.style.fontSize = fontSize + "px";
-        if (slideOffset != null) {
-            // todo CSP violation
-            slideOffset.style.setProperty("--y-offset", yOffset);
-            slideOffset.style.setProperty("--x-offset", xOffset);
-        }
-        if (_isFullscreen) {
-            slideOffset?.classList.add("narrative-slide-offset-fullscreen");
-        }
-        if (this.config.userResizeHandler != null) {
-            this.config.userResizeHandler({ viewportWidth, viewportHeight, fontSize });
+    }
+    get slideWrapperElement() {
+        return this._slideWrapper;
+    }
+    get slideOffsetElement() {
+        return this._slideWrapper.querySelector(".narrative-slide-offset");
+    }
+    get index() {
+        return this._index;
+    }
+    async destroy() {
+        if (this.slide != null) {
+            await this.slide.onBeforeUnmount();
         }
+        this._state = 13 /* STATE.DESTROYED */;
     }
     async showSlide(html) {
-        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
-        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+        const slideBox = this._slideWrapper.querySelector(`.${CardApi.renderedBoxClassName}`);
+        const slideBoxPrerender = this._slideWrapper.querySelector(`.${CardApi.prerenderBoxClassName}`);
         const _result = { cardId: this.slide?.cardId ?? 0, slideIndex: this.slide?.slideIndex ?? 0, result: false, reason: "" };
         if (slideBox && slideBoxPrerender) {
             if (this._slideInRender) {
@@ -3971,7 +3907,9 @@ let SlideApi$1 = class SlideApi {
             }
             this._slideInInit = null;
             this._slideInRender = true;
-            slideBoxPrerender.innerHTML = html;
+            if (html != null) {
+                slideBoxPrerender.innerHTML = html;
+            }
             const prevSlide = this.slide ? Object.assign(Object.create(Object.getPrototypeOf(this.slide)), this.slide) : null;
             const { slide, result, reason } = await this._init(() => this._slideBoxRenderComplete(prevSlide));
             this._slide = slide;
@@ -3980,7 +3918,7 @@ let SlideApi$1 = class SlideApi {
         }
         else {
             _result.result = false;
-            _result.reason = `Element .${SlideApi.renderedBoxClassName} or .${SlideApi.prerenderBoxClassName} does not found in DOM`;
+            _result.reason = `Element .${CardApi.renderedBoxClassName} or .${CardApi.prerenderBoxClassName} does not found in DOM`;
         }
         _result.cardId = this.slide.cardId;
         _result.slideIndex = this.slide.slideIndex;
@@ -4085,9 +4023,9 @@ let SlideApi$1 = class SlideApi {
         /**
          * For case when SlideApi instance was created before root was attached to DOM
          */
-        this.refreshSizes();
-        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`));
+        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`));
         if (!slidesNodesRefs.length && slideNodeRef != null) {
             slidesNodesRefs.push(slideNodeRef);
         }
@@ -4098,7 +4036,7 @@ let SlideApi$1 = class SlideApi {
         const slideReadyPromise = new Promise(resolve => {
             slideReadyResolve = resolve;
         });
-        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterAppResumeQueuePush.bind(this), this.afterStartInitQueuePush.bind(this), this.sdkApi.showNextSlide.bind(this), this.sdkApi, this._slideWrapper, () => this.layoutDirection, this.slidePauseUI.bind(this), this.slideResumeUI.bind(this));
+        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);
         this._slideInInit = slide;
         slide.activeLayer.timeline.triggerSlideLoadState();
         if (this.sdkApi.isAndroid) {
@@ -4160,12 +4098,12 @@ let SlideApi$1 = class SlideApi {
             return;
         }
         return new Promise(resolve => {
-            const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
-            const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+            const slideBox = this._slideWrapper.querySelector(`.${CardApi.renderedBoxClassName}`);
+            const slideBoxPrerender = this._slideWrapper.querySelector(`.${CardApi.prerenderBoxClassName}`);
             if (slideBox && slideBoxPrerender) {
-                slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
-                slideBox.classList.remove(SlideApi.renderedBoxClassName);
-                slideBox.classList.add(SlideApi.prerenderBoxClassName);
+                slideBoxPrerender.classList.remove(CardApi.prerenderBoxClassName);
+                slideBox.classList.remove(CardApi.renderedBoxClassName);
+                slideBox.classList.add(CardApi.prerenderBoxClassName);
                 // pause Video - prevent triggering onDataWaiting from VODPlayer
                 prevSlide?.activeLayer.pause(false, true, false);
                 // 2 RAF - wait for browser render complete (CSS changes, etc.)
@@ -4189,7 +4127,7 @@ let SlideApi$1 = class SlideApi {
                 else {
                     resolve();
                 }
-                slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
+                slideBoxPrerender.classList.add(CardApi.renderedBoxClassName);
             }
             else {
                 resolve();
@@ -5028,7 +4966,446 @@ let SlideApi$1 = class SlideApi {
             }
         }
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n            sdkApi: SDKApi;\n            slideWrapper: HTMLElement;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            slideRatio: number;\n            isFullscreen: boolean;\n            slideLoadedCb?: (data: { cardId: number; slideIndex: number; result: boolean; reason?: string }) => void;\n            getViewportWidth: () => number;\n            getViewportHeight: () => number;\n            overlappingActionBarHeight?: number;\n            separateUserAndAppPause: boolean;\n        }`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+            sdkApi: SDKApi;
+            slideWrapper: HTMLElement;
+            viewport: Window;
+            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
+            slideRatio: number;
+            isFullscreen: boolean;
+            getViewportWidth: () => number;
+            getViewportHeight: () => number;
+            overlappingActionBarHeight?: number;
+            separateUserAndAppPause: boolean;
+            root: HTMLElement;
+            nonce?: string;
+            refreshSizes: () => void;
+            index: number;
+            getSdkClientVariables: GetSdkClientVariables;
+        }`]; }
+}
+
+class CardsSlider {
+    sdkApi;
+    constructor(sdkApi, config) {
+        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?
+        config.root.appendChild(slideWrapper);
+        // cardMounted: (card: HTMLElement) => Promise<void>
+        requestAnimationFrame(async () => {
+            for (let i = 0; i < this.cardsElements.length; ++i) {
+                await config.onCardMounted(this.cardsElements[i], i);
+            }
+        });
+    }
+    cardsElements = [];
+    sliderTrack = null;
+    createSliderElement = ({ slides, nonce, cardRender }) => {
+        const style = document.createElement("style");
+        if (nonce != null) {
+            style.nonce = nonce;
+        }
+        const slider = document.createElement("div");
+        slider.classList.add("cards-slider");
+        const track = document.createElement("div");
+        track.classList.add("cards-slider__track");
+        this.sliderTrack = track;
+        for (let i = 0; i < slides.length; ++i) {
+            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]);
+            track.appendChild(slide);
+        }
+        const bullets = document.createElement("div");
+        bullets.classList.add("cards-slider__bullets");
+        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)`);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKApi`, `{
+            cards: Array<string>;
+            root: HTMLElement;
+            // isFullscreen: boolean;
+            nonce?: string;
+            // viewport: Window;
+            // 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>;
+        }`]; }
+}
+
+let SlideApi$1 = class SlideApi {
+    config;
+    get layoutDirection() {
+        return this.activeCard.layoutDirection;
+    }
+    static renderedBoxClassName = "narrative-slide-box-rendered";
+    static prerenderBoxClassName = "narrative-slide-box-prerender";
+    _singleCardSlideWrapper;
+    _viewport;
+    _getViewportWidth;
+    _getViewportHeight;
+    _overlappingActionBarHeight;
+    _separateUserAndAppPause;
+    sdkApi;
+    activeCard = null;
+    cards = [];
+    multiCardsMode = 0 /* MULTI_CARDS_MODE.SINGLE */;
+    constructor(config) {
+        this.config = config;
+        this.sdkApi = config.sdkApi;
+        this._singleCardSlideWrapper = config.slideWrapper;
+        this._viewport = config.viewport;
+        this._getViewportWidth = config.getViewportWidth;
+        this._getViewportHeight = config.getViewportHeight;
+        this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
+        this._separateUserAndAppPause = config.separateUserAndAppPause;
+        this.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,
+            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.activeCard.checkAndInitPreloadedInLayoutSlide(this.config.slideLoadedCb);
+        this.initListeners();
+        this.refreshSizes();
+    }
+    get state() {
+        // TODO remove usage from web-sdk
+        return this.activeCard.state;
+    }
+    async destroy() {
+        await this.activeCard.destroy();
+        await Promise.all(this.cards.map(card => {
+            if (card !== this.activeCard) {
+                return card.destroy();
+            }
+        }));
+        this.destroyListeners();
+    }
+    initListeners() {
+        this._viewport.addEventListener("resize", this.refreshSizes);
+    }
+    destroyListeners() {
+        this._viewport.removeEventListener("resize", this.refreshSizes);
+    }
+    _savedViewportWidth = null;
+    _savedViewportHeight = null;
+    refreshSizes() {
+        const viewportWidth = this._getViewportWidth();
+        const viewportHeight = this._getViewportHeight();
+        if (this._savedViewportWidth === viewportWidth && this._savedViewportHeight === viewportHeight) {
+            return;
+        }
+        this._savedViewportWidth = viewportWidth;
+        this._savedViewportHeight = viewportHeight;
+        const viewportRatio = viewportWidth / viewportHeight;
+        let slideWidth = 0;
+        let slideHeight = 0;
+        // _ratio = 310 / 480,
+        const _ratio = this.config.slideRatio;
+        let _isFullscreen = this.config.isFullscreen;
+        const slideOffset = this.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) {
+                // disable _isFullscreen if viewport small
+                _isFullscreen = false;
+            }
+        }
+        if (_isFullscreen) {
+            // более квадратное чем надо (desktop)
+            if (viewportRatio > _ratio) {
+                // fit by height
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
+                }
+                xOffset = offset + "px";
+            }
+            else {
+                // fit by width, top and bottom - to offscreen or fill with bg image
+                slideWidth = viewportWidth;
+                slideHeight = Math.ceil(viewportWidth / _ratio);
+                offset = Math.ceil(slideHeight - viewportHeight) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = -1 * offset + "px" + " 0 ";
+                }
+                // offset from viewport bottom to StoryBottom plus safe area offset bottom
+                yOffset = `calc(${offset + this._overlappingActionBarHeight}px + env(safe-area-inset-bottom))`;
+                // detect safe area offset
+            }
+        }
+        else {
+            // более квадратное чем надо
+            if (viewportRatio > _ratio) {
+                // fit by width, top and bottom - to offscreen
+                slideWidth = viewportWidth;
+                slideHeight = Math.ceil(viewportWidth / _ratio);
+                offset = Math.ceil(slideHeight - viewportHeight) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = -offset + "px" + " 0 ";
+                }
+                yOffset = offset + this._overlappingActionBarHeight + "px";
+            }
+            else {
+                // вьюпорт более вытянутый чем надо
+                // fit by height, sides - to offscreen
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
+                }
+                xOffset = offset + "px";
+            }
+        }
+        const 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 });
+            }
+        });
+        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) => {
+            const slideWrapper = document.createElement("div");
+            slideWrapper.classList.add("narrative-slide-wrapper");
+            slideWrapper.classList.add("stories-viewer");
+            const slideOffset = document.createElement("div");
+            slideOffset.classList.add("narrative-slide-offset");
+            const slideBoxPrerender = document.createElement("div");
+            slideBoxPrerender.classList.add("narrative-slide-box");
+            slideBoxPrerender.classList.add("narrative-slide-box-prerender");
+            const slideBoxRendered = document.createElement("div");
+            slideBoxRendered.classList.add("narrative-slide-box");
+            slideBoxRendered.classList.add("narrative-slide-box-rendered");
+            const style = document.createElement("style");
+            if (this.config.nonce != null) {
+                style.nonce = this.config.nonce;
+            }
+            const paddingTop = `${String(100 / this.config.slideRatio)}%`;
+            //         .narrative-slide-box {
+            //             padding: <?= $slideRatioPadding ?> 0 0 0;
+            //         }
+            // style.sheet?.insertRule(`.narrative-slide-box {padding: ${paddingTop} 0 0 0;`);
+            slideBoxRendered.style.padding = `${paddingTop} 0 0 0`;
+            slideBoxPrerender.style.padding = `${paddingTop} 0 0 0`;
+            slideBoxPrerender.innerHTML = card;
+            slideOffset.appendChild(slideBoxPrerender);
+            slideOffset.appendChild(slideBoxRendered);
+            slideWrapper.appendChild(slideOffset);
+            slideWrapper.appendChild(style);
+            return slideWrapper;
+        };
+        let onShowActiveCardResolver = null;
+        const onShowActiveCard = new Promise(resolve => {
+            onShowActiveCardResolver = 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 });
+        };
+        this.cardsSlider = new CardsSlider(this.sdkApi, {
+            root: this.config.root,
+            cards,
+            nonce: this.config.nonce,
+            cardRender,
+            onCardMounted,
+        });
+        return await onShowActiveCard;
+    }
+    handleBackpress() {
+        this.activeCard.handleBackpress();
+    }
+    get layoutService() {
+        return container.get({ identifier: "LayoutService" });
+    }
+    getLocalData() {
+        return this.sdkApi.getCardLocalData();
+    }
+    async slideStart(config) {
+        return this.activeCard.slideStart(config);
+    }
+    async slideRestart(config) {
+        return this.activeCard.slideRestart(config);
+    }
+    async slideUserPause() {
+        return this.activeCard.slideUserPause();
+    }
+    async slideUserResume() {
+        return this.activeCard.slideUserResume();
+    }
+    /**
+     * Call on app gone background
+     */
+    async slideAppPause() {
+        return this.activeCard.slideAppPause();
+    }
+    /**
+     * Call on app gone foreground after a background
+     */
+    async slideAppResume() {
+        return this.activeCard.slideAppResume();
+    }
+    async slideStop(options) {
+        return this.activeCard.slideStop(options);
+    }
+    slideTimerEnd() {
+        this.activeCard.slideTimerEnd();
+    }
+    enableAudio() {
+        this.activeCard.enableAudio();
+    }
+    disableAudio() {
+        this.activeCard.disableAudio();
+    }
+    get isStopped() {
+        return this.activeCard.isStopped;
+    }
+    afterStartInitQueuePush(cb) {
+        return this.activeCard.afterStartInitQueuePush(cb);
+    }
+    afterAppResumeQueuePush(cb) {
+        return this.activeCard.afterAppResumeQueuePush(cb);
+    }
+    get activeLayer() {
+        return this.activeCard.slide.activeLayer;
+    }
+    get slide() {
+        return this.activeCard.slide;
+    }
+    showLayer(index) {
+        this.activeCard.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;
+            let index = navigationDirection === "forward" ? currentIndex + 1 : currentIndex - 1;
+            if (index >= this.cards.length) {
+                index = 0;
+            }
+            else if (index < 0) {
+                index = this.cards.length - 1;
+            }
+            // todo async
+            this.cardsSlider.showByIndex(currentIndex, index);
+            this.activeCard = this.cards[index];
+        }
+        return result;
+    }
+    slideSwipeUpHandler() {
+        return this.activeCard.slideSwipeUpHandler();
+    }
+    setTextInputResult(id, text) {
+        this.activeCard.setTextInputResult(id, text);
+    }
+    setShareComplete(id, isSuccess) {
+        this.activeCard.setShareComplete(id, isSuccess);
+    }
+    setWidgetGoodsComplete(elementId) {
+        this.activeCard.setWidgetGoodsComplete(elementId);
+    }
+    _sdkClientVariables = {};
+    getSdkClientVariables() {
+        return this._sdkClientVariables;
+    }
+    setSdkClientVariables(variables) {
+        this._sdkClientVariables = variables;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+            sdkApi: SDKApi;
+            slideWrapper: HTMLElement;
+            viewport: Window;
+            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
+            slideRatio: number;
+            isFullscreen: boolean;
+            slideLoadedCb?: (data: { cardId: number; slideIndex: number; result: boolean; reason?: string }) => void;
+            getViewportWidth: () => number;
+            getViewportHeight: () => number;
+            overlappingActionBarHeight?: number;
+            separateUserAndAppPause: boolean;
+            root: HTMLElement;
+            nonce?: string;
+        }`]; }
 };
 
 const slideApiPeerDeps = {};
@@ -5062,10 +5439,11 @@ const createSlideWrapper = ({ slideBoxRatio, nonce }) => {
     return slideWrapper;
 };
 class SlideApi extends SlideApi$1 {
+    root;
+    slideWrapper;
     constructor(_sdkInterface, config) {
         slideApiPeerDeps.VODPlayer = config.VODPlayer;
         const slideWrapper = createSlideWrapper({ slideBoxRatio: config.slideRatio, nonce: config.nonce });
-        // todo need to clear root node before append slideWrapper?
         config.root.appendChild(slideWrapper);
         super({
             sdkApi: new EsModuleSdkApi(_sdkInterface),
@@ -5078,9 +5456,29 @@ class SlideApi extends SlideApi$1 {
             getViewportHeight: () => slideWrapper.clientHeight,
             overlappingActionBarHeight: config.overlappingActionBarHeight,
             separateUserAndAppPause: true,
+            root: config.root,
+            nonce: config.nonce,
         });
+        this.root = config.root;
+        this.slideWrapper = slideWrapper;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`, `{\n            root: HTMLElement;\n            slideRatio: number;\n            isFullscreen: boolean;\n            nonce?: string;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            VODPlayer?: typeof VODPlayer;\n            overlappingActionBarHeight?: number;\n        }`]; }
+    async destroy() {
+        if (!this.slideWrapper)
+            return;
+        this.root.removeChild(this.slideWrapper);
+        this.slideWrapper = null;
+        await super.destroy();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`, `{
+            root: HTMLElement;
+            slideRatio: number;
+            isFullscreen: boolean;
+            nonce?: string;
+            viewport: Window;
+            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
+            VODPlayer?: typeof VODPlayer;
+            overlappingActionBarHeight?: number;
+        }`]; }
 }
 
 // This file is part of the bwip-js project available at:
@@ -7352,7 +7750,7 @@ function bwipp_pdf417() {
             if ((($get($_.msg, $_.i) >= 0) && ($get($_.numtext, $_.i) < 5)) && ($get($_.numdigits, $_.i) < 13)) { //#17032
                 $put($_.numbytes, $_.i, $f($get($_.numbytes, $_.i + 1) + 1)); //#17031
             } //#17031
-            $put($_.iseci, $_.i, $get($_.msg, $_.i) <= -1000000); //#17033
+            $put($_.iseci, $_.i, $get($_.msg, $_.i) <= -1e6); //#17033
         } //#17033
         $_.numdigits = $geti($_.numdigits, 0, $_.msglen); //#17035
         $_.numtext = $geti($_.numtext, 0, $_.msglen); //#17036
@@ -7606,7 +8004,7 @@ function bwipp_pdf417() {
                             $_.nextecitext = false; //#17228
                             break; //#17228
                         } //#17228
-                        if ($get($get($_.seq, $_.ti), 0) > -1000000) { //#17229
+                        if ($get($get($_.seq, $_.ti), 0) > -1e6) { //#17229
                             break; //#17229
                         } //#17229
                         $_.nextecitext = true; //#17230
@@ -7803,7 +8201,7 @@ function bwipp_pdf417() {
             } //#17333
             $_.chars = $get($_.seq, $_.i); //#17334
             if ($eq($type($_.chars), 'arraytype')) { //#17348
-                if ($get($_.chars, 0) <= -1000000) { //#17339
+                if ($get($_.chars, 0) <= -1e6) { //#17339
                     $k[$j++] = $_.chars; //#17337
                     $_.ence(); //#17337
                     $_.addtocws(); //#17337
@@ -8606,7 +9004,7 @@ function bwipp_qrcode() {
         } else { //#20441
             $put($_.nextAs, $_.i, $f($get($_.nextAs, $_.i + 1) + 1)); //#20441
         } //#20441
-        $put($_.isECI, $_.i, $_.barchar <= -1000000); //#20443
+        $put($_.isECI, $_.i, $_.barchar <= -1e6); //#20443
     } //#20443
     for (var _6K = 0, _6J = $_.msglen - 1; _6K <= _6J; _6K += 1) { //#20451
         $_.i = _6K; //#20446
@@ -13847,7 +14245,7 @@ function stbtt__new_active(e, off_x, start_point) {
         fdx:dxdy,
         fdy:dxdy != 0.0 ? (1.0 / dxdy) : 0.0,
         fx:(e.x0 + dxdy * (start_point - e.y0)) - (off_x|0),
-        direction:e.invert ? 1.0 : -1.0,
+        direction:e.invert ? 1.0 : -1,
         sy:e.y0,
         ey:e.y1,
         next:0,
@@ -14535,12 +14933,9 @@ class WidgetBase {
         this.localData = extend({}, this.savedData ?? {}, localData);
     }
     onStart() {
-        // add active class for enable animation
-        this.element.classList.add("active");
         this.startReadyResolve();
     }
     onStop() {
-        this.element.classList.remove("active");
         this.resetStartReadyPromise();
     }
     onPause() { }
@@ -16952,7 +17347,10 @@ class Formatter {
     get locale() {
         return this.context.determineLocale();
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n        determineLocale: () => string;\n        i18n: { t: (key: string) => string; tc: (key: string, value: string | number) => string } | undefined;\n    }`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
+        determineLocale: () => string;
+        i18n: { t: (key: string) => string; tc: (key: string, value: string | number) => string } | undefined;
+    }`]; }
 }
 const formatter = new Formatter({ determineLocale, i18n: undefined });
 
@@ -17256,7 +17654,13 @@ class WidgetProducts extends WidgetBase {
             if (!this.linkTarget.length) {
                 return { message: this.msgServiceError ?? "", models: [] };
             }
-            const path = `product/offer?id=${this.linkTarget.join(",")}`;
+            const searchParams = new URLSearchParams();
+            searchParams.set("id", this.linkTarget.join(","));
+            const sdkClientVariables = this.widgetDeps.getSdkClientVariables();
+            if (sdkClientVariables != null && sdkClientVariables.pos != null) {
+                searchParams.set("pos", String(sdkClientVariables.pos));
+            }
+            const path = `product/offer?${searchParams.toString()}`;
             const headers = {
                 accept: "application/json",
                 "Content-Type": "application/json",
@@ -19929,6 +20333,9 @@ class WidgetTooltip extends WidgetBase {
         const tooltipGeometry = this.tooltipElement?.parentElement;
         const triggerGeometry = this.triggerElement?.parentElement;
         if (tooltipGeometry != null && triggerGeometry != null) {
+            if (!this.disableTimer) {
+                this.onWidgetRequirePauseUI();
+            }
             this.computePositionForTooltip(this.getBox(triggerGeometry), this.getBox(tooltipGeometry));
             addClass(tooltipGeometry, "popper__popper--shown");
             this.env.requestAnimationFrame(() => {
@@ -19939,6 +20346,9 @@ class WidgetTooltip extends WidgetBase {
         this._statEventWidgetClick();
     }
     closeTooltip() {
+        if (!this.disableTimer) {
+            this.onWidgetRequireResumeUI();
+        }
         const tooltipGeometry = this.tooltipElement?.parentElement;
         if (tooltipGeometry != null) {
             addClass(tooltipGeometry, "popper__popper--hidden");