feat: add autoComplete option for elements

src/elements/constants.ts

@@ -28,11 +28,14 @@ const CARD_BRANDS = [
 
 const CARD_ICON_POSITIONS = ['left', 'right', 'none'] as const;
 
+const AUTOCOMPLETE_VALUES = ['off', 'on'] as const;
+
 export {
   ELEMENTS_INIT_ERROR_MESSAGE,
   ELEMENTS_NOM_DOM_ERROR_MESSAGE,
   ELEMENTS_SCRIPT_LOAD_ERROR_MESSAGE,
   ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE,
   CARD_BRANDS,
   CARD_ICON_POSITIONS,
+  AUTOCOMPLETE_VALUES,
 };

src/types/elements/options.ts

@@ -1,3 +1,4 @@
+import { AutoCompleteValue } from './shared';
 import type { ElementStyle } from './styles';
 
 const ELEMENTS_TYPES = [
@@ -28,6 +29,7 @@ interface SanitizedElementOptions {
   ariaLabel?: string;
   iconPosition?: string;
   cardBrand?: string;
+  autoComplete?: string;
 }
 
 type ElementOptions = ElementInternalOptions & SanitizedElementOptions;
@@ -38,7 +40,12 @@ interface TransformOption {
   transform?: Transform;
 }
 
-type CustomizableElementOptions = Pick<ElementOptions, 'style' | 'disabled'>;
+interface AutoCompleteOption {
+  autoComplete?: AutoCompleteValue;
+}
+
+type CustomizableElementOptions = Pick<ElementOptions, 'style' | 'disabled'> &
+  AutoCompleteOption;
 
 type CreateCardElementOptions = CustomizableElementOptions;
 

src/types/elements/shared.ts

@@ -1,4 +1,8 @@
-import { CARD_BRANDS, CARD_ICON_POSITIONS } from '@/elements/constants';
+import {
+  AUTOCOMPLETE_VALUES,
+  CARD_BRANDS,
+  CARD_ICON_POSITIONS,
+} from '@/elements/constants';
 
 type FieldErrorType = 'incomplete' | 'invalid';
 
@@ -37,6 +41,11 @@ type Brand = typeof CARD_BRANDS[number];
  */
 type CardIconPosition = typeof CARD_ICON_POSITIONS[number];
 
+/**
+ * Values for the element input autocomplete attribute
+ */
+type AutoCompleteValue = typeof AUTOCOMPLETE_VALUES[number];
+
 export type {
   FieldErrorType,
   ConfigErrorType,
@@ -47,4 +56,5 @@ export type {
   PropertyError,
   Brand,
   CardIconPosition,
+  AutoCompleteValue,
 };