@primer-io/primer-js 0.3.5 → 0.3.6

package/dist/jsx/index.d.ts

@@ -284,6 +284,16 @@ export type CardFormComponentProps = {
   disabled?: boolean;
   /** Payment managers injected from context */
   paymentManagers?: InitializedManagersMap;
+  /** Client options for configuration */
+  clientOptions?: ClientOptionsContextType;
+  /** Headless utils for accessing server configuration */
+  headlessUtils?: HeadlessUtilsContextType;
+  /** Determines whether to show the cardholder name field
+Uses client configuration with fallback to default (true) */
+  shouldShowCardholderName?: boolean;
+  /** Determines whether the cardholder name field is required
+Uses client configuration with fallback to default (false) */
+  shouldRequireCardholderName?: boolean;
 };
 
 export type DynamicPaymentComponentProps = {
@@ -294,7 +304,7 @@ export type DynamicPaymentComponentProps = {
   /**  */
   sdkState?: SdkStateContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
   /**  */
   open?: boolean;
 };
@@ -310,7 +320,7 @@ export type PrimerKlarnaComponentProps = {
   /**  */
   sdkState?: SdkStateContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
   /**  */
   klarnaCategories?: KlarnaCategoriesContextType | null;
   /**  */
@@ -360,6 +370,8 @@ export type PortalDialogComponentProps = {
   /**  */
   onOpen?: () => void | undefined;
   /**  */
+  onContentRendered?: () => void | undefined;
+  /**  */
   secureHtmlContent?: SecureHtmlContentAccess | undefined;
   /**  */
   open?: boolean;
@@ -391,7 +403,7 @@ export type RedirectPaymentComponentProps = {
   /**  */
   sdkState?: SdkStateContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
 };
 
 export type ShowOtherPaymentsComponentProps = {
@@ -419,7 +431,7 @@ export type VaultManagerComponentProps = {
   /**  */
   vaultItemContext?: VaultItemContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
 };
 
 export type CardFormSubmitComponentProps = {
@@ -427,7 +439,7 @@ export type CardFormSubmitComponentProps = {
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
   /**  */
-  headlessInstance?: HeadlessUnitilsContextType;
+  headlessInstance?: HeadlessUtilsContextType;
   /**  */
   clientOptions?: ClientOptionsContextType;
   /**  */
@@ -444,7 +456,7 @@ export type CardNetworkSelectorComponentProps = {
   /** Card networks context from provider */
   cardNetworks?: CardNetworksContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
   /** Dispatched when a network is selected with the network name as detail */
   "onnetwork-selected"?: (e: CustomEvent<CustomEvent>) => void;
 };
@@ -597,7 +609,7 @@ export type VaultManagerHeaderComponentProps = {
 
 export type VaultPaymentMethodItemComponentProps = {
   /**  */
-  headlessUtils?: HeadlessUnitilsContextType;
+  headlessUtils?: HeadlessUtilsContextType;
   /** Whether the component is in edit mode */
   isEditMode?: boolean;
   /** Strongly typed event declarations */
@@ -625,7 +637,7 @@ export type VaultPaymentSubmitComponentProps = {
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
   /**  */
-  headlessInstance?: HeadlessUnitilsContextType;
+  headlessInstance?: HeadlessUtilsContextType;
   /**  */
   sdkState?: SdkStateContextType;
   /** The button variant to use. */

package/dist/primer-loader.d.ts

@@ -355,6 +355,10 @@ export interface PaymentMethodConfig {
 		threeDSecureInitUrl?: string;
 		threeDSecureProvider?: string;
 		threeDSecureEnabled?: boolean;
+		cardholderName?: {
+			visible?: boolean;
+			required?: boolean;
+		};
 	};
 	forceRedirect?: boolean;
 }
@@ -751,7 +755,7 @@ export interface PrimerHeadlessCheckout {
 	createPaymentMethodManager(type: PaymentMethodType, options?: PaymentMethodManagerOptions): Promise<IRedirectPaymentMethodManager | null>;
 	createVaultManager(): HeadlessVaultManager;
 	getSDKUtilities(): HeadlessSDKUtilities;
-	configure: (options: Omit<HeadlessUniversalCheckoutOptions, "clientSessionCachingEnabled">) => void;
+	configure?: (options: Omit<HeadlessUniversalCheckoutOptions, "clientSessionCachingEnabled">) => void;
 	getAssetsManager(): IAssetsManager;
 	start: () => Promise<void>;
 	refreshClientSession(): Promise<boolean>;
@@ -936,6 +940,7 @@ export interface PrimerCheckoutOptions {
 	card?: {
 		cardholderName?: {
 			required?: boolean;
+			visible?: boolean;
 		};
 	};
 	applePay?: Omit<ApplePayOptions, "container"> & {
@@ -1144,7 +1149,7 @@ declare class PrimerEventsController implements ReactiveController {
 	dispatchFormSubmitSuccess(result: unknown): void;
 	dispatchFormSubmitErrors(errors: unknown): void;
 }
-export type HeadlessUnitilsContextType = HeadlessSDKUtilities | null;
+export type HeadlessUtilsContextType = HeadlessSDKUtilities | null;
 export type KlarnaCategoriesContextType = {
 	categories: KlarnaPaymentMethodCategory[];
 	isLoading: boolean;
@@ -1307,7 +1312,7 @@ declare class SDKContextController implements ReactiveController {
 	setVaultManager(value: VaultManagerContextType): void;
 	setKlarnaCategories(value: KlarnaCategoriesContextType): void;
 	setClientOptions(value: PrimerCheckoutOptions | null): void;
-	setHeadlessUtils(value: HeadlessUnitilsContextType): void;
+	setHeadlessUtils(value: HeadlessUtilsContextType): void;
 	setComputedStyles(value: CSSStyleDeclaration): void;
 	setVaultManagerCvv(value: VaultItemContextType): void;
 }
@@ -2081,7 +2086,7 @@ declare class PrimerKlarnaComponent extends LitElement {
 	static styles: import("lit").CSSResult[];
 	paymentManagers: InitializedManagersMap;
 	sdkState: SdkStateContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	klarnaCategories: KlarnaCategoriesContextType | null;
 	disabled: boolean;
 	private selectedCategory;
@@ -2193,7 +2198,7 @@ declare class DynamicPaymentComponent extends LitElement {
 	paymentMethod: InitializedPaymentMethod | undefined;
 	paymentManagers: InitializedManagersMap;
 	sdkState: SdkStateContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	open: boolean;
 	private _paymentMethodManagerTask;
 	private _getAssetsTask;
@@ -2219,7 +2224,7 @@ declare class RedirectPaymentComponent extends LitElement {
 	disabled: boolean;
 	paymentManagers: InitializedManagersMap;
 	sdkState: SdkStateContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	private _paymentMethodManagerTask;
 	/**
 	 * Based on packages/primer-sdk-web/src/payment-methods/Button.tsx
@@ -2247,12 +2252,14 @@ export interface PortalDialogData {
 	size?: "flex" | "large";
 	showCloseButton?: boolean;
 	onOpen?: () => void;
+	onContentRendered?: () => void;
 }
 export declare class PortalDialogComponent extends LitElement {
 	static styles: import("lit").CSSResult[];
 	size: "flex" | "large";
 	showCloseButton: boolean;
 	onOpen?: () => void;
+	onContentRendered?: () => void;
 	secureHtmlContent?: SecureHtmlContentAccess;
 	open: boolean;
 	/**
@@ -2314,7 +2321,7 @@ declare class VaultManagerComponent extends LitElement {
 	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
 	vaultManagerContext: VaultManagerContextType;
 	vaultItemContext: VaultItemContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	/**
 	 * Whether we're in edit mode
 	 */
@@ -2411,7 +2418,7 @@ declare class VaultPaymentMethodItemComponent extends LitElement {
 	 */
 	vaultManagerContext: VaultManagerContextType;
 	vaultItemContext: VaultItemContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	/**
 	 * The payment method to display
 	 */
@@ -2578,7 +2585,7 @@ declare class VaultPaymentSubmitComponent extends LitElement {
 	 */
 	get buttonText(): string;
 	set buttonText(value: string);
-	headlessInstance: HeadlessUnitilsContextType;
+	headlessInstance: HeadlessUtilsContextType;
 	sdkState: SdkStateContextType;
 	vaultItemContext: VaultItemContextType;
 	vaultManager: VaultManagerContextType;
@@ -2725,14 +2732,36 @@ declare class CardFormComponent extends LitElement {
 	 * Payment managers injected from context
 	 */
 	paymentManagers: InitializedManagersMap;
+	/**
+	 * Client options for configuration
+	 */
+	clientOptions: ClientOptionsContextType;
+	/**
+	 * Headless utils for accessing server configuration
+	 */
+	headlessUtils: HeadlessUtilsContextType;
 	/**
 	 * Context provider for card form data
 	 */
 	private readonly cardFormProvider;
+	/**
+	 * Determines whether to show the cardholder name field
+	 * Uses client configuration with fallback to default (true)
+	 */
+	get shouldShowCardholderName(): boolean;
+	/**
+	 * Determines whether the cardholder name field is required
+	 * Uses client configuration with fallback to default (false)
+	 */
+	get shouldRequireCardholderName(): boolean;
 	/**
 	 * Events controller for dispatching form events
 	 */
 	private readonly eventsController;
+	/**
+	 * Registry for input controllers to enable context-driven meta state management
+	 */
+	private readonly inputControllers;
 	/**
 	 * Task to set up the card form with hosted inputs
 	 */
@@ -2769,19 +2798,6 @@ declare class CardFormComponent extends LitElement {
 	private handleFormSubmit;
 	render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
-export interface CardFormContext {
-	cardNumberInput: IHeadlessHostedInput;
-	cardHolderNameInput?: IHeadlessHostedInput;
-	expiryInput: IHeadlessHostedInput;
-	cvvInput: IHeadlessHostedInput;
-	setCardholderName: (val: string) => void;
-	setCardNetwork: (val: string) => void;
-	validate: () => Promise<Validation>;
-	submit: (values?: CardPaymentMethodSubmitValues) => Promise<void>;
-	errors?: Validation["validationErrors"];
-	hideLabels?: boolean;
-	disabled?: boolean;
-}
 /**
  * A shared type that ensures the host of a HostedInputController contains
  * the required properties for proper hosted input handling.
@@ -2797,10 +2813,12 @@ export interface HostedInputHost extends ReactiveControllerHost, LitElement {
 	label: string;
 	requestUpdate: ReactiveControllerHost["requestUpdate"];
 }
-/**
- * Available input types for hosted inputs.
- */
-export type HostedInputType = "cardNumber" | "cvv" | "expire" | "cardholderName";
+declare enum HostedInputType {
+	CARD_NUMBER = "cardNumber",
+	CVV = "cvv",
+	EXPIRY_DATE = "expire",
+	CARD_HOLDER_NAME = "cardholderName"
+}
 /**
  * Configuration for the hosted input controller.
  */
@@ -2819,7 +2837,6 @@ export interface HostedInputConfig {
  */
 export type InputSource = IHeadlessHostedInput | "cardholderName" | undefined;
 declare class HostedInputController<T extends HostedInputHost> implements ReactiveController {
-	private _isFocused;
 	private _meta;
 	private _hostedInput;
 	private _standardInput;
@@ -2857,18 +2874,74 @@ declare class HostedInputController<T extends HostedInputHost> implements Reacti
 	private setupStandardInput;
 	/**
 	 * Sets up event listeners for standard input elements
+	 * Following the same meta state tracking pattern as hosted inputs in legacy SDK
 	 */
 	private setupInputEventListeners;
 	/**
 	 * Sets up a hosted iframe input for iframe-based input types
 	 */
 	private setupHostedIframeInput;
-	/** Exposes the current focus state. */
-	get isFocused(): boolean;
 	/** Exposes the current metadata state. */
 	get meta(): InputMetadata;
+	/**
+	 * Updates meta state from validation results.
+	 * Used to propagate form-level validation results to individual inputs.
+	 */
+	updateMetaFromValidation(validationResult: {
+		valid?: boolean;
+		error?: string | null;
+		errorCode?: string | null;
+	}): void;
+	/**
+	 * Sets the submitted state for form submission handling.
+	 * Called when form submission occurs.
+	 */
+	setSubmitted(submitted: boolean): void;
 	hostConnected(): void;
 	hostDisconnected(): void;
+	/**
+	 * Registers this controller with the card form context for centralized management
+	 */
+	private registerWithContext;
+	/**
+	 * Unregisters this controller from the card form context
+	 */
+	private unregisterFromContext;
+}
+export interface IHostedInputController {
+	meta: {
+		active: boolean;
+		dirty: boolean;
+		error: string | null;
+		errorCode: string | null;
+		submitted: boolean;
+		touched: boolean;
+		valid: boolean;
+	};
+	setSubmitted(submitted: boolean): void;
+	updateMetaFromValidation(result: {
+		valid?: boolean;
+		error?: string | null;
+		errorCode?: string | null;
+	}): void;
+	focusInput(): void;
+}
+export interface CardFormContext {
+	cardNumberInput: IHeadlessHostedInput;
+	cardholderNameInput?: IHeadlessHostedInput;
+	expiryInput: IHeadlessHostedInput;
+	cvvInput: IHeadlessHostedInput;
+	setCardholderName: (val: string) => void;
+	setCardNetwork: (val: string) => void;
+	validate: () => Promise<Validation>;
+	submit: (values?: CardPaymentMethodSubmitValues) => Promise<void>;
+	errors?: Validation["validationErrors"];
+	hideLabels?: boolean;
+	disabled?: boolean;
+	setSubmissionState: (submitted: boolean) => void;
+	propagateValidationErrors: (errors: InputValidationError[]) => void;
+	registerInputController: (inputType: HostedInputType, controller: IHostedInputController) => void;
+	unregisterInputController: (inputType: HostedInputType) => void;
 }
 /**
  * Translation configuration object
@@ -3030,7 +3103,7 @@ declare class CardFormSubmitComponent extends LitElement {
 	 */
 	get buttonText(): string;
 	set buttonText(value: string);
-	headlessInstance: HeadlessUnitilsContextType;
+	headlessInstance: HeadlessUtilsContextType;
 	clientOptions: ClientOptionsContextType;
 	sdkState: SdkStateContextType;
 	cardFormContext: CardFormContext | null;
@@ -3064,7 +3137,7 @@ declare class CardNetworkSelectorComponent extends LitElement {
 	 * Card networks context from provider
 	 */
 	cardNetworks: CardNetworksContextType;
-	headlessUtils: HeadlessUnitilsContextType;
+	headlessUtils: HeadlessUtilsContextType;
 	private selectedCardNetwork;
 	/**
 	 * Internal state to track if dropdown is open