feat(input-otp): support autocapitalize

Author: brandyscarney

core/api.txt

@@ -781,6 +781,7 @@ ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
 
 ion-input-otp,scoped
+ion-input-otp,prop,autocapitalize,string,'off',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

core/src/components.d.ts

@@ -1322,6 +1322,10 @@ export namespace Components {
         "value"?: string | number | null;
     }
     interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": 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).
          */
@@ -6266,6 +6270,10 @@ declare namespace LocalJSX {
         "value"?: string | number | null;
     }
     interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: 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).
          */

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

@@ -44,6 +44,12 @@ export class InputOTP implements ComponentInterface {
   @State() private inputValues: string[] = [];
   @State() hasFocus = false;
 
+  /**
+   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+   */
+  @Prop() autocapitalize = 'off';
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -693,6 +699,7 @@ export class InputOTP implements ComponentInterface {
 
   render() {
     const {
+      autocapitalize,
       color,
       disabled,
       fill,
@@ -732,6 +739,7 @@ export class InputOTP implements ComponentInterface {
                   id={`${inputId}-${index}`}
                   aria-label={`Input ${index + 1} of ${length}`}
                   type="text"
+                  autoCapitalize={autocapitalize}
                   inputmode={inputmode}
                   maxLength={1}
                   pattern={pattern || (type === 'number' ? '[0-9]' : '[a-zA-Z0-9]')}

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

@@ -60,7 +60,7 @@ <h2>Types</h2>
             <ion-input-otp class="input-otp-type" type="text" pattern="[a-fA-F]">
               Custom Pattern: a-f and A-F <span id="value"></span>
             </ion-input-otp>
-            <ion-input-otp class="input-otp-type" type="text" pattern="[D-L]">
+            <ion-input-otp class="input-otp-type" type="text" pattern="[D-L]" autocapitalize="on">
               Custom Pattern: D-L <span id="value"></span>
             </ion-input-otp>
           </div>

packages/angular/src/directives/proxies.ts

@@ -1018,15 +1018,15 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
   methods: ['reset', 'setFocus']
 })
 @Component({
   selector: 'ion-input-otp',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', '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,15 +984,15 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 @ProxyCmp({
   defineCustomElementFn: defineIonInputOtp,
-  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
   methods: ['reset', 'setFocus']
 })
 @Component({
   selector: 'ion-input-otp',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
   standalone: true
 })
 export class IonInputOtp {

packages/vue/src/proxies.ts

@@ -493,6 +493,7 @@ export const IonInput: StencilVueComponent<JSX.IonInput, JSX.IonInput["value"]>
 
 
 export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp> = /*@__PURE__*/ defineContainer<JSX.IonInputOtp>('ion-input-otp', defineIonInputOtp, [
+  'autocapitalize',
   'color',
   'disabled',
   'fill',