Fix/number input

packages/ui-library/src/components/forms/number-input/index.css.ts

@@ -250,7 +250,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
         padding: 0;
 
         background-color: ${StepperButton.Container.BackgroundColor.Rest};
-        color: ${StepperButton.Icon.IconColor.Rest}
+        color: ${StepperButton.Icon.IconColor.Rest};
 
         &:hover:not(:disabled) {
           background-color: ${StepperButton.Container.BackgroundColor.Hover};

packages/ui-library/src/components/forms/number-input/index.stories.ts

@@ -19,12 +19,13 @@ const sharedStyles = html`
 `;
 
 const defaultParams: BlrNumberInputType = {
+  theme: 'Light',
   size: 'md',
   stepperVariant: 'vertical',
   placeholder: 'Placeholder-text',
   value: undefined,
-  fractionDigits: 0,
-  totalDigits: 0,
+  decimals: 0,
+  leadingZeros: 0,
   prependUnit: true,
   unit: 'kg',
   step: 1,
@@ -41,7 +42,6 @@ const defaultParams: BlrNumberInputType = {
   errorMessage: '',
   errorIcon: undefined,
   numberInputId: 'test-id',
-  theme: 'Light',
 };
 
 export default {
@@ -55,6 +55,13 @@ export default {
     onBlur: () => action('onBlur'),
   },
   argTypes: {
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
     size: {
       name: 'sizeVariant',
       description: ' Choose size of the component. ',
@@ -95,7 +102,7 @@ export default {
         category: 'Content / Settings',
       },
       control: {
-        type: 'text',
+        type: 'number',
         label: 'Enter Text',
       },
     },
@@ -322,13 +329,6 @@ export default {
         category: 'Events',
       },
     },
-    theme: {
-      options: Themes,
-      control: { type: 'select' },
-      table: {
-        category: 'Appearance',
-      },
-    },
   },
   parameters: {
     design: {
@@ -544,7 +544,7 @@ export const Readonly = () => {
         label: 'Readonly',
         readonly: true,
         labelAppendix: undefined,
-        fractionDigits: 1,
+        decimals: 1,
         value: 20.2,
       })}
     </div>

packages/ui-library/src/components/forms/number-input/index.test.ts

@@ -110,4 +110,22 @@ describe('blr-number-input', () => {
 
     expect(className).to.contain('sm');
   });
+
+  it('correctly formats the value when leading zeros are set', async () => {
+    const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, leadingZeros: 2 }));
+
+    const input = querySelectorDeep('input', element.getRootNode() as HTMLElement);
+    const numberValue = input?.value;
+
+    expect(numberValue).to.be.equal('004');
+  });
+
+  it('correctly formats the value when decimal places are set', async () => {
+    const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, decimals: 2 }));
+
+    const input = querySelectorDeep('input', element.getRootNode() as HTMLElement);
+    const numberValue = input?.value;
+
+    expect(numberValue).to.be.equal('4.00');
+  });
 });

packages/ui-library/src/components/forms/number-input/index.ts

@@ -79,8 +79,7 @@ export class BlrNumberInput extends LitElement {
 
     let paddedInteger = integerPart;
     if (digits > 0) {
-      const padding = Math.max(digits - integerPart.length, 0);
-      paddedInteger = '0'.repeat(padding) + integerPart;
+      paddedInteger = '0'.repeat(digits) + integerPart;
     }
     return `${paddedInteger}${fractionPart ? `.${fractionPart}` : ''}`;
   }