@alipay/ams-checkout 1.3.2 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/umd/ams-checkout.min.js +1 -1
- package/esm/config/index.d.ts +1 -15
- package/esm/config/index.js +9 -62
- package/esm/config/request.d.ts +21 -0
- package/esm/config/request.js +67 -0
- package/esm/constant/index.d.ts +54 -32
- package/esm/constant/index.js +54 -32
- package/esm/core/component/index.d.ts +23 -9
- package/esm/core/component/index.js +161 -98
- package/esm/core/drop-in/index.d.ts +4 -4
- package/esm/core/drop-in/index.js +3 -3
- package/esm/core/instance/index.d.ts +6 -23
- package/esm/core/instance/index.js +31 -75
- package/esm/image/skeleton.svg +18 -0
- package/esm/index.d.ts +4 -10
- package/esm/index.js +8 -30
- package/esm/plugin/component/cashierApp.d.ts +5 -6
- package/esm/plugin/component/cashierApp.js +48 -64
- package/esm/plugin/component/{component.style.d.ts → component.inline.style.d.ts} +4 -1
- package/esm/plugin/component/component.inline.style.js +38 -0
- package/esm/plugin/component/component.popup.style.d.ts +12 -0
- package/esm/plugin/component/component.popup.style.js +163 -0
- package/esm/plugin/component/index.d.ts +30 -33
- package/esm/plugin/component/index.js +248 -349
- package/esm/plugin/drop-in/index.d.ts +3 -5
- package/esm/plugin/drop-in/index.js +3 -3
- package/esm/request/index.d.ts +2 -2
- package/esm/request/index.js +8 -7
- package/esm/request/utils.d.ts +3 -3
- package/esm/request/utils.js +4 -4
- package/esm/service/index.d.ts +2 -2
- package/esm/types/index.d.ts +96 -37
- package/esm/types/index.js +92 -52
- package/esm/util/createIframeNode.d.ts +3 -3
- package/esm/util/createIframeNode.js +8 -8
- package/esm/util/index.d.ts +6 -4
- package/esm/util/index.js +22 -5
- package/esm/util/mock.js +1 -2
- package/package.json +1 -1
- package/esm/plugin/component/component.style.js +0 -15
    
        package/esm/util/index.d.ts
    CHANGED
    
    | @@ -1,4 +1,4 @@ | |
| 1 | 
            -
            import {  | 
| 1 | 
            +
            import { errorEnum } from '../types';
         | 
| 2 2 | 
             
            /**
         | 
| 3 3 | 
             
             * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
         | 
| 4 4 | 
             
             * 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:
         | 
| @@ -31,14 +31,14 @@ declare const safeJson: (data: any, obj: any) => any; | |
| 31 31 | 
             
            declare const fomatGetwayError: (headers: Record<string, any>, traceId: string) => {
         | 
| 32 32 | 
             
                success: boolean;
         | 
| 33 33 | 
             
                traceId: string;
         | 
| 34 | 
            -
                errorCode:  | 
| 34 | 
            +
                errorCode: errorEnum;
         | 
| 35 35 | 
             
                resultStatus: any;
         | 
| 36 36 | 
             
                errorMessage?: undefined;
         | 
| 37 37 | 
             
                result?: undefined;
         | 
| 38 38 | 
             
            } | {
         | 
| 39 39 | 
             
                success: boolean;
         | 
| 40 40 | 
             
                traceId: string;
         | 
| 41 | 
            -
                errorCode:  | 
| 41 | 
            +
                errorCode: errorEnum;
         | 
| 42 42 | 
             
                errorMessage: string;
         | 
| 43 43 | 
             
                result: {
         | 
| 44 44 | 
             
                    resultStatus: any;
         | 
| @@ -50,4 +50,6 @@ declare const fomatGetwayError: (headers: Record<string, any>, traceId: string) | |
| 50 50 | 
             
            declare const isPC: () => boolean;
         | 
| 51 51 | 
             
            declare const queryParse: (url?: string) => Record<string, any>;
         | 
| 52 52 | 
             
            declare const getDesignFontSize: () => number;
         | 
| 53 | 
            -
             | 
| 53 | 
            +
            declare const amsSetSize: (event?: any, dom?: any) => void;
         | 
| 54 | 
            +
            declare const addSetFontSizeEvent: () => void;
         | 
| 55 | 
            +
            export { getType, EventCenter, getViewPort, getOrigin, serialize, isJsonString, isDom, device, fomatGetwayError, safeJson, isPC, queryParse, getDesignFontSize, amsSetSize, addSetFontSizeEvent };
         | 
    
        package/esm/util/index.js
    CHANGED
    
    | @@ -5,7 +5,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d | |
| 5 5 | 
             
            function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
         | 
| 6 6 | 
             
            function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
         | 
| 7 7 | 
             
            function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
         | 
| 8 | 
            -
            import {  | 
| 8 | 
            +
            import { errorEnum } from "../types";
         | 
| 9 9 | 
             
            import { get } from "./get";
         | 
| 10 10 |  | 
| 11 11 | 
             
            /**
         | 
| @@ -174,7 +174,7 @@ var fomatGetwayError = function fomatGetwayError(headers, traceId) { | |
| 174 174 | 
             
                return {
         | 
| 175 175 | 
             
                  success: false,
         | 
| 176 176 | 
             
                  traceId: traceId,
         | 
| 177 | 
            -
                  errorCode:  | 
| 177 | 
            +
                  errorCode: errorEnum.LOGIN,
         | 
| 178 178 | 
             
                  resultStatus: resultStatus
         | 
| 179 179 | 
             
                };
         | 
| 180 180 | 
             
              }
         | 
| @@ -183,7 +183,7 @@ var fomatGetwayError = function fomatGetwayError(headers, traceId) { | |
| 183 183 | 
             
                return {
         | 
| 184 184 | 
             
                  success: false,
         | 
| 185 185 | 
             
                  traceId: traceId,
         | 
| 186 | 
            -
                  errorCode:  | 
| 186 | 
            +
                  errorCode: errorEnum.TIMEOUT,
         | 
| 187 187 | 
             
                  resultStatus: resultStatus
         | 
| 188 188 | 
             
                };
         | 
| 189 189 | 
             
              }
         | 
| @@ -193,7 +193,7 @@ var fomatGetwayError = function fomatGetwayError(headers, traceId) { | |
| 193 193 | 
             
                return {
         | 
| 194 194 | 
             
                  success: false,
         | 
| 195 195 | 
             
                  traceId: traceId,
         | 
| 196 | 
            -
                  errorCode:  | 
| 196 | 
            +
                  errorCode: errorEnum.GATEWAY,
         | 
| 197 197 | 
             
                  errorMessage: decodeURIComponent(tips || ''),
         | 
| 198 198 | 
             
                  result: {
         | 
| 199 199 | 
             
                    resultStatus: resultStatus || '',
         | 
| @@ -234,4 +234,21 @@ var getDesignFontSize = function getDesignFontSize() { | |
| 234 234 | 
             
              var currentFontSize = isPC() ? maxFontSize : screenWidth * 100 / designSize;
         | 
| 235 235 | 
             
              return Math.min(currentFontSize, maxFontSize);
         | 
| 236 236 | 
             
            };
         | 
| 237 | 
            -
             | 
| 237 | 
            +
            var amsSetSize = function amsSetSize(event, dom) {
         | 
| 238 | 
            +
              try {
         | 
| 239 | 
            +
                var componentContainerId = 'ams-component-container';
         | 
| 240 | 
            +
                var _dom = dom || document.getElementById(componentContainerId);
         | 
| 241 | 
            +
                _dom.style.fontSize = "".concat(getDesignFontSize(), "px");
         | 
| 242 | 
            +
                innerHeight = window.innerHeight;
         | 
| 243 | 
            +
                // eslint-disable-next-line no-empty
         | 
| 244 | 
            +
              } catch (error) {}
         | 
| 245 | 
            +
            };
         | 
| 246 | 
            +
            var addSetFontSizeEvent = function addSetFontSizeEvent() {
         | 
| 247 | 
            +
              window.removeEventListener('resize', amsSetSize);
         | 
| 248 | 
            +
              window.removeEventListener('pageShow', amsSetSize);
         | 
| 249 | 
            +
              window.removeEventListener('DOMContentLoaded', amsSetSize);
         | 
| 250 | 
            +
              window.addEventListener('resize', amsSetSize);
         | 
| 251 | 
            +
              window.addEventListener('pageShow', amsSetSize);
         | 
| 252 | 
            +
              window.addEventListener('DOMContentLoaded', amsSetSize);
         | 
| 253 | 
            +
            };
         | 
| 254 | 
            +
            export { getType, EventCenter, getViewPort, getOrigin, serialize, isJsonString, isDom, device, fomatGetwayError, safeJson, isPC, queryParse, getDesignFontSize, amsSetSize, addSetFontSizeEvent };
         | 
    
        package/esm/util/mock.js
    CHANGED
    
    | @@ -1,4 +1,3 @@ | |
| 1 1 | 
             
            export var isLocalMock = function isLocalMock() {
         | 
| 2 | 
            -
               | 
| 3 | 
            -
              return ((_window = window) === null || _window === void 0 ? void 0 : (_window$process = _window.process) === null || _window$process === void 0 ? void 0 : (_window$process$env = _window$process.env) === null || _window$process$env === void 0 ? void 0 : _window$process$env.NODE_ENV) === 'MOCK' && window.location.href.indexOf('LOCAL_MOCK=1') > -1;
         | 
| 2 | 
            +
              return window.location.href.indexOf('LOCAL_MOCK=1') > -1;
         | 
| 4 3 | 
             
            };
         | 
    
        package/package.json
    CHANGED
    
    | @@ -1 +1 @@ | |
| 1 | 
            -
            {"name":"@alipay/ams-checkout","version":"1. | 
| 1 | 
            +
            {"name":"@alipay/ams-checkout","version":"1.5.0","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"}}
         | 
| @@ -1,15 +0,0 @@ | |
| 1 | 
            -
            /**
         | 
| 2 | 
            -
             * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
         | 
| 3 | 
            -
             *
         | 
| 4 | 
            -
             * 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:
         | 
| 5 | 
            -
             * 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
         | 
| 6 | 
            -
             * 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.
         | 
| 7 | 
            -
             */
         | 
| 8 | 
            -
             | 
| 9 | 
            -
            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: 1px;\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: translateX(-50%) translateY(-50%) scale(1);\n    opacity: 1\n  }\n\n  80% {\n    opacity: 0\n  }\n  \n  100% {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translateX(-50%) translateY(-50%) scale(0.4);\n    opacity: 0\n  }\n\n  80% {\n    opacity: 1\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-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-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-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: 600;\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: 600;\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: 600;\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: 600;\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";
         | 
| 10 | 
            -
            export function componentAddCSS() {
         | 
| 11 | 
            -
              var style = document.createElement('style');
         | 
| 12 | 
            -
              style.type = 'text/css';
         | 
| 13 | 
            -
              style.innerHTML = componentCss;
         | 
| 14 | 
            -
              document.head.appendChild(style);
         | 
| 15 | 
            -
            }
         |