fix(core): add property to disable wheel event for Step Input (#13503)

Author: InnaAtanasova

libs/core/step-input/step-input.component.html

@@ -42,7 +42,7 @@
             [attr.aria-required]="required"
             [attr.aria-roledescription]="ariaRoleDescription || ('coreStepInput.ariaRoleDescription' | fdTranslate)"
             (focusin)="handleFocusIn()"
-            (wheel)="handleScroll($event)"
+            (wheel)="!disableWheel && handleScroll($event)"
             (keydown)="handleKeyDown($event)"
             (input)="trackInputValue($event)"
             (change)="updateOnInputChanged()"

libs/core/step-input/step-input.component.ts

@@ -16,6 +16,7 @@ import {
     Output,
     ViewChild,
     ViewEncapsulation,
+    booleanAttribute,
     forwardRef,
     isDevMode
 } from '@angular/core';
@@ -156,6 +157,10 @@ export class StepInputComponent implements OnInit, AfterViewInit, OnDestroy, Con
     @Input()
     inputTitle = '';
 
+    /** Whether the wheel event should be disabled. Default value is false */
+    @Input({ transform: booleanAttribute })
+    disableWheel = false;
+
     /** Sets formatting mode */
     @Input()
     mode: 'decimal' | 'currency' = 'decimal';

libs/docs/core/step-input/examples/step-inpt-default-example/step-input-default-example.component.ts

@@ -20,12 +20,18 @@ import { StepInputModule } from '@fundamental-ngx/core/step-input';
             </div>
         </div>
         <br />
-        <div class="step-input-example-container" [style.width.%]="100">
+        <div class="step-input-example-container" [style.justify-content]="'space-between'">
             <div class="step-input-example">
                 <label fd-form-label for="full-width-input">Full Width</label>
                 <fd-step-input inputId="full-width-input" [isFullWidth]="true" [(value)]="value3"></fd-step-input>
                 <small>Value: {{ value3 }}</small>
             </div>
+
+            <div class="step-input-example">
+                <label fd-form-label for="input-wheel">Disabled wheel event</label>
+                <fd-step-input disableWheel inputId="input-wheel" [(value)]="value4"></fd-step-input>
+                <small>Value: {{ value4 }}</small>
+            </div>
         </div>
     `,
     imports: [FormLabelComponent, StepInputModule, ContentDensityDirective]
@@ -34,4 +40,5 @@ export class StepInputDefaultExampleComponent {
     value1: number | null = 0;
     value2: number | null = 0;
     value3: number | null = 0;
+    value4: number | null = 0;
 }