@inappstory/slide-api 0.1.23 → 0.1.24

package/dist/index.js

@@ -819,13 +819,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;
@@ -911,7 +916,6 @@ const animationApi = {
             }
         }
         else {
-            addClass(slide, "animation-fallback");
             const animations = [];
             // просто Array
             var elements = slide.querySelectorAll(".narrative-element-animation");
@@ -3219,6 +3223,7 @@ class Layer {
             this.sdkApi.isIOS && this._nodeRef.classList.add("_isIos");
             this.sdkApi.isAndroid && this._nodeRef.classList.add("_isAndroid");
         }
+        this.sdkApi.cardAnimation?.init(this._nodeRef);
         const promises = this._elements.map(element => element.init(localData));
         return promises;
     }
@@ -3822,7 +3827,7 @@ class Slide {
     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`]; }
 }
 
-class CardApi {
+let SlideApi$1 = class SlideApi {
     config;
     get layoutDirection() {
         // warning, detection in ctor not working, bcz sdk changes layout later
@@ -3836,7 +3841,6 @@ class CardApi {
     _getViewportHeight;
     _overlappingActionBarHeight;
     _separateUserAndAppPause;
-    _index;
     sdkApi;
     constructor(config) {
         this.config = config;
@@ -3847,10 +3851,10 @@ class CardApi {
         this._getViewportHeight = config.getViewportHeight;
         this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
         this._separateUserAndAppPause = config.separateUserAndAppPause;
-        this._index = config.index;
-    }
-    checkAndInitPreloadedInLayoutSlide(slideLoadedCb) {
-        // for sdk backward compatibility
+        this.refreshSizes = proxy(this.refreshSizes, this);
+        this.getSdkClientVariables = proxy(this.getSdkClientVariables, this);
+        this.initListeners();
+        this.refreshSizes();
         const slideBox = document.getElementById("narrative-slide-box");
         // todo via first child and its innerText - faster variant
         if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
@@ -3858,45 +3862,121 @@ class CardApi {
             this._slideInRender = true;
             this._init(() => this._slideBoxRenderComplete(null)).then(({ slide, result, reason }) => {
                 this._slide = slide;
-                if (slideLoadedCb != null) {
-                    slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
+                if (config.slideLoadedCb != null) {
+                    config.slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
                 }
             });
         }
     }
-    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 {
-                this.slideOffsetElement.classList.remove("narrative-slide-offset-fullscreen");
-            }
-        }
-    }
-    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.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";
+            }
+            else {
+                // вьюпорт более вытянутый чем надо
+                // fit by height, sides - to offscreen
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
+                }
+                xOffset = offset + "px";
+            }
+        }
+        const fontSize = slideWidth / 20;
+        // todo CSP violation
+        this._slideWrapper.style.fontSize = fontSize + "px";
+        if (slideOffset != null) {
+            // todo CSP violation
+            slideOffset.style.setProperty("--y-offset", yOffset);
+            slideOffset.style.setProperty("--x-offset", xOffset);
+        }
+        if (_isFullscreen) {
+            slideOffset?.classList.add("narrative-slide-offset-fullscreen");
+        }
+        if (this.config.userResizeHandler != null) {
+            this.config.userResizeHandler({ viewportWidth, viewportHeight, fontSize });
+        }
+    }
     async showSlide(html) {
-        const slideBox = this._slideWrapper.querySelector(`.${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) {
@@ -3905,9 +3985,7 @@ class CardApi {
             }
             this._slideInInit = null;
             this._slideInRender = true;
-            if (html != null) {
-                slideBoxPrerender.innerHTML = html;
-            }
+            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;
@@ -3916,7 +3994,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;
@@ -4021,9 +4099,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.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`));
         if (!slidesNodesRefs.length && slideNodeRef != null) {
             slidesNodesRefs.push(slideNodeRef);
         }
@@ -4034,7 +4112,7 @@ 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.sdkApi.showNextSlide.bind(this), this.sdkApi, this._slideWrapper, () => this.layoutDirection, this.slidePauseUI.bind(this), this.slideResumeUI.bind(this), this.getSdkClientVariables);
         this._slideInInit = slide;
         slide.activeLayer.timeline.triggerSlideLoadState();
         if (this.sdkApi.isAndroid) {
@@ -4096,12 +4174,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.)
@@ -4125,7 +4203,7 @@ class CardApi {
                 else {
                     resolve();
                 }
-                slideBoxPrerender.classList.add(CardApi.renderedBoxClassName);
+                slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
             }
             else {
                 resolve();
@@ -4964,424 +5042,6 @@ class CardApi {
             }
         }
     }
-    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;
@@ -5401,8 +5061,6 @@ let SlideApi$1 = class SlideApi {
             getViewportHeight: () => number;
             overlappingActionBarHeight?: number;
             separateUserAndAppPause: boolean;
-            root: HTMLElement;
-            nonce?: string;
         }`]; }
 };
 
@@ -5454,8 +5112,6 @@ 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;
@@ -17652,13 +17308,12 @@ 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",