@primer-io/primer-js 0.14.0 → 0.15.0

package/dist/jsx/index.d.ts

@@ -125,6 +125,18 @@ export type PrimerCheckoutStateComponentProps = {
   description?: string | undefined;
 };
 
+export type DialogComponentProps = {
+  /**  */
+  size?: "flex" | "large";
+  /**  */
+  showCloseButton?: boolean;
+
+  /**  */
+  "onprimer:dialog-open"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer:dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type CollapsableComponentProps = {
   /** The header text for the collapsable */
   header?: string;
@@ -144,18 +156,6 @@ export type CollapsableComponentProps = {
   "onexpanded-changed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type DialogComponentProps = {
-  /**  */
-  size?: "flex" | "large";
-  /**  */
-  showCloseButton?: boolean;
-
-  /**  */
-  "onprimer:dialog-open"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onprimer:dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 export type ErrorMessageComponentProps = {
   /** The error message text to display */
   message?: string;
@@ -564,7 +564,7 @@ Falls back to localized default if not explicitly set. */
   cardFormContext?: CardFormContext | null;
 };
 
-export type InputCardNumberComponentProps = {
+export type InputCvvComponentProps = {
   /**  */
   computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
@@ -581,7 +581,7 @@ Falls back to localized default if not explicitly set. */
   cardFormContext?: CardFormContext | null;
 };
 
-export type InputCvvComponentProps = {
+export type InputCardNumberComponentProps = {
   /**  */
   computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
@@ -625,11 +625,6 @@ export type PayPalComponentProps = {
   disabled?: boolean;
 };
 
-export type PaymentMethodContentComponentProps = {
-  /** The asset configuration containing icon and display data */
-  assetConfig?: AssetConfig | null;
-};
-
 export type VaultCvvInputComponentProps = {
   /**  */
   computedStyles?: CSSStyleDeclaration | null;
@@ -642,6 +637,11 @@ Separated to minimize re-renders on frequent CVV input changes */
   vaultManagerCvvContext?: VaultItemContextType;
 };
 
+export type PaymentMethodContentComponentProps = {
+  /** The asset configuration containing icon and display data */
+  assetConfig?: AssetConfig | null;
+};
+
 export type VaultDeleteConfirmationComponentProps = {
   /** Whether a delete operation is in progress */
   isDeleting?: boolean;
@@ -779,33 +779,33 @@ export type CustomElements = {
   "primer-checkout-state": Partial<PrimerCheckoutStateComponentProps & BaseProps & BaseEvents>;
 
   /**
-   * A collapsable component that smoothly expands and collapses content.
-   * Uses CSS Grid for smooth animation and incorporates the primary button.
+   *
    * ---
    *
    *
    * ### **Events:**
-   *  - **expanded-changed**
+   *  - **primer:dialog-open**
+   * - **primer:dialog-close**
    *
    * ### **Methods:**
-   *  - **expand(): _void_** - Expand the collapsable programmatically
-   * - **collapse(): _void_** - Collapse the collapsable programmatically
+   *  - **startExitAnimation(): _void_** - Public method to trigger exit animation programmatically
    */
-  "primer-collapsable": Partial<CollapsableComponentProps & BaseProps & BaseEvents>;
+  "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
 
   /**
-   *
+   * A collapsable component that smoothly expands and collapses content.
+   * Uses CSS Grid for smooth animation and incorporates the primary button.
    * ---
    *
    *
    * ### **Events:**
-   *  - **primer:dialog-open**
-   * - **primer:dialog-close**
+   *  - **expanded-changed**
    *
    * ### **Methods:**
-   *  - **startExitAnimation(): _void_** - Public method to trigger exit animation programmatically
+   *  - **expand(): _void_** - Expand the collapsable programmatically
+   * - **collapse(): _void_** - Collapse the collapsable programmatically
    */
-  "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
+  "primer-collapsable": Partial<CollapsableComponentProps & BaseProps & BaseEvents>;
 
   /**
    * A reusable atomic error message component that displays error information
@@ -1148,34 +1148,34 @@ export type CustomElements = {
   "primer-input-card-holder-name": Partial<InputCardHolderNameComponentProps & BaseProps & BaseEvents>;
 
   /**
-   * Card number input component with dynamic card network detection and selection
+   *
    * ---
    *
    *
    * ### **Methods:**
    *
-   *
    * - **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched
    *
    * Can be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`
    * uses the same logic to compute the error code
+   *
    */
-  "primer-input-card-number": Partial<InputCardNumberComponentProps & BaseProps & BaseEvents>;
+  "primer-input-cvv": Partial<InputCvvComponentProps & BaseProps & BaseEvents>;
 
   /**
-   *
+   * Card number input component with dynamic card network detection and selection
    * ---
    *
    *
    * ### **Methods:**
    *
+   *
    * - **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched
    *
    * Can be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`
    * uses the same logic to compute the error code
-   *
    */
-  "primer-input-cvv": Partial<InputCvvComponentProps & BaseProps & BaseEvents>;
+  "primer-input-card-number": Partial<InputCardNumberComponentProps & BaseProps & BaseEvents>;
 
   /**
    * Apple Pay component with standard button container rendering.
@@ -1216,15 +1216,6 @@ export type CustomElements = {
    */
   "primer-paypal": Partial<PayPalComponentProps & BaseProps & BaseEvents>;
 
-  /**
-   * PaymentMethodContentComponent - renders payment method information with icon and details
-   * This component encapsulates the display logic and styles for payment method content
-   * so it can be reused across different containers without style conflicts
-   * ---
-   *
-   */
-  "primer-payment-method-content": Partial<PaymentMethodContentComponentProps & BaseProps & BaseEvents>;
-
   /**
    * CVV Input component for vault payment methods
    * Renders a secure iframe for CVV input when required by the selected payment method
@@ -1237,6 +1228,15 @@ export type CustomElements = {
    */
   "primer-vault-cvv-input": Partial<VaultCvvInputComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   * PaymentMethodContentComponent - renders payment method information with icon and details
+   * This component encapsulates the display logic and styles for payment method content
+   * so it can be reused across different containers without style conflicts
+   * ---
+   *
+   */
+  "primer-payment-method-content": Partial<PaymentMethodContentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method
    * ---

package/dist/primer-loader.d.ts

@@ -810,6 +810,24 @@ export interface CardNetworkChangeEvent {
 	};
 	source: "REMOTE" | "LOCAL" | "LOCAL_FALLBACK";
 }
+export interface BinDataDetails extends CardNetworkDetails {
+	issuerCountryCode?: string;
+	issuerName?: string;
+	accountFundingType?: string;
+	prepaidReloadableIndicator?: string;
+	productUsageType?: string;
+	productCode?: string;
+	productName?: string;
+	issuerCurrencyCode?: string;
+	regionalRestriction?: string;
+	accountNumberType?: string;
+}
+export interface BinDataAvailableEvent {
+	preferred?: BinDataDetails;
+	alternatives: BinDataDetails[];
+	status: "complete" | "partial";
+	firstDigits?: string;
+}
 export interface CardPaymentMethodSubmitValues {
 	cardNetwork?: string;
 }
@@ -1124,6 +1142,8 @@ export interface HeadlessSDKUtilities {
 	setBillingAddress(address: NullableAddress): Promise<void>;
 }
 export interface CardPaymentMethodManagerOptions {
+	onBinDataAvailable?: (event: BinDataAvailableEvent) => void;
+	onBinDataLoadingChange?: (loading: boolean) => void;
 	onCardMetadataChange?: (metadata: {
 		type: CardNetworkType | null;
 		possibleTypes: string[];
@@ -2486,6 +2506,10 @@ export interface PrimerEvents {
 	"primer:methods-update": CustomEvent<InitializedPayments>;
 	"primer:ready": CustomEvent<PrimerJS>;
 	"primer:card-network-change": CustomEvent<CardNetworksContextType>;
+	"primer:bin-data-loading-change": CustomEvent<{
+		loading: boolean;
+	}>;
+	"primer:bin-data-available": CustomEvent<BinDataAvailableEvent>;
 	"primer:card-submit": CustomEvent<CardSubmitPayload>;
 	"primer:card-success": CustomEvent<CardSubmitSuccessPayload>;
 	"primer:card-error": CustomEvent<CardSubmitErrorsPayload>;
@@ -2538,6 +2562,8 @@ declare class PrimerEventsController implements ReactiveController {
 	dispatchPaymentMethods(paymentMethods: InitializedPayments): void;
 	dispatchCheckoutInitialized(checkoutInstance: PrimerJS): void;
 	dispatchCardNetworkChange(network: CardNetworksContextType): void;
+	dispatchBinDataAvailable(data: BinDataAvailableEvent): void;
+	dispatchBinDataLoadingChange(loading: boolean): void;
 	dispatchCardSubmit(source?: string): void;
 	dispatchFormSubmitSuccess(result: CardSubmitResult): void;
 	dispatchFormSubmitErrors(errors: InputValidationError[]): void;
@@ -2766,6 +2792,7 @@ declare class CardNetworkController implements ReactiveController {
 	 * @param event - The card network change event
 	 */
 	processCardNetworkChangeEvent(event: CardNetworkChangeEvent): void;
+	processBinDataAvailableEvent(event: BinDataAvailableEvent): void;
 }
 declare class StyleProcessingController implements ReactiveController {
 	host: ReactiveControllerHost & LitElement;