@inappstory/slide-api 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -1045,6 +1045,12 @@ class EsModuleSdkApi {
     constructor(sdkBinding) {
         this.sdkBinding = sdkBinding;
     }
+    onWidgetRequirePauseUI() {
+        return this.sdkBinding.onWidgetRequirePauseUI();
+    }
+    onWidgetRequireResumeUI() {
+        return this.sdkBinding.onWidgetRequireResumeUI();
+    }
     getCardServerData(cardId) {
         return this.sdkBinding.getCardServerData(cardId);
     }
@@ -1138,8 +1144,8 @@ class EsModuleSdkApi {
     isSdkSupportUpdateTimeline() {
         return true;
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     cardPausedCallback(currentTime) { }
     cardResumedCallback(currentTime) { }
@@ -1185,6 +1191,18 @@ class EsModuleSdkApi {
         // console.log("onCardLoadingStateChange", { state });
         this.sdkBinding.onCardLoadingStateChange(state, reason);
     }
+    get isSdkSupportProductCart() {
+        return true;
+    }
+    productCartUpdate(data) {
+        return this.sdkBinding.productCartUpdate(data);
+    }
+    productCartGetState() {
+        return this.sdkBinding.productCartGetState();
+    }
+    productCartClicked() {
+        this.sdkBinding.productCartClicked();
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`]; }
 }
 
@@ -3413,7 +3431,7 @@ class SlideTimeline {
         await this.slideReady.then();
         // 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} showLoader: ${showLoader} showError: ${showError}`);
-        this.slideApiDeps.updateTimeline(this.slideIndex, action, currentTime, duration, showLoader, showError);
+        await this.slideApiDeps.updateTimeline(this.slideIndex, action, currentTime, duration, showLoader, showError);
         if (action === "pause" /* TIMELINE_ACTION.PAUSE */ && showLoader) {
             this.dataWaitingStartedAt = Date.now();
         }
@@ -3439,13 +3457,13 @@ class SlideTimeline {
      * Start timeline after slide started
      * Nothing do if old sdk
      */
-    slideStarted() {
+    async 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
-            this.updateTimeline("start" /* TIMELINE_ACTION.START */);
+            await this.updateTimeline("start" /* TIMELINE_ACTION.START */);
         }
     }
     slideRestarted() {
@@ -3651,10 +3669,20 @@ class Layer {
             });
         };
         const onWidgetRequirePauseUI = (cardId, slideIndex) => {
-            this._slidePauseUI();
+            if (this.slideApiDeps.isWeb) {
+                this.slideApiDeps.onWidgetRequirePauseUI();
+            }
+            else {
+                this._slidePauseUI();
+            }
         };
         const onWidgetRequireResumeUI = (cardId, slideIndex) => {
-            this._slideResumeUI();
+            if (this.slideApiDeps.isWeb) {
+                this.slideApiDeps.onWidgetRequireResumeUI();
+            }
+            else {
+                this._slideResumeUI();
+            }
         };
         const _elementsNodes = this._nodeRef.querySelectorAll(".narrative-slide-elements .narrative-element:not(.narrative-element-child-element)");
         let layerWithWidgetQuest = false;
@@ -3893,7 +3921,7 @@ class Layer {
         }
         // skip start timeline if we returned to slide with enabled timer and opened WidgetProducts modal
         if (!this.isLayerForcePaused) {
-            this.timeline.slideStarted();
+            await this.timeline.slideStarted();
         }
         return { currentTime };
     }
@@ -5488,6 +5516,12 @@ class SlideApiDepsMultiSlideMode {
         this.sdkApi = sdkApi;
         this.slider = slider;
     }
+    onWidgetRequirePauseUI() {
+        return this.sdkApi.onWidgetRequirePauseUI();
+    }
+    onWidgetRequireResumeUI() {
+        return this.sdkApi.onWidgetRequireResumeUI();
+    }
     getWidgetsSharedData(cardId, widget) {
         return this.sdkApi.getWidgetsSharedData(cardId, widget);
     }
@@ -5611,6 +5645,18 @@ class SlideApiDepsMultiSlideMode {
     showLayer(index) {
         this.sdkApi.showLayer(index);
     }
+    get isSdkSupportProductCart() {
+        return this.sdkApi.isSdkSupportProductCart;
+    }
+    productCartUpdate(data) {
+        return this.sdkApi.productCartUpdate(data);
+    }
+    productCartGetState() {
+        return this.sdkApi.productCartGetState();
+    }
+    productCartClicked() {
+        this.sdkApi.productCartClicked();
+    }
     /**
      * For single slide mode - proxy these methods via SDKApi
      * =================================================================================================================
@@ -5624,8 +5670,8 @@ class SlideApiDepsMultiSlideMode {
     isSdkSupportUpdateTimeline() {
         return true;
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     isSdkSupportTimelineOnBeforeStart() {
         return true;
@@ -5644,6 +5690,12 @@ class SlideApiDepsSingleSlideMode {
     constructor(sdkApi) {
         this.sdkApi = sdkApi;
     }
+    onWidgetRequirePauseUI() {
+        return this.sdkApi.onWidgetRequirePauseUI();
+    }
+    onWidgetRequireResumeUI() {
+        return this.sdkApi.onWidgetRequireResumeUI();
+    }
     getWidgetsSharedData(cardId, widget) {
         return this.sdkApi.getWidgetsSharedData(cardId, widget);
     }
@@ -5765,6 +5817,18 @@ class SlideApiDepsSingleSlideMode {
     showLayer(index) {
         this.sdkApi.showLayer(index);
     }
+    get isSdkSupportProductCart() {
+        return this.sdkApi.isSdkSupportProductCart;
+    }
+    productCartUpdate(data) {
+        return this.sdkApi.productCartUpdate(data);
+    }
+    productCartGetState() {
+        return this.sdkApi.productCartGetState();
+    }
+    productCartClicked() {
+        this.sdkApi.productCartClicked();
+    }
     /**
      * For single slide mode - proxy these methods via SDKApi
      */
@@ -5777,8 +5841,8 @@ class SlideApiDepsSingleSlideMode {
     isSdkSupportUpdateTimeline() {
         return this.sdkApi.isSdkSupportUpdateTimeline();
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     isSdkSupportTimelineOnBeforeStart() {
         return this.sdkApi.isSdkSupportTimelineOnBeforeStart();
@@ -5942,6 +6006,8 @@ class Slider {
         });
     }
     isAnimating = false;
+    // block click while slide loading and starting (prevent several timeline starting)
+    isSlideStarting = false;
     activeIndex = -1;
     get activeSlide() {
         return this.slides[this.activeIndex];
@@ -5958,7 +6024,7 @@ class Slider {
             css += `--navbar-edge-offset: ${navbarAppearance.edge_offset};`;
         }
         if (navbarAppearance.active_timeline_width != null) {
-            css += `--navbar-active-timeline_width: ${navbarAppearance.active_timeline_width};`;
+            css += `--navbar-active-timeline-width: ${navbarAppearance.active_timeline_width};`;
         }
         if (navbarAppearance.background_color != null) {
             css += `--navbar-background-color: ${navbarAppearance.background_color};`;
@@ -6051,25 +6117,28 @@ class Slider {
             bullets.classList.add("cards-slider__navbar--position-bottom");
         }
         bullets.dir = getLayoutDirection();
-        for (let i = 0; i < count; ++i) {
-            const bullet = document.createElement("div");
-            bullet.classList.add("cards-slider__timeline", "touchable");
-            bullet.setAttribute("data-index", String(i));
-            bullet.onclick = (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                const bullet = e.target;
-                if (bullet != null) {
-                    const index = bullet.dataset.index;
-                    if (index != null) {
-                        this.showByIndex(parseInt(index));
+        // skip creating view elements for single slide
+        if (count > 1) {
+            for (let i = 0; i < count; ++i) {
+                const bullet = document.createElement("div");
+                bullet.classList.add("cards-slider__timeline", "touchable");
+                bullet.setAttribute("data-index", String(i));
+                bullet.onclick = (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const bullet = e.target;
+                    if (bullet != null) {
+                        const index = bullet.dataset.index;
+                        if (index != null) {
+                            this.showByIndex(parseInt(index));
+                        }
                     }
-                }
-            };
-            const bulletFill = document.createElement("div");
-            bulletFill.classList.add("cards-slider__timeline-fill");
-            bullet.append(bulletFill);
-            bullets.appendChild(bullet);
+                };
+                const bulletFill = document.createElement("div");
+                bulletFill.classList.add("cards-slider__timeline-fill");
+                bullet.append(bulletFill);
+                bullets.appendChild(bullet);
+            }
         }
         // const onUpdateActiveIndex = (activeIndex: number) => {
         //     if (activeIndex >= 0 && activeIndex < count) {
@@ -6097,42 +6166,25 @@ class Slider {
     }
     async showByIndex(newIndex) {
         const prevIndex = this.activeIndex;
-        if (this.isAnimating)
+        if (this.isAnimating) {
             return prevIndex;
-        if (newIndex === prevIndex)
-            return prevIndex;
-        if (prevIndex !== -1) {
-            // skip for slider start
-            this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
-            await this.config.onSlideStop();
-        }
-        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
-        if (loadingError) {
-            // todo via updateTimeline ????
-            this.config.onSlideLoadingError(index, loadingError);
         }
-        if (!loadingError) {
-            this.onShowSlide(index);
-        }
-        await this.slideTo(index);
-        if (!loadingError) {
-            this.config.onSlideStart();
+        if (this.isSlideStarting) {
+            // block click while slide loading and starting (prevent several timeline starting)
+            return prevIndex;
         }
-        return newIndex;
-    }
-    async showNextSlide() {
-        const prevIndex = this.activeIndex;
-        if (this.isAnimating)
+        if (newIndex === prevIndex) {
             return prevIndex;
-        const newIndex = prevIndex + 1;
+        }
         if (newIndex < 0 || newIndex >= this.slides.length) {
-            return null;
+            return prevIndex;
         }
         if (prevIndex !== -1) {
             // skip for slider start
             this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
             await this.config.onSlideStop();
         }
+        this.isSlideStarting = true;
         const { index, loadingError } = await this.initAndRenderSlide(newIndex);
         if (loadingError) {
             // todo via updateTimeline ????
@@ -6141,12 +6193,16 @@ class Slider {
         if (!loadingError) {
             this.onShowSlide(index);
         }
-        await this.slideTo(index);
+        this.config.onSlideChangeActiveIndex(await this.slideTo(index));
         if (!loadingError) {
-            this.config.onSlideStart();
+            await this.config.onSlideStart();
         }
+        this.isSlideStarting = false;
         return newIndex;
     }
+    async showNextSlide() {
+        return this.showByIndex(this.activeIndex + 1);
+    }
     async initAndRenderSlide(index) {
         this.config.onBeforeLoadSlide(index);
         let showSlidePromise;
@@ -6194,11 +6250,13 @@ class Slider {
         return k * index * cardWidth;
     }
     async slideTo(index, speed = 300) {
-        if (index < 0 || index > this.slides.length - 1 || this.isAnimating)
-            return;
+        if (index < 0 || index > this.slides.length - 1 || this.isAnimating) {
+            return this.activeIndex;
+        }
         const cardOffset = this.getSlideOffset(index);
         await this.translateTo(cardOffset, speed);
         this.activeIndex = index;
+        return this.activeIndex;
     }
     setTranslate(value) {
         this.sliderTrack?.style.setProperty("transform", `translateX(${value}px)`);
@@ -6237,7 +6295,7 @@ class Slider {
             this.config.root.removeChild(this.slideWrapperElement);
         }
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+    async 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)
@@ -6311,6 +6369,7 @@ class Slider {
             getLayoutDirection: GetLayoutDirection;
 
             onSlideTimerEnd: OnSlideTimerEnd;
+            onSlideChangeActiveIndex: OnSlideChangeActiveIndex;
             onSlideStart: OnSlideStart;
             onSlideStop: OnSlideStop;
             onSlideDataWaiting: OnSlideDataWaiting;
@@ -6699,6 +6758,7 @@ class CardApi {
             onSlideLeft,
             getLayoutDirection: () => this.layoutDirection,
             onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
+            onSlideChangeActiveIndex: index => (this.activeSlide = this.slides[index].slide),
             onSlideStart: () => {
                 // return Promise.resolve({currentTime: 0});
                 this.cardLoadingStateController.onSetLoadEndState();
@@ -6797,11 +6857,7 @@ class CardApi {
             else if (index < 0) {
                 index = this.slides.length - 1;
             }
-            this.slider.showByIndex(index).then(index => {
-                if (currentIndex === index)
-                    return;
-                this.activeSlide = this.slides[index].slide;
-            });
+            this.slider.showByIndex(index);
         }
         return result;
     }
@@ -18953,6 +19009,852 @@ class SwipeGestureDetector {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `boolean`, `(e: MouseEvent | TouchEvent) => boolean`, `(e: MouseEvent | TouchEvent) => void`, `(e: MouseEvent | TouchEvent) => void`, `(e: MouseEvent | TouchEvent, gesture: SwipeGesture) => void`]; }
 }
 
+class RenderableComponent {
+    _root = null;
+    props;
+    constructor(props) {
+        this.props = (props ?? {});
+    }
+    render() {
+        const newRoot = this.renderTemplate();
+        const style = this.styleContent();
+        if (style) {
+            newRoot?.prepend(this.createStyleElement(style));
+        }
+        if (this._root) {
+            this._root.replaceWith(newRoot ?? "");
+        }
+        this._root = newRoot;
+        return this._root;
+    }
+    updateProps(props) {
+        this.props = { ...this.props, ...props };
+        this.render();
+    }
+    destroy() {
+        this._root?.remove();
+        this._root = null;
+    }
+    createStyleElement(css) {
+        const styleEl = document.createElement("style");
+        styleEl.textContent = css;
+        return styleEl;
+    }
+    styleContent() {
+        return "";
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Props`]; }
+}
+
+function h(tag, ...rest) {
+    let props = {};
+    let children = [];
+    if (rest[0] && typeof rest[0] === "object" && !(rest[0] instanceof Node)) {
+        props = rest.shift();
+    }
+    children = rest.flat();
+    const el = document.createElement(tag);
+    for (const [key, value] of Object.entries(props)) {
+        if (value == null)
+            continue;
+        if (key === "class" || key === "className") {
+            el.className = value;
+        }
+        else if (key === "textContent") {
+            el.textContent = value;
+        }
+        else if (key === "html" || key === "innerHTML") {
+            el.innerHTML = value;
+        }
+        else if (key === "ref" && typeof value === "function") {
+            value(el);
+        }
+        else if (key.startsWith("data-")) {
+            el.setAttribute(key, value);
+        }
+        else if (key.startsWith("on") && typeof value === "function") {
+            const event = key.slice(2).toLowerCase();
+            el.addEventListener(event, value);
+        }
+        else if (key in el) {
+            // @ts-ignore — any valid DOM props
+            el[key] = value;
+        }
+        else {
+            el.setAttribute(key, value);
+        }
+    }
+    for (const child of children) {
+        if (child == null)
+            continue;
+        if (typeof child === "string") {
+            el.appendChild(document.createTextNode(child));
+        }
+        else {
+            el.appendChild(child);
+        }
+    }
+    return el;
+}
+
+class BottomSheet extends RenderableComponent {
+    isClosing = false;
+    _isOpened = false;
+    constructor(props) {
+        super(props ?? {});
+    }
+    get isOpened() {
+        return this._isOpened;
+    }
+    renderTemplate() {
+        // TODO: calculate border-radius;
+        const borderRadius = 30;
+        return h("div", { class: `ias-bottom-sheet ${this._isOpened ? "ias-bottom-sheet--open" : ""}` }, h("div", {
+            class: "ias-bottom-sheet__backdrop",
+            onClick: this.handleBackdropClick,
+        }), h("div", {
+            class: "ias-bottom-sheet__container",
+            style: this.props.minHeight != null ? `min-height: ${this.props.minHeight + borderRadius}px` : "",
+        }, h("div", { class: "ias-bottom-sheet__content" }, 
+        /* h("div", { class: "ias-bottom-sheet__header" }), */
+        h("div", { class: "ias-bottom-sheet__body" }, ...(this.props?.children?.map(c => c.render()) ?? [])))));
+    }
+    setMinHeight(height) {
+        if (!this._root)
+            return;
+        const container = this._root.querySelector(".ias-bottom-sheet__container");
+        if (!container)
+            return;
+        container.style.minHeight = `${height}px`;
+    }
+    open() {
+        if (this.isOpened)
+            return;
+        this._isOpened = true;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this._root?.classList.add("ias-bottom-sheet--open");
+            });
+        });
+    }
+    async close() {
+        if (!this._root || this.isClosing)
+            return;
+        const root = this._root;
+        root.classList.remove("ias-bottom-sheet--open");
+        this.isClosing = true;
+        await new Promise(resolve => {
+            root.addEventListener("transitionend", () => resolve(), { once: true });
+        });
+        this.isClosing = false;
+        this.props?.onClose?.();
+    }
+    handleBackdropClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.close();
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`BottomSheetProps`]; }
+}
+
+class ProductDetailsDescription extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        const { name, description } = this.props;
+        return h("div", { class: "ias-product-details__description" }, name ? h("h6", { class: "ias-product-details__name", textContent: name }) : null, description ? h("p", { class: "ias-product-details__text", textContent: description }) : null);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsDescriptionProps`]; }
+}
+
+class ProductDetailsGallery extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        const { imageUrls = [] } = this.props;
+        return h("div", { class: "ias-product-details__gallery" }, imageUrls.map(url => h("figure", { class: "ias-product-details__image" }, h("img", { src: url /* , loading: "lazy" */ }))));
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsGalleryProps`]; }
+}
+
+const ADD_TO_CART_TIMEOUT = 60000;
+
+class ProductDetailsPurchaseAction extends RenderableComponent {
+    button;
+    isLoading = false;
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        this.button = h("button", {
+            class: "ias-product-details__action-button",
+            textContent: this.props.translations.addToCart,
+            onClick: this.handleClickAddToCart,
+        });
+        return this.button;
+    }
+    handleClickAddToCart = async () => {
+        if (this.isLoading)
+            return;
+        try {
+            this.isLoading = true;
+            this.showLoader();
+            await this.addToCart();
+        }
+        catch (error) {
+            this.handleAddToCartError(error);
+        }
+        finally {
+            this.hideLoader();
+            this.isLoading = false;
+        }
+    };
+    showLoader() {
+        this.button.classList.add("ias-product-details__action-button--loading");
+    }
+    hideLoader() {
+        this.button.classList.remove("ias-product-details__action-button--loading");
+    }
+    handleAddToCartError(error) {
+        this.props.onAddToCartError({ error });
+    }
+    async addToCart() {
+        await Promise.race([this.props.onAddToCart(), new Promise((resolve, reject) => setTimeout(reject, ADD_TO_CART_TIMEOUT))]);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsPurchaseActionProps`]; }
+}
+
+class ProductDetailsPurchasePrice extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        const { price, oldPrice, currency } = this.props.product;
+        const rootEl = h("div", { class: "ias-product-details__price" });
+        if (price != null && currency) {
+            const currentPriceEl = h("div", {
+                class: "ias-product-details__current-price",
+                html: formatter.asCurrency(price, currency),
+            });
+            rootEl.appendChild(currentPriceEl);
+        }
+        if (oldPrice != null && currency) {
+            const oldPriceEl = h("div", {
+                class: "ias-product-details__old-price",
+                html: formatter.asCurrency(oldPrice, currency),
+            });
+            rootEl.appendChild(oldPriceEl);
+        }
+        return rootEl;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsPurchasePriceProps`]; }
+}
+
+class ProductDetailsCounter extends RenderableComponent {
+    _value = 1;
+    countElement = null;
+    get value() {
+        return this._value;
+    }
+    updateProps() {
+        this._value = 1;
+        this.render();
+    }
+    renderTemplate() {
+        return h("div", { class: "ias-product-details__counter" }, h("button", {
+            class: "ias-product-details__counter-button",
+            textContent: "−",
+            onClick: this.handleClickOnMinusButton,
+        }), h("span", {
+            class: "ias-product-details__counter-count",
+            textContent: this._value.toString(),
+            ref: (el) => (this.countElement = el),
+        }), h("button", {
+            class: "ias-product-details__counter-button",
+            textContent: "+",
+            onClick: this.handleClickOnPlusButton,
+        }));
+    }
+    handleClickOnMinusButton = () => {
+        this._value = Math.max(this._value - 1, 1);
+        this.updateCountValue();
+    };
+    handleClickOnPlusButton = () => {
+        this._value++;
+        this.updateCountValue();
+    };
+    updateCountValue() {
+        if (this.countElement) {
+            this.countElement.textContent = this._value.toString();
+        }
+    }
+}
+
+class ProductDetailsPurchase extends RenderableComponent {
+    price;
+    action;
+    counter = new ProductDetailsCounter();
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        this.price = new ProductDetailsPurchasePrice(this.props);
+        this.action = new ProductDetailsPurchaseAction({
+            onAddToCart: this.handleOnAddToCart,
+            onAddToCartError: this.props.onAddToCartError,
+            translations: this.props.translations,
+        });
+        return h("div", { class: "ias-product-details__purchase" }, h("div", { class: "ias-product-details__price-box" }, this.price.render(), this.counter.render()), this.action.render());
+    }
+    updateProps(props) {
+        this.props = { ...this.props, ...props };
+        this.price.updateProps(this.props);
+        this.counter.updateProps();
+    }
+    handleOnAddToCart = async () => {
+        return this.props.onAddToCart({
+            quantity: this.counter.value,
+            product: this.props.product,
+        });
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsPurchaseProps`]; }
+}
+
+class ProductOptionButton extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        const params = {
+            class: `ias-product-details__option-button ${this.props.selected ? "ias-product-details__option-button--active" : ""} ${this.props.disabled ? "ias-product-details__option-button--disabled" : ""}`,
+            textContent: this.props.label,
+            onclick: () => {
+                this.props.onClick();
+            },
+        };
+        return h("button", params);
+    }
+    setSelected(selected) {
+        if (!this._root)
+            return;
+        if (selected)
+            this._root.classList.add("ias-product-details__option-button--active");
+        else
+            this._root.classList.remove("ias-product-details__option-button--active");
+    }
+    setDisabled(disabled) {
+        if (!this._root)
+            return;
+        if (disabled)
+            this._root.classList.add("ias-product-details__option-button--disabled");
+        else
+            this._root.classList.remove("ias-product-details__option-button--disabled");
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductOptionButtonProps`]; }
+}
+
+class ProductOptionsManager {
+    optionNames;
+    productVariants;
+    subscribers = [];
+    selectedOptions = {};
+    allOptionsByName = {};
+    availableOptionsByName = {};
+    constructor(optionNames, productVariants) {
+        this.optionNames = optionNames;
+        this.productVariants = productVariants;
+        this.allOptionsByName = this.extractAllOptions();
+    }
+    get selected() {
+        return { ...this.selectedOptions };
+    }
+    get availableOptions() {
+        return this.availableOptionsByName;
+    }
+    selectOption(option) {
+        const compatibleVariants = this.findCompatibleVariants(option);
+        this.ensureVariantsExist(option, compatibleVariants);
+        const matchingVariant = this.findMatchingVariant(compatibleVariants);
+        this.selectVariant(matchingVariant);
+    }
+    selectVariant(variant) {
+        this.optionNames.forEach(name => {
+            const currentSelected = this.selectedOptions[name];
+            const newOption = variant.options[name];
+            if (currentSelected && newOption && currentSelected.value === newOption.value) {
+                this.selectedOptions[name] = currentSelected;
+            }
+            else {
+                this.selectedOptions[name] = newOption;
+            }
+        });
+        this.availableOptionsByName = this.extractAvailableOptions();
+        this.notifySubscribers(variant);
+    }
+    onChange(callback) {
+        this.subscribers.push(callback);
+    }
+    isOptionSelected(option) {
+        return this.selected[option.name]?.value === option.value;
+    }
+    isOptionDisabled(option) {
+        const options = this.availableOptions[option.name];
+        return !options?.some(o => o.value === option.value);
+    }
+    getOptionsFor(name) {
+        return this.allOptionsByName[name] ?? [];
+    }
+    findCompatibleVariants(option) {
+        return this.productVariants.filter(variant => variant.options[option.name]?.value === option.value);
+    }
+    ensureVariantsExist(option, variants) {
+        if (variants.length === 0) {
+            throw new Error(`[IAS]: No compatible variant for option <${option.name}:${option.value}>`);
+        }
+    }
+    findMatchingVariant(variants) {
+        return (variants.find(variant => this.optionNames.every(name => !this.selectedOptions[name] || variant.options[name]?.value === this.selectedOptions[name]?.value)) ?? variants[0]);
+    }
+    extractAvailableOptions() {
+        const result = {};
+        for (const name of this.optionNames) {
+            const filteredVariants = this.filterVariantsExcludingOption(name);
+            const available = filteredVariants.filter(v => v.available && v.options[name]).map(v => v.options[name]);
+            result[name] = this.getUniqueByKey(available, o => o.value);
+        }
+        return result;
+    }
+    filterVariantsExcludingOption(excludedName) {
+        const filters = { ...this.selectedOptions };
+        delete filters[excludedName];
+        return this.productVariants.filter(variant => Object.entries(filters).every(([name, selected]) => variant.options[name]?.value === selected?.value));
+    }
+    extractAllOptions() {
+        const all = {};
+        for (const name of this.optionNames) {
+            const options = this.productVariants.map(v => v.options[name]).filter(Boolean);
+            all[name] = this.getUniqueByKey(options, o => o.value);
+        }
+        return all;
+    }
+    getUniqueByKey(items, getKey) {
+        return items.filter((item, index, self) => index === self.findIndex(i => getKey(i) === getKey(item)));
+    }
+    notifySubscribers(variant) {
+        this.subscribers.forEach(cb => cb(variant));
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductOptionName[]`, `ProductVariant[]`]; }
+}
+
+class ProductOptions extends RenderableComponent {
+    optionsManager;
+    optionsContainer;
+    optionButtonsMap = new Map();
+    constructor(props) {
+        super(props);
+        this.optionsManager = new ProductOptionsManager(props.optionNames, props.products);
+        this.init(props.products);
+    }
+    renderTemplate() {
+        this.optionsContainer = h("div", { class: "ias-product-details__options" }, this.renderOptionSelectors());
+        return this.optionsContainer;
+    }
+    init(products) {
+        this.optionsManager.selectVariant(products[0]);
+        this.optionsManager.onChange(variant => {
+            this.updateButtonsState();
+            this.props.onChange(variant);
+        });
+    }
+    renderOptionSelectors() {
+        return this.props.optionNames.map(optionName => this.optionsManager.getOptionsFor(optionName).length > 0
+            ? h("div", { class: "ias-product-details__selector" }, h("div", { class: "ias-product-details__selector-name", textContent: this.getOptionLabelByName(optionName) }), h("div", { class: "ias-product-details__option-selector" }, this.renderOptionsBySelector(optionName)))
+            : null);
+    }
+    getOptionLabelByName(optionName) {
+        switch (optionName) {
+            case "color":
+                return this.props.translations.color;
+            case "size":
+                return this.props.translations.size;
+        }
+    }
+    renderOptionsBySelector(name) {
+        const options = this.optionsManager.getOptionsFor(name);
+        const buttons = [];
+        const buttonElements = options.map(option => {
+            const disabled = this.optionsManager.isOptionDisabled(option);
+            const selected = this.optionsManager.isOptionSelected(option);
+            const productOptionButton = new ProductOptionButton({
+                selected,
+                label: option.value,
+                disabled,
+                onClick: () => {
+                    this.optionsManager.selectOption(option);
+                },
+            });
+            buttons.push(productOptionButton);
+            return productOptionButton.render();
+        });
+        this.optionButtonsMap.set(name, buttons);
+        return buttonElements;
+    }
+    updateButtonsState() {
+        for (const [optionName, buttons] of this.optionButtonsMap.entries()) {
+            const options = this.optionsManager.getOptionsFor(optionName);
+            buttons.forEach((button, index) => {
+                const option = options[index];
+                const isSelected = this.optionsManager.isOptionSelected(option);
+                const isDisabled = this.optionsManager.isOptionDisabled(option);
+                button.setSelected(isSelected);
+                button.setDisabled(isDisabled);
+            });
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductOptionsProps`]; }
+}
+
+class ProductDetailsCover extends RenderableComponent {
+    renderTemplate() {
+        return h(`div`, { class: "ias-product-details__cover" }, h("img", { src: this.props.src }));
+    }
+    styleContent() {
+        return `
+            .ias-product-details__cover {
+                position: absolute;
+                z-index: -1;
+                inset: 0;
+            }
+
+            .ias-product-details__cover img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        `;
+    }
+}
+
+class ProductDetails extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        const { props } = this;
+        const purchase = new ProductDetailsPurchase(props);
+        const cover = new ProductDetailsCover({
+            src: this.props.product.coverUrl ?? "",
+        });
+        const gallery = new ProductDetailsGallery({
+            imageUrls: this.props.product.imageUrls ?? [],
+        });
+        const description = new ProductDetailsDescription(props.product);
+        const productOptions = this.createProductOptions({ purchase, gallery, description, cover });
+        const relatedProductsLength = this.props.relatedProducts.length ?? 0;
+        return h("div", { class: "ias-product-details" }, 
+        /*             this.props.product.coverUrl ? cover.render() : null, */
+        h("div", { class: "ias-product-details__scrollable" }, gallery.render(), h("div", { class: "ias-product-details__content" }, description.render(), relatedProductsLength > 0 ? productOptions.render() : null)), this.createFooter(purchase));
+    }
+    createProductOptions({ purchase, gallery, description, cover, }) {
+        return new ProductOptions({
+            optionNames: ["color", "size"],
+            products: [this.props.product, ...this.props.relatedProducts],
+            onChange: (product) => {
+                if (this.props.isCartSupported)
+                    purchase.updateProps({ product: product });
+                gallery.updateProps(product);
+                description.updateProps(product);
+                cover.updateProps({
+                    src: product.coverUrl,
+                });
+            },
+            translations: this.props.translations,
+        });
+    }
+    createFooter(purchase) {
+        if (this.props.isCartSupported) {
+            return h("div", { class: "ias-product-details__footer" }, purchase.render());
+        }
+        else if (this.props.product.url) {
+            return h("div", { class: "ias-product-details__footer" }, this.createOpenUrlButton());
+        }
+        return null;
+    }
+    createOpenUrlButton() {
+        return h("button", {
+            class: "ias-product-details__action-button ias-product-details__open-url-button",
+            textContent: this.props.translations.openUrl,
+            onclick: () => {
+                this.props.onOpenUrl();
+            },
+        });
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsProps`]; }
+}
+
+const successSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 14 18 36 8 26"></path></svg>`;
+class ProductCheckout extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        return h("div", { class: "ias-product-checkout" }, h("div", { class: "ias-product-checkout__box" }, h("div", {
+            class: "ias-product-checkout__icon",
+            html: successSvg,
+        }), h("span", {
+            class: "ias-product-checkout__text",
+            textContent: this.props.translations.successAddToCart,
+        }), h("span", {
+            class: "ias-product-checkout__sub-text",
+            textContent: this.props.translations.successSubAddToCart,
+        })), h("div", {
+            class: "ias-product-checkout__actions",
+        }, h("button", {
+            class: "ias-product-checkout__button ias-product-checkout__button--close",
+            textContent: this.props.translations.continueBtn,
+            onclick: () => {
+                this.props.onClose();
+            },
+        }), h("button", {
+            class: "ias-product-checkout__button ias-product-checkout__button--checkout",
+            textContent: this.props.translations.goToCartBtn,
+            onclick: () => {
+                this.props.onCheckout();
+            },
+        })));
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductCheckoutProps`]; }
+}
+
+const cartSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 20 20" fill="none">
+<path stroke="rgba(255, 255, 255, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M4 1.333 2 4v9.333a1.333 1.333 0 0 0 1.333 1.334h9.334A1.334 1.334 0 0 0 14 13.333V4l-2-2.667H4ZM2 4h12"></path>
+<path stroke="rgba(255, 255, 255, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M10.667 6.667a2.667 2.667 0 1 1-5.333 0"></path>
+</svg>`;
+class ProductCartButton extends RenderableComponent {
+    constructor(props) {
+        super(props);
+    }
+    renderTemplate() {
+        return h("div", { class: "ias-product-cart-button", onclick: () => this.props.onClick(), innerHTML: cartSvg });
+    }
+    styleContent() {
+        return `
+            .ias-product-cart-button {
+                position: absolute;
+                left: 0;
+                top: 20%;
+                padding: .25em;
+                padding-left: .5em;
+                background: black;
+                border-top-right-radius: 0.69em;
+                border-bottom-right-radius: 0.69em;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                transition: all 200ms ease-in;
+                transform: translate3d(-.25em, 0, 0);
+            }
+
+            .ias-product-cart-button:hover {
+                transform: translate3d(0, 0, 0);
+            }
+        `;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductCartButtonProps`]; }
+}
+
+class ProductComponentsFactory {
+    widgetDeps;
+    props;
+    constructor(widgetDeps, props) {
+        this.widgetDeps = widgetDeps;
+        this.props = props;
+    }
+    createBottomSheet(props) {
+        const bs = new BottomSheet({
+            onClose: () => {
+                bs.destroy();
+            },
+            children: [],
+            minHeight: props.minHeight,
+        });
+        return bs;
+    }
+    createProductDetails(params) {
+        return new ProductDetails({
+            product: params.product,
+            relatedProducts: params.relatedProducts,
+            onAddToCart: params.onAddToCart,
+            onAddToCartError: ({ error }) => {
+                this.widgetDeps.slideApiDeps.showToast(error.message);
+            },
+            translations: this.props.translations,
+            isCartSupported: params.isCartSupported,
+            onOpenUrl: () => {
+                if (params.product.url)
+                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.product.url } });
+            },
+        });
+    }
+    createProductCheckout(bottomSheet, offers) {
+        const offersByIds = {};
+        for (const offer of offers)
+            offersByIds[offer.offerId] = offer;
+        return new ProductCheckout({
+            onClose: () => bottomSheet.close(),
+            onCheckout: () => {
+                this.widgetDeps.slideApiDeps.productCartClicked();
+            },
+            translations: this.props.translations,
+        });
+    }
+    createProductCartButton() {
+        return new ProductCartButton({
+            onClick: async () => {
+                try {
+                    const state = await this.widgetDeps.slideApiDeps.productCartGetState();
+                    console.log({ cart: state });
+                    this.widgetDeps.slideApiDeps.showToast(JSON.stringify(state.offers.map(({ offerId, name, quantity }) => ({
+                        offerId,
+                        name,
+                        quantity,
+                    }))));
+                }
+                catch (error) {
+                    this.widgetDeps.slideApiDeps.showToast(error.message);
+                }
+            },
+        });
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`WidgetDeps`, `{
+            translations: TranslationsMap;
+        }`]; }
+}
+
+class ProductOfferMapper {
+    static fromOfferDtoToProductOffer(offerDto) {
+        return {
+            id: offerDto.id.toString(),
+            offerId: offerDto.offerId,
+            available: offerDto.availability !== 0,
+            availability: offerDto.availability,
+            options: {
+                color: offerDto.color ? { name: "color", value: offerDto.color } : { name: "color", value: "Undefined" },
+                size: offerDto.size ? { name: "size", value: offerDto.size } : { name: "size", value: "Undefined" },
+            },
+            name: offerDto.name,
+            price: offerDto.price,
+            oldPrice: offerDto.oldPrice,
+            currency: offerDto.currency,
+            description: offerDto.description,
+            imageUrls: offerDto.images?.map(image => image.url) ?? [],
+            adult: offerDto.adult,
+            coverUrl: offerDto.coverUrl,
+            groupId: offerDto.groupId,
+            url: offerDto.url,
+        };
+    }
+    static fromOfferDtoToProductCartOffer(offerDto, quantity) {
+        return {
+            offerId: offerDto.offerId,
+            imageUrls: offerDto.images?.map(image => image.url) ?? [],
+            availability: offerDto.availability,
+            quantity,
+            groupId: offerDto.groupId,
+            name: offerDto.name,
+            description: offerDto.description,
+            url: offerDto.url,
+            coverUrl: offerDto.coverUrl,
+            currency: offerDto.currency,
+            price: offerDto.price,
+            oldPrice: offerDto.oldPrice,
+            adult: offerDto.adult,
+            size: offerDto.size,
+            color: offerDto.color,
+        };
+    }
+}
+
+class ProductDetailsBottomSheet extends RenderableComponent {
+    widgetDeps;
+    factory;
+    bottomSheet;
+    constructor(widgetDeps, props) {
+        super(props);
+        this.widgetDeps = widgetDeps;
+        this.factory = new ProductComponentsFactory(this.widgetDeps, this.props);
+        this.bottomSheet = this.factory.createBottomSheet({ minHeight: props.height });
+    }
+    renderTemplate() {
+        return this.bottomSheet.render();
+    }
+    open(params) {
+        this.showProductDetails(params);
+        this.bottomSheet.open();
+    }
+    showProductDetails = ({ offer, isCartSupported }) => {
+        const factory = new ProductComponentsFactory(this.widgetDeps, this.props);
+        const offerDtos = [offer, ...(offer.subOffersApi ?? [])];
+        this.renderProductDetails({ factory, offer, offerDtos, isCartSupported });
+    };
+    renderProductDetails({ factory, offer, offerDtos, isCartSupported, }) {
+        const { product, relatedProducts } = this.getProductAndRelatedProducts(offer);
+        const productDetails = factory.createProductDetails({
+            product,
+            relatedProducts,
+            onAddToCart: async (payload) => {
+                await this.productCartUpdate({
+                    offerDtos,
+                    product: payload.product,
+                    quantity: payload.quantity,
+                });
+                this.showProductCheckout({ offerDtos });
+            },
+            isCartSupported,
+        });
+        this.updateBottomSheetContent(productDetails);
+    }
+    showProductCheckout({ offerDtos }) {
+        const productCheckout = this.factory.createProductCheckout(this.bottomSheet, offerDtos);
+        this.updateBottomSheetContent(productCheckout);
+    }
+    updateBottomSheetContent(content) {
+        const cartButton = this.factory.createProductCartButton();
+        const children = process.env.NODE_ENV === "staging" ? [cartButton, content] : [content];
+        this.bottomSheet.updateProps({
+            children,
+        });
+    }
+    async productCartUpdate({ offerDtos, product, quantity }) {
+        const offerDto = offerDtos.find(offerDto => product.offerId === offerDto.offerId);
+        if (!offerDto)
+            throw new Error(`[IAS]: Not found offer for ID ${product.offerId}`);
+        const cartOffer = ProductOfferMapper.fromOfferDtoToProductCartOffer(offerDto, quantity);
+        const delay = async () => new Promise(resolve => setTimeout(resolve, 300));
+        const [productCart] = await Promise.all([
+            await await this.widgetDeps.slideApiDeps.productCartUpdate({
+                offer: cartOffer,
+            }),
+            delay(),
+        ]);
+        return productCart.offers;
+    }
+    getProductAndRelatedProducts(offerDto) {
+        return {
+            product: ProductOfferMapper.fromOfferDtoToProductOffer(offerDto),
+            relatedProducts: offerDto.subOffersApi
+                ? offerDto.subOffersApi
+                    .filter(subOffer => subOffer.size != null && subOffer.color != null)
+                    .map(subOffer => ProductOfferMapper.fromOfferDtoToProductOffer(subOffer))
+                : [],
+        };
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`WidgetDeps`, `ProductDetailsBottomSheetProps`]; }
+}
+
 /**
  * adult: null
  * availability: 1
@@ -19018,6 +19920,7 @@ class WidgetProducts extends WidgetBase {
     }
     onStart() {
         super.onStart();
+        this.isLoading = false;
         // reinit for case when we returned to slide from other slide and onStop  destroyed SwipeGestureDetector
         this.initSwipeGestureDetector();
     }
@@ -19102,12 +20005,22 @@ class WidgetProducts extends WidgetBase {
             console.error(error);
         }
     }
+    async getOrFetchProducts() {
+        if (this.currentModels.length > 0)
+            return this.currentModels;
+        const result = await this.fetchProducts();
+        if (result.models.length > 0) {
+            this.currentModels = result.models;
+            return result.models;
+        }
+        throw new Error(result.message);
+    }
     async fetchProducts() {
         const fetchAndCacheMedia = async () => {
             if (!this.linkTarget.length) {
                 return { message: this.msgServiceError ?? "", models: [] };
             }
-            let qs = `id=${this.linkTarget.join(",")}`;
+            let qs = `id=${this.linkTarget.join(",")}&expand=images,subOffersApi`;
             const sdkClientVariables = this.widgetDeps.getSdkClientVariables();
             if (sdkClientVariables != null && sdkClientVariables.pos != null) {
                 qs += `&pos=${String(sdkClientVariables.pos)}`;
@@ -19216,12 +20129,13 @@ class WidgetProducts extends WidgetBase {
     }
     productsView = null;
     isOpen = false;
+    isLoading = false;
     get isForcePaused() {
         return this.isOpen;
     }
     currentModels = [];
     async openProductsView() {
-        if (this.isOpen) {
+        if (this.isOpen || this.isLoading) {
             return;
         }
         this._statEventWidgetClick();
@@ -19231,14 +20145,10 @@ class WidgetProducts extends WidgetBase {
         if (!this.isTransparentElement()) {
             this.element.classList.add("loader");
         }
-        // const start = window.performance.now();
-        const result = await this.fetchProducts();
-        // @ts-ignore
-        // _log(`fetched for ${window.performance.now() - start}ms`, true);
-        // console.log({result})
-        if (result.models.length > 0) {
-            this.currentModels = result.models;
-            this.productsView = this.createProductsView(this.currentModels, this.closeProductsView.bind(this));
+        try {
+            this.isLoading = true;
+            const models = await this.getOrFetchProducts();
+            this.productsView = this.createProductsView(models, this.closeProductsView.bind(this));
             this.productsView.classList.add("ias-products-container-view--visible");
             this.slide.appendChild(this.productsView);
             this.element.classList.add("hidden");
@@ -19248,15 +20158,16 @@ class WidgetProducts extends WidgetBase {
             this.widgetDeps.slideApiDeps.disableHorizontalSwipeGesture();
             this.widgetDeps.slideApiDeps.disableVerticalSwipeGesture();
             this.widgetDeps.slideApiDeps.disableBackpress();
-            this._statEventWidgetOpen(this.currentModels);
+            this._statEventWidgetOpen(models);
             this.initSwipeGestureDetector();
         }
-        else {
-            if (result.message) {
-                this.widgetDeps.slideApiDeps.showToast(result.message);
-            }
+        catch (error) {
+            this.widgetDeps.slideApiDeps.showToast(error.message);
+        }
+        finally {
+            this.isLoading = false;
+            this.element.classList.remove("loader");
         }
-        this.element.classList.remove("loader");
     }
     closeProductsView() {
         if (!this.isOpen) {
@@ -19330,9 +20241,7 @@ class WidgetProducts extends WidgetBase {
             e.stopPropagation();
             e.preventDefault();
             this._statEventWidgetCardClick(offer);
-            if (offer.url) {
-                this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: offer.url } });
-            }
+            this.showProductDetails({ offer, card });
         };
         card.appendChild(figure);
         // card.appendChild(subTitle);
@@ -19340,6 +20249,33 @@ class WidgetProducts extends WidgetBase {
         card.appendChild(title);
         return card;
     }
+    showProductDetails = ({ card, offer }) => {
+        if (!this.productsView)
+            return;
+        const backgroundView = this.slide.querySelector(".ias-products-container-background-view");
+        const scrollViewGroup = this.slide.querySelector(".ias-products-scroll-view-group");
+        const backgroundViewHeight = backgroundView?.clientHeight ?? 0;
+        let scrollViewGroupHeight = scrollViewGroup?.offsetTop ?? 0;
+        scrollViewGroupHeight = scrollViewGroupHeight > 0 ? 0 : -scrollViewGroupHeight;
+        const bs = new ProductDetailsBottomSheet(this.widgetDeps, {
+            translations: {
+                color: getTagData(this.element, "msgColor") ?? "",
+                size: getTagData(this.element, "msgSize") ?? "",
+                addToCart: getTagData(this.element, "msgAddToCart") ?? "",
+                successAddToCart: getTagData(this.element, "msgSuccess") ?? "",
+                successSubAddToCart: getTagData(this.element, "msgSuccessSub") ?? "",
+                errorAddToCart: getTagData(this.element, "msgError") ?? "",
+                goToCartBtn: getTagData(this.element, "msgGoToCart") ?? "",
+                continueBtn: getTagData(this.element, "msgContinue") ?? "",
+                openUrl: getTagData(this.element, "msgOpenUrl") ?? "",
+            },
+            height: backgroundViewHeight + scrollViewGroupHeight,
+        });
+        const isCartEnabled = getTagData(this.element, "isCartEnabled") === "true";
+        const isCartSupported = this.widgetDeps.slideApiDeps.isSdkSupportProductCart && isCartEnabled;
+        this.productsView.appendChild(bs.render());
+        bs.open({ offer, isCartSupported });
+    };
     createScrollView(offers) {
         const scrollViewGroup = document.createElement("div");
         scrollViewGroup.classList.add("ias-products-scroll-view-group");