fix(elements/ino-input): enforce min max limits on arrow click (#1248)

* enforce min max constrain on arrow click in input

* run formatter

* add tests

packages/elements/src/components/ino-input/ino-input.e2e.ts

@@ -95,6 +95,34 @@ describe('InoInput', () => {
 
       expect(valueChangedSpy).toHaveReceivedEventDetail('-1');
     });
+
+    it('should emit min value when clicking on down and new value is lower than min', async () => {
+      inoInputEl.setAttribute('type', 'number');
+      inoInputEl.setAttribute('min', '1');
+      await page.waitForChanges();
+
+      const valueChangedSpy = await page.spyOnEvent('valueChange');
+
+      await page.evaluate(() => {
+        (document.querySelector('.down') as HTMLElement).click();
+      });
+
+      expect(valueChangedSpy).toHaveReceivedEventDetail('1');
+    });
+
+    it('should emit max value when clicking on up arrow and new value is greater than max', async () => {
+      inoInputEl.setAttribute('type', 'number');
+      inoInputEl.setAttribute('max', '0');
+      await page.waitForChanges();
+
+      const valueChangedSpy = await page.spyOnEvent('valueChange');
+
+      await page.evaluate(() => {
+        (document.querySelector('.up') as HTMLElement).click();
+      });
+
+      expect(valueChangedSpy).toHaveReceivedEventDetail('0');
+    });
   });
 
   describe('Input validation', () => {

packages/elements/src/components/ino-input/ino-input.tsx

@@ -413,10 +413,16 @@ export class Input implements ComponentInterface {
       minimumFractionDigits: precision,
       maximumFractionDigits: precision,
     };
-    const formattedValue = new Intl.NumberFormat([], opts).format(
-      value + Number(stepWithFallback),
-    );
-    this.valueChange.emit(formattedValue);
+
+    let nextValue = value + Number(stepWithFallback);
+    if (nextValue > Number(this.max)) {
+      nextValue = Number(this.max);
+    } else if (nextValue < Number(this.min)) {
+      nextValue = Number(this.min);
+    }
+
+    const formattedValue = new Intl.NumberFormat([], opts).format(nextValue);
+    if (this.value !== formattedValue) this.valueChange.emit(formattedValue);
   };
 
   // ----