refactor(input-otp): rename allowedKeys to pattern

Author: brandyscarney

core/api.txt

@@ -781,12 +781,12 @@ ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
 
 ion-input-otp,scoped
-ion-input-otp,prop,allowedKeys,string | undefined,undefined,false,false
 ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-otp,prop,disabled,boolean,false,false,true
 ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
 ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input-otp,prop,length,number,4,false,false
+ion-input-otp,prop,pattern,string | undefined,undefined,false,false
 ion-input-otp,prop,readonly,boolean,false,false,true
 ion-input-otp,prop,separators,number[] | string | undefined,undefined,false,false
 ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false

core/src/components.d.ts

@@ -1322,10 +1322,6 @@ export namespace Components {
         "value"?: string | number | null;
     }
     interface IonInputOtp {
-        /**
-          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
-         */
-        "allowedKeys"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -1346,6 +1342,10 @@ export namespace Components {
           * The number of input boxes to display.
          */
         "length": number;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
+         */
+        "pattern"?: string;
         /**
           * If `true`, the user cannot modify the value.
          */
@@ -6254,10 +6254,6 @@ declare namespace LocalJSX {
         "value"?: string | number | null;
     }
     interface IonInputOtp {
-        /**
-          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
-         */
-        "allowedKeys"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -6286,6 +6282,10 @@ declare namespace LocalJSX {
           * Emitted when the input is complete (all boxes filled)
          */
         "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
+         */
+        "pattern"?: string;
         /**
           * If `true`, the user cannot modify the value.
          */

core/src/components/input-otp/input-otp.tsx

@@ -63,7 +63,7 @@ export class InputOTP implements ComponentInterface {
    * For numbers (type="number"): "[0-9]"
    * For text (type="text"): "[a-zA-Z0-9]"
    */
-  @Prop() allowedKeys?: string;
+  @Prop() pattern?: string;
 
   /**
    * If `true`, the user cannot modify the value.
@@ -140,11 +140,11 @@ export class InputOTP implements ComponentInterface {
    * Get the default allowed keys based on type if not explicitly set
    */
   private get validKeys(): RegExp {
-    const { allowedKeys, type } = this;
+    const { pattern, type } = this;
 
-    if (allowedKeys) {
+    if (pattern) {
       // Create a regex that matches a single character from the provided pattern
-      return new RegExp(`^${allowedKeys}$`, 'i');
+      return new RegExp(`^${pattern}$`, 'i');
     }
     return type === 'number' ? /^[0-9]$/ : /^[a-zA-Z0-9]$/i;
   }
@@ -376,7 +376,7 @@ export class InputOTP implements ComponentInterface {
   }
 
   render() {
-    const { color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, readonly, shape, size, type } =
+    const { color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, pattern, readonly, shape, size, type } =
       this;
     const mode = getIonMode(this);
     const inputmode = this.getInputmode();
@@ -405,7 +405,7 @@ export class InputOTP implements ComponentInterface {
                   type="text"
                   inputmode={inputmode}
                   maxLength={1}
-                  pattern={type === 'number' ? '[0-9]' : undefined}
+                  pattern={pattern || (type === 'number' ? '[0-9]' : '[a-zA-Z0-9]')}
                   disabled={disabled}
                   readOnly={readonly}
                   tabIndex={index === tabbableIndex ? 0 : -1}

core/src/components/input-otp/test/basic/index.html

@@ -69,7 +69,7 @@ <h2>Invalid</h2>
             <h2>Types</h2>
             <ion-input-otp length="6"> Numbers only </ion-input-otp>
             <ion-input-otp length="6" type="text"> Letters and numbers </ion-input-otp>
-            <ion-input-otp type="text" allowed-keys="[a-fA-F]"> Custom Pattern: a-f and A-F </ion-input-otp>
+            <ion-input-otp type="text" pattern="[a-fA-F]"> Custom Pattern: a-f and A-F </ion-input-otp>
           </div>
         </div>
       </ion-content>

core/src/components/input-otp/test/basic/input-otp.e2e.ts

@@ -88,10 +88,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(inputBoxes.nth(3)).toHaveValue('5');
     });
 
-    test('should accept custom pattern when allowed-keys is set', async ({ page }) => {
+    test('should accept custom pattern when pattern is set', async ({ page }) => {
       await page.setContent(
         `
-        <ion-input-otp type="text" allowed-keys="[a-fA-F]">Description</ion-input-otp>
+        <ion-input-otp type="text" pattern="[a-fA-F]">Description</ion-input-otp>
       `,
         config
       );

packages/angular/src/directives/proxies.ts

@@ -1018,14 +1018,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['allowedKeys', 'color', 'disabled', 'fill', 'inputmode', 'length', 'readonly', 'separators', 'shape', 'size', 'type', 'value']
+  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value']
 })
 @Component({
   selector: 'ion-input-otp',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowedKeys', 'color', 'disabled', 'fill', 'inputmode', 'length', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
 })
 export class IonInputOtp {
   protected el: HTMLIonInputOtpElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -984,14 +984,14 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 @ProxyCmp({
   defineCustomElementFn: defineIonInputOtp,
-  inputs: ['allowedKeys', 'color', 'disabled', 'fill', 'inputmode', 'length', 'readonly', 'separators', 'shape', 'size', 'type', 'value']
+  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value']
 })
 @Component({
   selector: 'ion-input-otp',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowedKeys', 'color', 'disabled', 'fill', 'inputmode', 'length', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
   standalone: true
 })
 export class IonInputOtp {

packages/vue/src/proxies.ts

@@ -498,7 +498,7 @@ export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp> = /*@__PURE__*/ d
   'fill',
   'inputmode',
   'length',
-  'allowedKeys',
+  'pattern',
   'readonly',
   'size',
   'separators',