@alipay/ams-checkout 0.0.1691743027-dev.4 → 0.0.1691743027-dev.5

package/esm/plugin/component/index.js

@@ -15,31 +15,23 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
 /* eslint-disable no-console */
-import { closeImg, COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
+import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID } from "../../constant";
 import { queryPaymentInfo } from "../../service";
-import { componentSignEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum, eventCodeEnum } from "../../types";
-import { addSetFontSizeEvent, amsSetSize, getDesignFontSize, getType, isJsonString, isPC } from "../../util";
+import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
+import { getType, isJsonString, isPC } from "../../util";
 import { isLocalMock } from "../../util/mock";
 import { createIframe, getAppDomain, getIframeUrl } from "./cashierApp";
-import { componentAddCSS, inlineComponentAddCss, showInlineLoading } from "./component.style";
+import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
+import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup } from "./component.popup.style";
 var _window = window,
   innerHeight = _window.innerHeight;
-var componentContainerId = 'ams-component-container';
-var componentSectionId = 'ams-component-section';
-var componentCloseBlockId = 'asm-component-close-block';
-var componentRetentionId = 'ams-component-retention';
-var mockupId = 'ams-component-mockup';
-var loadingId = 'ams-component-loading';
-var listenerPrefix = '_ams_sdk_component_listener';
-var inlineBaseStyleId = 'ams-inline-component-style';
-var loadTimeLimit = 15000;
 var ComponentApp = /*#__PURE__*/function () {
   function ComponentApp() {
     _classCallCheck(this, ComponentApp);
     _defineProperty(this, "app", void 0);
-    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "AMSSDK", void 0);
     _defineProperty(this, "platform", void 0);
+    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "createIframeNode", void 0);
     _defineProperty(this, "_selector", void 0);
     _defineProperty(this, "_appVersion", void 0);
@@ -54,7 +46,7 @@ var ComponentApp = /*#__PURE__*/function () {
     _defineProperty(this, "_renderDisplayType", renderDisplayTypeEnum.popup);
     this._appVersion = '1.5.0';
     this._isInitComponent = false;
-    this._selector = "#".concat(componentSectionId);
+    this._selector = "#".concat(COMPONENT_SECTION_ID);
     this.createIframeNode = function () {
       return Promise.resolve();
     };
@@ -111,7 +103,7 @@ var ComponentApp = /*#__PURE__*/function () {
       this._componentSign = componentSign;
       if (renderParams !== null && renderParams !== void 0 && renderParams.selector) this._selector = renderParams.selector;
       this._renderDisplayType = renderParams.renderDisplayType;
-      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(componentContainerId) : this._selector;
+      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
       this._performanceData.push({
         key: 'sdk_create_component',
         value: Date.now()
@@ -120,13 +112,13 @@ var ComponentApp = /*#__PURE__*/function () {
         code: eventCodeEnum.SDK_START_OF_LOADING
       });
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        this.createInlineBaseElement(renderParams);
+        var container = createInlineBaseElement(this._selector);
+        if (container) this.renderInlineLoading(renderParams, container);
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        this.createBaseElement();
-        this.setContainerClass();
-        this.createRetentionPopup();
-        this.createMockup();
+        createBaseElement(this.platform, this.closeBtnFunc);
+        createRetentionPopup(this.platform, this.hideRetentionPopupFunc, this.retentionPopupLeaveFunc);
+        createMockup();
         this.renderPopupLoading(renderParams);
       }
       this.createApp(renderParams);
@@ -139,17 +131,23 @@ var ComponentApp = /*#__PURE__*/function () {
       });
     }
   }, {
-    key: "renderPopupLoading",
-    value: function renderPopupLoading(renderParams) {
+    key: "renderInlineLoading",
+    value: function renderInlineLoading(renderParams, selector) {
       var _renderParams$appeara;
       var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading;
       showLoading = typeof showLoading === 'boolean' ? showLoading : true;
+      if (showLoading) addInlineLoading(selector, this.platform);
+    }
+  }, {
+    key: "renderPopupLoading",
+    value: function renderPopupLoading(renderParams) {
+      var _renderParams$appeara2;
+      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
+      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
       if (!showLoading) return;
-      if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var mockup = document.getElementById(mockupId);
-        if (mockup) mockup.style.display = 'block';
-        return this.showPopupLoading();
-      }
+      var mockup = document.getElementById(MOCKUP_ID);
+      if (mockup) mockup.style.display = 'block';
+      addPopupLoading();
     }
   }, {
     key: "createLoadAppPromise",
@@ -159,7 +157,7 @@ var ComponentApp = /*#__PURE__*/function () {
         _this2._loadAppPromiseResolve = resolve;
         setTimeout(function () {
           reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT);
-        }, loadTimeLimit);
+        }, LOADTIME_LIMIT);
       }).catch(function (error) {
         _this2.dispatchToSDK(EVENT.error.name, {
           code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code,
@@ -266,16 +264,32 @@ var ComponentApp = /*#__PURE__*/function () {
       return this._actionQueryPromise;
     }
   }, {
-    key: "cleanApp",
-    value: function cleanApp() {
+    key: "cleanElement",
+    value: function cleanElement() {
       try {
-        this.app = null;
-        this._removeEventListener();
+        var _document$getElementB;
+        // selector and container
         if (getType(this._selector) === 'string') {
           var selectorDom = document.querySelector(this._selector);
           if (selectorDom) selectorDom.innerHTML = '';
         }
-        // eslint-disable-next-line no-empty
+        var container = document.getElementById(COMPONENT_CONTAINER_ID);
+        if (container) container === null || container === void 0 ? void 0 : container.remove();
+
+        // animation
+        (_document$getElementB = document.getElementById("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style"))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+
+        // mockup
+        var body = document.getElementsByTagName('body')[0];
+        body.style.overflow = 'auto';
+        var mockup = document.getElementById(MOCKUP_ID);
+        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
+
+        // retentionPopup
+        this.removeRetentionPopup(this.platform);
+
+        // listener
+        this._removeEventListener();
       } catch (error) {
         console.error(error);
       }
@@ -348,7 +362,7 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "resizeListener",
     value: function resizeListener() {
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.transition = 'none';
       this.dispatchToApp({
         context: {
@@ -368,16 +382,16 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "_addEventListener",
     value: function _addEventListener() {
       this._removeEventListener();
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
-      window.addEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.addEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
+      window.addEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.addEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
   }, {
     key: "_removeEventListener",
     value: function _removeEventListener() {
-      window.removeEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.removeEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+      window.removeEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.removeEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
 
     /**
@@ -446,29 +460,28 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function handleSizeChanged(data) {
       var _data$context$data2;
       if (((_data$context$data2 = data.context.data) === null || _data$context$data2 === void 0 ? void 0 : _data$context$data2.height) <= 1) return;
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.height = "".concat(data.context.data.height, "px");
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var _document$getElementB;
-        var mockup = document.getElementById(mockupId);
+        var _document$getElementB2;
+        var mockup = document.getElementById(MOCKUP_ID);
         if (mockup) {
-          mockup.style.background = '#000000';
-          mockup.style.opacity = '0.6';
+          mockup.style.background = 'rgb(0, 0, 0, 0.6)';
           mockup.style.display = 'block';
         }
-        (_document$getElementB = document.getElementById(loadingId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+        (_document$getElementB2 = document.getElementById(LOADING_ID)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
         if (this.platform === 'desktop') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
           if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
         }
         if (this.platform === 'mobile') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-          var animationStyleId = "".concat(componentContainerId, "-").concat(this.platform, "-animation-style");
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+          var animationStyleId = "".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style");
           var animationStyle = document.getElementById(animationStyleId);
           if (animationStyle) animationStyle === null || animationStyle === void 0 ? void 0 : animationStyle.remove();
 
           // 弹出和弹入动画
-          var runkeyframes = "@keyframes ".concat(componentContainerId, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(componentContainerId, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
+          var runkeyframes = "@keyframes ".concat(COMPONENT_CONTAINER_ID, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(COMPONENT_CONTAINER_ID, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
           // 创建style标签
           var style = document.createElement('style');
           style.id = animationStyleId;
@@ -486,8 +499,8 @@ var ComponentApp = /*#__PURE__*/function () {
         }
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        var _document$getElementB2;
-        (_document$getElementB2 = document.getElementById(loadingId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+        var _document$getElementB3;
+        (_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
       }
       this.app.style.height = "".concat(data.context.data.height, "px");
       this.app.style.opacity = '1';
@@ -552,21 +565,21 @@ var ComponentApp = /*#__PURE__*/function () {
         closeDialogData = _ref3$closeDialogData === void 0 ? {} : _ref3$closeDialogData;
       try {
         if (closeDialogData) {
-          var retentionTitle = document.getElementById("".concat(componentRetentionId, "-title"));
+          var retentionTitle = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-title"));
           if (retentionTitle) {
             var _closeDialogData$titl, _closeDialogData$titl2, _closeDialogData$titl3;
             retentionTitle.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl = closeDialogData.title) === null || _closeDialogData$titl === void 0 ? void 0 : _closeDialogData$titl.fontSize, "px");
             retentionTitle.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl2 = closeDialogData.title) === null || _closeDialogData$titl2 === void 0 ? void 0 : _closeDialogData$titl2.fontColor;
             retentionTitle.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl3 = closeDialogData.title) === null || _closeDialogData$titl3 === void 0 ? void 0 : _closeDialogData$titl3.text;
           }
-          var retentionMessage = document.getElementById("".concat(componentRetentionId, "-sub-title"));
+          var retentionMessage = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-sub-title"));
           if (retentionMessage) {
             var _closeDialogData$mess, _closeDialogData$mess2, _closeDialogData$mess3;
             retentionMessage.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess = closeDialogData.message) === null || _closeDialogData$mess === void 0 ? void 0 : _closeDialogData$mess.fontSize, "px");
             retentionMessage.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess2 = closeDialogData.message) === null || _closeDialogData$mess2 === void 0 ? void 0 : _closeDialogData$mess2.fontColor;
             retentionMessage.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess3 = closeDialogData.message) === null || _closeDialogData$mess3 === void 0 ? void 0 : _closeDialogData$mess3.text;
           }
-          var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
+          var remainBtn = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-remain"));
           if (remainBtn) {
             var _closeDialogData$btnO, _closeDialogData$btnO2, _closeDialogData$btnO3, _closeDialogData$btnO4, _closeDialogData$btnO5, _closeDialogData$btnO7;
             remainBtn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO = closeDialogData.btnOK) === null || _closeDialogData$btnO === void 0 ? void 0 : _closeDialogData$btnO.text;
@@ -578,7 +591,7 @@ var ComponentApp = /*#__PURE__*/function () {
               remainBtn.style.border = "1px solid ".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO6 = closeDialogData.btnOK) === null || _closeDialogData$btnO6 === void 0 ? void 0 : _closeDialogData$btnO6.bg);
             } else remainBtn.style.backgroundColor = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO7 = closeDialogData.btnOK) === null || _closeDialogData$btnO7 === void 0 ? void 0 : _closeDialogData$btnO7.bg;
           }
-          var leaveBrn = document.getElementById("".concat(componentRetentionId, "-leave"));
+          var leaveBrn = document.getElementById("".concat(COMPONENT_RETENTION_ID, "-leave"));
           if (leaveBrn) {
             var _closeDialogData$btnC, _closeDialogData$btnC2, _closeDialogData$btnC3, _closeDialogData$btnC4, _closeDialogData$btnC5, _closeDialogData$btnC7;
             leaveBrn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC = closeDialogData.btnCancel) === null || _closeDialogData$btnC === void 0 ? void 0 : _closeDialogData$btnC.text;
@@ -598,11 +611,11 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "handleCloseBtnShow",
     value: function handleCloseBtnShow(showClose) {
-      var closeBlock = document.getElementById(componentCloseBlockId);
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_BLOCK_ID);
       if (showClose) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       } else if (showClose === false) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       }
     }
 
@@ -716,71 +729,39 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       return sendRenderEvent;
     }()
-  }, {
-    key: "showPopupLoading",
-    value: function showPopupLoading() {
-      var loading = document.createElement('div');
-      loading === null || loading === void 0 ? void 0 : loading.classList.add(loadingId);
-      loading.id = loadingId;
-      loading.innerHTML = '<div class="line"><div></div><div></div><div></div><div></div></div>';
-      loading.style.fontSize = "".concat(getDesignFontSize(), "px");
-      var body = document.getElementsByTagName('body')[0];
-      body === null || body === void 0 ? void 0 : body.appendChild(loading);
-    }
-
-    /**
-     * @description show cashier
-     */
-  }, {
-    key: "setContainerClass",
-    value: function setContainerClass() {
-      var cashier = document.getElementById(componentContainerId);
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.remove("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform));
-    }
-
     /**
      * @description close cashier
      */
   }, {
     key: "cleanContainer",
     value: function cleanContainer() {
-      var _document$getElementB3;
+      var _document$getElementB4,
+        _this5 = this;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
       this._performanceData = [];
       this._isInitComponent = false;
-      (_document$getElementB3 = document.getElementById(loadingId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
-      this.hideComponentAndCleanDom(immediately);
+      this.app = null;
+      (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
+      this.hideComponentAnimation();
+      var mockup = document.getElementById(MOCKUP_ID);
+      mockup === null || mockup === void 0 ? void 0 : mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));
+      if (immediately) this.cleanElement();else {
+        setTimeout(function () {
+          _this5.cleanElement();
+        }, 300);
+      }
     }
   }, {
-    key: "hideComponentAndCleanDom",
-    value: function hideComponentAndCleanDom() {
-      var _this5 = this;
-      var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var container = document.getElementById(componentContainerId);
+    key: "hideComponentAnimation",
+    value: function hideComponentAnimation() {
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (container) {
         // size变化动画取消
         container.style.transition = '';
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform));
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      }
-      var removeMockupAndApp = function removeMockupAndApp() {
-        var _document$getElementB4;
-        var body = document.getElementsByTagName('body')[0];
-        body.style.overflow = 'auto';
-        var mockup = document.getElementById(mockupId);
-        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
-        if (container) container.style.height = '';
-        (_document$getElementB4 = document.getElementById("".concat(componentContainerId, "-").concat(_this5.platform, "-animation-style"))) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
-        _this5.removeRetentionPopup();
-        _this5.cleanApp();
-      };
-      if (immediately) removeMockupAndApp();else {
-        setTimeout(function () {
-          removeMockupAndApp();
-        }, 300);
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform));
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-hidden-").concat(this.platform));
       }
     }
   }, {
@@ -792,143 +773,33 @@ var ComponentApp = /*#__PURE__*/function () {
         this.dispatchToSDK(EVENT.close.name, {});
       }
     }
-
-    /**
-     * @description create mount node
-     */
-  }, {
-    key: "createBaseElement",
-    value: function createBaseElement() {
-      if (document.getElementById(componentContainerId)) return;
-      componentAddCSS();
-      addSetFontSizeEvent();
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-hidden-").concat(this.platform);
-      amsComponentContainer.id = componentContainerId;
-      amsSetSize(null, amsComponentContainer);
-      document.body.appendChild(amsComponentContainer);
-      var amsComponentSection = document.createElement('div');
-      amsComponentSection.className = "ams-component-section-".concat(this.platform);
-      amsComponentSection.id = componentSectionId;
-      amsComponentContainer.appendChild(amsComponentSection);
-      this.createCloseBtn();
-    }
-  }, {
-    key: "createInlineBaseElement",
-    value: function createInlineBaseElement(renderParams) {
-      var _renderParams$appeara2;
-      var inlineBaseStyle = document.getElementById(inlineBaseStyleId);
-      if (!inlineBaseStyle) inlineComponentAddCss();
-      if (document.getElementById(componentContainerId)) return;
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-inline");
-      amsComponentContainer.id = componentContainerId;
-      var selectorDom = document.querySelector(this._selector);
-      if (selectorDom) selectorDom.appendChild(amsComponentContainer);
-      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
-      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
-      if (showLoading) showInlineLoading(amsComponentContainer, this.platform);
-    }
-  }, {
-    key: "createCloseBtn",
-    value: function createCloseBtn() {
-      var _this6 = this;
-      var container = document.getElementById(componentContainerId);
-      // close btn
-      var closeBtnHTML = "<img class='".concat(componentCloseBlockId, "-btn-").concat(this.platform, "' src=\"").concat(closeImg, "\"/>");
-      var closeBlock = document.createElement('div');
-      closeBlock.classList.add("".concat(componentCloseBlockId, "-").concat(this.platform), "".concat(componentCloseBlockId, "-hidden"));
-      closeBlock.id = componentCloseBlockId;
-      closeBlock.innerHTML = closeBtnHTML;
-      closeBlock.addEventListener(this._clickEventName, function () {
-        _this6.closeBtnFunc();
-      });
-      if (container) container.appendChild(closeBlock);
-    }
-  }, {
-    key: "createRetentionPopup",
-    value: function createRetentionPopup() {
-      // retention popup
-      var retentionPopup = document.createElement('div');
-      retentionPopup.id = componentRetentionId;
-      retentionPopup.classList.add("".concat(componentRetentionId, "-").concat(this.platform));
-      retentionPopup.innerHTML = "\n    <span id=\"".concat(componentRetentionId, "-title\" class=\"").concat(componentRetentionId, "-title-").concat(this.platform, "\">\n      Are you sure you want to leave?\n    </span>\n    <span\n      id=\"").concat(componentRetentionId, "-sub-title\"\n      class=\"").concat(componentRetentionId, "-sub-title-").concat(this.platform, "\"\n    >\n      If you leave this page, you'll have to start over again.\n    </span>\n    <div class=\"").concat(componentRetentionId, "-btn-block-").concat(this.platform, "\">\n      <div id=\"").concat(componentRetentionId, "-remain\" class=\"").concat(componentRetentionId, "-remain-").concat(this.platform, "\">\n        Continue Payment\n      </div>\n      <div id=\"").concat(componentRetentionId, "-leave\" class=\"").concat(componentRetentionId, "-leave-").concat(this.platform, "\">\n        Leave\n      </div>\n    </div>");
-      document.body.appendChild(retentionPopup);
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.addEventListener(this._clickEventName, this.hideRetentionPopup.bind(this));
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.addEventListener(this._clickEventName, this.retentionPopupLeaveFunc.bind(this));
-      }
-    }
   }, {
     key: "retentionPopupLeaveFunc",
     value: function retentionPopupLeaveFunc() {
       this.dispatchToSDK(EVENT.close.name, {});
-      this.hideRetentionPopup();
+      this.hideRetentionPopupFunc();
       this.cleanContainer();
     }
   }, {
     key: "removeRetentionPopup",
-    value: function removeRetentionPopup() {
-      var _document$getElementB5;
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.removeEventListener(this._clickEventName, this.hideRetentionPopup);
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.removeEventListener(this._clickEventName, this.retentionPopupLeaveFunc);
-      }
-      (_document$getElementB5 = document.getElementById(componentRetentionId)) === null || _document$getElementB5 === void 0 ? void 0 : _document$getElementB5.remove();
+    value: function removeRetentionPopup(platform) {
+      _removeRetentionPopup(platform, this.hideRetentionPopupFunc, this.retentionPopupLeaveFunc);
     }
   }, {
     key: "showRetentionPopup",
     value: function showRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
+      var retentionPopup = document.getElementById(COMPONENT_RETENTION_ID);
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (retentionPopup) {
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-opacity"));
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-show"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-opacity"));
+        retentionPopup.classList.remove("".concat(COMPONENT_RETENTION_ID, "-hidden"));
+        retentionPopup.classList.add("".concat(COMPONENT_RETENTION_ID, "-show"));
       }
     }
   }, {
-    key: "hideRetentionPopup",
-    value: function hideRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
-      if (retentionPopup) {
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-show"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-hidden"));
-        setTimeout(function () {
-          retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-          container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-opacity"));
-        }, 300);
-      }
-    }
-    /**
-     * @description create mockup
-     */
-  }, {
-    key: "createMockup",
-    value: function createMockup() {
-      var body = document.getElementsByTagName('body')[0];
-      body.style.overflow = 'hidden';
-      var mockup = document.createElement('div');
-      mockup.style.width = '100vw';
-      mockup.style.height = '100vh';
-      mockup.style.position = 'fixed';
-      mockup.style.top = '0';
-      mockup.style.left = '0';
-      mockup.style.zIndex = '1000';
-      mockup.style.background = '#ffffff';
-      mockup.style.opacity = '0.5';
-      mockup.style.display = 'none';
-      mockup.id = mockupId;
-      body.appendChild(mockup);
+    key: "hideRetentionPopupFunc",
+    value: function hideRetentionPopupFunc() {
+      hideRetentionPopup();
     }
   }, {
     key: "submitForm",

package/package.json

@@ -1 +1 @@
-{"name":"@alipay/ams-checkout","version":"0.0.1691743027-dev.4","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}
+{"name":"@alipay/ams-checkout","version":"0.0.1691743027-dev.5","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}

package/esm/plugin/component/component.style.js

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), the rights to use, copy, modify, merge, and/or distribute the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
- * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
- */
-import { platformEnum } from "../../types";
-import { amsSetSize } from "../../util";
-var componentContainerId = 'ams-component-container';
-var componentSectionId = 'ams-component-section';
-var componentCloseBlockId = 'asm-component-close-block';
-var componentRetentionId = 'ams-component-retention';
-var mockupId = 'ams-component-mockup';
-var loadingId = 'ams-component-loading';
-var listenerPrefix = '_ams_sdk_component_listener';
-var inlineBaseStyleId = 'ams-inline-component-style';
-var inlineImgClassName = 'inline-loading';
-var loadTimeLimit = 15000;
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  80% {\n    opacity: 1\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation-fill-mode: forwards;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n}\n\n";
-export var componentAddCSS = function componentAddCSS() {
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  style.innerHTML = componentCss;
-  document.head.appendChild(style);
-};
-var inlineComponentCss = "#ams-checkout-component-desktop{\n  border-radius: 8px;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n#ams-checkout-component-mobile{\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.".concat(componentContainerId, "-inline{\n  width: 100%;\n  height: auto;\n  position: relative;\n  line-height: 0;\n  display: flex;\n}\n#").concat(loadingId, "{\n  width: 100%;\n  flex: 1;\n}\n.").concat(inlineImgClassName, "{\n  width: 100%;\n  height: auto;\n  object-fit: contain;\n  box-sizing: border-box;\n}\n.").concat(inlineImgClassName, "-mobile{\n  padding: 0 0.16em;\n}\n.").concat(inlineImgClassName, "-desktop{}\n");
-export var inlineComponentAddCss = function inlineComponentAddCss() {
-  var style = document.createElement('style');
-  style.id = 'ams-inline-component-style';
-  style.type = 'text/css';
-  style.innerHTML = inlineComponentCss;
-  document.head.appendChild(style);
-};
-export var showInlineLoading = function showInlineLoading(_selector, platform) {
-  var loading = document.createElement('div');
-  loading.id = loadingId;
-  if (platform === platformEnum.desktop) loading.innerHTML = "<svg class=\"".concat(inlineImgClassName, " ").concat(inlineImgClassName, "-").concat(platform, "\" width=\"740\" height=\"360\" viewBox=\"0 0 740 360\" fill=\"none\" xmlns=\"\">\n  <rect width=\"740\" height=\"360\" rx=\"12\" fill=\"#F6F6F6\"/>\n  <rect opacity=\"0.7\" x=\"44\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <rect opacity=\"0.7\" x=\"94\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <rect opacity=\"0.7\" x=\"144\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M136 100H48C43.5817 100 40 103.582 40 108C40 112.418 43.5817 116 48 116H136C140.418 116 144 112.418 144 108C144 103.582 140.418 100 136 100Z\" fill=\"#E1E6ED\"/>\n  </g>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M682 126H58C48.0589 126 40 134.059 40 144C40 153.941 48.0589 162 58 162H682C691.941 162 700 153.941 700 144C700 134.059 691.941 126 682 126Z\" fill=\"#E1E6ED\"/>\n  </g>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M682 182H58C48.0589 182 40 190.059 40 200C40 209.941 48.0589 218 58 218H682C691.941 218 700 209.941 700 200C700 190.059 691.941 182 682 182Z\" fill=\"#E1E6ED\"/>\n  </g>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M504 274H64C52.9543 274 44 282.954 44 294C44 305.046 52.9543 314 64 314H504C515.046 314 524 305.046 524 294C524 282.954 515.046 274 504 274Z\" fill=\"#E1E6ED\"/>\n  </g>\n  </svg>");
-  if (platform === platformEnum.mobile) loading.innerHTML = "<svg class=\"".concat(inlineImgClassName, " ").concat(inlineImgClassName, "-").concat(platform, "\" width=\"358\" height=\"186\" viewBox=\"0 0 358 186\" fill=\"none\" xmlns=\"\">\n  <g clip-path=\"url(#clip0_2543_91192)\">\n  <rect width=\"358\" height=\"186\" fill=\"white\"/>\n  <g clip-path=\"url(#clip1_2543_91192)\">\n  <rect width=\"358\" height=\"186\" fill=\"white\"/>\n  <rect width=\"358\" height=\"40\" fill=\"white\"/>\n  <rect opacity=\"0.7\" x=\"4\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <rect opacity=\"0.7\" x=\"54\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <rect opacity=\"0.7\" x=\"104\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n  <g clip-path=\"url(#clip2_2543_91192)\">\n  <rect width=\"358\" height=\"120\" transform=\"translate(0 66)\" fill=\"white\"/>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M95 66H9C4.02944 66 0 70.0294 0 75C0 79.9706 4.02943 84 9 84H95C99.9706 84 104 79.9706 104 75C104 70.0294 99.9706 66 95 66Z\" fill=\"#E1E6ED\"/>\n  </g>\n  <g clip-path=\"url(#clip3_2543_91192)\">\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M340 94H18C8.05888 94 0 102.059 0 112C0 121.941 8.05887 130 18 130H340C349.941 130 358 121.941 358 112C358 102.059 349.941 94 340 94Z\" fill=\"#E1E6ED\"/>\n  </g>\n  <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n  <path d=\"M340 150H18C8.05888 150 0 158.059 0 168C0 177.941 8.05887 186 18 186H340C349.941 186 358 177.941 358 168C358 158.059 349.941 150 340 150Z\" fill=\"#E1E6ED\"/>\n  </g>\n  </g>\n  </g>\n  </g>\n  </g>\n  <defs>\n  <clipPath id=\"clip0_2543_91192\">\n  <rect width=\"358\" height=\"186\" fill=\"white\"/>\n  </clipPath>\n  <clipPath id=\"clip1_2543_91192\">\n  <rect width=\"358\" height=\"186\" fill=\"white\"/>\n  </clipPath>\n  <clipPath id=\"clip2_2543_91192\">\n  <rect width=\"358\" height=\"120\" fill=\"white\" transform=\"translate(0 66)\"/>\n  </clipPath>\n  <clipPath id=\"clip3_2543_91192\">\n  <rect width=\"358\" height=\"92\" fill=\"white\" transform=\"translate(0 94)\"/>\n  </clipPath>\n  </defs>\n  </svg>\n  ");
-  if (_selector) _selector.appendChild(loading);
-  var loadingDom = document.getElementById(loadingId);
-  amsSetSize(null, loadingDom);
-};