@primer-io/primer-js 0.1.6 → 0.1.7

package/dist/primer-loader.js

@@ -1811,6 +1811,9 @@ primer-checkout:not([js-initialized]):not([loader-disabled])::after {
 
   .network-icon {
     width: var(--primer-size-large);
+    height: var(
+      --primer-size-medium
+    ); /* Added explicit height to maintain aspect ratio */
     object-fit: contain;
   }
 
@@ -1900,7 +1903,7 @@ primer-checkout:not([js-initialized]):not([loader-disabled])::after {
     width: var(--primer-size-small);
     height: var(--primer-size-small);
   }
-`;var me=class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case"ArrowDown":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(t,r){this.networkOptionRefs[r]=t}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return c`<primer-spinner size="small" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name="payment-card"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=t.length>1;return c`
+`;var me=class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case"ArrowDown":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(t,r){this.networkOptionRefs[r]=t}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return c`<primer-spinner size="small" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name="payment-card" size="sm"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=t.length>1;return c`
       <button
         ${Xr(this.buttonRef)}
         class="network-selector"

package/dist/primer-react-wrappers.js

@@ -1076,6 +1076,9 @@ import{a as Eo,b as Qs,c as Co,d as n}from"./chunks/chunk.G45OCYEN.js";var Oi=Qs
 
   .network-icon {
     width: var(--primer-size-large);
+    height: var(
+      --primer-size-medium
+    ); /* Added explicit height to maintain aspect ratio */
     object-fit: contain;
   }
 
@@ -1165,7 +1168,7 @@ import{a as Eo,b as Qs,c as Co,d as n}from"./chunks/chunk.G45OCYEN.js";var Oi=Qs
     width: var(--primer-size-small);
     height: var(--primer-size-small);
   }
-`;var st=class extends y{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=Ri();this.dropdownRef=Ri();this.networkOptionRefs=[];this.handleClickOutside=e=>{this.isDropdownOpen&&(this.contains(e.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=e=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(e.target)||this===e.target||this.isDropdownOpen&&e.target===document.body)))switch(this.isKeyboardNavigation=!0,e.key){case"ArrowDown":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(e.preventDefault(),this.selectNetwork(e,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(e.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(e.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=e=>{this.isDropdownOpen&&this.handleKeyDown(e)}}toggleDropdown(e){this.isKeyboardNavigation=!1,e.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(e){return this.headlessUtils?.getCardNetworkAsset(e.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let e=this.getDetectedNetwork();if(!e)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===e.network);return r>=0?r:0}selectNetwork(e,r){e.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(e,r){this.networkOptionRefs[r]=e}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return h`<primer-spinner size="small" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return h`<primer-icon name="payment-card"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return h`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=e.length>1;return h`
+`;var st=class extends y{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=Ri();this.dropdownRef=Ri();this.networkOptionRefs=[];this.handleClickOutside=e=>{this.isDropdownOpen&&(this.contains(e.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=e=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(e.target)||this===e.target||this.isDropdownOpen&&e.target===document.body)))switch(this.isKeyboardNavigation=!0,e.key){case"ArrowDown":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(e.preventDefault(),this.selectNetwork(e,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(e.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(e.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=e=>{this.isDropdownOpen&&this.handleKeyDown(e)}}toggleDropdown(e){this.isKeyboardNavigation=!1,e.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(e){return this.headlessUtils?.getCardNetworkAsset(e.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let e=this.getDetectedNetwork();if(!e)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===e.network);return r>=0?r:0}selectNetwork(e,r){e.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(e,r){this.networkOptionRefs[r]=e}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return h`<primer-spinner size="small" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return h`<primer-icon name="payment-card" size="sm"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return h`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=e.length>1;return h`
       <button
         ${Hr(this.buttonRef)}
         class="network-selector"

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@primer-io/primer-js",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@primer-io/primer-js",
   "description": "Primer Composable Checkout is a web component-based SDK for building secure, customizable, and PCI-compliant checkout experiences. Designed with a modular architecture, it integrates seamlessly with any JavaScript framework and supports multiple payment methods.",
   "license": "BSD-3-Clause",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "main": "./dist/primer-loader.js",
   "types": "./dist/primer-loader.d.ts",