@inappstory/react-sdk 1.9.5 → 1.9.6

package/dist/index.esm.mjs

@@ -20,8 +20,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_mobx_react_lite_9dacf130__ from "mobx-reac
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee__ from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
-import * as __WEBPACK_EXTERNAL_MODULE_lit_static_html_js_21a342d6__ from "lit/static-html.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__ from "lit/directives/style-map.js";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_static_html_js_21a342d6__ from "lit/static-html.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_unsafe_html_js_56553e3e__ from "lit/directives/unsafe-html.js";
 /******/ var __webpack_modules__ = ({
@@ -3688,6 +3688,12 @@ class IamAppearanceCommonOptions {
             writable: true,
             value: {}
         });
+        Object.defineProperty(this, "zIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.background = this.mapBackgroundDtoToModel(optionsDto.background);
         this.cardAppearance = (_a = optionsDto.card_appearance) !== null && _a !== void 0 ? _a : {};
     }
@@ -10543,7 +10549,7 @@ class GameClientConfig {
             value: void 0
         });
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.5";
+        const sdkVersion = "1.9.6";
         const placeholders = this.storyManager.rootStore.placeholderStore.placeholders;
         const session = this.storyManager.rootStore.sessionStore.session;
         this.sessionId = session.id;
@@ -17167,7 +17173,7 @@ let IamReaderViewModel = (() => {
                 this.throwIfAborted(options.signal);
                 const message = await this.iamDisplayService.getMessageById(messageId, options);
                 this.throwIfAborted(options.signal);
-                await this.open(message);
+                await this.open(message, options.appearance);
                 return message;
             }
             async showMessageByEvent(eventName, options = {}) {
@@ -17177,7 +17183,7 @@ let IamReaderViewModel = (() => {
                 this.throwIfAborted(options.signal);
                 const message = await this.iamDisplayService.getMessageByEvent(eventName, options);
                 this.throwIfAborted(options.signal);
-                await this.open(message);
+                await this.open(message, options.appearance);
                 return message;
             }
             async forceClose() {
@@ -17195,8 +17201,11 @@ let IamReaderViewModel = (() => {
                     return;
                 this.forceClose();
             }
-            async open(message) {
+            async open(message, appearance) {
                 message.updatePlaceholders(this.storyManager.rootStore.placeholderStore.placeholders);
+                if ((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) !== undefined) {
+                    message.appearanceOptions.zIndex = appearance.zIndex;
+                }
                 this.touchController.init(document.body);
                 this.setActiveMessage(message);
                 this.visibilityObserver.subscribe();
@@ -20895,7 +20904,7 @@ class UgcEditorStore {
         const session = await this.storyManager.rootStore.sessionStore.open();
         const ugcEditorConfigDto = await this.ugcEditorApi.fetchUgcEditorConfig();
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.5";
+        const sdkVersion = "1.9.6";
         this._config = {
             sessionId: session.id,
             apiKey: storyManagerConfig.apiKey,
@@ -21366,11 +21375,11 @@ class StoryManager extends TypedEventEmitter {
         return deviceDescriptor.deviceId;
     }
     get sdkVersionName() {
-        const sdkVersionName = "1.9.5";
+        const sdkVersionName = "1.9.6";
         return sdkVersionName || "0.0.0";
     }
     get sdkVersionCode() {
-        const sdkVersionCode = 10905;
+        const sdkVersionCode = 10906;
         return sdkVersionCode ? parseInt(sdkVersionCode) : 0;
     }
     get lang() {
@@ -21434,7 +21443,7 @@ class StoryManager extends TypedEventEmitter {
         this.rootStore.storyManagerConfigStore.setConfig(configDto);
     }
     setUserAgent(userAgent) {
-        const sdkVersionCode = 10905;
+        const sdkVersionCode = 10906;
         const buildVersion = sdkVersionCode ? parseInt(sdkVersionCode) : 0;
         // According to RFC5987, HTTP header values can legitimately be supplied using the ISO-8859-1 encoding.
         this._userAgent = `${userAgent} ${convertStrToLatin1(navigator.userAgent)}`;
@@ -26993,6 +27002,12 @@ var decorators_js_x = (y) => {
 } 
 var decorators_js_y = (x) => (() => (x))
 const decorators_js_namespaceObject = decorators_js_x({ ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
+;// CONCATENATED MODULE: external "lit/directives/style-map.js"
+var style_map_js_x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var style_map_js_y = (x) => (() => (x))
+const style_map_js_namespaceObject = style_map_js_x({ ["styleMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__.styleMap) });
 ;// CONCATENATED MODULE: ./src/InAppMessaging/controllers/viewportController.ts
 class ViewportController {
     constructor(host) {
@@ -27056,12 +27071,6 @@ const messageViewsByType = {
 
 const bottomSheetStyles = (0,external_lit_namespaceObject.css) `.bottom-sheet{position:fixed;inset:0;left:0;bottom:0;right:0;z-index:999}.bottom-sheet__backdrop{position:fixed;inset:0;left:0;bottom:0;right:0;z-index:-1;background-color:rgba(0,0,0,var(--backdrop-opacity,.5));opacity:0;transition:opacity 225ms cubic-bezier(.4,0,.2,1);pointer-events:none}.bottom-sheet__backdrop--visible{animation:fade-in .3s forwards}.bottom-sheet__backdrop--hidden{animation:fade-out .3s forwards}.bottom-sheet__box{position:absolute;left:0;right:0;bottom:0;will-change:transform;border-top-left-radius:var(--slide-border-top-left-radius,0);border-top-right-radius:var(--slide-border-top-right-radius,0);background-color:transparent;transition:opacity .3s ease,transform .3s ease;transform:translate3d(0,120%,0);pointer-events:all;overflow:hidden}.bottom-sheet__box-wrapper{position:absolute;inset:0;pointer-events:none}.bottom-sheet__box-wrapper.bottom-sheet__box-wrapper--desktop-mode{position:absolute;bottom:0;left:50%;transform:translate3d(-50%,0,0)}.bottom-sheet__box.bottom-sheet__box--open{opacity:1;transform:translate3d(0,0,0)}.bottom-sheet__backdrop.bottom-sheet__backdrop--open{opacity:1;pointer-events:all}.bottom-sheet__header .grab-handler-area{position:absolute;left:50%;transform:translate3d(-50%,0,0);padding:0 32px 16px;z-index:10000;cursor:grab;user-select:none}.bottom-sheet__header .grab-handler{margin-top:8px;width:32px;height:4px;background-color:#00000080;border-radius:var(--grab-handler-border-radius)}`;
 
-;// CONCATENATED MODULE: external "lit/directives/style-map.js"
-var style_map_js_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var style_map_js_y = (x) => (() => (x))
-const style_map_js_namespaceObject = style_map_js_x({ ["styleMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_style_map_js_4fbc7c29__.styleMap) });
 ;// CONCATENATED MODULE: external "lit/directives/class-map.js"
 var class_map_js_x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
@@ -27338,6 +27347,7 @@ let BottomSheet = (() => {
             }, 50);
         }
         render() {
+            var _a;
             if (this.isClosed)
                 return external_lit_namespaceObject.nothing;
             const bottomSheetBoxStyle = {
@@ -27357,7 +27367,10 @@ let BottomSheet = (() => {
                 height: `${this.appearanceOptions.closeButton.height}px`,
                 marginTop: `${this.appearanceOptions.closeButton.marginTop}px`
             };
-            return (0,external_lit_namespaceObject.html) `<div id="bottom-sheet" class="bottom-sheet"><div id="bottom-sheet__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
+            const bottomSheetStyle = {
+                zIndex: (_a = this.appearanceOptions.zIndex) !== null && _a !== void 0 ? _a : 999
+            };
+            return (0,external_lit_namespaceObject.html) `<div id="bottom-sheet" class="bottom-sheet" style="${(0,style_map_js_namespaceObject.styleMap)(bottomSheetStyle)}"><div id="bottom-sheet__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
                 "--backdrop-opacity": this.appearanceOptions.backdrop.opacity
             })}" @click="${this.close}" class="bottom-sheet__backdrop ${(0,class_map_js_namespaceObject.classMap)({
                 "bottom-sheet__backdrop--open": this.isVisible
@@ -27739,6 +27752,7 @@ let Modal_Modal = (() => {
             return "fadeOut";
         }
         render() {
+            var _a;
             const borderRadius = this.fullscreen ? 0 : this.appearanceOptions.borderRadius;
             const modalBoxContentStyle = {
                 background: this.appearanceOptions.background,
@@ -27754,7 +27768,10 @@ let Modal_Modal = (() => {
                 ? this.getEnterModalAnimationCSSClass(animationType)
                 : this.getOutModalAnimationCSSClass(animationType);
             const backdropAnimationClass = this.getBackdropAnimationCSSClass(this.isVisible);
-            return (0,external_lit_namespaceObject.html) `<div class="modal"><div id="modal__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
+            const modalStyle = {
+                zIndex: (_a = this.appearanceOptions.zIndex) !== null && _a !== void 0 ? _a : 1000
+            };
+            return (0,external_lit_namespaceObject.html) `<div class="modal" style="${(0,style_map_js_namespaceObject.styleMap)(modalStyle)}"><div id="modal__backdrop" style="${(0,style_map_js_namespaceObject.styleMap)({
                 "--backdrop-opacity": this.appearanceOptions instanceof IamModalAppearanceOptions
                     ? this.appearanceOptions.backdrop.opacity
                     : undefined
@@ -28585,6 +28602,7 @@ var InAppMessagingReader_classPrivateFieldSet = (undefined && undefined.__classP
 
 
 
+
 let InAppMessagingReader = (() => {
     var _InAppMessagingReader_options_accessor_storage, _InAppMessagingReader_desktopMode_accessor_storage, _InAppMessagingReader_dir_accessor_storage, _InAppMessagingReader_viewModel_accessor_storage, _InAppMessagingReader_open_accessor_storage;
     let _classDecorators = [safeCustomElement("iam-reader"), mobxObserver];
@@ -28695,7 +28713,7 @@ let InAppMessagingReader = (() => {
             }
         }
         render() {
-            var _a, _b;
+            var _a, _b, _c;
             const message = (_a = this.viewModel) === null || _a === void 0 ? void 0 : _a.activeMessage;
             const touchController = (_b = this.viewModel) === null || _b === void 0 ? void 0 : _b.touchController;
             if (!(message === null || message === void 0 ? void 0 : message.context))
@@ -28703,7 +28721,10 @@ let InAppMessagingReader = (() => {
             const type = message.type;
             const messageGeometry = this.createMessageGeometry(type, message.appearanceOptions);
             const slideGeometry = this.createSlideGeometry(messageGeometry);
-            return (0,external_lit_namespaceObject.html) `<message-view-factory type="${type}" @closed="${this.handleClosed}" .disableClose="${message.disableClose}" .appearanceOptions="${message.appearanceOptions}" .geometry="${messageGeometry}" .open="${this.open}" .dir="${this.dir}" .desktopMode="${this.desktopMode}" .touchController="${touchController}"><message-slide .message="${message}" .styleContext="${message.context.style}" .geometry="${slideGeometry}"></message-slide><iam-loader .background="${"transparent"}" .needShowErrorScreen="${message.needShowErrorScreen}" .needShowLoaderScreen="${message.needShowLoaderScreen}" @reload="${this.handleReloadMessage}"></iam-loader></message-view-factory>`;
+            const containerStyle = {
+                zIndex: (_c = message.appearanceOptions.zIndex) !== null && _c !== void 0 ? _c : 1000
+            };
+            return (0,external_lit_namespaceObject.html) `<div class="iam-container" style="${(0,style_map_js_namespaceObject.styleMap)(containerStyle)}"><message-view-factory type="${type}" @closed="${this.handleClosed}" .disableClose="${message.disableClose}" .appearanceOptions="${message.appearanceOptions}" .geometry="${messageGeometry}" .open="${this.open}" .dir="${this.dir}" .desktopMode="${this.desktopMode}" .touchController="${touchController}"><message-slide .message="${message}" .styleContext="${message.context.style}" .geometry="${slideGeometry}"></message-slide><iam-loader .background="${"transparent"}" .needShowErrorScreen="${message.needShowErrorScreen}" .needShowLoaderScreen="${message.needShowLoaderScreen}" @reload="${this.handleReloadMessage}"></iam-loader></message-view-factory></div>`;
         }
     };
     _InAppMessagingReader_options_accessor_storage = new WeakMap();