@primer-io/primer-js 0.7.3 → 0.8.0

package/dist/jsx/index.d.ts

@@ -138,7 +138,8 @@ export type CollapsableComponentProps = {
   ariaLabel?: string;
   /** The button variant to use */
   buttonVariant?: ButtonVariant;
-
+  /** Internal state to track expanded state */
+  isExpanded?: boolean;
   /**  */
   "onexpanded-changed"?: (e: CustomEvent<CustomEvent>) => void;
 };
@@ -457,6 +458,10 @@ export type RedirectPaymentComponentProps = {
 export type ShowOtherPaymentsComponentProps = {
   /** Consume the vault manager context to interact with vault state */
   vaultManager?: VaultManagerContextType;
+  /** Consume the events context for external control */
+  contextEventsController?: EventsContextType;
+  /**  */
+  "onshow-other-payments-toggled"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type VaultManagerComponentProps = {
@@ -480,6 +485,10 @@ export type VaultManagerComponentProps = {
   vaultItemContext?: VaultItemContextType;
   /**  */
   headlessUtils?: HeadlessUtilsContextType;
+  /**  */
+  contextEventsController?: EventsContextType;
+  /**  */
+  "onprimer-vault-payment-error"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type CardFormSubmitComponentProps = {
@@ -1053,8 +1062,16 @@ export type CustomElements = {
   /**
    * Component for showing/hiding other payment methods when vault is present
    * Utilizes the collapsable component for smooth transitions
+   * Supports custom toggle buttons via slots and external control via events
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **show-other-payments-toggled**
+   *
+   * ### **Methods:**
+   *  - **expand(): _void_** - Public API: Expand the accordion programmatically
+   * - **collapse(): _void_** - Public API: Collapse the accordion programmatically
    */
   "primer-show-other-payments": Partial<ShowOtherPaymentsComponentProps & BaseProps & BaseEvents>;
 
@@ -1062,6 +1079,9 @@ export type CustomElements = {
    * VaultManagerComponent - displays and manages saved payment methods
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **primer-vault-payment-error**
    */
   "primer-vault-manager": Partial<VaultManagerComponentProps & BaseProps & BaseEvents>;
 

package/dist/primer-loader.d.ts

@@ -1974,6 +1974,13 @@ export interface CardSubmitPayload {
 export interface PrimeAchErrorPayload {
 	error: Error;
 }
+export interface VaultSubmitPayload {
+	source?: string;
+}
+export interface ShowOtherPaymentsTogglePayload {
+	action?: "toggle" | "expand" | "collapse";
+	source?: string;
+}
 export interface PrimerEvents {
 	"primer:state-change": CustomEvent<SdkStateContextType>;
 	"primer:methods-update": CustomEvent<InitializedPayments>;
@@ -2007,6 +2014,8 @@ export interface PrimerEvents {
 		vaultedPayments: InitializedVaultedPayments;
 		timestamp: number;
 	}>;
+	"primer:vault-submit": CustomEvent<VaultSubmitPayload>;
+	"primer:show-other-payments-toggle": CustomEvent<ShowOtherPaymentsTogglePayload>;
 }
 declare class PrimerEventsController implements ReactiveController {
 	host: ReactiveControllerHost & LitElement;
@@ -2062,6 +2071,32 @@ declare class PrimerEventsController implements ReactiveController {
 	 * @param vaultedPayments - Wrapper containing filtered vaulted payment methods
 	 */
 	dispatchVaultMethodsUpdate(vaultedPayments: InitializedVaultedPayments): void;
+	/**
+	 * Dispatch vault submit event.
+	 * Called when a vault payment submission is triggered.
+	 */
+	dispatchVaultSubmit(source?: string): void;
+	/**
+	 * Handle external vault submit events and forward them through the event system.
+	 * This method provides a centralized way to process external vault submission events
+	 * that come from custom buttons or external triggers.
+	 *
+	 * @param eventDetails - The event details to forward, including source information
+	 */
+	handleExternalVaultSubmit(eventDetails: VaultSubmitPayload): void;
+	/**
+	 * Dispatch show other payments toggle event.
+	 * Called when the "Show other ways to pay" accordion should be toggled.
+	 */
+	dispatchShowOtherPaymentsToggle(action?: "toggle" | "expand" | "collapse", source?: string): void;
+	/**
+	 * Handle external show other payments toggle events and forward them through the event system.
+	 * This method provides a centralized way to process external toggle events
+	 * that come from custom buttons or external triggers.
+	 *
+	 * @param eventDetails - The event details to forward, including action and source information
+	 */
+	handleExternalShowOtherPaymentsToggle(eventDetails: ShowOtherPaymentsTogglePayload): void;
 }
 export type AnalyticsContextType = AnalyticsUtils | null;
 export type EventsContextType = PrimerEventsController | null;
@@ -2564,6 +2599,16 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	 * Uses AbortController signal to prevent circular event loops more safely
 	 */
 	private handleExternalCardSubmit;
+	/**
+	 * Handle external primer:vault-submit events by forwarding them through the events controller
+	 * Uses AbortController signal to prevent circular event loops more safely
+	 */
+	private handleExternalVaultSubmit;
+	/**
+	 * Handle external primer:show-other-payments-toggle events by forwarding them through the events controller
+	 * Uses AbortController signal to prevent circular event loops more safely
+	 */
+	private handleExternalShowOtherPaymentsToggle;
 	/**
 	 * Check if the loading state has changed and update the CSS loader visibility accordingly.
 	 * This method is called after each update cycle to detect when loading is complete.
@@ -3012,7 +3057,7 @@ declare class CollapsableComponent extends LitElement {
 	/**
 	 * Internal state to track expanded state
 	 */
-	private isExpanded;
+	isExpanded: boolean;
 	/**
 	 * Hook into the component lifecycle to set the initial expanded state
 	 */
@@ -3718,6 +3763,7 @@ export interface VaultManagerEvents {
 	vaultPaymentError: CustomEvent<{
 		error: unknown;
 	}>;
+	vaultSubmit: CustomEvent<void>;
 }
 /**
  * Declare the event map for strict typing of events
@@ -3729,6 +3775,7 @@ export interface VaultManagerEventMap {
 	"toggle-edit-mode": VaultManagerEvents["toggleEditMode"];
 	"close-error": VaultManagerEvents["closeError"];
 	"primer-vault-payment-error": VaultManagerEvents["vaultPaymentError"];
+	"primer:vault-submit": VaultManagerEvents["vaultSubmit"];
 }
 /**
  * VaultManagerComponent - displays and manages saved payment methods
@@ -3741,6 +3788,11 @@ declare class VaultManagerComponent extends LitElement {
 	vaultManagerContext: VaultManagerContextType;
 	vaultItemContext: VaultItemContextType;
 	headlessUtils: HeadlessUtilsContextType;
+	contextEventsController: EventsContextType;
+	/**
+	 * State to track if slot has content (triggers re-render)
+	 */
+	private hasSlottedSubmit;
 	/**
 	 * Whether we're in edit mode
 	 */
@@ -3761,6 +3813,14 @@ declare class VaultManagerComponent extends LitElement {
 	 * Animation duration override
 	 */
 	animationDuration: number;
+	/**
+	 * Flag to prevent circular event handling
+	 */
+	private _isHandlingContextEvent;
+	/**
+	 * Context event listener reference
+	 */
+	private _contextVaultSubmitListener;
 	/**
 	 * Asset config for the payment method being deleted
 	 */
@@ -3769,6 +3829,10 @@ declare class VaultManagerComponent extends LitElement {
 	 * Get base animation configuration with current settings
 	 */
 	private getAnimationConfig;
+	/**
+	 * Handle slot change to update hasSlottedSubmit state
+	 */
+	private handleSubmitSlotChange;
 	/**
 	 * Toggle edit mode handler
 	 */
@@ -3793,10 +3857,47 @@ declare class VaultManagerComponent extends LitElement {
 	 * Handle closing error message
 	 */
 	private handleCloseError;
+	/**
+	 * Determines if a button is a submit button based on its attributes
+	 */
+	private isSubmitButton;
+	/**
+	 * Handles click events from slotted content.
+	 * Supports both native <button> and custom <primer-button> elements.
+	 */
+	private handleSlotButtonClick;
+	/**
+	 * Handles direct primer:vault-submit events
+	 */
+	private handleDirectSubmit;
+	/**
+	 * Submits the vault payment
+	 */
+	private submitVaultPayment;
 	/**
 	 * Get payment method display name for the given ID
 	 */
 	private getPaymentMethodName;
+	/**
+	 * Sets up event listeners for context-forwarded events
+	 */
+	private setupContextEventListeners;
+	/**
+	 * Cleans up context event listeners
+	 */
+	private cleanupContextEventListeners;
+	/**
+	 * Handles primer:vault-submit events received from the events context
+	 */
+	private handleContextVaultSubmit;
+	/**
+	 * Lifecycle method called when component is added to the DOM
+	 */
+	connectedCallback(): void;
+	/**
+	 * Lifecycle method called when component is removed from the DOM
+	 */
+	disconnectedCallback(): void;
 	/**
 	 * Render loading overlay with spinner when isUpdating is true
 	 */
@@ -4760,6 +4861,7 @@ declare global {
 /**
  * Component for showing/hiding other payment methods when vault is present
  * Utilizes the collapsable component for smooth transitions
+ * Supports custom toggle buttons via slots and external control via events
  */
 declare class ShowOtherPaymentsComponent extends LitElement {
 	static styles: import("lit").CSSResult[];
@@ -4767,6 +4869,82 @@ declare class ShowOtherPaymentsComponent extends LitElement {
 	 * Consume the vault manager context to interact with vault state
 	 */
 	vaultManager: VaultManagerContextType;
+	/**
+	 * Consume the events context for external control
+	 */
+	contextEventsController: EventsContextType;
+	/**
+	 * Reference to the collapsable component
+	 */
+	protected collapsableElement?: CollapsableComponent;
+	/**
+	 * State to track if slot has content (triggers re-render)
+	 */
+	private hasSlottedToggle;
+	/**
+	 * State to track expanded state when using slotted toggle button
+	 */
+	private isExpanded;
+	/**
+	 * Flag to prevent circular event handling
+	 */
+	private _isHandlingContextEvent;
+	/**
+	 * Context event listener reference
+	 */
+	private _contextToggleListener;
+	/**
+	 * Handle slot change to update hasSlottedToggle state
+	 */
+	private handleToggleSlotChange;
+	/**
+	 * Determines if a button is a toggle button based on its attributes
+	 */
+	private isToggleButton;
+	/**
+	 * Handles click events from slotted toggle buttons
+	 */
+	private handleSlotButtonClick;
+	/**
+	 * Handles direct primer:show-other-payments-toggle events
+	 */
+	private handleDirectToggle;
+	/**
+	 * Handles primer:show-other-payments-toggle events received from the events context
+	 */
+	private handleContextToggle;
+	/**
+	 * Toggle the accordion state
+	 */
+	private toggleAccordion;
+	/**
+	 * Dispatch expanded state changed event
+	 */
+	private dispatchExpandedEvent;
+	/**
+	 * Public API: Expand the accordion programmatically
+	 */
+	expand(): void;
+	/**
+	 * Public API: Collapse the accordion programmatically
+	 */
+	collapse(): void;
+	/**
+	 * Sets up event listeners for context-forwarded events
+	 */
+	private setupContextEventListeners;
+	/**
+	 * Cleans up context event listeners
+	 */
+	private cleanupContextEventListeners;
+	/**
+	 * Lifecycle method called when component is added to the DOM
+	 */
+	connectedCallback(): void;
+	/**
+	 * Lifecycle method called when component is removed from the DOM
+	 */
+	disconnectedCallback(): void;
 	render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {