refactor(angular): apply range to numeric value accessor (#29029)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The ticket describes renaming `TextValueAccessorDirective` since
`ion-range` is not a text-based control, however I think this was an
incorrect assumption made during the original implementation.

`ion-range` is a numeric based value accessor (either as a single number
or an object accepting a numeric start/end value).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrates the usage of `ion-range` value accessor implementation to the
`NumericValueAccessorDirective`
- Adds tests for validating the value accessor is functioning as
expected

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts

@@ -3,7 +3,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from '@ionic/angular/common';
 
 @Directive({
-  selector: 'ion-input[type=number]',
+  selector: 'ion-input[type=number],ion-range',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -13,18 +13,22 @@ import { ValueAccessor } from '@ionic/angular/common';
   ],
 })
 export class NumericValueAccessorDirective extends ValueAccessor {
-  constructor(injector: Injector, el: ElementRef) {
+  constructor(injector: Injector, private el: ElementRef<HTMLInputElement | HTMLIonRangeElement>) {
     super(injector, el);
   }
 
   @HostListener('ionInput', ['$event.target'])
-  handleInputEvent(el: HTMLIonInputElement): void {
+  handleInputEvent(el: HTMLIonInputElement | HTMLIonRangeElement): void {
     this.handleValueChange(el, el.value);
   }
 
   registerOnChange(fn: (_: number | null) => void): void {
-    super.registerOnChange((value: string) => {
-      fn(value === '' ? null : parseFloat(value));
-    });
+    if (this.el.nativeElement.tagName === 'ION-INPUT') {
+      super.registerOnChange((value: string) => {
+        fn(value === '' ? null : parseFloat(value));
+      });
+    } else {
+      super.registerOnChange(fn);
+    }
   }
 }

packages/angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -2,9 +2,8 @@ import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from '@ionic/angular/common';
 
-// TODO(FW-5495): rename class since range isn't a text component
 @Directive({
-  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range',
+  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -19,9 +18,7 @@ export class TextValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionInput', ['$event.target'])
-  _handleInputEvent(
-    el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement | HTMLIonRangeElement
-  ): void {
+  _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void {
     this.handleValueChange(el, el.value);
   }
 }