@inappstory/slide-api 0.1.48 → 0.1.50

package/dist/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+var events = require('events');
+
 const CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER = `___CTOR_ARGS___`;
 const CONSTRUCTOR_ARGUMENTS_SYMBOL = Symbol.for(CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER);
 
@@ -1298,6 +1300,7 @@ const DEFAULT_SLIDE_DURATION = 10000;
 class DataInput {
     _elementNodeRef;
     _layer;
+    _layersNodesRefs;
     _widgetApi;
     _widgetCallbacks;
     _widgetDeps;
@@ -1305,9 +1308,10 @@ class DataInput {
     static className() {
         return DataInput._className;
     }
-    constructor(_elementNodeRef, _layer, _widgetApi, _widgetCallbacks, _widgetDeps) {
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi, _widgetCallbacks, _widgetDeps) {
         this._elementNodeRef = _elementNodeRef;
         this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
         this._widgetApi = _widgetApi;
         this._widgetCallbacks = _widgetCallbacks;
         this._widgetDeps = _widgetDeps;
@@ -1321,7 +1325,7 @@ class DataInput {
     }
     init(localData) {
         try {
-            this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
         }
         catch (e) {
             console.error(e);
@@ -1339,6 +1343,9 @@ class DataInput {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1348,7 +1355,7 @@ class DataInput {
     get isLayerForcePaused() {
         return false;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetDataInput.api`, `WidgetCallbacks`, `WidgetDeps`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetDataInput.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
 class Barcode {
@@ -1392,6 +1399,9 @@ class Barcode {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1557,6 +1567,7 @@ class PromocodeLink {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         switch (this.state) {
             case PromocodeLinkState.Idle:
@@ -1704,6 +1715,7 @@ class Button extends ClickableBase {
         this.promocodeLink?.onStart();
     }
     onStop() { }
+    onRefreshUserData(localData) { }
     onBeforeUnmount() {
         return Promise.resolve();
     }
@@ -1757,6 +1769,9 @@ class Copy {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1813,6 +1828,9 @@ class DateCountdown {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1866,6 +1884,9 @@ class Poll {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1924,6 +1945,9 @@ class PollLayers {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1977,6 +2001,9 @@ class Products {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2039,6 +2066,9 @@ class ProductCarousel {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2092,6 +2122,9 @@ class Quest {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2149,6 +2182,9 @@ class Quiz {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2205,6 +2241,9 @@ class QuizGrouped {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2261,8 +2300,8 @@ class RangeSlider {
     onBeforeUnmount() {
         return Promise.resolve();
     }
-    get isClickCapturedBySlider() {
-        return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
     }
     handleClick() {
         return false;
@@ -2270,6 +2309,9 @@ class RangeSlider {
     get isLayerForcePaused() {
         return false;
     }
+    get isClickCapturedBySlider() {
+        return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetRangeSlider.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
@@ -2317,6 +2359,9 @@ class Rate {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2376,6 +2421,9 @@ class Share {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2416,6 +2464,7 @@ class SwipeUpItems {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2472,6 +2521,9 @@ class Test {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2528,6 +2580,9 @@ class Tooltip {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2578,6 +2633,9 @@ class Vote {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2612,6 +2670,7 @@ class Text {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2750,6 +2809,7 @@ class Image extends ClickableBase {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2787,6 +2847,7 @@ class SwipeUp {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2888,6 +2949,7 @@ class Video {
     }
     onStart() { }
     onStop() { }
+    onRefreshUserData(localData) { }
     async onBeforeUnmount() {
         // clean up memory and cpu processes
         // @ts-ignore
@@ -3423,6 +3485,9 @@ class Timer {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3474,6 +3539,9 @@ class Reactions {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3527,6 +3595,9 @@ class ScratchCard {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3568,7 +3639,9 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
             case Barcode.className():
                 return layoutApi.widgetBarcodeApi ? new Barcode(nodeRef, layer, layoutApi.widgetBarcodeApi, widgetCallbacks, widgetDeps) : null;
             case DataInput.className():
-                return layoutApi.widgetDataInputApi ? new DataInput(nodeRef, layer, layoutApi.widgetDataInputApi, widgetCallbacks, widgetDeps) : null;
+                return layoutApi.widgetDataInputApi
+                    ? new DataInput(nodeRef, layer, layersNodesRefs, layoutApi.widgetDataInputApi, widgetCallbacks, widgetDeps)
+                    : null;
             case DateCountdown.className():
                 return layoutApi.widgetDateCountdownApi
                     ? new DateCountdown(nodeRef, layer, layersNodesRefs, layoutApi.widgetDateCountdownApi, widgetCallbacks, widgetDeps)
@@ -3937,7 +4010,7 @@ class SlideTimeline {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `boolean`, `Promise`, `(cb: () => void) => void`, `ISlideApiDeps`]; }
 }
 
-class Layer {
+class Layer extends events.EventEmitter {
     _nodeRef;
     _slide;
     _layerIndex;
@@ -3964,6 +4037,7 @@ class Layer {
     _timeline;
     _widgetDeps;
     constructor(_nodeRef, _slide, _layerIndex, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
+        super();
         this._nodeRef = _nodeRef;
         this._slide = _slide;
         this._layerIndex = _layerIndex;
@@ -3986,7 +4060,7 @@ class Layer {
         this._scrollable = this._nodeRef.getAttribute("data-scrollable") === "1";
         this._scrollView = _nodeRef.querySelector(".narrative-layer-scroll-view");
         this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
-        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
+        this.initTimeline();
         this._widgetDeps = {
             slideApiDeps: this.slideApiDeps,
             slideRoot: this._slideRoot,
@@ -4046,6 +4120,9 @@ class Layer {
             }, this._widgetDeps));
         }
     }
+    initTimeline() {
+        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
+    }
     init(localData) {
         if (this.slideApiDeps.isIOS || this.slideApiDeps.isAndroid) {
             this._nodeRef.classList.add("_app");
@@ -4246,6 +4323,7 @@ class Layer {
     _animationPauseCb;
     _animationResumeCb;
     async start(muted = true) {
+        this.emit("beforeStart");
         if (this._layerVerticalScrollNotifier === null) {
             this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
         }
@@ -5617,15 +5695,20 @@ let SlideApi$1 = class SlideApi {
         }
         if (element) {
             propagation = false;
-            this.slideApiDeps.setCardLocalData({}, true);
-            this.slideApiDeps.updateCardServerDataLocally({});
-            // window._resetTimers();
+            const localData = {};
+            this.slideApiDeps.setCardLocalData(localData, true);
+            this.slideApiDeps.updateCardServerDataLocally(localData);
             // сделать async в ios
             let slideIndex = this.slide.slideIndex;
             // prevent simultaneous call _showNarrativeSlide and _showLayer - prevent 2 calls of initAfterLoad (break video start on iOS)
             if (slideIndex === 0) {
+                this.slide.layers[0]?.once("beforeStart", () => {
+                    // reset timers
+                    this.slide.layers[0]?.initTimeline();
+                });
                 // for story repeat on the first slide with layers
                 this.slideApiDeps.showLayer(0);
+                this.activeLayer.elements.forEach(item => item.onRefreshUserData(localData));
             }
             else {
                 this.slideApiDeps.showCardSlide(0); // сделать ее async
@@ -18278,12 +18361,20 @@ class WidgetCopy extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+var DataInputActionAfterCompletion;
+(function (DataInputActionAfterCompletion) {
+    DataInputActionAfterCompletion["ShowNotification"] = "showNotification";
+    DataInputActionAfterCompletion["ShowLayer"] = "showLayer";
+    DataInputActionAfterCompletion["None"] = "none";
+})(DataInputActionAfterCompletion || (DataInputActionAfterCompletion = {}));
+
 class WidgetDataInput extends WidgetBase {
     static DEFAULTS = {
         slide: null,
         activateAfterCreate: false,
         create: false,
         localData: {},
+        layers: [],
     };
     static widgetClassName = "narrative-element-data-input";
     label;
@@ -18291,6 +18382,8 @@ class WidgetDataInput extends WidgetBase {
     inputElement;
     textElement;
     inputPlaceholderValue;
+    layers;
+    actionAfterCompletion = null;
     /**
      * @throws Error
      * @param element
@@ -18305,6 +18398,9 @@ class WidgetDataInput extends WidgetBase {
         this.inputElement = getValueOrException(this.element.querySelector(".input-view .input"), "Empty .input-view .input");
         this.textElement = getValueOrException(this.inputElement.querySelector(".narrative-element-text-lines"), "Empty .narrative-element-text-lines");
         this.inputPlaceholderValue = this.textElement.innerHTML;
+        this.layers = this.options.layers;
+        this.actionAfterCompletion =
+            getTagData(this.element, "actionAfterCompletion") ?? DataInputActionAfterCompletion.ShowNotification;
     }
     /**
      * Start or restart widget
@@ -18313,15 +18409,14 @@ class WidgetDataInput extends WidgetBase {
     onRefreshUserData(localData) {
         super.onRefreshUserData(localData);
         const text = this.getTextFromLocalData();
-        this._fillUserText(text);
-        if (text != null) {
-            this.element.classList.add("done");
-            this.startReadyPromise.then(() => {
-                if (this.disableTimer) {
-                    this.onWidgetComplete();
-                }
-            });
-        }
+        if (!text)
+            return;
+        this.doCompletitionActionOnRefreshUserData(text);
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.onWidgetComplete();
+            }
+        });
     }
     getTextFromLocalData() {
         return this.localData["_di_g_" + this.elementId + "_t"];
@@ -18423,15 +18518,7 @@ class WidgetDataInput extends WidgetBase {
             this.localData["_di_g_" + this.elementId + "_t"] = text;
             // answer to question
             this.localData["_&ts_di_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
-            if (this.widgetDone) {
-                this.widgetDone.classList.add("active", "opacity-active");
-                setTimeout(() => {
-                    this.widgetDone?.classList.remove("active");
-                    setTimeout(() => {
-                        this.widgetDone?.classList.remove("opacity-active");
-                    }, 250);
-                }, 2000);
-            }
+            this.doCompletitionAction();
             this.setLocalData(this.localData, true);
             this._statEventInputSave(text);
             if (this.disableTimer) {
@@ -18443,11 +18530,48 @@ class WidgetDataInput extends WidgetBase {
             this.onWidgetRequireResumeUI();
         }
     }
+    doCompletitionAction() {
+        switch (this.actionAfterCompletion) {
+            case DataInputActionAfterCompletion.ShowNotification:
+                this.showNotification();
+                break;
+            case DataInputActionAfterCompletion.ShowLayer:
+                this.showLayer();
+                break;
+            case DataInputActionAfterCompletion.None:
+                return;
+        }
+    }
+    doCompletitionActionOnRefreshUserData(text) {
+        if (this.actionAfterCompletion === DataInputActionAfterCompletion.ShowLayer) {
+            this.showLayer();
+        }
+        else {
+            this._fillUserText(text);
+            this.element.classList.add("done");
+        }
+    }
+    showNotification() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+    }
+    showLayer() {
+        if (this.layers[1] != null) {
+            this._showLayer(this.layers, 1);
+        }
+    }
     static api = {
         widgetClassName: WidgetDataInput.widgetClassName,
         onRefreshUserData: WidgetDataInput.onRefreshUserData,
-        init: function (element, localData, widgetCallbacks, widgetDeps) {
-            WidgetDataInput.initWidget(element, localData, (element, options) => new WidgetDataInput(element, options, widgetCallbacks, widgetDeps));
+        init: function (element, layers, localData, widgetCallbacks, widgetDeps) {
+            WidgetDataInput.initWidget(element, localData, (element, options) => new WidgetDataInput(element, { ...options, layers }, widgetCallbacks, widgetDeps));
         },
         onStart: function (element) {
             WidgetDataInput.getInstance(element)?.onStart();
@@ -20410,7 +20534,7 @@ class ProductDetailsPurchase extends RenderableComponent {
             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());
+        return h("div", { class: "ias-product-details__purchase" }, h("div", { class: "ias-product-details__price-box" }, this.price.render(), this.props.isCartQuantityEnabled ? this.counter.render() : null), this.action.render());
     }
     updateProps(props) {
         this.props = { ...this.props, ...props };
@@ -20810,6 +20934,7 @@ class ProductComponentsFactory {
             },
             translations: this.props.translations,
             isCartSupported: params.isCartSupported,
+            isCartQuantityEnabled: params.isCartQuantityEnabled,
             onOpenUrl: () => {
                 if (params.product.url)
                     this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.product.url } });
@@ -20914,12 +21039,12 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         this.showProductDetails(params);
         this.bottomSheet.open();
     }
-    showProductDetails = ({ offer, isCartSupported }) => {
+    showProductDetails = ({ offer, isCartSupported, isCartQuantityEnabled, }) => {
         const factory = new ProductComponentsFactory(this.widgetDeps, this.props);
         const offerDtos = [offer, ...(offer.subOffersApi ?? [])];
-        this.renderProductDetails({ factory, offer, offerDtos, isCartSupported });
+        this.renderProductDetails({ factory, offer, offerDtos, isCartSupported, isCartQuantityEnabled });
     };
-    renderProductDetails({ factory, offer, offerDtos, isCartSupported, }) {
+    renderProductDetails({ factory, offer, offerDtos, isCartSupported, isCartQuantityEnabled, }) {
         const { product, relatedProducts } = this.getProductAndRelatedProducts(offer);
         const productDetails = factory.createProductDetails({
             product,
@@ -20933,6 +21058,7 @@ class ProductDetailsBottomSheet extends RenderableComponent {
                 this.showProductCheckout();
             },
             isCartSupported,
+            isCartQuantityEnabled,
         });
         this.updateBottomSheetContent(productDetails);
     }
@@ -21551,9 +21677,10 @@ class WidgetProducts extends WidgetBase {
             height: backgroundViewHeight + scrollViewGroupHeight,
         });
         const isCartEnabled = getTagData(this.element, "isCartEnabled") === "true";
+        const isCartQuantityEnabled = !getTagData(this.element, "isCartQuantityEnabled") || getTagData(this.element, "isCartQuantityEnabled") === "true";
         const isCartSupported = this.widgetDeps.slideApiDeps.isSdkSupportProductCart && isCartEnabled;
         this.productsView.appendChild(bs.render());
-        bs.open({ offer, isCartSupported });
+        bs.open({ offer, isCartSupported, isCartQuantityEnabled });
     };
     createScrollView(offers) {
         const scrollViewGroup = document.createElement("div");
@@ -21982,7 +22109,8 @@ class WidgetProductCarousel extends WidgetBase {
     showProductDetails = ({ offer, card }) => {
         const bs = new ProductDetailsBottomSheet(this.widgetDeps, this.getBottomSheetParams());
         this.mountBottomSheet(bs);
-        bs.open({ offer, isCartSupported: this.isCartSupported() });
+        const isCartQuantityEnabled = !getTagData(this.element, "isCartQuantityEnabled") || getTagData(this.element, "isCartQuantityEnabled") === "true";
+        bs.open({ offer, isCartSupported: this.isCartSupported(), isCartQuantityEnabled });
         this.isBottomSheetOpened = true;
         this.disableHostUIInteraction();
     };