@primer-io/primer-js 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.4.2
+
+### Patch Changes
+
+- 866d867: feat(primer-js): render main slot while loading
+
+## 1.4.1
+
+### Patch Changes
+
+- 768bba3: fixed loading events and abortPaymentCreation
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/custom-elements.json

@@ -2,35 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "e2e/utils.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "test",
-          "default": "chromaticTest"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "expect",
-          "declaration": {
-            "name": "expect",
-            "package": "@chromatic-com/playwright"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "test",
-          "declaration": {
-            "name": "test",
-            "module": "e2e/utils.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/primer-loader.js",
@@ -80,7 +51,7 @@
         {
           "kind": "variable",
           "name": "ye",
-          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this._classObserver=null;this.locale=rr(La());this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new ya(this),this.primerEventsController=new er(this),this.styleProcessingController=new fa(this),this.vaultManagerController=new Mr(this),this.headlessSdkController=new Ya(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}get primerJS(){return this.headlessSdkController?.primerJSInstance??void 0}connectedCallback(){super.connectedCallback(),this.sdkContextController.setEventsController(this.primerEventsController),this._eventListenerController=new AbortController,document.addEventListener(\"primer:card-submit\",this.handleExternalCardSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:vault-submit\",this.handleExternalVaultSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:show-other-payments-toggle\",this.handleExternalShowOtherPaymentsToggle.bind(this),{signal:this._eventListenerController.signal}),this._classObserver=new MutationObserver(()=>{this.requestUpdate()}),this._classObserver.observe(this,{attributes:!0,attributeFilter:[\"class\"]})}attributeChangedCallback(e,r,i){e===Qm.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,r,i)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkContextController.contextProvider.value.sdkState?.isLoading&&this.sdkContextController.setSdkState({isLoading:!1}),this._eventListenerController&&(this._eventListenerController.abort(),this._eventListenerController=null),this._classObserver&&(this._classObserver.disconnect(),this._classObserver=null),super.disconnectedCallback()}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Cn(this.options?.locale)?this.locale=rr(this.options?.locale):P.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to system locale\")),vn(this.locale))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}handleExternalCardSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:card-submit\",e.detail)}handleExternalVaultSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:vault-submit\",e.detail)}handleExternalShowOtherPaymentsToggle(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:show-other-payments-toggle\",e.detail)}checkLoadingStateChange(){let e=this.sdkContextController.contextProvider.value.sdkState.isLoading||!1;if(this.previousLoadingState&&!e){this.jsInitialized=!0,Q({eventName:\"CHECKOUT_FLOW_STARTED\"});let r=De.getSdkInitStartTime(),i=r?Date.now()-r:void 0;Qn(i)}this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkContextController.contextProvider.value.sdkState.isLoading&&(P.warn(\"Loading timeout in component, forcing completion\"),this.sdkContextController.setSdkState({isLoading:!1}),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkContextController.contextProvider.value.sdkState,r=e.isLoading,i=e.primerJsError,n=!r&&!i;return u` ${k(r,()=>y)} ${k(i,()=>u`<primer-checkout-error></primer-checkout-error>`)} ${k(n,()=>u`<slot name=\"main\" @slotchange=${this.onSlotChange}></slot>${k(this.hasAssignedContent,()=>y,()=>u`<primer-main></primer-main>`)} `,()=>y)} `}addEventListener(e,r,i){super.addEventListener(e,r,i)}removeEventListener(e,r,i){super.removeEventListener(e,r,i)}}"
+          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this._classObserver=null;this.locale=rr(La());this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new ya(this),this.primerEventsController=new er(this),this.styleProcessingController=new fa(this),this.vaultManagerController=new Mr(this),this.headlessSdkController=new Ya(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}get primerJS(){return this.headlessSdkController?.primerJSInstance??void 0}connectedCallback(){super.connectedCallback(),this.sdkContextController.setEventsController(this.primerEventsController),this._eventListenerController=new AbortController,document.addEventListener(\"primer:card-submit\",this.handleExternalCardSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:vault-submit\",this.handleExternalVaultSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:show-other-payments-toggle\",this.handleExternalShowOtherPaymentsToggle.bind(this),{signal:this._eventListenerController.signal}),this._classObserver=new MutationObserver(()=>{this.requestUpdate()}),this._classObserver.observe(this,{attributes:!0,attributeFilter:[\"class\"]})}attributeChangedCallback(e,r,i){e===Qm.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,r,i)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkContextController.contextProvider.value.sdkState?.isLoading&&this.sdkContextController.setSdkState({isLoading:!1}),this._eventListenerController&&(this._eventListenerController.abort(),this._eventListenerController=null),this._classObserver&&(this._classObserver.disconnect(),this._classObserver=null),super.disconnectedCallback()}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Cn(this.options?.locale)?this.locale=rr(this.options?.locale):P.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to system locale\")),vn(this.locale))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}handleExternalCardSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:card-submit\",e.detail)}handleExternalVaultSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:vault-submit\",e.detail)}handleExternalShowOtherPaymentsToggle(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:show-other-payments-toggle\",e.detail)}checkLoadingStateChange(){let e=this.sdkContextController.contextProvider.value.sdkState.isLoading||!1;if(this.previousLoadingState&&!e){this.jsInitialized=!0,Q({eventName:\"CHECKOUT_FLOW_STARTED\"});let r=De.getSdkInitStartTime(),i=r?Date.now()-r:void 0;Qn(i)}this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkContextController.contextProvider.value.sdkState.isLoading&&(P.warn(\"Loading timeout in component, forcing completion\"),this.sdkContextController.setSdkState({isLoading:!1}),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkContextController.contextProvider.value.sdkState,r=e.isLoading,i=e.primerJsError,n=!r&&!i;return u` ${k(i,()=>u`<primer-checkout-error></primer-checkout-error>`)}<slot name=\"main\" @slotchange=${this.onSlotChange}></slot>${k(this.hasAssignedContent||!n,()=>y,()=>u`<primer-main></primer-main>`)} `}addEventListener(e,r,i){super.addEventListener(e,r,i)}removeEventListener(e,r,i){super.removeEventListener(e,r,i)}}"
         },
         {
           "kind": "function",
@@ -331,7 +302,7 @@
         {
           "kind": "variable",
           "name": "kt",
-          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()}}render(){return this.primerContext?.sdkState?.isSuccessful?u`<slot name=\"checkout-complete\"><primer-checkout-complete></primer-checkout-complete></slot>`:u`<slot name=\"payments\" @slotchange=${this.onSlotChange}></slot>${k(this.hasAssignedContent,()=>y,()=>u`<div class=${X({\"primer-is-processing\":!!this.primerContext?.sdkState?.isProcessing})} ><primer-vault-manager></primer-vault-manager><primer-show-other-payments><div slot=\"other-payments\" class=\"primer-main-list\">${this.primerContext?.paymentMethods?.map(e=>u`<primer-payment-method type=${e.type} ?disabled=${this.primerContext?.clientOptions?.disabledPayments===!0} ></primer-payment-method>`)}</div></primer-show-other-payments><primer-error-message-container></primer-error-message-container></div>`)} `}}"
+          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()}}render(){return this.primerContext?.sdkState?.isLoading?y:this.primerContext?.sdkState?.isSuccessful?u`<slot name=\"checkout-complete\"><primer-checkout-complete></primer-checkout-complete></slot>`:u`<slot name=\"payments\" @slotchange=${this.onSlotChange}></slot>${k(this.hasAssignedContent,()=>y,()=>u`<div class=${X({\"primer-is-processing\":!!this.primerContext?.sdkState?.isProcessing})} ><primer-vault-manager></primer-vault-manager><primer-show-other-payments><div slot=\"other-payments\" class=\"primer-main-list\">${this.primerContext?.paymentMethods?.map(e=>u`<primer-payment-method type=${e.type} ?disabled=${this.primerContext?.clientOptions?.disabledPayments===!0} ></primer-payment-method>`)}</div></primer-show-other-payments><primer-error-message-container></primer-error-message-container></div>`)} `}}"
         },
         {
           "kind": "function",
@@ -789,6 +760,35 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "e2e/utils.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "test",
+          "default": "chromaticTest"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "expect",
+          "declaration": {
+            "name": "expect",
+            "package": "@chromatic-com/playwright"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "test",
+          "declaration": {
+            "name": "test",
+            "module": "e2e/utils.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/consts.ts",
@@ -1664,61 +1664,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "e2e/mocks/shared.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "mockConfigurationCall",
-          "parameters": [
-            {
-              "name": "page",
-              "type": {
-                "text": "Page"
-              }
-            },
-            {
-              "name": "config",
-              "type": {
-                "text": "unknown"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "mockDemoUrl",
-          "parameters": [
-            {
-              "name": "primerCheckoutOptions",
-              "optional": true,
-              "type": {
-                "text": "PrimerCheckoutOptions"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "mockConfigurationCall",
-          "declaration": {
-            "name": "mockConfigurationCall",
-            "module": "e2e/mocks/shared.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "mockDemoUrl",
-          "declaration": {
-            "name": "mockDemoUrl",
-            "module": "e2e/mocks/shared.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/chunks/ar.4ZFBST5B.js",
@@ -2852,6 +2797,61 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "e2e/mocks/shared.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mockConfigurationCall",
+          "parameters": [
+            {
+              "name": "page",
+              "type": {
+                "text": "Page"
+              }
+            },
+            {
+              "name": "config",
+              "type": {
+                "text": "unknown"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mockDemoUrl",
+          "parameters": [
+            {
+              "name": "primerCheckoutOptions",
+              "optional": true,
+              "type": {
+                "text": "PrimerCheckoutOptions"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mockConfigurationCall",
+          "declaration": {
+            "name": "mockConfigurationCall",
+            "module": "e2e/mocks/shared.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mockDemoUrl",
+          "declaration": {
+            "name": "mockDemoUrl",
+            "module": "e2e/mocks/shared.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/__tests__/setup.ts",
@@ -4822,7 +4822,7 @@
         {
           "kind": "variable",
           "name": "cssLoaderStyles",
-          "default": "` @keyframes primer-css-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Hide primer-main while primer components are loading to prevent FOUC Only check for undefined primer-* elements, ignoring browser extensions */ primer-checkout:has(primer-main:not(:defined), primer-checkout-error:not(:defined)) > * { visibility: hidden; } primer-checkout:not([js-initialized]) { display: block; position: relative; width: 100%; min-height: 64px; } primer-checkout:not([js-initialized]):not([loader-disabled])::after { content: \"\"; display: block; box-sizing: border-box; position: absolute; inset: 0; margin: auto; width: var(--primer-size-xlarge); height: var(--primer-size-xlarge); border-radius: 50%; border: 3px solid #f5f5f5; border-top-color: var(--primer-color-loader); animation: primer-css-spinner-rotate 1.2s linear infinite; z-index: 9999; } `",
+          "default": "` @keyframes primer-css-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Hide primer-main and primer-checkout-error while they are loading to prevent FOUC Only check for undefined primer-* elements, ignoring browser extensions */ primer-main:not(:defined), primer-checkout-error:not(:defined) { visibility: hidden; } primer-checkout:not([js-initialized]) [slot=\"main\"] { display: none; } primer-checkout:not([js-initialized]) { display: block; position: relative; width: 100%; min-height: 64px; } primer-checkout:not([js-initialized]):not([loader-disabled])::after { content: \"\"; display: block; box-sizing: border-box; position: absolute; inset: 0; margin: auto; width: var(--primer-size-xlarge); height: var(--primer-size-xlarge); border-radius: 50%; border: 3px solid #f5f5f5; border-top-color: var(--primer-color-loader); animation: primer-css-spinner-rotate 1.2s linear infinite; z-index: 9999; } `",
           "description": "This module exports the CSS loader styles as a string for inline injection.\nThese styles are injected into the page before any JavaScript loads,\nensuring the loading indicator appears immediately."
         }
       ],

package/dist/primer-loader.d.ts

@@ -5266,7 +5266,7 @@ declare class PrimerMainComponent extends LitElement {
 	 */
 	private onSlotChange;
 	primerContext?: ContextType;
-	render(): import("lit-html").TemplateResult<1>;
+	render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
 	interface HTMLElementTagNameMap {