@inappstory/slide-api 0.1.25 → 0.1.27

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);
     }
@@ -1135,8 +1141,11 @@ class EsModuleSdkApi {
     getCardSessionValue(element, key) {
         return this.sdkBinding.getCardSessionValue(key);
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     cardPausedCallback(currentTime) { }
     cardResumedCallback(currentTime) { }
@@ -1179,12 +1188,87 @@ class EsModuleSdkApi {
         this.sdkBinding.onEvent(name, event);
     }
     onCardLoadingStateChange(state, reason) {
-        console.log("onCardLoadingStateChange", { state });
+        // 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`]; }
 }
 
+class CardLoadingStateController {
+    onCardLoadingStateChange;
+    constructor(onCardLoadingStateChange) {
+        this.onCardLoadingStateChange = onCardLoadingStateChange;
+    }
+    timeout = 300;
+    onSetLoadStartState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        if (this.currentState === 1 /* CARD_LOADING_STATE.LOADED */) {
+            this.deferredDataWaitingStateTimerId = window.setTimeout(() => {
+                this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+                this.dataWaitingStartedAt = Date.now();
+            }, this.timeout);
+        }
+        else {
+            this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+            this.dataWaitingStartedAt = Date.now();
+        }
+        this.currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    }
+    onSetLoadEndState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        const delay = this.timeout;
+        let dataWaitingLoaderSpent = delay;
+        if (this.dataWaitingStartedAt != null) {
+            dataWaitingLoaderSpent = Date.now() - this.dataWaitingStartedAt;
+        }
+        if (dataWaitingLoaderSpent < delay) {
+            this.deferredResumeStateTimerId = window.setTimeout(() => this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */), dataWaitingLoaderSpent - delay);
+        }
+        else {
+            this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+        }
+        this.currentState = 1 /* CARD_LOADING_STATE.LOADED */;
+    }
+    onSetLoadErrorState(reason) {
+        this.onBeforeStateChanged();
+        this.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+        this.currentState = 2 /* CARD_LOADING_STATE.LOADING_ERROR */;
+    }
+    currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    deferredDataWaitingStateTimerId = null;
+    deferredResumeStateTimerId = null;
+    dataWaitingStartedAt = null;
+    clearDeferredDataWaitingStateTimerId() {
+        if (this.deferredDataWaitingStateTimerId != null) {
+            window.clearTimeout(this.deferredDataWaitingStateTimerId);
+        }
+    }
+    clearDeferredResumeStateTimerId() {
+        if (this.deferredResumeStateTimerId != null) {
+            window.clearTimeout(this.deferredResumeStateTimerId);
+        }
+    }
+    onBeforeStateChanged() {
+        this.clearDeferredDataWaitingStateTimerId();
+        this.clearDeferredResumeStateTimerId();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(state: CARD_LOADING_STATE, reason?: string) => void`]; }
+}
+
 const DEFAULT_SLIDE_DURATION = 10000;
 
 class DataInput {
@@ -3303,19 +3387,7 @@ class SlideTimeline {
         return SlideTimeline.layoutService;
     }
     get isSDKSupportUpdateTimeline() {
-        if (this.slideApiDeps.isAndroid) {
-            return Boolean(SlideTimeline.layoutService.env.Android && "updateTimeline" in SlideTimeline.layoutService.env.Android);
-        }
-        else if (this.slideApiDeps.isIOS) {
-            const mh = SlideTimeline.layoutService.env?.webkit?.messageHandlers ?? {};
-            return "updateTimeline" in mh;
-        }
-        else if (this.slideApiDeps.isWeb) {
-            return true;
-        }
-        else {
-            return false;
-        }
+        return this.slideApiDeps.isSdkSupportUpdateTimeline();
     }
     get isSdkSupportTimelineOnBeforeStart() {
         return this.slideApiDeps.isSdkSupportTimelineOnBeforeStart();
@@ -3359,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();
         }
@@ -3385,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() {
@@ -3460,6 +3532,7 @@ class SlideTimeline {
         this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */);
+            // console.log(`TIMELINE_ACTION -> slideStopped, index: ${this.slideIndex}`);
         }
     }
     /**
@@ -3596,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;
@@ -3838,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 };
     }
@@ -4691,7 +4774,9 @@ let SlideApi$1 = class SlideApi {
         this._state = 5 /* STATE.RESUMED */;
     }
     async slideStop(options) {
-        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
+        // console.log(`TIMELINE_ACTION -> STOP, index: ${this.slide.slideIndex}, state: ${this._state}`);
+        // из состояния START (слайд (например с видео) еще не стартовал) тоже позволяем прерывать - чтобы был правильный LC при быстром пролистывании слайдера
+        if (!(this._state === 2 /* STATE.START */ || this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
             return;
         }
         this._state = 11 /* STATE.STOP */;
@@ -5431,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);
     }
@@ -5530,7 +5621,9 @@ class SlideApiDepsMultiSlideMode {
         return this.sdkApi.isExistsShowNextCard;
     }
     cardShowNext() {
-        this.sdkApi.cardShowNext();
+        return;
+        // skip action in multislide mode (business logic)
+        // this.sdkApi.cardShowNext();
     }
     /** @deprecated, used only in native sdk **/
     cardPausedCallback(currentTime) {
@@ -5552,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
      * =================================================================================================================
@@ -5562,8 +5667,11 @@ class SlideApiDepsMultiSlideMode {
     showCardSlide(index) {
         this.slider.showByIndex(index);
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     isSdkSupportTimelineOnBeforeStart() {
         return true;
@@ -5582,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);
     }
@@ -5703,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
      */
@@ -5712,8 +5838,11 @@ class SlideApiDepsSingleSlideMode {
     showCardSlide(index) {
         this.sdkApi.showCardSlide(index);
     }
-    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
-        this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    isSdkSupportUpdateTimeline() {
+        return this.sdkApi.isSdkSupportUpdateTimeline();
+    }
+    async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        await this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
     isSdkSupportTimelineOnBeforeStart() {
         return this.sdkApi.isSdkSupportTimelineOnBeforeStart();
@@ -5768,12 +5897,16 @@ class SlideTimer {
             this.timerId = null;
         }
     }
-    resume(duration = 0) {
+    resume(currentTime = undefined, duration = 0) {
         this._pause = false;
         if (!this._started) {
             this.start(duration);
         }
         else {
+            if (currentTime != null) {
+                // timeLeft correction
+                this.timeLeft = this.duration - currentTime;
+            }
             this.tick();
         }
     }
@@ -5789,12 +5922,12 @@ class SlideTimer {
             }
             const dtDiff = new Date().getTime() - rafStartTime;
             this.timeLeft -= dtDiff;
-            let progress = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
-            if (progress > 100) {
-                progress = 100;
+            let progressPercent = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
+            if (progressPercent > 100) {
+                progressPercent = 100;
             }
-            this.updateCb(progress);
-            if (progress < 100) {
+            this.updateCb(progressPercent);
+            if (progressPercent < 100) {
                 if (this._pause !== true) {
                     this.tick();
                 }
@@ -5804,7 +5937,43 @@ class SlideTimer {
             }
         });
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progress: number) => void`, `() => void`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progressPercent: number) => void`, `() => void`]; }
+}
+
+/**
+ * usage TS interface with ctor
+ * https://blog.logrocket.com/writing-constructor-typescript/
+ *
+ * @param ctor
+ * @param slides
+ * @param getLayoutDirection
+ */
+function createTimelineController(ctor, slides, getLayoutDirection) {
+    return new ctor(slides, getLayoutDirection);
+}
+class TimelineController {
+    slides;
+    getLayoutDirection;
+    constructor(slides, getLayoutDirection) {
+        this.slides = slides;
+        this.getLayoutDirection = getLayoutDirection;
+    }
+    onSlideTimerUpdate(index, progressPercent) {
+        this.slides[index]?.updateTimelineProgress(progressPercent, true);
+    }
+    onSlideBeforeStart(index) {
+        // fill to 100% all previous slides
+        for (let i = 0; i < index; ++i) {
+            this.slides[i]?.updateTimelineProgress(100, false);
+        }
+        // fill to 0% all next slides (for user revert direction)
+        for (let i = index + 1; i < this.slides.length; ++i) {
+            this.slides[i]?.updateTimelineProgress(0, false);
+        }
+        // activate current slide
+        this.slides[index]?.updateTimelineProgress(0, true);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `GetLayoutDirection`]; }
 }
 
 class Slider {
@@ -5826,15 +5995,19 @@ class Slider {
             slides: config.slides,
             nonce: config.nonce,
             slideRender: config.slideRender,
+            navbarAppearance: config.navbarAppearance,
         });
         config.root.appendChild(slideWrapper);
         this.slideWrapperElement = slideWrapper;
+        this.timelineController = createTimelineController(TimelineController, this.slides, this.config.getLayoutDirection.bind(this));
         // cardMounted: (card: HTMLElement) => Promise<void>
         requestAnimationFrame(async () => {
             await Promise.all(this.slides.map((slide, index) => config.onSlideMounted(slide.element, index)));
         });
     }
     isAnimating = false;
+    // block click while slide loading and starting (prevent several timeline starting)
+    isSlideStarting = false;
     activeIndex = -1;
     get activeSlide() {
         return this.slides[this.activeIndex];
@@ -5844,133 +6017,192 @@ class Slider {
     bulletsContainer = null;
     slidesFirstRenders = [];
     slideWrapperElement;
-    updateBulletActiveIndex;
-    updateTimelineProgress;
-    createSliderElement = ({ slides, nonce, slideRender }) => {
+    timelineController;
+    assembleNavbarCssVariables(navbarAppearance) {
+        let css = "";
+        if (navbarAppearance.edge_offset != null) {
+            css += `--navbar-edge-offset: ${navbarAppearance.edge_offset};`;
+        }
+        if (navbarAppearance.active_timeline_width != null) {
+            css += `--navbar-active-timeline-width: ${navbarAppearance.active_timeline_width};`;
+        }
+        if (navbarAppearance.background_color != null) {
+            css += `--navbar-background-color: ${navbarAppearance.background_color};`;
+        }
+        if (navbarAppearance.border_radius != null) {
+            css += `--navbar-border-radius: ${navbarAppearance.border_radius};`;
+        }
+        if (navbarAppearance.drop_shadow_blur != null) {
+            css += `--navbar-drop-shadow-blur: ${navbarAppearance.drop_shadow_blur};`;
+        }
+        if (navbarAppearance.drop_shadow_color != null) {
+            css += `--navbar-drop-shadow-color: ${navbarAppearance.drop_shadow_color};`;
+        }
+        if (navbarAppearance.drop_shadow_x_offset != null) {
+            css += `--navbar-drop-shadow-x-offset: ${navbarAppearance.drop_shadow_x_offset};`;
+        }
+        if (navbarAppearance.drop_shadow_y_offset != null) {
+            css += `--navbar-drop-shadow-y-offset: ${navbarAppearance.drop_shadow_y_offset};`;
+        }
+        if (navbarAppearance.timeline_background_color != null) {
+            css += `--navbar-timeline-background-color: ${navbarAppearance.timeline_background_color};`;
+        }
+        if (navbarAppearance.timeline_fill_color != null) {
+            css += `--navbar-timeline-fill-color: ${navbarAppearance.timeline_fill_color};`;
+        }
+        if (navbarAppearance.timeline_size != null) {
+            css += `--navbar-timeline-size: ${navbarAppearance.timeline_size};`;
+        }
+        if (navbarAppearance.timelines_gap != null) {
+            css += `--navbar-timelines-gap: ${navbarAppearance.timelines_gap};`;
+        }
+        if (navbarAppearance.vertical_padding != null) {
+            css += `--navbar-vertical-padding: ${navbarAppearance.vertical_padding};`;
+        }
+        if (navbarAppearance.horizontal_padding != null) {
+            css += `--navbar-horizontal-padding: ${navbarAppearance.horizontal_padding};`;
+        }
+        return `.cards-slider {${css}`;
+    }
+    createSliderElement = ({ slides, nonce, slideRender, navbarAppearance, }) => {
         const style = document.createElement("style");
         if (nonce != null) {
             style.nonce = nonce;
         }
+        style.innerText = this.assembleNavbarCssVariables(navbarAppearance);
         const slider = document.createElement("div");
         slider.classList.add("cards-slider");
         const track = document.createElement("div");
         track.classList.add("cards-slider__track");
         this.sliderTrack = track;
-        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.slides[i] = {
-                element: slideRender(slides[i], i, this.slidesFirstRenders[i].firstRenderCallPromise),
-                timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), this.onSlideTimerUpdate.bind(this), this.onSlideTimerEnd.bind(this)),
-            };
-            slide.appendChild(this.slides[i].element);
-            track.appendChild(slide);
-        }
-        const [bullets, updateBulletActiveIndex, updateTimelineProgress] = this.createBulletPoints(slides.length);
+        const [bullets, updateTimelineProgress] = this.createBulletPoints(slides.length, this.config.getLayoutDirection.bind(this), navbarAppearance.position);
         this.bulletsContainer = bullets;
-        this.updateBulletActiveIndex = updateBulletActiveIndex.bind(this);
-        this.updateTimelineProgress = updateTimelineProgress.bind(this);
+        this.slides = slides.map((slide, i) => ({
+            element: slideRender(slide, i, this.slidesFirstRenders[i].firstRenderCallPromise),
+            timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), progressPercent => this.timelineController.onSlideTimerUpdate(i, progressPercent), this.onSlideTimerEnd.bind(this)),
+            updateTimelineProgress: (progressPercent, isActive) => updateTimelineProgress(i, progressPercent, isActive),
+        }));
+        for (let i = 0; i < this.slides.length; ++i) {
+            const slideElement = document.createElement("div");
+            slideElement.classList.add("cards-slider__slide");
+            slideElement.setAttribute("data-index", String(i));
+            slideElement.appendChild(this.slides[i].element);
+            track.appendChild(slideElement);
+        }
         slider.appendChild(track);
-        slider.appendChild(bullets);
+        const safeAreaView = document.createElement("div");
+        safeAreaView.classList.add("safe-area-view", "inset-0", "non-touchable");
+        const safeAreaRelativeZoneView = document.createElement("div");
+        safeAreaRelativeZoneView.classList.add("safe-area-relative-zone-view");
+        safeAreaRelativeZoneView.appendChild(bullets);
+        safeAreaView.appendChild(safeAreaRelativeZoneView);
+        slider.appendChild(safeAreaView);
         slider.appendChild(style);
         return slider;
     };
-    createBulletPoints(count) {
+    createBulletPoints(count, getLayoutDirection, position) {
         const bullets = document.createElement("div");
-        bullets.classList.toggle("cards-slider__bullets");
-        for (let i = 0; i < count; ++i) {
-            const bullet = document.createElement("div");
-            bullet.classList.add("cards-slider__bullet");
-            bullet.setAttribute("data-index", String(i));
-            bullet.onclick = (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                const bullet = e.target;
-                if (bullet != null) {
-                    const index = bullet.dataset.index;
-                    if (index != null) {
-                        this.showByIndex(parseInt(index));
+        bullets.classList.add("cards-slider__navbar");
+        if (position === 0) {
+            bullets.classList.add("cards-slider__navbar--position-none");
+        }
+        else if (position === 1) {
+            bullets.classList.add("cards-slider__navbar--position-top");
+        }
+        else if (position === 2) {
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        else {
+            // default
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        bullets.dir = getLayoutDirection();
+        // 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__bullet-fill");
-            bullet.append(bulletFill);
-            bullets.appendChild(bullet);
-        }
-        const onUpdateActiveIndex = (activeIndex) => {
-            if (activeIndex >= 0 && activeIndex < count) {
-                for (const bullet of bullets.querySelectorAll(".cards-slider__bullet--active")) {
-                    bullet.classList.toggle("cards-slider__bullet--active");
-                }
-                bullets.querySelector(`.cards-slider__bullet[data-index="${activeIndex}"]`)?.classList.toggle("cards-slider__bullet--active");
-            }
-        };
-        const onUpdateTimelineProgress = (index, progress) => {
+                };
+                const bulletFill = document.createElement("div");
+                bulletFill.classList.add("cards-slider__timeline-fill");
+                bullet.append(bulletFill);
+                bullets.appendChild(bullet);
+            }
+        }
+        // const onUpdateActiveIndex = (activeIndex: number) => {
+        //     if (activeIndex >= 0 && activeIndex < count) {
+        //         for (const bullet of bullets.querySelectorAll(".cards-slider__bullet--active")) {
+        //             bullet.classList.toggle("cards-slider__bullet--active");
+        //         }
+        //         bullets.querySelector(`.cards-slider__bullet[data-index="${activeIndex}"]`)?.classList.toggle("cards-slider__bullet--active");
+        //     }
+        // };
+        const onUpdateTimelineProgress = (index, progress, isActive) => {
             if (index >= 0 && index < count) {
-                const bullet = bullets.querySelector(`.cards-slider__bullet:nth-child(${index + 1}) .cards-slider__bullet-fill`);
-                if (bullet != null) {
-                    // todo RTL
-                    //need (in css) right: 100% instead of left -100%;
+                const bullet = bullets.querySelector(`.cards-slider__timeline:nth-child(${index + 1})`);
+                const bulletFill = bullet?.querySelector(".cards-slider__timeline-fill");
+                bullet?.classList[isActive ? "add" : "remove"]("cards-slider__timeline--active");
+                if (bulletFill != null) {
                     // todo remove progress after slide changed?
-                    bullet.style.setProperty("transform", `translateX(${progress}%)`);
-                    // transform: `translateZ(0) translateX(${
-                    //     index < this.$props.index
-                    //         ? "100%"
-                    //         : index === this.$props.index
-                    //             ? `${this.$props.timePercent}%`
-                    //             : "0%"
-                    // })`,
+                    if (this.config.getLayoutDirection() === "rtl") {
+                        progress = -1 * progress;
+                    }
+                    bulletFill.style.setProperty("transform", `translateX(${progress}%)`);
                 }
             }
         };
-        return [bullets, onUpdateActiveIndex, onUpdateTimelineProgress];
+        return [bullets, onUpdateTimelineProgress];
     }
     async showByIndex(newIndex) {
         const prevIndex = this.activeIndex;
-        if (this.isAnimating)
+        if (this.isAnimating) {
             return prevIndex;
-        if (prevIndex !== -1) {
-            // skip for slider start
-            this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
-            this.config.onSlideStop();
-        }
-        const { index, loadingError } = await this.initAndRenderSlide(newIndex);
-        if (loadingError) {
-            // todo via updateTimeline ????
-            this.config.onSlideLoadingError(index, loadingError);
         }
-        await this.slideTo(index);
-        if (!loadingError) {
-            this.onShowSlide(index);
+        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);
-            this.config.onSlideStop();
+            await this.config.onSlideStop();
         }
+        this.isSlideStarting = true;
         const { index, loadingError } = await this.initAndRenderSlide(newIndex);
         if (loadingError) {
             // todo via updateTimeline ????
             this.config.onSlideLoadingError(index, loadingError);
         }
-        await this.slideTo(index);
         if (!loadingError) {
             this.onShowSlide(index);
         }
+        this.config.onSlideChangeActiveIndex(await this.slideTo(index));
+        if (!loadingError) {
+            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;
@@ -6003,9 +6235,9 @@ class Slider {
         }
     }
     onShowSlide(index) {
-        this.updateBulletActiveIndex(index);
+        // this.updateBulletActiveIndex(index);
         this.config.onShowSlide(this.slides[index].element, index);
-        this.config.onSlideStart();
+        // this.config.onSlideStart();
     }
     onUpdateSizeMetrics(metrics) {
         // this.slideTo(this.activeIndex, 0);
@@ -6018,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)`);
@@ -6061,23 +6295,36 @@ 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)
-                console.log("TIMELINE_ACTION.BEFORE_START", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.BEFORE_START", { activeSlide: this.activeSlide, duration });
+                this.timelineController.onSlideBeforeStart(slideIndex);
                 break;
             }
             case "start" /* TIMELINE_ACTION.START */: {
                 this.config.onSlideDataResume();
                 // also start after data waiting or pause
-                // window.setTimeout(() => {
-                //     this.config.onSlideStop();
-                //     this.config.onSlideTimerEnd();
-                // }, 10000);
                 // destroy on IAM closing
-                console.log("TIMELINE_ACTION.START", { activeSlide: this.activeSlide, index: this.activeIndex, duration });
-                this.activeSlide?.timer.resume(duration);
+                // console.log("TIMELINE_ACTION.START", {
+                //     activeSlide: this.activeSlide,
+                //     index: this.activeIndex,
+                //     duration,
+                // });
+                let resumeTimer = false;
+                if (duration > 0) {
+                    // skip timer start for slide/layer with disabled timeline
+                    resumeTimer = true;
+                }
+                if (currentTime === duration) {
+                    // skip timer start for already ended layer timeline
+                    // skip timer start for already ended layer timeline
+                    resumeTimer = false;
+                }
+                if (resumeTimer) {
+                    this.activeSlide?.timer.resume(currentTime, duration);
+                }
                 break;
             }
             case "pause" /* TIMELINE_ACTION.PAUSE */: {
@@ -6085,7 +6332,7 @@ class Slider {
                     this.config.onSlideDataWaiting();
                 }
                 this.activeSlide?.timer.pause();
-                console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
                 break;
             }
             case "stop" /* TIMELINE_ACTION.STOP */: {
@@ -6095,27 +6342,23 @@ class Slider {
                 }
                 this.activeSlide?.timer.stop();
                 // todo нужен STOP когда вручную переключаем слайд на другой
-                console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
                 break;
             }
         }
     }
-    onSlideTimerUpdate(progress) {
-        this.updateTimelineProgress(this.activeIndex, progress);
-    }
-    onSlideTimerEnd() {
-        this.config.onSlideStop();
+    // private onSlideTimerUpdate(progress: number) {
+    // this.updateTimelineProgress(this.activeIndex, progress);
+    // }
+    async onSlideTimerEnd() {
+        await this.config.onSlideStop();
         this.config.onSlideTimerEnd();
     }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
             slides: Array<T>;
             root: HTMLElement;
-            // isFullscreen: boolean;
             nonce?: string;
-            // viewport: Window;
-            // userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
-            // VODPlayer?: typeof VODPlayer;
-            // overlappingActionBarHeight?: number;
+            navbarAppearance: NavbarAppearance;
             slideRender: SlideRender<T>;
             onSlideMounted: OnSlideMounted;
             onBeforeShowSlide: OnBeforeShowSlide;
@@ -6126,6 +6369,7 @@ class Slider {
             getLayoutDirection: GetLayoutDirection;
 
             onSlideTimerEnd: OnSlideTimerEnd;
+            onSlideChangeActiveIndex: OnSlideChangeActiveIndex;
             onSlideStart: OnSlideStart;
             onSlideStop: OnSlideStop;
             onSlideDataWaiting: OnSlideDataWaiting;
@@ -6152,6 +6396,7 @@ class CardApi {
     activeSlide = null;
     slides = [];
     slidesMode = 0 /* SLIDES_MODE.SINGLE */;
+    cardLoadingStateController = null;
     sizeMetrics = {
         fontSize: "0px",
         isFullscreen: false,
@@ -6327,7 +6572,10 @@ class CardApi {
     slider = null;
     async showSlides(slides, cardAppearance, index = 0) {
         this.slidesMode = 1 /* SLIDES_MODE.MULTIPLE */;
-        this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+        if (this.cardLoadingStateController === null) {
+            this.cardLoadingStateController = new CardLoadingStateController(this.sdkApi.onCardLoadingStateChange.bind(this.sdkApi));
+        }
+        this.cardLoadingStateController.onSetLoadStartState();
         slides.forEach((content, index) => {
             if (this.slides[index] == null) {
                 const item = { content, resourcesReadyPromise: null };
@@ -6380,6 +6628,15 @@ class CardApi {
                 this.activeSlide = this.slides[index].slide;
                 return this.slides[index].slide.showSlide().then(_ => ({ moveToIndex: index }));
             }
+            else {
+                // quot -                 // TODO для виджета квест нужно при каждом показе слайда инициализировать виджет???
+                //                 // пока вызов убран из за того что init жестко завязан на single slide mode
+                // из-за того что перед показом нет приватного вызова SlideApi::_init пока что нужно руками вызывать
+                // slide.activeLayer.timeline.triggerSlideLoadState();
+                // для того чтобы запустить TIMELINE_ACTION.BEFORE_START что нужно для таймлайна слайдера
+                // todo убрать в случае если будем вызывать new SlideApi перед каждым показом слайда
+                this.slides[index].slide.activeLayer.timeline.triggerSlideLoadState();
+            }
             this.activeSlide = this.slides[index].slide;
             // TODO handle moveToIndex
             // return resolve or reject with reason
@@ -6393,13 +6650,13 @@ class CardApi {
             // внутри слайдера - обрабатываем moveToIndex
         };
         const onBeforeLoadSlide = index => {
-            this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+            this.cardLoadingStateController.onSetLoadStartState();
         };
         const onSlideLoadingError = (index, reason) => {
-            this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+            this.cardLoadingStateController.onSetLoadErrorState(reason);
         };
         const onShowSlide = (slide, index) => {
-            this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+            this.cardLoadingStateController.onSetLoadEndState();
             this.sdkApi.emitEvent("showSlide", { cardId: this.slides[index]?.slide?.slide.cardId ?? 0, index });
             // if (index === 0) {
             //     this.activeSlide = slideApi;
@@ -6491,6 +6748,7 @@ class CardApi {
                 canMediaMount: resourcesReadyPromise,
             })),
             nonce: this.config.nonce,
+            navbarAppearance: cardAppearance.navbar ?? {},
             slideRender,
             onSlideMounted,
             onBeforeShowSlide,
@@ -6500,14 +6758,16 @@ class CardApi {
             onSlideLeft,
             getLayoutDirection: () => this.layoutDirection,
             onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
+            onSlideChangeActiveIndex: index => (this.activeSlide = this.slides[index].slide),
             onSlideStart: () => {
-                this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+                // return Promise.resolve({currentTime: 0});
+                this.cardLoadingStateController.onSetLoadEndState();
                 return this.activeSlide.slideStart({ muted: true });
             },
             onSlideStop: () => this.activeSlide.slideStop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ }),
-            onSlideDataWaiting: () => this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */),
-            onSlideDataResume: () => this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */),
-            onSlideDataError: () => this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */),
+            onSlideDataWaiting: () => this.cardLoadingStateController.onSetLoadStartState(),
+            onSlideDataResume: () => this.cardLoadingStateController.onSetLoadEndState(),
+            onSlideDataError: () => this.cardLoadingStateController.onSetLoadEndState(),
         });
         await this.slider.showByIndex(index);
         // return await onShowActiveCard;
@@ -6581,6 +6841,15 @@ class CardApi {
         if (this.slidesMode === 1 /* SLIDES_MODE.MULTIPLE */ && result.canClickNext) {
             result.canClickNext = false; // handle nav click via CardsSlider, not via SDK
             const currentIndex = this.activeSlide.index;
+            /**
+             * business logic - avoid action on side slides click
+             */
+            if (currentIndex === 0 && navigationDirection === "backward") {
+                return result;
+            }
+            if (currentIndex === this.slides.length - 1 && navigationDirection === "forward") {
+                return result;
+            }
             let index = navigationDirection === "forward" ? currentIndex + 1 : currentIndex - 1;
             if (index >= this.slides.length) {
                 index = 0;
@@ -6588,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;
     }
@@ -18744,6 +19009,832 @@ 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() {
+        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" }, 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()) ?? [])))));
+    }
+    setHeight(height) {
+        if (!this._root)
+            return;
+        const container = this._root.querySelector(".ias-bottom-sheet__container");
+        if (!container)
+            return;
+        container.style.height = height;
+    }
+    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;
+    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 () => {
+        try {
+            this.showLoader();
+            await this.addToCart();
+        }
+        catch (error) {
+            this.handleAddToCartError(error);
+        }
+        finally {
+            this.hideLoader();
+        }
+    };
+    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`]; }
+}
+
+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,
+        };
+    }
+}
+
+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() {
+        const bs = new BottomSheet({
+            onClose: () => {
+                bs.destroy();
+            },
+            children: [],
+        });
+        return bs;
+    }
+    createProductDetails(params) {
+        return new ProductDetails({
+            product: ProductOfferMapper.fromOfferDtoToProductOffer(params.offer),
+            relatedProducts: params.offer.subOffersApi
+                ? params.offer.subOffersApi.map(subOffer => ProductOfferMapper.fromOfferDtoToProductOffer(subOffer))
+                : [],
+            onAddToCart: params.onAddToCart,
+            onAddToCartError: ({ error }) => {
+                this.widgetDeps.slideApiDeps.showToast(error.message);
+            },
+            translations: this.props.translations,
+            isCartSupported: params.isCartSupported,
+            onOpenUrl: () => {
+                if (params.offer.url)
+                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.offer.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 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();
+    }
+    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 productDetails = factory.createProductDetails({
+            offer,
+            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);
+        this.bottomSheet.setHeight("auto");
+    }
+    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;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`WidgetDeps`, `ProductDetailsBottomSheetProps`]; }
+}
+
 /**
  * adult: null
  * availability: 1
@@ -18898,7 +19989,7 @@ class WidgetProducts extends WidgetBase {
             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)}`;
@@ -19121,9 +20212,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);
@@ -19131,6 +20220,27 @@ class WidgetProducts extends WidgetBase {
         card.appendChild(title);
         return card;
     }
+    showProductDetails = ({ card, offer }) => {
+        if (!this.productsView)
+            return;
+        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") ?? "",
+            },
+        });
+        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");