@inappstory/slide-api 0.0.28 → 0.0.30

package/dist/index.d.cts

@@ -6,6 +6,7 @@ declare const enum CARD_TYPE {
 }
 type WidgetRangeSliderOptions = WidgetOptionsBase & {
     rangeClass: string;
+    rangeBackgroundClass: string;
     activeClass: string;
     horizontalClass: string;
     verticalClass: string;
@@ -41,6 +42,7 @@ declare class WidgetRangeSlider extends WidgetBase<WidgetRangeSliderOptions> {
     private fill;
     private readonly handle;
     private readonly range;
+    private readonly rangeBgView;
     private readonly DIMENSION;
     private readonly DIRECTION;
     private DIRECTION_STYLE;
@@ -936,7 +938,6 @@ declare class WidgetBase<WidgetOptions extends WidgetOptionsBase> {
     protected showWidgetCompleteToast: boolean;
     protected submitButtonAnimatedView: HTMLElement | null;
     protected submitButtonView: HTMLElement | null;
-    protected submitButtonViewHeight: number;
     protected savedData: Record<string, any> | null;
     protected localData: Record<string, any>;
     protected firstOpenTime: number;
@@ -944,6 +945,7 @@ declare class WidgetBase<WidgetOptions extends WidgetOptionsBase> {
     startReadyPromise: Promise<void>;
     private startReadyResolve;
     constructor(element: HTMLElement, options: Partial<WidgetOptions>, elementIdGetter?: (element: HTMLElement) => string, slideGetter?: (element: HTMLElement) => HTMLElement);
+    protected get submitButtonViewHeight(): number;
     private resetStartReadyPromise;
     /**
      * Start or restart widget

package/dist/index.d.ts

@@ -6,6 +6,7 @@ declare const enum CARD_TYPE {
 }
 type WidgetRangeSliderOptions = WidgetOptionsBase & {
     rangeClass: string;
+    rangeBackgroundClass: string;
     activeClass: string;
     horizontalClass: string;
     verticalClass: string;
@@ -41,6 +42,7 @@ declare class WidgetRangeSlider extends WidgetBase<WidgetRangeSliderOptions> {
     private fill;
     private readonly handle;
     private readonly range;
+    private readonly rangeBgView;
     private readonly DIMENSION;
     private readonly DIRECTION;
     private DIRECTION_STYLE;
@@ -936,7 +938,6 @@ declare class WidgetBase<WidgetOptions extends WidgetOptionsBase> {
     protected showWidgetCompleteToast: boolean;
     protected submitButtonAnimatedView: HTMLElement | null;
     protected submitButtonView: HTMLElement | null;
-    protected submitButtonViewHeight: number;
     protected savedData: Record<string, any> | null;
     protected localData: Record<string, any>;
     protected firstOpenTime: number;
@@ -944,6 +945,7 @@ declare class WidgetBase<WidgetOptions extends WidgetOptionsBase> {
     startReadyPromise: Promise<void>;
     private startReadyResolve;
     constructor(element: HTMLElement, options: Partial<WidgetOptions>, elementIdGetter?: (element: HTMLElement) => string, slideGetter?: (element: HTMLElement) => HTMLElement);
+    protected get submitButtonViewHeight(): number;
     private resetStartReadyPromise;
     /**
      * Start or restart widget

package/dist/index.js

@@ -1234,7 +1234,6 @@ class WidgetBase {
     showWidgetCompleteToast = null;
     submitButtonAnimatedView = null;
     submitButtonView = null;
-    submitButtonViewHeight = 0;
     savedData = null;
     localData = null;
     firstOpenTime = 0;
@@ -1283,9 +1282,6 @@ class WidgetBase {
             this.submitButtonAnimatedView = this.element.querySelector(".submit-button-animated-view");
             if (this.submitButtonAnimatedView != null) {
                 this.submitButtonView = this.submitButtonAnimatedView.querySelector(".submit-button-view");
-                if (this.submitButtonView != null) {
-                    this.submitButtonViewHeight = this.submitButtonView.clientHeight;
-                }
             }
         }
         this.savedData = this.sdkApi.getCardServerData(this.cardId);
@@ -1294,6 +1290,12 @@ class WidgetBase {
         ++WidgetBase.widgetIndex;
         this.resetStartReadyPromise();
     }
+    get submitButtonViewHeight() {
+        if (this.submitButtonView != null) {
+            return this.submitButtonView.clientHeight;
+        }
+        return 0;
+    }
     resetStartReadyPromise() {
         this.startReadyPromise = new Promise(resolve => {
             this.startReadyResolve = resolve;
@@ -1795,8 +1797,9 @@ class WidgetCopy extends WidgetBase {
         initWidget: function (nodeList, localData) {
             // prevent initWidget for result layer
             const elements = slice.call(nodeList).filter(element => !element.classList.contains("narrative-element-copy-result-variant"));
-            WidgetCopy.initWidgets((element, options) => new WidgetCopy(element, options), elements, localData);
-            elements.forEach(element => WidgetCopy.getInstance(element)?.onStart());
+            WidgetCopy.initWidgets((element, options) => new WidgetCopy(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetCopy.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetCopy.getInstance(element)?.onStart();
@@ -2001,8 +2004,9 @@ class WidgetDataInput extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
-            elements.forEach(element => WidgetDataInput.getInstance(element)?.onStart());
+            WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData).then(() => {
+                elements.forEach(element => WidgetDataInput.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetDataInput.getInstance(element)?.onStart();
@@ -2239,8 +2243,9 @@ class WidgetDateCountdown extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, layers, localData) {
             const elements = slice.call(nodeList);
-            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData);
-            elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData).then(() => {
+                elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetDateCountdown.getInstance(element)?.onStart();
@@ -2888,8 +2893,9 @@ class WidgetPoll extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
-            WidgetPoll.getInstance(element)?.onStart();
+            WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData).then(() => {
+                WidgetPoll.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetPoll.getInstance(element)?.onStart();
@@ -3083,8 +3089,9 @@ class WidgetPollLayers extends WidgetBase {
                 layers = localData;
                 localData = undefined;
             }
-            WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData);
-            WidgetPollLayers.getInstance(element)?.onStart();
+            WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData).then(() => {
+                WidgetPollLayers.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetPollLayers.getInstance(element)?.onStart();
@@ -3401,13 +3408,14 @@ class WidgetQuest extends WidgetBase {
                 WidgetQuest.initWidgets((element, options) => new WidgetQuest(element, options), [element], localData).then(localData => {
                     const widget = WidgetQuest.getInstance(element);
                     if (widget) {
-                        resolve(widget.init());
+                        const result = widget.init();
+                        widget.onStart();
+                        resolve(result);
                     }
                     else {
                         resolve(true);
                     }
                 });
-                WidgetQuest.getInstance(element)?.onStart();
             });
         },
         onStart: function (element) {
@@ -3498,7 +3506,7 @@ class WidgetQuiz extends WidgetBase {
         this.localData["_q_g_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+            if (this.submitButtonAnimatedView != null) {
                 this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
@@ -3611,8 +3619,9 @@ class WidgetQuiz extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
-            WidgetQuiz.getInstance(element)?.onStart();
+            WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData).then(() => {
+                WidgetQuiz.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetQuiz.getInstance(element)?.onStart();
@@ -3698,8 +3707,8 @@ class WidgetQuizGrouped extends WidgetBase {
         this.localData["_q_gg_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
         this.startReadyPromise.then(() => {
@@ -3821,8 +3830,9 @@ class WidgetQuizGrouped extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
-            WidgetQuizGrouped.getInstance(element)?.onStart();
+            WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData).then(() => {
+                WidgetQuizGrouped.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetQuizGrouped.getInstance(element)?.onStart();
@@ -3979,6 +3989,7 @@ class WidgetRangeSlider extends WidgetBase {
         create: false,
         localData: {},
         rangeClass: "slider-view",
+        rangeBackgroundClass: "slider-background-view",
         activeClass: "rangeslider--active",
         horizontalClass: "rangeslider--horizontal",
         verticalClass: "rangeslider--vertical",
@@ -4004,6 +4015,7 @@ class WidgetRangeSlider extends WidgetBase {
     fill;
     handle;
     range;
+    rangeBgView;
     DIMENSION;
     DIRECTION;
     DIRECTION_STYLE;
@@ -4046,11 +4058,14 @@ class WidgetRangeSlider extends WidgetBase {
         this.handle = getValueOrException(this.element.querySelector(`.${this.options.handleClass}`), `Empty .${this.options.handleClass}`);
         this.range = getValueOrException(this.element.querySelector(`.${this.options.rangeClass}`), `Empty .${this.options.rangeClass}`);
         this.range.id = this.id;
+        this.rangeBgView = getValueOrException(this.element.querySelector(`.${this.options.rangeBackgroundClass}`), `Empty .${this.options.rangeBackgroundClass}`);
         // if (this.range.classList.contains(this.options['horizontalClass'])) {
         this.orientation = "horizontal";
         // } else if (this.range.classList.contains(this.options['verticalClass'])) {
         //   this.orientation = 'vertical';
         // }
+        // enable expanded tap area (disabled by default for backward compatibility)
+        this.element.classList.add("width-expanded-slider-tap-area");
         this.DIMENSION = constants.orientation[this.orientation].dimension;
         this.DIRECTION = constants.orientation[this.orientation].direction;
         this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.layoutDirection];
@@ -4253,8 +4268,9 @@ class WidgetRangeSlider extends WidgetBase {
             this.step = tryParseFloat(this.elementSlider.getAttribute("step"), 1);
         }
         this.handleDimension = getDimension(this.handle, ("offset" + ucfirst(this.DIMENSION)));
-        this.rangeDimension = getDimension(this.range, ("offset" + ucfirst(this.DIMENSION)));
-        this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.rangeDimension = getDimension(this.rangeBgView, ("offset" + ucfirst(this.DIMENSION)));
+        // this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.maxHandlePos = this.rangeDimension;
         this.grabPos = this.handleDimension / 2;
         this.position = this.getPositionFromValue(this.value);
         if (updateAttributes) {
@@ -4293,7 +4309,7 @@ class WidgetRangeSlider extends WidgetBase {
         if ((" " + e.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1) {
             return;
         }
-        const pos = this.getRelativePosition(e), rangePos = this.range.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
+        const pos = this.getRelativePosition(e), rangePos = this.rangeBgView.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
         this.setPosition(setPos);
         if (pos >= handlePos && pos < handlePos + this.handleDimension) {
             this.grabPos = pos - handlePos;
@@ -4321,8 +4337,8 @@ class WidgetRangeSlider extends WidgetBase {
         }
         else {
             this.env.requestAnimationFrame(() => {
-                if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                    this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+                if (this.submitButtonAnimatedView != null) {
+                    this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
                 }
             });
         }
@@ -4350,11 +4366,14 @@ class WidgetRangeSlider extends WidgetBase {
             uiPos = this.maxHandlePos - uiPos;
         }
         // this.rangeDimension - slider width
-        this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
+        this.fill.style.transform = "translateX(" + (uiPos - this.rangeDimension) + "px)";
+        // this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
         // this.fill.style[this.DIMENSION]         = (uiPos + this.grabPos) + 'px';
         const percentage = this.getPercentageFromValue(value);
         // 1 + (scale - 1) * percentage
-        this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
+        this.handle.style.setProperty("--offset", String(uiPos));
+        this.handle.style.setProperty("--percentage", String(percentage));
+        // this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
         // this.handle.style[this.DIRECTION_STYLE] = uiPos + 'px';
         this.setValue(value);
         // Update globals
@@ -4465,8 +4484,9 @@ class WidgetRangeSlider extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
-            WidgetRangeSlider.getInstance(element)?.onStart();
+            WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData).then(() => {
+                WidgetRangeSlider.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetRangeSlider.getInstance(element)?.onStart();
@@ -4730,8 +4750,9 @@ class WidgetRate extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData);
-            elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetRate.getInstance(element)?.onStart();
@@ -4891,8 +4912,9 @@ class WidgetShare extends WidgetBase {
                 localData = undefined;
             }
             const elements = slice.call(nodeList);
-            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData);
-            elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData).then(() => {
+                elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetShare.getInstance(element)?.onStart();
@@ -5088,8 +5110,8 @@ class WidgetTest extends WidgetBase {
         this.localData["_t_g_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
         this.startReadyPromise.then(() => {
@@ -5174,8 +5196,9 @@ class WidgetTest extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
-            WidgetTest.getInstance(element)?.onStart();
+            WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData).then(() => {
+                WidgetTest.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetTest.getInstance(element)?.onStart();
@@ -5429,8 +5452,8 @@ class WidgetVote extends WidgetBase {
     }
     _showSubmitBtn() {
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
     }
@@ -5653,10 +5676,13 @@ class WidgetVote extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData).then(localData => {
+            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData)
+                .then(localData => {
                 WidgetVote.api.fallbackInitOnMultiSlide(element, localData);
+            })
+                .then(() => {
+                WidgetVote.getInstance(element)?.onStart();
             });
-            WidgetVote.getInstance(element)?.onStart();
         },
         onStart: function (element) {
             WidgetVote.getInstance(element)?.onStart();
@@ -15329,8 +15355,9 @@ class WidgetBarcode extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData);
-            elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetBarcode.getInstance(element)?.onStart();